Cara Menciptakan Widget Related Posts Di Blogger

Sudah usang sekali aku tidak menciptakan entri ihwal tutorial Blogger. Kali ini aku menciptakan tutorial cara menciptakan widget related posts di Blogger. Tutorial ini ialah balasan dari pertanyaan teman aku di grup Facebook Diskusi HTML Pemula. Dan gres aku jawab sebulan kemudian. Hal ini sebab kesibukan aku di dunia nyata.

Mungkin beberapa dari kalian ada yang masih galau apa itu widget related posts. Widget related posts ialah wigdet yang dipakai untuk memuat entri yang bekerjasama dengan entri yang sedang dikunjungi menurut label yang diberikan. Misalkan entri tersebut berlabel "curhat", maka widget tersebut akan memunculkan sejumlah entri yang terkait, yang berlabel curhat di blog kamu. Berikut ini ialah teladan konkret widget related posts di blog ini.

Related Posts

Cara Praktis Membuat Widget Related Posts

Widget dibentuk menurut JavaScript yang aku dapatkan dari orang lain. Saya sengaja menaruhnya di hosting aku biar sanggup aku ubah/modifikasi sesuai kebutuhan. Jika kau tertarik mengubahnya, sanggup kau unduh terlebih dahulu, modifikasi, kemudian unggah ke hosting milikmu. Jika tidak mau mengubah, sanggup pribadi pasang sesuai alamat JavaScript-nya. Alamat JavaScript-nya aku letakkan di http://intikali.org/js/rel-post.js. Jika kau ingin menaruhnya di template Blogger kamu, letakkan di cuilan "post-footer" arahan berikut ini.

<script src='http://intikali.org/js/rel-post.js' type='text/javascript'/>
<div class='related-posts-widget'>
loading...
</div>

Terserah, kau sanggup meletakkannya sebelum atau sehabis "post-footer", tergantung kebutuhanmu.

Di Mana Letak "Post-footer"?

Jika kau masih awam dalam dunia template Blogger, untuk mengetahui letak "post-footer" ikuti langkah-langkah berikut ini.

Pertama, masuklah dasbor Blogger kamu. Setelah itu klik "Template". Lalu pilih "Edit HTML". Setelah itu klik kursor pada daerah kode-kode itu, kemudian tekan "Ctrl. F" untuk melaksanakan pencarian. Masukkan kata kunci "post-footer" sampai muncul menyerupai gambar di bawah ini.

Mencari "post-footer"

Letakkan arahan widget di atas arahan tersebut. Coba beberapa kali sampai kau mendapat posisi yang pas. Banyak sekali "post-footer" yang ada di sebuah template Blogger. Setiap template Blogger mempunyai susunan arahan yang berbeda. Silakan bereksperimen sendiri dengan template milikmu.

Menghias Widget Related Posts dengan CSS

Jika sudah muncul widget-nya, selanjutnya ialah menghiasnya dengan CSS. Di arahan sebelumnya related posts mempunyai class="related-posts-widget", oleh sebab itu untuk menghiasnya memakai selektor ".related-posts-widget". Berikut ini ialah CSS yang aku gunakan untuk menghias widget tersebut.

.related-posts-widget {
width: 100%;
}

.related-posts-widget li, .related-posts-widget img, .related-posts-widget a {
float:left;}

.related-posts-widget li {
background: #FFF;
border: 1px solid #ddd;
margin-bottom: -1px;
padding: 10px;
width: 279px;
margin-right: -1px;
}

.related-posts-widget li:nth-child(even) {
width: 278px;
}

.related-posts-widget h2 {
font-size: 14px;
margin: 20px 0px;
font-weight: normal;
}

.related-posts-widget img {
margin-right:10px;
}

Kamu sanggup mengubahnya sesuai yang kau butuhkan. Sesuainya dengan warna yang kau gunakan untuk blog kamu. Bagaimana? Mudah, 'kan? Selamat mencoba :)

Tweet

Subscribe to receive free email updates: