Cara Mudah Membuat Tombol Widget Social Share di blogspot

Gudang informasi - Kali ini saya ingin berbagi informasi mengenai Cara Mudah Membuat Tombol Widget Social Share di blogspot

Ikuti langkah-langkahnya sebagai berikut :
1. Login ke  Blogger.com > Design > Edit HTML
2. Cari kode data:post.body dengan ketik CTRL + F
3. copy kode dibawah ini tepat dibawah kode tersebut :

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<table border='0'> 
<tr>
<td>
<!--Stumbleupon--> 
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='StumbleUpon Button Link'/></a> 
</td>
<td> 
<!-- Twitter --> 
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='Twitter Button Link '/></a> 
</td>
<td> 
<!--DIGG--> 
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img alt='Digg This' src='DIGG Button Link '/></a> 
</td>
<td> 
<!--Email a Friend--> 
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'> 
              <img alt='' src='EMAIL Button Link'/> 
          </a>
</td>
<td> 
<!--Facebook--> 
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action= like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; margin-top:16px; height:40px;'/> 
</td> 
</tr> 
</table></b:if>

4. Klik Save
Lihat perubahan yang terjadi pada blog anda. Bila muncul tombol widgetnya berarti anda berhasil. Bila tidak di cek lagi keslahan penempatan kode scriptnya pada edit theme blog anda. Selamat mencoba dan berhasil. Semoga bermanfaat. Ditunggu komennya.........!!!

sumber : http://sosialwebinfo.blogspot.com/

Read More

Cara membuat related posting dengan gambar

Bagi anda yang sudah menggunakan atau ingin menggunakan Thumbnail Related Posts (artikel terkait bergambar), tentu akan lebih tertarik menggunakannya, karen tampilannya cukup menarik dengan adanya gambar, namun ada sedikit kekurangan dari tool yang satu ini, yaitu memakan banyak tempat di halaman blog. Maka dari itu, kebanyakan blog yang saya kunjungi meminimalkan jumlah related post tersebut, apalagi dengan ukuran halaman posting yang sempit. Maka dari itu untuk memaksimalkannya yaitu dengan alternatif marquee(berjalan).

Nah, untuk contoh Thumbnail Related Posting menggunakan metode Marquee ini bisa sobat lihat disini.

Pada postingan sebelumnya sudah dipaparkan cara membuat Related Posts + Thumbnail, sobat bisa menerapkan terlebih dahulu tutorial Thumbnail Related Postsnya disini, namun cukup terapkan Code CSSnya saja (Script code yg pertama)

Untuk membuat Thumbnail Related Posts ini agar bisa ditampilkan dengan jumlah yang banyak yaitu dengan metode Marquee, ada sedikit perubahan yang akan dilakukan pada script code yang kedua.

Nah, untuk memulainya :

1. Silakan lihat cara membuat Thumbnail related posts disini (Cukup terapkan code CSSnya saja/ code yang pertama)

2. Setelah sobat terapkan poin pertama diatas, sekarang silakan cari code ini :

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

atau

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

3. Jika sudah ketemu salah satu code diatas, letakkan code dibawah ini setelah salah satu code diatas :

<!-- Marquee Serbablog 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=12&quot;' type='text/javascript'/></b:if></b:loop>

<h3><b>Related Posts</b></h3>

<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=10;

var relatedpoststitle=&quot;&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script></marquee>

</div><div style='clear:both'/>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>

<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>

</b:if>

</b:if>

<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

- Untuk menampilkan jumlah postingan, sobat bisa merubah code yang berwarna merah

- Untuk mengganti title, sobat bisa merubah code yang berwarna biru

4. Simpan dan lihat hasilnya

Selamat berkreasi, Semoga bermanfaat

Sumber : serba-seru.blogspot.com

Read More