Cara Membuat Tombol Share Media Sosial Dibawah Posting Blog

Share Media Sosial adalah media berbagi online yang terintegrasi dengan halaman posting blog sehingga secara otomatis akan membagikan isi entri posting pada media sosial dimaksud dengan hanya meng-klik tombol share tersebut. Untuk penempatannya bisa diatas entri posting maupun tepat dibawah entri posting.

Tombol Share Media Sosial akan mempermudah visitor untuk berbagi isi posting keteman lain lewat media sosial dan juga akan menambah cantik tampilan pada entri posting blog dan kemungkinan besar akan kembali lagi di lain waktu.

Penempatan tombol ini sangat mudah, hanya perlu sedikit konsentrasi pada kode <data:post.body/>, kode ini biasanya ada dua atau tiga, yang akan ditambah dengan HTML dibawah ini biasanya pada kode terakhir atau nomor dua dari yang terakhir, jika kode itu ada tiga.

Cara meletakkan Tombol Share Media Sosial pada blog.

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>.

/* Skin Design Share */

.skin-design-share{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}

.skin-design-share-fb,.skindesign-share{float:left;width:21%;padding:0 10px;height:inherit}

.skin-design-share-tw,.skindesign-share,.skindesign-share-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}

.skindesign-share-fb,.skindesign-share-tw,.skindesign-share-gp,.skindesign-share-lin,.skindesign-share-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPPP4NJuSPFmcwoXxqSeAoZ75WChBbUy2fgLsr0FftCanZMdi4w3biE3blKXO1mJNGDOwPgpazlOxDxfpc9CNgbTNYudOxebEpmFloKJbhY6y-BSRfR0rc7UDlC0zxmpyCwyxvDRoatORU/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}

.skindesign-share-fb-label{color:#2d609b}

.skindesign-share-fb-label,.skindesign-share-tw-label,.skindesign-share-gp-label,.skindesign-share-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}

.skindesign-share-tw{background-position:0 -43px}

.skindesign-share-tw-label{color:#00c3f3}

.skindesign-share-gp{background-position:0 -86px}

.skindesign-share-gp-label{color:#f00}

.skindesign-share-lin{background-position:0 -129px}

.skin-design-share a{color:#999;transition:all .3s;}

.skin-design-share a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){

.skindesign-share,.skin-design-share-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}

.skindesign-share,.skin-design-share-tw,.skindesign-share-lk{float:left;width:48%;padding:0;border-left:0}

}

Cara memanggil CSS diatas pada Template blog.

Letakkan HTML berikut tepat diatas kode <data:post.body/>, biasanya <data:post.body/> yang kedua.

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

<div class='skin-design-share'>

<div class='skin-design-share-fb'>

<a class='skindesign-share-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>

<a class='skindesign-share-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>

</div>

<div class='skin-design-share-tw'>

<a class='skindesign-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>

<a class='skindesign-share-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>

</div>

<div class='skindesign-share'>

<a class='skindesign-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>

<a class='skindesign-share-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>

</div>

<div class='skindesign-share'>

<a class='skindesign-share-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>

<a class='skindesign-share-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>

</div>

</div>

</b:if>

Jika semua selesai dan sesuai dengan pemaparan diatas, maka langkah selanjutnya klik tombol SAVE Template dan lihat hasilnya.

Result

Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.