TUTORIAL BLOG

Cara membuat Tag Cloud Dengan Background Effect

Tag Cloud merupakan sebuah box yang berfungsi sebagai wadah untuk sekelompok link dalam sebuah web.

Fungsi dari tag could kurang lebih sebagai tempat beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. lebih jelasnya lihat gambar dibawah ini.

Berikut cara membuat Tag Cloud menggunakan efek background :

Masuk tata letak

Edit HTML dan ceklist/centang "Expand Template Widget"

Biasakan sebelum mengedit template, back up dulu templatenya, dengan cara klik "download template lengkap"

Letakan kode css berikut dan taruh di atas kode ]]></b:skin>

.tagcloud {
width:300px;
font-family:Times;
padding:15px 8px;
border:solid 1px #eee;
background:#fff;
}
.tcloud {
padding:3px 6px;
text-decoration:none;
}
.tcloud:link {
color:#003EBA;
}
.tcloud:visited {
color:#ff900;
}
.tcloud:hover {
color:#ffffff;
background:#003EBA;
}
.tcloud:active {
color:#ffffff;
background:#5D7CBA;
}

Simpan Template.

Kemudian masuk ke Elemen Halaman, Tambah gadget, pilih HTML javascript, dan pastekan kode berikut :

<div class="tagcloud">
<a style="font-size:10px" class="tcloud" href="Link-1" title="Title Link-1">Nama Link-1</a>
<a style="font-size:16px" class="tcloud" href="Link-2" title="Title Link-2">Nama Link-2</a>
<a style="font-size:18px" class="tcloud" href="Link-3" title="Title Link-3">Nama Link-3</a>
<a style="font-size:14px" class="tcloud" href="Link-4" title="Title Link-4">Nama Link-4</a>
<a style="font-size:27px" class="tcloud" href="Link-5" title="Title Link-5">Nama Link-5</a>
<a style="font-size:22px" class="tcloud" href="Link-6" title="Title Link-6">Nama Link-6</a>
<a style="font-size:14px" class="tcloud" href="Link-7" title="Title Link-7">Nama Link-7</a>
<a style="font-size:18px" class="tcloud" href="Link-8" title="Title Link-8">Nama Link-8</a>
<a style="font-size:10px" class="tcloud" href="Link-9" title="Title Link-9">Nama Link-9</a>
<a style="font-size:14px" class="tcloud" href="Link-10" title="Title Link-10">Nama Link-10</a>
</div>

Edit dan simpan.

Keterangan :

1. Link-1 s/d Link-10 : bisa diperbanyak disesuaikan dengan dengan jumlah link yang akan ditampilkan.

2. Link-1 s/d Link-10 : link posting yang telah diterbitkan dengan URL seperti misalnya :

http://..../....../judul posting.html

3. Nama Link-1 s/d Link-10 = Judul Posting.

4. Title Link : berisikan penjelasan singkat Nama Link.

Semoga Bermanfaat.

Cara Membuat Daftar Isi Artikel Di Blogspot

Dilihat dari judulnya, daftar isi merupakan kebutuhan penting juga di dalam blog, karena dapat mempermudah para pengunjung blog untuk mencari dan menemukan apa mereka cari, serta dapat mempercepat pencarian di blog. yang pastinya membuat pengunjung lebih nyaman. mungkin ada yang belum memasang aksesori ini.

pada kesempatan kali ini saya ingin membahas tentang bagaimana Cara Membuat Daftar Isi Artikel di Blogspot

Ikuti langkah-langkah berikut :

Pertama Login ke account blog anda.
Pilih Tata Letak kemudian Edit HTML.
Centang Expland Template Widget.
Lalu untuk mempermudah pencarian di kode HTML, tekan (Ctrl F), cari kode di bawah ini :

<b:include data='post' name='post'/>

Ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'><div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;"><data:post.title/></div></a><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>

Keterangan :

Perhatikan kode yang bercetak warna orange ,

border-right:1px solid #ccc; ini adalah kode untuk warna border, yang bisa anda ganti sendiri.

border-bottom:1px solid #ccc; ini untuk mengganti border buttom.

background:#EAE9E9;color:#406A0E; ini untuk mengganti background daftar isi blogger.

Simpan template.

Jika sudah, lanjut lagi dengan langkah-langkah di bawah ini :

Klik Design/Layout/Tata Letak
klik Page Element
Add a Gadget dan pilih HTML/Javascript.
Copy paste kode di bawah ini dan taruh di dalam kotak gadget (konten) :

<a href="http://tutorial-tuts.blogspot.com/search?max-results=150" target="_blank"><span style="font-weight:bold;">DAFTAR ISI</span>»</a>

Keterangan:

Ganti tulisan yang berwarna biru dengan alamat URL blog anda, dan juga yang berwarna orange adalah banyaknya jumlah artikel yang ingin ditampilkan.

Simpan, dan lihat hasilnya.

Selamat mencoba dan semoga bermanfaat !

Cara Ganti Older Post dan Newers Post dengan Gambar

Kali ini saya akan mengulas tentang bagaimana cara mengganti tulisan older post, home/beranda, dan newer post pada blogspot. tentunya sudah familiar bagi blogger, coba perhatikan bawah posting di blog blogger, sepeti posting baru, beranda/home, posting lama, kalau ingin di ganti dengan icon gambar , berikut caranya.

Berikut trick Mengubah Order Post , Newers Post, dan Home/Beranda dengan icon Gambar.

Pertama Login ke account blog.
Pilih Tata Letak kemudian Edit HTML.
Centang Expland Template Widget.
Mengubah tulisan newest post atau posting baru, cari kode berikut :

<data:newerPageTitle/>

Gantilah kode tersebut dengan kode berikut ini :

<img src='http://i865.photobucket.com/albums/ab218/1rd3/image/back3.png'/></a>

Mengubah tulisan order post atau posting lama, cari kode berikut :

<data:olderPageTitle/>

Gantilah kode tersebut dengan kode berikut ini :

<img src='http://i865.photobucket.com/albums/ab218/1rd3/image/forward3.png'/></a>

Mengubah tulisan home atau beranda. Cari kode berikut :

<data:homeMsg/>

Gantilah kode tersebut dengan kode berikut ini :

<img src='http://i865.photobucket.com/albums/ab218/1rd3/image/home-i.jpg'/></a>

Kemudian Simpan Template, dan lihat hasilnya.

semoga bermanfaat !

Cara Menambah Emoticon Pada Komentar

kali ini saya akan meberi tutorial, yaitu Cara Mudah Menambah Emoticon Pada Komentar Blogspot.

Berikut Langkah-langkahnya :

Masuk tata Letak

Edit HTML

BackUp dulu templatenya, dengan cara klik "download template lengkap"

Cari kode berikut </body>

Letakan kode css berikut, dan taruh di atas kode </body>

<script src='https://sites.google.com/site/kodeblogger/javascript/smiley.js' type='text/javascript'/>

Selanjutnya cari kode berikut, Lengkapnya perhatikan kode sibawah ini, (pehatikan kode berwarna merah) :

<p class='comment-footer'><b:if cond='data:post.embedCommentForm'><b:include data='post' name='comment-form'/><b:else/><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></b:if></b:if></p>

Kalau sudah ketemu, lalu copy pastekan kode berikut, tepat dibawah kode: <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>:))<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>:)]<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>;))<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>;;)<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>:D<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>;)<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>:p<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>:((<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>:)<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>:(<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>:X<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>=((<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>:-o<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>:-/<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>:-*<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>:|<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>8-}<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>~x(<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>:-t<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>b-(<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>:-L<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>x(<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>=))</b>

Simpan Template, dan lihat hasilnya.Selamat mencoba, semoga bermanfaat !

Cara Membuat Read More Otomatis

Meneruskan cara membuat readmore, sebenarnya ada bermacam-macam cara untuk membuat readmore/baca selengkapanya, tentunya dengan gaya tersendiri. Kali ini saya akan membahas tentang bagaimana cara membuat readmore otomatis. dan pada fungsiread more kali ini sedikit berbeda dan lebih modern dengan memudahkan kita untuk tidak lagi membatasi artikel dengan panggilan kode script, dan blogger tidak akan repot membagi postingan dengan menyelipkan kode manual.

Kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah error saat webhosting yang kita gunakan untuk menyimpan kode script-nya sedang down/error.

Buat blogger baru, saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya blogger tidak akan repot membagi postingan dengan cara menyelipkan kode manual.

Berikut langkah – langkah dalam membuat read more otomatis :

Silahkan login ke blogger terlebih dahulu.

Klik Tata Letak.

Kemudian klik Edit HTML.

Centang Expand Template Widget.

Letakkan kode berikut ini tepat diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Penting : Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya blogger kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template blogger, karena setiap template berbeda - beda :

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Kemudian cari kode di bawah ini :

<data:post.body/> atau <p><data:post.body/></p>

Gantilah kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right'>
<a expr:href='data:post.url'>Read More... <data:post.title/></a>
</span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>

Simpan template dan lihat hasilnya.

Keterangan :

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di(float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 400; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 150; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)

Read More… = bisa blogger ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang blogger inginkan.

Selamat mencoba dan semoga bermanfaat !

Cara Setting Blog

setelah blogger selesai membuat blog, selanjutnya saya akan lanjutkan tentang cara setting blog.

Untuk blogger yang baru membuat blog, blogger perlu mengetahui pengaturan yang harus dilakukan pada Blog. ada beberapa pengaturan yang diperlukan agar blog kita dapat dikenali oleh mesin pencari/search engine seperti google ,yahoo ,msn. Untuk mensetting/mengatur blog silahkan ikuti tutorial berikut ini :

Silahkan login dulu ke blogger dan pilih tab pengaturan lalu pilih

1. Klik dasar untuk mengatur menu dasar.

Judul >> isi dengan judul blog sobat.
Uraian >> isi dengan deskripsi blog sobat. Contoh : Tutorial Lengkap Blogger.
Tambahkan blog Anda ke daftar kami? >> pilih "Ya" agar setiap postingan anda selalu masuk di daftar Blogger.com.
Biarkan mesin pencari menemukan blog Anda? >> pilih "Ya" agar blogger memasukkan blog Anda ke dalam Penelusuran Blog Google.
Tampilkan Editing Cepat di Blog Anda? >> pilih "Ya"
Tampilkan Link Posting Email? >> Sebaiknya pilih "Ya", agar pengunjung Anda dengan mudah mengirimkan posting email dari blog Anda ke teman-teman mereka.
Konten Dewasa? >> Pilih "Tidak". Kalau blog anda bukan blog untuk dewasa.
Tampilkan Mode Compose untuk semua blog Anda? >> pilih "Ya".
Aktifkan transliterasi? >> pilih "Tidak".
Klik tombol Simpan Pengaturan . Selesai.

2. Klik Publikasi untuk mengatur menu Publikasi :

Alamat Blogspot >> isi dengan nama blog yang dikehendaki. (biasanya sudah terisi otomatis).
Klik tombol Simpan pengaturan. Selesai

3. Klik Format untuk mengatur menu format :

Tampilkan >> pilih angka posting yang ingin anda tampilkan.pada halaman utama.
Format Header Tanggal >> pilih model tanggal/bulan yang anda sukai.
Format tanggal Index Arsip >> pilih model untuk peng-arsip-an yang anda sukai.
Format Timestamp >> Pilih bentuk waktu yang anda sukai.
Zona Waktu >> Pilih zona waktu yang sesuai.
Bahasa >> Pilih bahasa yang anda sukai.
Konversi ganti baris >> pilih "Ya"
Tampilkan Field judul >> Pilih "Ya"
Tampilkan kolom link >> pilih "Ya"
Klik tombol Simpan Pengaturan. Selesai.

4. Klik Komentar Untuk mengatur menu komentar :

Komentar >> pilih tampilkan, ini agar artikel anda dapat di komentari oleh pengunjung.
Siapa yang Bisa Berkomentar? >> Pilih Siapa pun - termasuk Pengguna Anonim. Ini di maksudkan agar setiap orang bisa berkomentar tidak hanya kepada anggota blogspot saja.
Penempatan formulir komentar >> pilih Disemat dibawah Entri.
Default Komentar untuk Posting >> pilih Entri baru memiliki komentar.
Link balik >> Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang link pada artikel kita.
Default Link Balik untuk Posting >> pilih Posting baru Memiliki Link Balik.
Format Timestamp Komentar >> pilih yang anda sukai.
Aktifkan moderasi komentar? >> pilih "Tidak"
Tampilkan verifikasi kata untuk komentar? >> pilih Ya. ini di maksudkan agar terhindar dari software robot dengan tujuan melakukan spam.
Tampilkan gambar profil dalam komentar? >> pilih "Ya". Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya.
Email Pemberitahuan Komentar >> isi dgn alamat email anda.
Klik tombol Simpan Pengaturan. Selesai.

5. Klik Arsipkan Untuk mengatur menu Arsipkan :

Frekuensi Arsip >> pilih Bulanan.
Aktifkan Halaman Posting? >> pilih "Ya"
Klik tombol Simpan Pengaturan . Selesai

6. Klik Fedd Situs untuk mengatur menu feed situs :

Izinkan Feed Blog >> pilih Penuh.
Posting URL Pengubahan Arah Feed >> di isi dengan alamat feed penggati semisal alamat feed dari feed burner, jika belum punya, di kosongkan saja.
Footer Feed Posting >> Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.
Klik tombol Simpan Perubahan. Selesai

Sampai disini blogger sudah berhasil men-setting/mengatur blog anda. semoga bermanfaat !

Perbedaan Mergin, Border, Padding, Dan Content

blogger masih bingung membedakan antara Margin, Border, Padding, Dan Content ? Sebenarnya itu merupakan hal yang tidak begitu sulit untuk dipecahkan, asalkan ada keinginan untuk mempelajarinya. Persoalan klasik namun masih banyak yang mendapat problem di bagian ini. termasuk saya hehe

maka dari itu, mari kita ulas bersama tentang apa itu Margin, Border, Padding, Dan Content.

Coba perhatikan gambar dibawah ini

Sedikit Ulasan tentang gambar di atas :

Margin = Menghapus sebuah daerah di sekitar perbatasan. Margin yang tidak memiliki warna latar belakang, dan benar-benar transparan.

Border = Sebuah perbatasan yang terletak di sekitar padding dan konten. perbatasan ini dipengaruhi oleh warna latar belakang kotak (dapat diberi warna)

Padding = Menghapus sebuah daerah di sekitar konten (terletak antara border dan konten). padding ini dipengaruhi oleh warna latar belakang kotak.

Content = Isi kotak, di mana teks dan gambar muncul.

Dalam penulisan code untuk menentukan bagian per bagian terdiri dari dua cara yaitu:

margin: 2px 2px 5px 0px; urutannya –> Atas, kanan, bawah, kiri

margin-top: 2px; margin-right: 2px; margin-bottom: 5px; margin-left: 0px;

demikian juga halnya dengan padding bila di tulis bagian per bagain.

Semoga bermanfaat !