Membuat Related Post dengan gambar di Blogspot Membuat Related Post dengan gambar di Blogspot ~ Kempor.Com Membuat Related Post dengan gambar di Blogspot

Senin, 28 November 2011

cara membuat related post dengan gambar

Tampilan template blog saya berubah lagi, yang kemarin 3 kolom sekarang menjadi 2 kolom. Itulah kelemahan saya, suka ngedit ngedit template, yang ini yang itu, kurang gini kurang gitu, pokoknya cepet banget yang namanya bosan itu datang. Gara gara linkwithin kemarin ndak berjalan sesuai rencana, pertama seharusnya muncul 4 buah ternyata hanya bisa muncul 3 buah trus loadingnya juga minta ampun, akhirnya untuk kedua kalinya saya copot lagi linkwithin dan saya ganti pakai related post dengan gambar yang bentuknya mirip lah sama bikinan linkwithin.


Karena hari ini tidak ada kejadian yang bisa diceritakan makanya saya tulis saja cara membuat related post dengan gambar di blogspot. Kita tidak dituntut paham yang namanya html, CSS ataupun javascript untuk membuat related post dengan gambar ini. Yang anda perlukan hanya mouse, klik kiri dan klik kanan, serta rasa  tidak mudah putus asa, hehehehe.

Langsung saja menuju Design , edit HTML, centang Expand Widget Templates (jangan lupa back up dulu template buat jaga jaga)

cari kode:

</head>

ganti dengan kode:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOziRCncezeHaqB47XmHGT1bfYIjd0Lyo5J0Ad_D_eLtZuqpx5p4t_QyjdBs9GJ54wroat6g7JR0r0glgS3c1Q-hUQxh9-jsrBM2TKt_TGXmsWiQw_Ra2bhKva7wEMon46RmdgZBbJKyM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

Selanjutnya cari

<div class='post-footer-line post-footer-line-1'>

apabila tidak ada cari

<p class='post-footer-line post-footer-line-1'>

taruh kode ini dibawah nya kode diatas

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Untuk menggati jumlah halaman yang muncul ganti angka 5 pada kode var maxresults=5; 
Untuk menguba warna spliter silahkan ganti  "#d4eaf2" pada kode  var splittercolor="#d4eaf2";
Untuk mengganti judul silahkan ganti tulisan "Related Post" pada kode var relatedpoststitle="Related Posts";

Nah itu dia tadi sedikit sharing untuk cara membuat related post dengan gambar di blogspot.
Bagi yang belum jelas silahkan tanya tanya, kalau bisa ya tak jawab kalau tidak ya maaf, atau bisa lihat langsung saja di www.bloggerplugins.org.


Related Posts Plugin for WordPress, Blogger...

46 comments:

  1. Belum sempat 'obrak-abrik' template lagi neh, masih default muluuuuuuu...

    BalasHapus
  2. seperti mas riva'i,aku juga gampang bosan...hehee

    BalasHapus
  3. oia, di kasih pop out dunk hehehee...

    BalasHapus
  4. @kinanti: hari gini template default. :p

    @athma muthmania: hmmm, hehehehe.

    @Ririe khayan: Pop out? paan tuh?

    @outbond malang: wokey bro.

    @om una kuya: hahaha, penting dadine jos. :p

    BalasHapus
  5. Piye carane ngapusnya T_T
    Ngapus sak shoutmix-e?~

    BalasHapus
  6. Pop out we ra ngertiii :p :p NDESSOOOO~

    BalasHapus
  7. weleh weleh ndeso katrok!!, ya tinggal log in ke shoutmix, trus dihapus deh,

    kan dulu pesanmu ya pnah tak hapus tah.

    pop out wie upu tah..

    BalasHapus
  8. sip donk bro.

    ndak salah kalo dicoba...
    heee..

    BalasHapus
  9. Iso yeeee... wis ra ndeso.
    Pop out isih ra ngerti tho? NDESOOO!

    BalasHapus
  10. sing ndeso wie rupamu kok mbak :p

    yen pop up mudheng, pop out ra donk aq.

    BalasHapus
  11. Sing penting ayu. Lha kowe wis ndeso elek, ra ngerti pop out meneh ahahaaa...
    Itu lho mas pop out window yang ada di komen. Kalau punyamu ini kan embedded below. Isih ra dong? Ndeso...

    BalasHapus
  12. panjenengan niku sing ndhesit.

    naminipun mboten pop out, nanging pop up windows.

    gene low mbak, kalo pop up windows ndak ke detect di google,

    Contoh saja jika saya bilang Solo Cyber Day 2011 di komentar, maka jika di search di google masih ke detect ma om google, tapi jika pake pop op ndak ke detect.
    gitu, hmm ndeso!!!

    BalasHapus
  13. Intinya kan maksud mbak riri itu. ndesit... ra dongan kok kowe mas...

    BalasHapus
  14. ooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo?

    BalasHapus
  15. Mas cara liat top komentator gimana sih... :-s

    BalasHapus
  16. cari saja di gugel banyak.

    keywordnya "top komentar"

    nanti dikasih script, tinggal edit dikit, trus pasang di blog.
    selesai.

    BalasHapus
  17. Oke udah. Tapi ga asik ah. Masa nomer satunya aku sendiri :D

    BalasHapus
  18. udah q coba kok dak mau muncul ya,,,,

    BalasHapus
  19. coba jangan dirubah rubah aja dulu jumlah, jenis warna pak,

    saya kemarin cuman kopas langsung bisa pak..

    kalau ngopi scriptnya di chek dulu apa sudah komplit, kalau sudah bener bener ndak ada yang ketinggalan coba di chek kode template yang diganti apa ndak ada yang ketinggalan juga.

    kalau masih bingung sini tak buatin aja, hehehe

    BalasHapus
  20. Ma kasihh, dah sukses masang Realted Post'nya..

    BalasHapus
  21. Masih tetep mas yo, enek keterangan gak mendukung HTML7 q dak reti HTML ki opo opomeneh enek 7ne

    BalasHapus
  22. sudah mas,,, baru mudeng sekarang

    BalasHapus
  23. oh ia mas untuk saran bisa mampir mas www.kampussaya.com
    letheg.blogspot.com moga jaya

    BalasHapus
  24. @Ririe khayan: sama sama :D

    @Solhin: Hore akhirnya bisa juga, soalnya saya juga ndak tahu html 7 ntu apa, wkwkwkwkwk

    BalasHapus
  25. hhmmmm,
    coba di ulang ulang lagi ya..
    :D

    BalasHapus
  26. Salam Kenal Boss,,,
    Makasih ya postingannya,,, udah tak terapin koq,,

    Btw,,, kok ada Una sih dimari...

    BalasHapus
  27. makasih dah mbaca, dipraktekin aja, sapa tau cocok.
    mbak una emang sering dimari kok mas bro..

    BalasHapus
  28. udh bisa gan di blog ane http://pandawabrother.blogspot.com

    BalasHapus
  29. Terima kasih infonya. Sangat bermanfaat.

    BalasHapus
  30. makasih gan infonya, langsung praktek

    BalasHapus
  31. mantep om tutornya salam kenal http://wahidsahidu.blogspot.com/2012/02/spesifikasi-dan-harga-imo-g189.html

    BalasHapus
  32. wah kon tibakno tutorial ngene ki pisao? pantes pengunjunge akeh

    BalasHapus
  33. Balasan
    1. silahkan di praktekan, mau komen apa terserah :p

      Hapus
  34. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus

Mohon tulis nama asli/panggilan/lapangan/panggung/pena etc.
No keyword, No spam, ataupun hal-hal yang jelas.

Terima kasih sudah comment.