Membuat menu Tutup Buka pada posting (Spoiler)

Sebuah menu yang bisa menutup dan membuka secara otomatis (Spoiler) untuk contoh tampilannya ada di bawah ini dan untuk membuat nya yaitu sebagai berikut :

Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka

Log in blogger

Posting Baru, edit html dan masukkan kode di bawah ini :

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div>
<div class="alt2" style="-moz-border-radius: 10px 10px 10px 10px; -moz-box-shadow: 2px 2px 4px rgb(139, 210, 104); background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYEzdyEirRIkKNiwGQoNBloIjEEi_e-tSp-fvfn360MZ90Cjx6l8QaXzlcYywE3GCLuWIs-5KUMdov4uKHeBZQvmX0y_LFLaUX8m770PdeV15UtcyUDdvUVd48zk5_qA_XswNkaW2FBcGx/s1600/papers.jpg&quot;) no-repeat scroll 0% 0% transparent; border: 1px inset; color: black; margin: 0px; padding: 6px;">
<div style="display: none;">
Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka </div>
</div>
</div>

Tulisan Biru Isi  sesuai keinginan kawan-kawan
......
Terbitkan entri dan selesai............

selamat mencoba......

Menu Dropdown dengan JavaScript

Melanjutkan Postingan kemarin lusa yaitu tentang membuat menu dropdown dengan JavaScript. Pada postingan yang lalu telah di bahas tentang membuat menu dropdown pada template baru, maka pada postingan kali ini akan di bahas mengenai cara pembuatan pada template klasik.

Agar tidak terlalu monoton, pada pembuatan dropdown kali ini akan saya beri sentuhan baru, yaitu pemakaian background yang berbeda. Jika pada postingan yang lalu saya memberikan contoh background banner seperti di bawah ini :







Maka kali ini saya akan memberi contoh banner seperti ini :









Dan contoh menu dropdown yang akan di bahas adalah seperti demo di bawah ini :





Agar tidak terlalu menyita space halaman karena penuh dengan kata-kata yang membingungkan, kita langsung saja pada topik pembahasan. Untuk membuat menu dropdown pada template klasik, silahkan ikuti langkah-langkah berikut ini :

Langkah pertama adalah membuat tiga banner untuk background tulisan, banner ini bisa dibuat dengan program design & grafik semisal Adobe photoshop atau Corel Draw ataupun program-program lainya yang sejenis.

Langkah kedua adalah mengupload banner-banner yang telah sobat buat, salah satu contoh adalah dengan menggunakan jasa situs www.photobucket.com. Untuk cara menguploadnya saya sudah terangkan, jika belum faham silahkan klik di sini. Saya ambil contoh, banner yang telah saya upload mempunyai URL address sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif

http://i162.photobucket.com/albums/t253/rohman24/bannerjava5.gif

http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif

Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :

1. Sign in di blogger.com dengan id sobat
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode template lalu paste pada program notepad, ini untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting kode template
5. Tambahkan kode berikut di bawah kode <head> dan sebelum kode </head>, atau jika ingin lebih mudah simpan di bawah kode <title><$BlogPageTitle$></title> :
<script> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>
6. Masukan kode berikut diatas kode ]]></b:skin>
.raden{background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');text-align:center;width:175px;font-family: georgia, Helvetica, sans-serif;padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom: 5px;display:block;text-decoration: none;color: #F6E151;}.ogah{background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');text-align:center;width:175px;font-family: georgia, Helvetica, sans-serif;padding-left:5px;padding-right:5px;padding-top:8px;padding-bottom: 5px;display:block;text-decoration: none;color: ##FAF705;height: 18px;}.ogahniye{background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif');text-align:center;width:175px;font-family: georgia, Helvetica, sans-serif;padding-left:5px;padding-right:5px;padding-top:8px;padding-bottom: 5px;display:block;text-decoration: none;color: #0572FA;height: 18px;}.hide{display: none;}.show{display: block;}a{cursor: hand}
7. Masukan kode berikut di sidebar blog sobat, dimana saja sesuai dengan keinginan sobat :
<a class="raden"><font size="5"><b>Navigasi</b></font></a><a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a><div id="ogahku1" class="hide"><a href="http://kolom-tutorial.blogspot.com/2007/04/bikin-blog.html" class="ogahniye">Membuat blog</a><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-link-1.html" class="ogahniye">Membuat link</a><a href="http://kolom-tutorial.blogspot.com/2007/04/membuat-marquee.html" class="ogahniye">Membuar marquee</a><a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-icon-yahoo-messenger.html" class="ogahniye">Icon YM</a></div><a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a><div id="ogahku2" class="hide"><a href="http://kolom-tutorial.blogspot.com/2007/04/yahoo-messenger-emoticons.html" class="ogahniye">Yahoo ! Emoticons</a><a href="http://kolom-tutorial.blogspot.com/2007/04/blogger-emoticons.html" class="ogahniye">Blogger Emoticons</a><a href="http://kolom-tutorial.blogspot.com/2007/05/pasang-jam-blog-di-sidebar.html" class="ogahniye">Pasang jam</a><a href="http://kolom-tutorial.blogspot.com/2007/05/ada-video-di-artikel.html" class="ogahniye">Pasang Video</a></div><a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a><div id="ogahku3" class="hide"><a href="http://rubrik-elektronik.blogspot.com/" class="ogahniye">Rubrik Elektronik</a><a href="http://rohman-freeblogtemplate.blogspot.com/" class="ogahniye">Free Blog Template</a><a href="http://contoh-blog.blogspot.com/" class="ogahniye">Blog Menu D'tree</a><a href="http://kolom-authorized.blogspot.com/" class="ogahniye">Authorize service</a></div><a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a><div id="ogahku4" class="hide"><a href="http://free-7.blogspot.com/" target="_blank" class="ogahniye">Free 7</a><a href="http://jaloee.blogspot.com/" target="_blank" class="ogahniye">Jaloee</a><a href="http://sundajava.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a><a href="http://anangku.blogspot.com/" target="_blank" class="ogahniye">Anang</a></div>
8. Klik tombol Preview untuk melihat perubahan yang baru di buat
9. Jika sudah OK, klik tombol Save Changes Template
10. Selesai.

Keterangan kode-kode diatas :

• kode di bawah ini adalah kode untuk mengaktifkan tombol yg di klik, jadi jangan di rubah! kecuali jika obat sudah familier dengan Javascript dan bisa membuat variasi baru dari kode ini :
<script> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>
• Kode-kode di bawah ini, nilainya harus di sesuaikan dengan kondisi blog sobat :
• 
  
  
  .raden
  --> .raden hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk enyertakan dot ( . ) diepan kata yang di buat.
  
  background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif');
  --> ini adalah gambar background untuk tulisan yang saya buat yaitu sebuah ombol.
  
  text-align:center;
  --> kode untuk membuat tulisan berada di tengah, bisa diganti dengan kata Left untuk sebelah kiri, dan right untuk sebelah kanan.
  
  width:90%;
  --> lebar dari tombol adalah sebesar 90% dari besarnya space sidebar dimana tombol ini di tempatkan, silahkan ganti nilainya dan sesuaikan dengan ukuran blog sobat.
  
  font-family: georgia, Helvetica, sans-serif;
  --> Font (jenis hurup) yang dipilih adalah jenis georgia, ini bisa diganti dengan jenis huruf lainnya semisal verdana dan lain-lain.
  
  padding-left:5px;
  --> batas (jarak) tulisan sebesar 5px dari tepi kiri tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  padding-right:5px;
  --> batas (jarak) tulisan sebesar 5px dari tepi kanan tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  padding-top:5px;
  --> batas (jarak) tulisan sebesar 5px dari tepi atas tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  padding-bottom: 5px;
  --> batas (jarak) tulisan sebesar 5px dari tepi bawah tombol,nilai ini bisa di rubah sesuai keinginan sobat.
  
  display:block;
  --> block berarti ditampilkan,jadi jangan dirubah.
  
  text-decoration: none;
  --> Tidak ada tek dekorasi. Sebaiknya jangan di rubah.
  
  color: #F6E151;
  --> Pemilihan warna, bisa dirubah kode warnanya sesuai dengan keinginan sobat.
  
  
  
  .ogah
  --> .ogah hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.
  
  
  
  .ogahniye
  --> .ogahniye lagi-lagi hanya pendefinisian saja , bisa di ganti dengan apa saja yang penting harus sesuai dengan kode yang di definisikan dan jangan lupa untuk menyertakan dot ( . ) didepan kata yang di buat.
  
  
  
  .hide
  display: none;
  --> Pendifinisian untuk .hide disembunyikan (tidak tampil).
  
  
  
  .show
  display: block;
  --> Pendifinisian untuk .show ditampilkan.
  
  
  
  a{cursor: hand}
  Agar gambar mouse berubah jadi gambar tangan ketika berada di atas tombol.
  
  
  
• Kode yang saya berikan diatas memuat links yang saya miliki, jadi links tersebuat harus di rubah dengan links milik sobat.

Mudah-mudahan keterangan di atas sudah jelas. Selamat mencoba !

Membuat Alamat judul Blog berjalan

Pasti nya teman-teman ingin melihat Blognya terlihat indah, harus teman-teman ketahui blog adalah seperti rumah kita sendiri jadi harus kita buat seindah dan menarik,, ya udah lah gak usah panjang lebar lagi,, Sebagai contoh lihat lah di blog saya? Apa anda tertarik,,!!!
Jika teman-teman ingin mencoba, seperti biasanya tinggal masuk ke halaman Dashbord - Tata letak - Edit HTML
Cari kode di bawah ini

<title><data:blog.pageTitle/></title>


Hapus kode tersebut, lalu ganti dengan kode di bawah ini….

<script language='JavaScript'> var txt=".::Welcome To My Website::."; var kecepatan=200;var segarkan=null;function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script>

Menu Dropdown Unik

• Home
• Facebook
• Yahoo!
• Twitter
• Youtube

Menu diatas merupakan contoh Menu Drop-Down Unik...
Menu tersebut sangat cocok untuk tampilan blog anda karena ukuran dan tampilan yang unik yang cocok untuk tampilan di menu blog anda..
Tertarik untuk memasangnya?
Oke Langsung saja Copy Paste kode nya dibawah ini :

<!--Menu Drop-Down Unik-->

<center><div id="menu">

<ul>

<li><a class="current" href="http://www.kikiyo.co.cc">Home</a></li>

<li><a href="http://facebook.com">Facebook</a></li>

<li><a href="http://id.yahoo.com">Yahoo!</a></li>

<li><a href="http://twitter.com">Twitter</a></li>

<li><a href="http://www.youtube.com">Youtube</a></li>

</ul>

</div></center>

<style>

*{

margin:0;

padding:0;

}

#menu{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieWsI7Mw61gGuMFDMbnIZB-Ynh4b1wzG2lb7-AJrZLwwtxiNxGNFXY3xcVAYn7QyiBQSDIChqlkjJRYb0cuz0Ci8jH0nEK7BjME_eWnwa5oezadYMwm02CxwX-y_QvmkZJcQPaGOhJSm4/s1600/menu_026_bg.jpg) no-repeat;

width:172px;

height:193px;

padding:15px;

}

#menu ul{

list-style:none;

padding:0 0 0 8px;

}

#menu li{

list-style:none;

display:block;

padding:10px 0;

}

#menu li a{

list-style:none;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQf5HoxQt4iGWCKpgMVjHFwxg6_TJFUkCPtHVlPX_4CzojUG2r_yGxczhW9mJxvez_5WEXDcM5OM2UI_Oj6NKxx_OqMOizR2C9hnjJITP6TFLI5ZHPn52e-ik1Wln-lXS9E2dH9SbSNMlI/) no-repeat left center;

color:#ffe991;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

line-height:1.5em;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a:hover{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXnOLzIBf_NDIwuFoDTA4pmfQVQ4flg4NQT7eFTMwECf8hFpi99p3zuR-S3BE7jJ88bstzBJelgFk9TJL5x2mTI6puoEIKbZnkeNE4GzbWNnz9eTzCfzDZPDykistgqz_EYd7gl9P29yi/) no-repeat left center;

color:#fff;

text-decoration:none;

}

#menu li .current{

list-style:none;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXnOLzIBf_NDIwuFoDTA4pmfQVQ4flg4NQT7eFTMwECf8hFpi99p3zuR-S3BE7jJ88bstzBJelgFk9TJL5x2mTI6puoEIKbZnkeNE4GzbWNnz9eTzCfzDZPDykistgqz_EYd7gl9P29yi/) no-repeat left center;

color:#fff;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a.current, #menu li a:hover.current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXnOLzIBf_NDIwuFoDTA4pmfQVQ4flg4NQT7eFTMwECf8hFpi99p3zuR-S3BE7jJ88bstzBJelgFk9TJL5x2mTI6puoEIKbZnkeNE4GzbWNnz9eTzCfzDZPDykistgqz_EYd7gl9P29yi/) no-repeat left center;

color:#fff;

text-decoration:none;

}

</style>

<!--By Www.kikiyo.co.cc-->

Ada Laron di Blogmu!

Kamu tahukan apa itu laron? Itu, binatang yang sering mengerumuni lampu itu lho! Sudah tahu kan? Lalu, apa hubungannya dengan blog? Eits, begini kawan, asal kau tahu, dikau bisa memelihara binatang laron tersebut di blogmu. Tapi, berhubung di blog tidak ada lampu yang bisa dikerumuni, maka cursorlah yang menjadi incaran si laron-laron tersebut.

Ah, daripada saya repot-repot menjelaskan, coba sendiri aja deh, biar tahu gimana jadinya. O ya, sayangnya efek laron ini cuma bisa dilihat bila kamu menggunakan browser Internet Explorer. Tapi tak apalah, sekarang kan masih banyak yang internetan menggunakan IE.
Caranya sama saja dengan cara memasang efek salju yang telah saya jelaskan sebelumnya, kodenya saja yang agak beda dikit. Ni kodenya:

-Laron Hijau Cerah
<script language="javascript" src="http://zianxfly.250free.com/js/laronlime.js"></script>

-Laron Putih
<script language="javascript" src="http://zianxfly.250free.com/js/laronputih.js"></script>


NB: Mohon maaf, karena waktu saya sedikit, jadi yang sempat saya buatkan cuma dua warna ini. Kalau kamu ingin warna lain, silakan hubungi saya, kemudian bersabarlah sampai saya punya waktu untuk membuatkannya (huhuhu....)

Main Layang-Layang di Blog

Duuuh... Apalagi sih ni....
Sabar dulu teman. Tarik napas dalam-dalam...HHHHHhhhhh.... hembuskan dengan perlahan.....BROOOT.... ups, jangan lewat belakang dong!!!kwokwokwo
Begini kawanku, kamu bisa menghiasi blogmu dengan gambar yang melayang-layang di blogmu (mantul-mantul gitu pokoknya). Gambarnya terserah kamu mau gambar apa, yang penting kamu tahu alamat gambarnya.

Namun sayangnya, seperti halnya efek laron, efek gambar melayang-layang ini cuma bisa dilihat lewat browser Internet Explorer. Kalau kamu membukanya lewat Mozilla Firefox, maka gambar tersebut cuma nangkring di pojok kiri atas. Tapi coba aja dulu, keren ko!
Caranya masih tetap sama, yaitu mengcopy kode di bawah ini dan mempastenya sebagai widget tanpa judul:
<br /><div id="img" style="position:absolute;"><br /><img src="http://www.situsgambar.com/gambar/yangkamumau.jpg" onMouseDown="pauseResume();"><br /></div><br /><script language="JavaScript" src="http://zianxfly.250free.com/js/gambargerak.js"></script>


Nah, ganti alamat gambar http://www.situsgambar.com/gambar/yangkamumau.jpg tersebut dengan alamat gambar punya kamu. Mudah sekali kan?

Efek Hujan Jarum di Blog, Ih... Ngeri....

Yang ini sama dengan efek salju yang sudah saya jelaskan sebelumnya. Bedanya, kali ini hujannya bukan salju lagi, tapi jarum! Hi... Ngeri... Tapi keren lho. Coba deh!
Caranya sama saja seperti memasang efek salju. Yang berbeda hanyalah kodenya:

Jarum Biru Muda

<script language="javascript" src="http://zianxfly.250free.com/js/jarumaqua.js"></script>

Jarum Hitam

<script language="javascript" src="http://zianxfly.250free.com/js/jarumhitam.js"></script>

Jarum Biru

<script language="javascript" src="http://zianxfly.250free.com/js/jarumbiru.js"></script>

Jarum Ungu Cerah

<script language="javascript" src="http://zianxfly.250free.com/js/jarumfuchsia.js"></script>

Jarum Abu-Abu

<script language="javascript" src="http://zianxfly.250free.com/js/jarumabuabu.js"></script>

Jarum Hijau

<script language="javascript" src="http://zianxfly.250free.com/js//jarumhijau.js"></script>

Jarum Hijau Cerah

<script language="javascript" src="http://zianxfly.250free.com/js/jarumlime.js"></script>

Jarum Merah Hati

<script language="javascript" src="http://zianxfly.250free.com/js/jarummaroon.js"></script>

Jarum Biru Gelap

<script language="javascript" src="http://zianxfly.250free.com/js/jarumnavy.js"></script>

Jarum Emas

<script language="javascript" src="http://zianxfly.250free.com/js/jarumolive.js"></script>

Jarum Ungu

<script language="javascript" src="http://zianxfly.250free.com/js/jarumungu.js"></script>

Jarum Merah

<script language="javascript" src="http://zianxfly.250free.com/js/jarummerah.js"></script>

Jarum Perak

<script language="javascript" src="http://zianxfly.250free.com/js/jarumsilver.js"></script>

Jarum Biru Pucat

<script language="javascript" src="http://zianxfly.250free.com/js/jarumteal.js"></script>

Jarum Putih

<script language="javascript" src="http://zianxfly.250free.com/js/jarumputih.js"></script>

Jarum Kuning

<script language="javascript" src="http://zianxfly.250free.com/js/jarumkuning.js"></script>

Eksekusi link pada jendela baru

membuat Eksekusi link pada jendela baru untuk bertujuan untuk memudahkan pembaca, kalau biasanya suatu link yang akan kiat eksekusi(diklik) akan membuak pada jendela yang sama, sehingga jika anda ingin melihat post yang tadi sebelum di eksekusi anda harus menekan tomblo forward, agar link yang di klik terbuka pada jendela yang baru anda harus mengikuti cara berikut:
biasanya anda membuat suatu link script nya seperti berikut:

<a href="link_dituju">nama link</a>

ganti text yang berwarna merah dengan alamat blog anda, misalnya:http://dhedie-tips-triks.blogspot.com dan ganti text yang berwarna biru dengan nama link misalnya:tips dan triks
sehinggan scriptnya menjadi seperti ini:

<a href="http://bhokalor2010.co.cc">tips dan triks</a>

dengan script yang seperti di atas maka saat anda membukanya, akan terbuka pada tempat yang sama(link yang sedang kita buka)
cara pertama :
- anda harus menambahkan Script target="_new sehingga script nya menjadi seperti berikut:

<a href="http://bhokalor2010.co.cc" target="_new">tips dan triks</a>

hasilnya:
tips dan triks

cara kedua :
- dengan menambahkan target="_blank" sehinggan script nya menjadi seperti berikut :
<a href="http://bhokalor2010.co.cc" target="_blank">tips dan triks&lt;/a>

hasilnya:
tips dan triks

Membuat Label Blogger Dengan Tampilan Cloud

Pasca ulang tahun yang ke-10, Blogger gencar menambahkan fitur baru dan berbenah diri untuk memenuhi permintaan para penggunanya. Mulai dari fitur Readmore Otomatis, Post Editor Baru, Template Designer pada Blogger Draft dan salah satu diantara fitur-fitur baru tersebut yaitu Label Cloud.

Seperti apa Label Cloud? Coba Anda lihat ke bagian bawah halaman blog ini, ada kategori kan? Nah itu namanya label cloud.


Bagaimana cara mengubah tampilan label lama menjadi Label Cloud? Mari kita simak langkah-langkah di bawah ini

Langkah 1
Login ke akun Blogger milik anda > Tata Letak > Elemen Halaman. Klik Edit pada widget Label blog Anda.

Langkah 2
Setelah jendela konfigurasi label terbuka, atur konfigurasi label sesuai pada gambar di bawah ini.

Setelah itu, klik tombol Simpan

Langkah 3
Sebelum mempercantik tampilan label cloud, perlu diperhatikan bahwa label cloud memiliki 5 tingkatan mulai dari warna hingga ukuran hurufnya.

Masuk ke bagian Edit HTML lalu copy kode di bawah ini tepat di atas kode ]]></b:skin>

.label-size-1 a {
color: #000000;

font-size: 8px;

text-decoration: none;
}
.label-size-1 a:hover {
text-decoration: underline;
}

.label-size-5 a {
color: #000000;

font-size: 12px;

text-decoration: none;
}
.label-size-5 a:hover {
text-decoration: underline;
}

Ganti font-size sesuai keinginan Anda.

Langkah 4
Klik Simpan. Label Cloud telah terlihat lebih bagus.