Cara Membuat Tombol Share di Bawah Posting Blog

Cara Membuat Tombol Share di Bawah Posting Blog - Seiring berkembangnya zaman kini nampaknya jejaring sosial secara keseluruhan 'hampir' dapat melengserkan kedudukan telfon dan sms, pasalnya para pengembang jejaring sosial selalu menghadirkan sesuatu invoasi atau gebrakan-gebrakan yang baru agar tetap menjaga konsistensinya di era yang semakin digital ini, kita ambil contoh saja seperti jejaring sosial twitter, facebook, wechat, line, dan whatsapp, hampir dari setiap masing-masing jejaring sosial tersebut memiliki fitur dan interseting-nya tersendiri. Selain sms kini kedudukan telfon 'berbayar' (provider) juga nampaknya mengalami penurunan dikarenakan hadirnya layanan free call (telfon gratis) yang bisa kita gunakan hanya dengan koneksi internet tanpa membutuhkan pulsa tambahan, seperti contohnya skype, kakao talk, dan line, yang membuat orang lebih interesting lagi kepada aplikasi messenger semacam itu adalah karena mereka bisa membuat grup untuk berdiskusi dan melakukan free call/video call seperti yang sudah saya tegaskan tadi.

Kita langsung masuk ke pokok pembahasanya saja ya, dari kisah yang sedikit saya ungkapkan diatas, artinya tidak menutup kemungkinan jejaring sosial akan menjadi salah satu sarana untuk mendatangkan traffik blog terbesar selain search engine, pasalnya sekarang ini sudah 'hampir' seluruh kalangan masyarakat Indonesia mengenal yang namanya jejaring sosial, bahkan sampai kepelosok-pelosok negri ini, apalagi jejaring sosial yang paling familiar yaitu 'facebook', pastinya sudah tidak asing lagi di telinga kita bukan.

Sesuai dengan topik kita kali ini sekarang saya akan kembali membahas seputar tutorial blogger, khususnya tentang bagaimana cara membuat tombol sharing di bawah postingan blog, seperti yang sudah saya utarakan tadi diatas, dengan memasang widget ini artinya anda akan 'menambah' kepopuleran blog anda, karena dengan widget ini pengunjung akan semakin mudah untuk merekomendasikan atau merefrensikan artikel yang mungkin ia atau kerabatnya butuhkan, karena di zaman yang semakin kompleks ini tampaknya orang-orang semakin haus akan teknologi dan informasi yang sudah mendunia.

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML > Lanjutkan.

4. Centang box 'Expand Template Widget'.

5. Cari kode <data:post.body/> menggunakan CTRL+F, dan jika anda sudah memasang read more otomatis, pilihlah kode yang ke-2.

6. Lalu letakkan kode di bawah ini tepat di bawah kode <data:post.body/> yang ke-2 tadi.

<style>

/*--------Social Sharing Widget Below Blog Post ------*/

.sharebelow a {

display:block;

height:48px;

width:48px;

padding:0 4px;

float:left;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRXoIio2_ebTBHb21Bdce7TYGWAwo6JqGg_jO97tf1k4ADNCaRhkS_yfvW4oDGNaZY-J-LFYCel_GJ6crZ4CouDAoxhOvmaIEVK8VOt2B23LaGXmYAKFzv_1s433-8NkizkqVXttz_k4/s1600/sharebelow.png) no-repeat;

}

.sharebelow a.googleplus {

background-position: 0px -348px;

}

.sharebelow a.googleplus:hover {

background-position: 0px -406px;

}

.sharebelow a.pinterest {

background-position: 0px -464px;

}

.sharebelow a.pinterest:hover {

background-position: 0px -522px;

}

.sharebelow a.delicious {

background-position: 0px 0px;

}

.sharebelow a.delicious:hover {

background-position: 0px -58px;

}

.sharebelow a.digg {

background-position: 0px -116px;

}

.sharebelow a.digg:hover {

background-position: 0px -174px;

}

.sharebelow a.stumbleupon {

background-position: 0px -812px;

}

.sharebelow a.stumbleupon:hover {

background-position: 0px -870px;

}

.sharebelow a.technorati {

background-position: 0px -928px;

}

.sharebelow a.technorati:hover {

background-position: 0px -406px;

}

.sharebelow a.twitter {

background-position: 0px -928px;

}

.sharebelow a.twitter:hover {

background-position: 0px -986px;

}

.sharebelow a.facebook {

background-position: 0px -232px;

}

.sharebelow a.facebook:hover {

background-position: 0px -290px;

}

.sharebelow a.reddit {

background-position: 0px -580px;

}

.sharebelow a.reddit:hover {

background-position: 0px -638px;

}

.sharebelow a.rss {

background-position: 0px -696px;

}

.sharebelow a.rss:hover {

background-position: 0px -754px;

}

.shareandbookmark{

margin:10px 0px;

color:#333333;

font-weight:bold;

font-size:18px;

font-family:sans-serif;

}

</style>

<div class='sharebelow'>

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

<div class="shareandbookmark">

Kindly Bookmark and Share it:</div>

<!--Facebook-->

<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!--Google Plus-->

<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

<!-- Twitter -->

<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!-- Pinterest -->

<a class='pinterest' href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- Delicious -->

<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--Stumble-->

<a class='stumbleupon' 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' title='Stumble this :&gt;'/>

<!--DIGG-->

<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>

<!-- Reddit -->

<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>

<!--RSS -->

<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' target='_blank' title='Bookmark :&gt;'/>

</b:if></div>

<div style="clear:both"/>

7. Klik 'save template', dan selesai.

Bagaimana? mudah bukan membuat tombol share di blog agar blog kita lebih populer dan dikenal masyarakat luas. Baca juga tutorial blog tentang cara custom permalink di blog, agar blog kita lebih seo friendly di mata search engine. Demikian tutorial blog tentang cara membuat tombol share di bawah postingan blog, semoga bermanfaat, dan selamat mencoba. Blogging Is Part Of My Life...

Share this

Author : Admin

Related Posts