Membuat Related Posts dengan Thumnails

Para Blogger bilang Related Posts penting. Saya setuju dengan argumen orang tersebut. Karena menurut saya semakin lengkap blog/web yang anda tayangkan, semakin menarik banyak pula perhatian para pengunjung. Oleh karena itulah saya disini membuat sebuah kumpulan Tips-Trik Blogger (karena saya hanya mengerti blogger), terutama tentang Related Posts. Anda dapat memilih salah satu dari berbagai macam Related Posts yang tersedia.
Kali ini untuk membuat Related Posts dengan Thumnails, yang harus dilakukan adalah:
1. Login ke Blogger

2. Klik rancangan, Edit HTML, centang kotak Expand Templates Widget

3. Kemudian cari kode </head> dan salin kode berikut diatas kode </head> tersebut.

<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == "item"'> <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, “Times New Roman”, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

4. Kemudian cari kode <p class='post-footer-line post-footer-line-1'> Jika tidak ketemu coba dengan kode <div class='post-footer-line post-footer-line-1'> lalu salin kode berikut sebelum kode yang kita cari sebelumnya

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript' /></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

5. Simpan dan lihat hasilnya...

Selamat mencoba...
Jangan lupa mengganti:
var maxresults= 5 (jumlah posting terkait yang akan ditampilkan)
var relatedpoststitle="Related Posts" (sebagai judul pengganti posting terkait)


Terima kasih sudah berkunjung...
Happy Blogging ^^....

Sumber o-om.com

Read more →

Membuat Related Post (Blogger) Versi 3

Pada kesempatan kali ini saya akan membahas kembali mengenai cara membuat Related Post (versi 3)
Dan sekali lagi apa itu Recent Posts sudah saya bahas di versi 1,

Cara yang ketiga ini ada 2 cara:
A. Menggunakan Widget (Easy Steps)

Cara memasang Related Posts di Widget lebih mudah dilakukan dibandingkan dengan memasukan secara manual. Lagkah yang harus dilakukan adalah:

1. Login ke Blogger 
2. Klik Rancangan, kemudian Elemen laman (secara otomatis saat mengklik rancangan)
3. Pilih tempat dimana anda akan ditaruh Related Posts, kemudian Tambah Widget dan pilih HTML/JavaScript.
4. Kemudian paste kode dibawah ini:
   

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script src="http://brps.appspot.com/gas.js"></script>
   <h2>Related Posts</h2>
   <div id="gas-results"></div>

5. Kemudian Simpan dan selesai.

B. Menggunakan cara manual

Cara memasang Related Posts secara manual ini dapat dikatakan tergolong lumayan sulit dan juga ada risiko. Sebagai catatan jangan lupa Download Template anda sebelum mempraktekan ini!! Langkah yang harus dilakukan:

1. Login ke Blogger 
2. Klik rancangan, kemudian Edit HTML(jangan lupa centang kotak Expand Widget Templates)
3. Kemudian cari kode seperti dibawah ini
   

   <div class='post-footer-line post-footer-line-3'/>
     ...
   </div>

4. Tambah kode dibawah setelah kode diatas
   

   <h2>Related Posts</h2>
   <div id='gas-results'></div>

5. Cari kode </body>
6. Masukan Kode dibawah sebelum kode </body>

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script src="http://brps.appspot.com/gas.js"></script>

7. Jangan lupa simpan Templatenya dan coba cek...

Terima kasih sudah berkunjung..

Happy Blogging

Read more →

Membuat Related Post (Blogger) Versi 2

Saya sudah membahas tentang apa itu Related Posts di posting sebelumnya.

Sekarang saya akan membahas cara membuat Related Posts versi yang kedua.

Langkah-langkahnya adalah sebagai berikut:

1. Yang pasti login ke blogger terlebih dahulu,

2. Kemudian Klik Rancangan, dan kemudian Edit HTML

3. Jangan lupa centang kotak Expand Template Widget.

4. Kemudian cari kode yang seperti ini:

<div class='post-footer-line post-footer-line-3'/>
  ...
</div>

5. Taruh kode dibawah ini dibawah kode </div> yang diatas

<h2>Related Posts</h2>
<div id="gas-results"></div>

6. Kemudian cari kode </body> dan taruh kode dibawah sebelum kode ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://brps.appspot.com/gas.js"></script>

 7. Simpan Template dan selesai.

Terima kasih sudah berkunjung..

Happy Blogging ^^...

Sumber  http://brps.appspot.com/

Read more →

Membuat Related Posts (Blogger) Versi 1

Apa itu Related Post?? Hmm, Related Posts itu adalah posting terkait yang terbuka bila mana jika seorang pengunjung datang ke blog kita, lalu melihat salah satu posting yang kita buat, dibawah posting tersebut(sebelum area komentar) akan muncul lagi segelumit baris. Itulah yang dinamakan Related Posts.. Menurut saya sih hahaha ^^..


Untuk memunculkan Related Post (versi 1), yaitu dengan cara:

1. Yang pasti login ke blogger terlebih dahulu,


2. Kemudian Klik Rancangan, dan kemudian Edit HTML


3. Jangan lupa centang kotak Expand Template Widget.


4. Kemudian cari kode ini:

    <data:post.body/>


5. Taruh kode dibawah ini setelah kode diatas:

<b:if cond='data:blog.pageType == "item"'> <H2>Artikel Terkait:</H2> <DIV class='rbbox'> <DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <DIV id='albri'/> <SCRIPT type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('albri').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </SCRIPT> </DIV> <script type="text/javascript">RelPost();</script> </DIV> </b:if>

6. Kemudian Simpan Template dan lihat hasilnya..

Warning - biasanya kode <data:post.body/> ada lebih dari 2 rekomendasi saya pilih kode yang ke-2.
Keep Trying^^


Terima kasih sudah berkunjung...
Happy Blogging ^^...

Read more →

Membuat Related Post (versi 4)

Seperti biasa pada posting-posting sebelumnya mengenai membuat Related Post (artikel terkait) versi 1, 2 dan 3, saya tidak akan menjelaskan panjang lagi tentang apa itu related post,dan kegunaannya..
Saya membuat posting Related Post ini banyak versi, karena menurut pengalaman otak-atik yang saya lakukan dari penerapan ke-3 posting sebelumnya. Ada yang berhasil tetapi ada juga yang tidak berhasil (mungkin saya kurang teliti). Saya membuat posting yang ke-4 ini karena diantara ke-3 posting sebelumnya saya kurang suka..(hehehe ^^)..
Sob, ngak usah panjang lebar lagi. Langkah-langkahnya masih sama seperti biasa:
1. Login ke Blogger

2. Klik rancangan, Edit HTML dan jangan lupa centang kotak Expand Template Widget.

3. Kemudian cari kode ini ]]></b:sikn> dan paste kode dibawah diatas kode ]]></b:skin>



5. Cari kode <head> dan paste kode dibawah ini diatas kode <head>

#related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { color : #940f04; font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { color : #054474; font-size : 11px; text-decoration : none; } #related-posts a:hover { color : #054474; text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQC7E23bcD4vq2D2dws_DoU1oV9mRr49EY7AZMKN74RXaRu6ZjMBbfOZWGFH9ZWp1IT9rfFGmB65Bg0hZsgduzhT1qHobb5bhi-IWXivV2MVx55Lm6APtTqMXeWOY_kkbVjQ78BKSzBHg/s400/listarrow.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 16px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; }

6. Cari kode <data:post.body/> *) dan paste kode dibawah ini diatas kode <data:post.body/>

<script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break; } } } } function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; } } relatedTitles = tmp2; relatedUrls = tmp; } function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</ul>'); } //]]> </script>

7.  Simpan Template dan lihat hasilnya

<!--RELATED-POSTS-STARTS--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <font face='Arial' size='3'> <b>Related Posts: </b></font> <font color='#FFFFFF'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels& max-results=5"' type='text/javascript'/> </b:if> </b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if> <!--RELATED-POSTS-STOPS-->

Posting ini merupakan rekomendasi saya (saya menggunakan yang ini)

Semoga dapat membantu anda ^^...

Terima kasih sudah berkunjung...
Happy Blogging ^^......

Read more →