Mengelola blog supaya tampil menarik adalah hal yang sudah banyak dilakukan oleh para blogger,hal tersebut tentu bukan tanpa alasan !! Karena blog yang memiliki tampilan menarik tentu akan membuat para pembacanya merasa nyaman untuk berlama-lama membaca satu persatu artikel yang ada dalam blog tersebut,dengan demikian secara tidak langsung trafic blog-pun akan naik dengan pesat.
Seperti pepatah yang mengatakan "jika penampilan adalah iklan pertama kepada dunia tentang bagaimana jati diri kita yang sebenarnya". Begitupun dengan blog,memiliki tampilan menarik ditambah dengan artikel-artikel yang berkualitas tentu para pembaca akan menilai bagaimana dan seperti apa blog yang kalian kelola.
Pada kesempatan kali ini saya akan berbagi tips lagi mengenai cara mempercantik blog dengan menambahkan widget artikel terpopuler yang sederhana tapi keren seperti gambar di bawah ini
Buat kalian yang sudah memasangnya langsung saja ikuti langkah ke tiga pada tutorial pemansangannya,tapi bagi yang belum silahkan ikuti langkahnya dari awal.
Langkah pertama silahkan log in ke akun blogger kalian kemudian pilih menu tata letak terus pilih kolom untuk menempatkan gadget yang akan digunakan.
Silahkan pilih gadget 'postingan populer' dengan mengklik tanda plus disampingnya.
Kemudian isi 'judul' lalu pada tulisan 'Paling banyak dikunjungi' pilih semua,sementara pada bagian 'Tampilkan' kosongkan kotaknya kecuali jika kalian ingin menampilkan thumbnail gambar pada tampilan artikel terpopuler silahkan centang kotak tumbnailnya,selanjutnya tentukan berapa banyak jumlah artikel yang akan ditampilkan? Setelah selesai silahkan klik simpan. Saran saya sih mending jangan sertakan gambar jika kalian ingin memasang widget ini.
Langkah ketiga sialahkan pilih menu tema kemudian klik edit HTML selanjutnya cari kode ]]></b: skin> atau </style> dan tempatkan script code di bawah ini tepat di atasnya.
/* Popular Post */ #PopularPosts1 ul{list-style-type:none;margin:0;padding: 0} #PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out} #PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none; border-bottom: 1px solid #e9e9e9;font-size:11px;line-height: normal;} #PopularPosts1 ul li:first-child { border-top:none; } #PopularPosts1 ul li:last-child { border-bottom:none; } #PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #016FBA !important; display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em} #PopularPosts1 a:hover {color:#c00 !important; text-decoration: none;} .PopularPosts h2 {padding:10px;margin:-15px 0 0 0;background:#222;color:#ff9;} .popular-posts ul{padding-left:0;counter-reset:trackit} .popular-posts ul li{border-bottom:1px solid #f0f0f0;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit} .PopularPosts ul li:before{content:counters(trackit, ".");padding:0 .1em 0 10px;font-size:20px;font-weight:700;color:#F66;float:left;margin-right:10px} .PopularPosts li:first-child{border-top:1px solid #f0f0f0} .PopularPosts li:nth-child(odd){background:#f5f5f5} .PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important} .PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem} #PopularPosts1 li{padding-right:1em!important;padding-left:1em!important} .widget.PopularPosts{padding:1.2em 0 0!important;background:#fafafc}
Jika sudah selesai silahkan klik simpan, selanjutnya tinggal lihat perubahan tampilannya.
Tidak ada komentar:
Posting Komentar