Cara membuat label keren diblogger

Cara Membuat Label diblog

Cara Merubah Tampilan Label Blog Menjadi Keren- Artikel kali ini cara blog akan membagikan sebuah cara untuk mendesign tampilan blog teman-teman terlihat menjadi keren dan tidak standar lagi. Tetapi untuk kali ini kita akan merubah tampilan dari menu Label terlebih dahulu. Sedikit demi sedikit saja dulu ya agar kedepannya paham dan teerbiasa untuk melakukan perubahan pada blog teman-teman.

Seperti biasa sebelum ke materi mari kita lihat dulu kegunaan daripada menu label pada blog ini. Menu label berguna untuk mengetahui artikel-artikel apa saja yang terkait dengan judul pada artikel kita, lebih tepatnya label ini berguna untuk mengelompokkan artikel menjadi satu bagian ke dalam label.

Contoh : judul artikel yang akan di buat adalah " Cara Merubah Tampilan Label Keren " dimana kita akan membuat label untuk artikel ini berupa "Tampilan Label" maka artikel yang baru kita buat tersebut akan masuk ke dalam label "Tampilan Label" dan arikel-artikel lain yang kita buat pun akan masuk pada label tersebut.

Dengan banyaknya artikel yang kita buat bila tidak di kelompokkan dengan label maka hal ini akan membuat blog kita menjadi tidak rapi atau bahkan menjadi kesulitan tersendiri bagi para pengunjung blog untuk menentukan artikel man yang akan dibaca dan berkaitan dengan dengan minatnnya. Untuk membuat label ini cukup mudah kok hanya perlu ke menu Tata Letak > Tambahkan Gadget > Label. Namn tampilan label nya biasa-biasa saja atau default dari template blogger.

Oke Sekarang sudah tahu ya kegunaan dari label ini, nah sekarang kita akan membuat tampilan label yang menarik dan keren, patikan untuk membaca secara seksama agar tidak terjadi kesalahan saat membuat label blog.. Berikut contoh dari tampilan label yang akan kita buat

Tampilan Label Yang Akan Di Buat

Cara Merubah Tampilan Label Blog

1. Masuk ke dashboard blogger dan klik Template > Edit HTML
2. Carilah kode ini dengan menggunakan CTRL+F ]]></b:skin>
3. Copy paste kode dibawah ini dan masukkan tepat di atas kode yang telah di cari sebelumnya
.Label a{  border-radius:5px; float:left;padding:5px 8px;margin:3px 3px 0px 0;background: rgb(0,100,180); 
background: -moz-linear-gradient(top,  rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1))); 
background: -webkit-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 
background: -o-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 
background: -ms-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 
background: linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 ); 
display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); 
}
.Label a:hover{color:#0afafa !important; background:#123d60;}
4. Setelah selesai langsung klik save template dan pratinjau template untuk melihat hasilnya. Sebelum itu pastikan teman-teman sudah menambahkan gadget laman di tata letak.
5. Caranya klik Menu Tata Letak > Tambahka Gadget > Cari Laman. Jangan lupa centang pilihan CLOUD. Lalu save.

Untuk catatan kode yang berwarna merah bisa teman-teman ganti dan itu adalah kode untuk warna, jadi bisa di ganti sesuka hati sesuia selera dan tampilannya akan seperti gambar sebelumnya di atas. Sekian untuk tutorial kali ini semoga bermanfaat buat kalian yang ingin menjadi seorang blogger keren.

Bagikan Artikel ini