Cara Membuat Label Di Atas Judul Postingan

Cara Membuat Label di Atas Judul Postingan. Jika kita mau, mengotak-atik kode HTML dengan tujuan untuk mempercantik blog miliki kita hampir tidak ada habisnya. Setelah kita mengotak-atik yang itu, kemudian ingin mengotak-atik yang ini dan lainnya yang hampir tidak ada puas-puasnya. Pada postingan kali ini, Tips dan Trik Blog ingin share kepada teman-teman blogger tentang ilmu yang baru saja saya dapatkan dari kebiasaan blogwalking dan browsing di dunia maya.

Adalah cara membuat label berada di atas judul postingan yang mungkin dapat membuat blog lebih menarik dan tampil beda. Jika tertarik, silakan ikuti tipsnya berikut ini.

Langkah-langkahnya adalah sebagai berikut.

Pertama, login ke blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML
Kedua, Jangan lupa beri centang pada “Expand Templates Widget”
Ketiga, buatlah CSS label dengan deklarasi yang menarik. Contohnya seperti di bawah ini.

.label{
padding:5px 5px 5px 0;
margin:0;
font-size:20px;
color:#DF0174;
font-weight:bold;
line-height:1.4em;
}

Keterangan

Silakan untuk melakukan kustomasi sendiri, misalnya ukuran/type hurufnya Untuk mengetahui kode HTML warna-warna, silakan klik HTML Color Codes.

Keempat, letakkan kode berikut ini di bawah kode <div class="post hentry">

<div class='label'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'> , </b:if> </b:loop> </b:if>=&gt; </div>

Keterangan

Kedua kode yang berwarna merah dapat diganti sesuai keinginan masing, yang penting keduanya harus sama karena merupakan deklarasi dan target. Yang berwarna hijau, silakan diganti dengan notasi yang lain.

Kelima, simpan template

Keenam, selesai.

Sekarang, silakan buka blog kemudian pastikan bahwa label telah “bertengger” di atas judul postingan. Selamat bereksperimen dan semoga bermanfaat.

(sumber : Blog Mas Doyok)

Artikel Yang Berhubungan