Related Posts with Thumbnails for Blogger

Alternatif lain untuk membuat related post with thumbnail, step by step :
1. Masuk ke akun Blogger Anda, pilih Layout > Edit HTML.  Jangan lupa centang "Expand Widget template"
2. Cari tag </head> lalu tindih dengan script dibawah ini :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

3. Lalu cari :

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

4. Lalu letakkan script berikut dibawahnya :

<!-- 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=6&quot;' 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=&quot;<data:post.url/>&quot;;
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. Untuk mengubah jumlah artikel terkait (related post) yang ingin ditampilkan, ubah angka pada bagian :

var maxresults=5;

6. Untuk mengganti title widget, ubah teks pada bagian :

var relatedpoststitle="Related Posts";

   

More about → Related Posts with Thumbnails for Blogger

Widget Google Translate

Google Translate merupakan penerjemah halaman web secara instan. Dengan memasang widget Google Translate ini blog kita akan lebih user friendly dan diharapkan pengunjung blog dari berbagai belahan dunia tidak akan kesulitan untuk membaca artikel blog kita.
Langkah-langkah untuk memasang widget Google translate :
1. Masuk ke situs google translate (http://translate.google.co.id)

2. Lalu pilih tab peralatan, akan tampil seperti berikut :

3. Pilih bahasa utama halaman blog kita, lalu pilih bahasa terjemahan  setelah itu copy script yang ada didalam kotak dibawahnya ke halaman blog kita.
4.  Untuk meletakkan kode google translate tersebut masuk ke Edit HTML pada bagian Page Layout
5.  Lalu save.
Atau bisa juga pakai alternatif berikut ini :
Copy paste script berikut ke template layout blog anda  :

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>

NB : script kedua tersebut saya peroleh dari tipsblogger.com

More about → Widget Google Translate

Related Post with thumbnail

Sudah banyak teman-teman blogger senior yang membahas bagaimana caranya membuat related post with thumbnail. Dari beberapa tutorial yang saya coba hasilnya kurang memuaskan/gagal. Bahkan related post yang saya coba terjadi duplikasi hingga 5 kali (maklum, saya buta sama sekali dengan bahasa html.. he...hee..). Setelah coba sana-sini nggak ada yang berhasil, akhirnya saya temukan solusi mudah yaitu memakai Linkwithin.
Tatacara bagaimana menggunakan widget related post with thumbnail dari linkwithin tidak akan saya bahas, karena sangat simple sekali dan sudah banyak juga blogger senior yang membahasnya. Jadi kali ini saya akan memberikan triks bagaimana menghilangkan thumbnail dan mengganti teks You might also like sesuai yang kita inginkan. :)
Okay yang pertama : untuk menghilangkan thumbnail, letakkan script berikut ini setelah tag <body> :

<script>linkwithin_text_only=

1</script>

yang kedua untuk mengganti You might also like letakkan juga script berikut ini setelah tag <body> :

<script>linkwithin_text='Your Custom Text:'</script>

Lalu Save. 

Perlu diketahui juga bahwa script di atas saya peroleh setelah konsultasi via e-mail dengan LILIYA dari Linkwithin.

Semoga bermanfaat... !

More about → Related Post with thumbnail

Print Friendly Button

Trik kali ini digunakan untuk menambahkan fitur Cetak pada postingan kita.   Dengan adanya tombol cetak ini, akan memudahkan pengunjung yang membaca blog kita untuk mencetak tulisan kita.  Langkah-langkah yang harus dilakukan untuk menyisipkan kode Print Button di blog sebagai berikut :
1. Log in ke akun Blogger
2. Klik Layout > Edit HTML
3. Centang Expand Widget Template
4. Cari  <div class='post-footer'>
5. Lalu letakkan script berikut ini di bawahnya :

<!-- BEGIN PrintFriendly Code --><b:if cond='data:blog.pageType == "item"'><div id='pfButton'><link href='http://cdn.printfriendly.com/printfriendly.css' rel='stylesheet' type='text/css'/><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><a href='http://www.printfriendly.com' id='printfriendly' onclick='window.print(); return false;' title='Print an optimized version of this blog post'><img alt='Print' src='http://cdn.printfriendly.com/pf-button.gif' style='border:none;'/></a></div><b:else/><div id='pfButton'><a expr:href='data:post.url + "?pfstyle=wp"' title='Print an optimized version of this blog post'><img alt='Print' id='printfriendly' src='http://cdn.printfriendly.com/pf-button.gif' style='border:none; padding:0;'/></a></div></b:if><!-- END PrintFriendly Code -->

More about → Print Friendly Button

How to create Read More

Continuing my previous post about read more scripts, this time I offer an alternative to read more on our posts.

Follow this step :

1. Go to "Layout" click "Edit HTML"

2. Click box "Expand Widget Templates"

3. Find this code

    ]]></b:skin>

  </head>

4. If  found copy code below and place it under </head> :

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

5. Find this code : <data:post.body/>

6. Replace with this code :

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span class='rmlink' style='float:left'><a expr:href='data:post.url'><span style='font-weight:bold;'>Baca Selengkapnya...</span></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

More about → How to create Read More

Read More Script

This code is used to cut our posting, and appear fully when we click Read More or More Link. This script will automatically cut our post and make a thumbnail when we insert image.
Follow this step :
1. Go to "Layout" click "Edit HTML"
2. Click box "Expand Widget Templates"
3. Press Ctrl + F (I used Firefox) and then type  <data:post.body>
4. If  found replace with this code :

<script type="text/javascript">

          summary_noimg = 430;
          summary_img = 340;
          img_thumb_height = 100;
          img_thumb_width = 120;
          </script>
          <script src="http://blogergadgets.googlecode.com/files/excerpt.js" type="text/javascript">
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <div expr:id='&quot;summary&quot; + data:post.id'>

          <data:post.body/></div>
          <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
          </script>
          <span style="float: right;"><a expr:href="data:post.url" href="">Read more</a></span>
          </data:post.body>
          <b:if cond="data:blog.pageType == &quot;item&quot;"><data:post.body></data:post.body>

</b:if>

5. Save

Source : www.deluxetemplate.com

More about → Read More Script