Cara membuat Related Post Bergambar Responsive

Membuat Related Post atau yang sering disebut dikalangan blogger yaitu artikel terkait pada sebua blog. Fungsinya adalah untuk meningkatkan interlink pada postingan dan juga dapat meningkat pageview pada blogger. Dengan memasang Related Post, maka secara tidak langsung akan mempermudah para pengunjung blog anda untuk membaca artikel-artikel yang terkait dengan yang anda saat ini baca. Sehingga dapat membuat pengunjung betah bertahan lama di blogger anda. Related Post atau Artikel Terkait banyak digunakan dikalangan para blogger, selain untuk mempermudah pengunjung melihat artikel-artikel yang berhubungan dengan yang dibaca, Related Post dapat memper-ganteng blogger anda^.^.

   Sebelum melakukan praktekk, silakan anda backup terlebih dahulu Template anda. Karena jika tidak sesuai dengan keinginan anda, maka dengan mudah membalikan seperti semula lagi.

Cara Pasang:

1. Masuk ke Blogger anda.
2. Template -> Edit HTML.
3. Temukan kode </head>
4. Copy-Paste kode berikut ini, tepat diatas kode </head>

<!--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:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' /> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

5. Jika sudah dipasang diatas </head> . Temukan kode ini dan letakkan diatas kode  
<div class='post-footer'>

  NB: Kode <div class='post-footer'> ada dua, jadi kalian pasang saja keduanya!

<!-- Related Posts with Thumbnails Code Start--> <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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <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=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://gudangite.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijlGDb2wiaUG7dQ_B-hcNv4ZErK5yMI5rLRFlSRf1lzkSdBvHfRlCWXYKiQniUMFUSsr8bYPF6NFb4-WiPlzx6Bilrdcx73EWPZvrMcPNGokuz27KE-NTRL15iUwu_O_3Xt7o9MoLlcd6N/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->

NB: Maxresults=5; Jumlah postingan di Related Post, bisa diubah 7
        Related Post = Bisa diubah menjadi Artikel Terkait

6. Save Template!

Untuk melihat Related Post berbagai macam, Silakan lihat Label Tags Related Post

   Sekian dari saya, Semoga Bermanfaat! Selamat Mencoba.

Read More

Cara Membuat Related Post Yang Paling Simple, dan Aman!

Related Post banyak dan berbagai macam bentuk, ada yang beserta dengan gambar ada juga yang bergerak dan ada juga sejajar ke kanan dan lain-lain. Sekarang yang saya postingkan kali ini adalah Related Post yang Simple dan Aman alias hanya dengan Teks dan Link saja. Fungsinya sama yaitu membuat artikel terkait. Jika anda mau seperti Related Post di atas, ikut langkah-langkah berikut ini:

NB: Silakan anda backup terlebih dahulu, misalkan Related Post ini tidak sesuai dengan keinginan anda, maka mudah untuk dikembalikan seperti semula!

Cara pertama:

1. Masuk ke Blogger anda.
2. Template -> Edit HTML
3. Copy - Paste kode berikut ini, tepat diatas kode ]]></b:skin> .

#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px solid #88daed;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#0973CF;font:12px Verdana}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV4M5JmtqOBuwx6Z8QNDA2WaeZjRMU4YYlAeIYpIoVe0p0amgcGK8cG5CX0gD97kmV0sXN580O1VpMxqLH1hESPQgQlyLumui4hIxkaeNj_TP4oF8vbckkRVWECY5AWhwfjwPVEwHErNM/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

4. Jika sudah? Temukan kode </head> 
5. Copy-Paste kode berikut ini, dan letak kan diatas kode </head> .
 

<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

NB: Kode yang berwarna biru, bisa anda ganti sesuka hati anda. Misalkan Artikel terkait

6. Jika sudah, Temukan lagi kode <data:post.body/>
7. Copy-paste kode berikut ini, dan letak kan dibawah kode <data:post.body/> Kode ini biasanya lebih dari satu, silakan pilih yang kedua!

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div><div class='clear'/>
</b:if>

8. Save Template!

 Upadte! Untuk Related Post Bergambar anda bisa -> Klik Disini -

Sekian Dari Saya. Terima kasih telah berkunjung dan Terima kasih telah membaca!
Semoga Bermanfaat!

Read More

Cara memasang Related Post Bergambar dengan Mudah

Related Post adalah sebagai artikel atau postingan yang masih dalam satu kategori atau istilahnya artikel terkait. Misalkan label nya tentang Tutorial Blogger, maka akan muncul semua tentang Tutorial Blogger. Related Post yang saya bisikan tips nya kali ini adalah Related Post Bergambar, " Gambar Disamping Hanya Pemanis" . Related Post yang saya berikan ini sejajar ke kanan, serta bergambar dan hemat ruang postingan anda.  Related Post tidak hanya menambah keren blog anda, tetapi juga membantu pageview bertambah. Postingan terkait ini sangat bermanfaat bagi blogger sendiri ataupun user. Sehingga memudahkan pengunjung menemukan artikel yang terkait, ataupun artikel yang menarik lainnya di blogger anda. Sebelum melakukan Tips ini, sebaiknya Backup terlebih dahulu Template anda, bisa dengan cara copy semua script HTML ke Notepad. Tujuannya adalah misalkan Related Post ini, tidak sesuai dengan keinginan anda maka dengan mudah mengembalikannya.

Cara pertama:

1. Masuk ke Blogger.
2. Template - Edit HTML
3. Copy - Paste kode berikut ini, dan letakkan di atas kode </head>

<!--Related Posts with thumbnails -->
<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:#00FF00;}
</style>
<script src='http://kucopas-js.googlecode.com/files/releatedimage.js' type='text/javascript'/>
</b:if>
<!--Related Posts With Thumbnails By gudangite-->

5. Jika sudah? Copy-Paste lagi kode berikut ini dan letakkan dibawah kode  
<div class='post-footer-line post-footer-line-1'>

<!-- Related Posts with Thumbnails -->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=7;
var relatedpoststitle="Related Post";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails -->

6. Simpan Template!


Dan, Taraaaaa Related Post telah terpasang di Blogger anda.

Screenshoot:

 

Thanks You For Reading.  Thanks You For Visited My Website^.^

 Semoga Bermanfaat!

Read More