Thursday, 21 March 2013

Memasang Widget Sharing is Caring Di Bawah Postingan Blog sederhana



















Tombol Sharing is Caring
Cara Memasang Widget Sharing is Caring Di Bawah Postingan Blog-Memasang widget sharing atau membuat sosial bookmark di blog menajdi keharusan di era social media sekarang ini. Dengan tombol sharing tersebut pengunjung dapat men-share artikel blog tersebut ke akun facebook, twitter, google+ dan lainya. Pada postingan sebelumnya Cara Design Blog sudah memberika tutorial blogger cara membuat tombol share button di bawah postingan blog.

Pada kesempatan ini saya akan berikan tips blog cara membuat widget sharing is Caring di bawah postingan blog.
Apa fungsi widget sharing is caring?
Funginya sama seperti share button lainya, yaitu untuk memudahkan pengunjun untuk sharing atau berbagi artikel blog ke sosial media. Namun tampilan widget ini lebih cantik.


Bagaimana cara memasang widget sharing is caring?

Silahkan ikuti tips blogger berikut ini:

1. Login Dasbor Blog.
2. Template > EDIT HTML > Centang Expand Widget Template.
3. Cari kode <data:post.body/>

Biar lebih mudah mencari pake CTR+F

4. Letakan kode berikut tepat dibawah <data:post.body/>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='http://blazerracing.blogspot.com/'><img alt='Blazer Blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1cM0DnVg13ti3W4hmblQJNjIuybiaGT9a7-vBl8PvkInUeqZRZitX5wCA-nCw0HuccTORCFIUiuewCT6XW2NLIq3CdVasljGI279H1gEU_nJe0S7-rYEOloxjhEBXMlkJGJ2J8KnMALgF/s1600/best+blogger+tips.png'/></a><style>
img{border:0;}
#wrapper{width:488px; height:110px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwxVklHJ7n6C8cbHgQZinLOg2MaiyThOKiXy8G8akTajrFmvkP9kUJBpfyJFsvhlAJaeipRzIOCQDNHIHg04d2HK7bEF7_o4xVZlcbubaDal4LX_yFMVe_hXmCKqNpqGUphbveNs-TMMs/s1600/sharing+is+caring+hearts.jpg); position:relative; background-repeat:no-repeat; background-color:transparent;}
#wrapper ul{position:absolute; width:600px; top:42px; left:3px; list-style-type:none;}
#wrapper li{float:left;}
</style>
<div id='wrapper'>
<ul>
<li>
<!-- Facebook -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Facebook' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Bm722QUPeK9B2SyPnsoRcJoGePt5v37WCCiP_2srvWI3egKV4aMC2wpIEj7pvkSjBfcxm3x5vora4SSCc-lA1Of5wC-nnTZNupOdjF4FPk2ssix9B8GiATyBehFzPy9Wg9wvvPjfXME/s1600/facebook.png' width='48'/></a>
</li>
<li>
<!-- Digg -->
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0FwnSVhyphenhyphen-kDNNIqJ4yXjffi2u5GXdr0JukZxU_51GXe1U1GK5nLeFkFrBhjiUuEtTUSUs1E8J7Qfc7AHbCUE3sRi7jMo3Ge3LI-i51n30kcQf6bD1Mm_uJCaVIswZHUyjLVyDXPzOm7M/s1600/digg.png' width='48'/></a>
</li>
<li>
<!-- Stumbleupon -->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumble This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh9BRPgDogl5zP0psiFA1lTlBStm2c9kEfHvdX6RA1Lpzv1P5jpo6L4SszetGGJUACLU1D_2NBBcgix5TXqSpaXvriXxfcyBq704Z6xPlDu-gqhEw3zZLKQEfNw08LBhAfMZKZ0ChT1hg/s1600/stumble.png' width='48'/></a>
</li>
<li>
<!-- Twitthis -->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Tweet This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXXvqCXDamGj-sWZ0P0WrYqsDrrHMv9r4C44nYcAD1srCUXTkX-2-ipTvKl_jKpwO6xI4P602-ZE01dxOfN5ia-Lva8g91Sayn-VovAeCK2KI3er16PZqWUmjfbdF7akIJwOth6-cPWVE/s1600/twitter.png' width='48'/></a>
</li>
<li>
<!-- Delicious -->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Save Tis Post To Delicious' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLXD2JpLoDReJVg9OeSHvn4-O0_nMxvbVglGpT2o7LY2xxj8z97F4zsCEZU_MhdA-ub3QOpugi4obE1qrnph_1Rt_F5UTTh46KEIDyh9aT1fJ4_Mz6pDSvVRERoSjMhVYVMNSTsSBrja8/s1600/delicious.png' width='48'/></a>
</li><li>
<!-- Design Float -->
<a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Float This Post' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAPt2LrPYiAgXn0uzkeZDqTKUXA6qE77zhvQsiJMiZcQOMFqHCBQgNsrGvGLRbLNT4RDohk2G5ttoFuVUrv7nIFQOpfguvGJJnCbVsxJs52XRXxD8qrvrB66WIjZWtHBoIZ2FGxQ2stOE/s1600/designfloat.png' width='48'/></a>
</li><li>
<!-- Reddit -->
<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Reddit' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiljN3-1UktQK3pTmpnrMtxWlc9i4bZ-m317fDJef4FfUPn_Z6u7ecqKZDFTfMZTuIuI1UP5HovHF5J26IUbQfknaeoK5nOmsiWUFbl7zR0yKgeuI6r0t9G-HD09b606293qf4Kjac6ZY/s1600/reddit.png' width='48'/></a>
</li><li>
<!-- Technorati -->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Bookmark On Technorati' height='48' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzWNWU5ArrEKdKcyLeZIHeZ8e_tbpzVZvpbsoCxfauPulZ77COhFud_jQOZih_pOzgRF9-fLaBhtjiCjbZTDIZGsAlzCfhuO9rrz_vnWkdZ7LQZbP4m2es613li76vvuZGZuNnWw0rnss/s1600/technorati.png' width='48'/></a>
</li></ul></div>
</b:if>

5. Klik Preview.
Untuk melihat apa masih ada galat atau kesalahan. Bila ada kesalahan silahkan diulangi lagi dan pastikan kode diletakan sesuai petunjuk. Jika tidak ada kesalahan lanjutkan ke langkah berikutnya.

6. Save Template.
Sekarang widget sharing is caring di blog kamu sudah siap.

No comments:

Post a Comment