Cara Membuat Popular Post Seperti Arlina Design

www.azid45.web.id - Cara Membuat Popular Post Seperti Arlina Design. Assalamualaikum.Wr.Wb, pada kesempatan kali ini saya angan membeberkan script css popular post yang dipakai pada templatenya Arlina Design. Siapa yang tidak tahu Arlina, ya dia salah satu blogger yang bergelut pada dunia tutorial seputar blog dan template blog yang terkenal di Indonesia selain bang Adhy Suryadi, Igniel, dan Sugeng. Sudah banyak inovasi yang dia hasilkan mulai template simply, viral Go, dan lain sebagainya dimana tentunya templatenya juga sudah responsive dan SEO Friendly. Salah satu yang membuat saya berkesan pada kak Arlina adalah popular post pada templatenya sangat berbeda dengan template umumnya. Dimana jika template biasanya berupa deskripsi, dan thumnail maka template ini berupa seperti tabel yang memiliki warna unik serta membuat daya tarik seorang pembaca untuk melihatnya.

Lantas apa hubungannya popular post yang menarik dengan pembaca blog?. Untuk menjawab pertanyaan ini, perlu kita ketahui bahwa fungsi dari popular post dalam sebuah blog adalah menampilkan postingan yang sering dibaca oleh pengunjung blog kita. Dengan menampilkan popular post yang menarik, maka setidaknya mampu memberikan daya tarik pembaca atau pengunjung blog untuk melihat popular post kita sehingga bisa jadi pengunjung tersebut mengklik artikel kita yang sering dibaca orang lain. Dengan begitu, visitor kita akan meningkat karena bisa jadi pengunjung akan betah dan berlama-lama pada blog kita.

Bagaimana? jadi kita sebagai seorang blogger harus juga mengedepankan tampilan blog kita selain membuat artikel yang menarik, bagus, SEO dan tema artikel yang sering dibaca pengunjung. Bagi sobat yang ingin mempratekkan langsung cara membuat popular post seperti Arlina Design bisa langsung menuju tutorialnya dibawah ini.

Cara Mudah Membuat Widget Popular Post Seperti Arlina Design

Pertama, Langkah awal yang harus sobat lakukan adalah silahkan untuk login ke blogger.com. Selanjutnya Pilih tema / template > edit HTML.
Kedua, Cari kode /* Popular Posts */di templat blog sobat dengan gunakan CTRL+F untuk mempercepat pencarian jika sudah. Atau jika tidak ada, sobat bisa langsung cari "popular post". Jika sudah ketemu, maka hapus kode popular post yang ada pada template sobat agar nantinya kodenya tidak saling bertimbunann dan rusak tampilannya.
Ketiga, Setelah sudah dihapus langkah selanjutnya adalah copas kode css berikut dan letakkan diatas kode </style>

/* Popular Posts */

.PopularPosts .item-title{font-weight:500;font-size:15px;padding-bottom:0.5em}.PopularPosts .widget-content{font-size:14px;padding:0}.PopularPosts .widget-content ul li{padding:0;background:none}.PopularPosts .item-title a{color:#333}.PopularPosts .item-title a:hover{color:#f39c12}.PopularPosts .item-snippet{height:40px;overflow:hidden;color:#555;line-height:1.4}#PopularPosts1{display:block;position:relative;overflow:hidden;font-size:15px}#PopularPosts1 ul{margin:0;padding:0;list-style-type:none}#PopularPosts1 ul li{background:#f39c12;position:relative;padding:0;color:#fff;border-bottom:1px solid rgba(0,0,0,0.08);border-top:1px solid rgba(255,255,255,0.12)}#PopularPosts1 ul li:after{content:'\f105';font-family:fontawesome;position:absolute;top:12px;right:15px;line-height:1em;text-align:center;color:#fff;font-size:23px;font-weight:normal;transition:all.3s}#PopularPosts1 ul li:first-child{border-top:0}#PopularPosts1 ul li:last-child{border-bottom:0}#PopularPosts1 ul li:hover:after{color:#fff}#PopularPosts1 ul li a{background:#f39c12;color:#fff;display:inline-block;padding:15px 50px 15px 15px;width:100%}#PopularPosts1 ul li a:hover{background:#af854259;color:#fff} 

Keempat, Letakkan kode Javascript berikut tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

Kelima, Langkah terakhir tinggal Save Template.

Penting !

• #f39c12 Ini adalah kode warna widget popular post
• background:#f39c1 ini adalah warna backgorud 

Demikian Cara Membuat Popular Post Seperti Arlina Design. Sebelum saya mengakhiri, ada satu hal penting yang harus sobat perhatikan ketika menggunakan popular post ini yaitu bahwa kelemahan popular post ini tidak responsive jika menggunakan thumbnail gambar oleh karena itu sobat bisa menonaktifkan humbnail pada layout popular postnya, atau jika sobat tetap ingin meenggunakan thumbnail sobat bisa redisgn ulang kode cssnya. Baiklah, semoga artikel ini bermanfaat. Amin