Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel
Pembaharuan 10 Juni 2015: Widget ini sudah usang. Lebih baik pakai yang ini.
Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan deskripsi. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang hanya terdiri dari gambar dan judul saja. Kamu tinggal memilih mana yang menurutmu lebih menarik atau sesuai dengan karaktermu. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini. Tapi jika tidak, mungkin kamu akan suka dengan tipe aplikasi artikel terkait thumbnail dan judul saja » baca tutorialnya di sini
Membuat Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel
Masuk ke halaman Editor HTML, kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Salin kode di bawah ini, kemudian letakkan tepat di atas kode
</head>
:<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related_posts h4 {background:#1e4a76;color:#FFF;font:bold 11px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;} #relpost_img_sum {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;} #relpost_img_sum:hover {background:none;} #relpost_img_sum ul {list-style-type:none;background:none;margin:0;padding:0;} #relpost_img_sum li {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:#EDE9E4;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;} #relpost_img_sum li:hover {background-color:#F0ECE9;} #relpost_img_sum .news-title a {color:#2C6BA8;} #relpost_img_sum .news-title {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;} #relpost_img_sum .news-text {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;} #relpost_img_sum img {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;} </style> <script type='text/javascript'> var relnojudul = 0; var relmaxtampil = 10; var numchars = 200; var morelink = "baca selengkapnya"; </script> <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script> </b:if>
Selanjutnya temukan kode ini:
<div class='post-footer'>
TIP: Tekan CTRL + F kemudian ketik class='post-footer' untuk mempermudah pencarian.
Salin kode di bawah ini, kemudian letakkan tepat di atasnya:
<!-- Artikel Terkait dengan Gambar dan Ringkasan --> <b:if cond='data:blog.pageType == "item"'> <div id='related_posts'> <h4>Artikel Terkait</h4> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=50"' type='text/javascript'></script> </b:loop> <ul id='relpost_img_sum'> <script type='text/javascript'>artikelterkait();</script> </ul> </div> </b:if> <!-- Akhir Artikel Terkait dengan Gambar dan Ringkasan -->
Atau kamu juga bisa meletakkan kode tersebut di bawah kode
<div class='post-footer-line post-footer-line-1'>
atau kode<p class='post-footer-line post-footer-line-1'>
. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan frasepost-footer
umumnya memang berada di bawah posting. Begitu saja logikanya.Jika sudah selesai, klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian.
Penyesuaian
- Atur ukuran thumbnail dengan mengubah nilai dalam selektor
#relpost_img_sum img{ … }
, yaitu pada deklarasiwidth:55px
danheight:55px
nya. var relmaxtampil
adalah variabel untuk menentukan jumlah posting yang akan ditampilkan.var morelink
adalah variabel untuk menentukan teks "baca selengkapnya". Kamu bisa mengganti "baca selengkapnya" dengan "read more" atau yang lainnya.var numchars
adalah variabel untuk menentukan jumlah karakter ringkasan.- Tentukan judul artikel terkaitmu dengan mengubah teks "Artikel Terkait" pada kode yang Saya beri tanda.
14 Komentar
Unknown
nyoba pasang ahh . .
Yopi Hasopa
mas, saya sudah pasang dan berhasil... tapi kok mucul dua kali yah... di bawah postingan sama di bawah footer... mohon bantuannya mas, udah saya utak atik tapi tak bisa :(
tkp -> hsp21.com
terima kasih :)
Yopi Hasopa
mas, saya sudah pasang dan berhasil... tapi kok mucul dua kali yah... di bawah postingan sama di bawah footer... mohon bantuannya mas, udah saya utak atik tapi tak bisa :(
tkp -> hsp21.com
terima kasih
Taufik Nurrohman
@Yopi Hasopa Artikel terkaitnya dobel di sebelah mana? Sudah diperbaiki ya?
Unknown
mas, mau tanya ini pake jquery gk?? biar ringan gitu :D
Yopi Hasopa
@Taufik Nurrohman sudah diperbaiki mas. Ternyata gara2 saya pasang kode jquery emoticon otomatis yang di taroh di atas
</body>
, kemudian saya simpan di atas div penutup footer, tapi efeknya kode emoticon untuk di sidebar gak jalan :(Saya kembaliin lagi kodenya di atas
</body>
ya mas? biar bisa dianalisis, mohon bantuaannya untuk masalah ini. Terima kasih :)Taufik Nurrohman
@Asmara Susanto Ini murni JSON Blogger, tanpa JQuery.
adaadad
Widget yang stylish.
Thanks
Unknown
mas mau nanya blog saya kok separuh gambar postingannya gk muncul yahh ?
mohon dibantu mas
blabla...appfullversion[dot]blogspot[dot]com
Taufik Nurrohman
Gambar sebisa mungkin harus berasal dari blog sendiri, bukan dari hasil salin tempel.
Anonim
Sudah saya terapin mas :-bd
Anonim
mas coba periksa lagi script yang ini
http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js
kayaknya harus pakai password dlu ya...?
Unknown
http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js
filenya mati nih
Taufik Nurrohman
Pakai widget yang ini saja, lebih ringan, karena tidak semua posting dimuat. Tinggal pilih opsi thumbnail dan judul.