Cara Buat Button Share di Blogspot

Membuat tombol share di blog sebenarnya salah satu cara untuk mendapatkan pembaca di blog lebih banyak. Karena, dengan memasang tombol share ini, pengguna internet yang sudah membaca, akan merasa sangat mudah untuk bisa membagikan kepada orang lain.

Belum lagi, jika artikel atau konten yang kalian tulis sangat bermanfaat buat pembaca dan calon pembaca di luar sana.

Google juga menilai blog atau website dengan cara melihat berapa banyak jumlah share dari pembaca dan tentunya yang paling banyak akan mendapat perhatian lebih. Ya, mendinganlah kalo nggak dapet perhatian dia, diperhatiin Google. Mendingankan..

Nah, pada panduan kali ini, Pangeran akan membagikan banyak sekali atau boleh dibilang kumpulan tombol share yang bisa kalian pilih sesuai selera masing-masing. Mulai dari yang memiliki efek, sampai yang responsive dan fast loading tentunya.

Oke, selengkapnya silakan baca dan pilih jenis tombol share mana yang paling keren untuk diterapkan di blog kalian.

Cara Membuat Tombol Share di Blog by Arlina Design

Inilah demo tampilan dari tombol share by Arlina Design :

1. Login ke Blogger.com > Template > Edit HTML. Caranya seperti ini :

2. Silakan cari code <data:post.body/>. Biar mudah, klik pada kotak HTML dan tekan CTRL + F, lalu copy dan paste code <data:post.body/> di kotak pencarian lalu Enter 2x. Begini hasilnya jika codenya ketemu :

Note : <data:post.body/> biasanya dalam satu template terdapat 1-4. Jadi, silakan pilih yang ke-2

3. Jika codenya sudah ketemu. Copy dan pastekan code di bawah ini, tepat di bawah code <data:post.body/> (jika ingin membuat tombol share di bawah postingan blog) atau tempat di atas code <data:post.body/> (jika ingin membuat tombol share di atas postingan blog).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-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='tombol-berbagi-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='tombol-berbagi-arlina-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-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='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-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='tombol-berbagi'>
<a class='tombol-berbagi-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='tombol-berbagi-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>

4. Cari kembali code ]]></b:skin> atau </style> pada Edit HTML. Biar mudah, klik pada kotak HTML dan tekan CTRL + F, lalu copy dan paste code ]]></b:skin> atau </style> di kotak pencarian lalu Enter. Begini hasilnya jika codenya ketemu :

5. Jika codenya sudah ketemu. Copy dan pastekan code di bawah ini, tepat di atas code ]]></b:skin>atau </style>.

/* CSS Share Button */
.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-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}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-arlina a{color:#999;transition:all .3s;}
.tombol-berbagi-arlina a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}
}

6. Pastikan dulu penempatan codenya sudah benar. Jika sudah, langsung klik Simpan Template.

Kelebihan Membuat Tombol Share Arlina :

• Fas Loading
• Responsive
• Rapi
• Share tampil pada new tab
• Menampilkan Judul Deskripsi dan URL

Kelemahan Membuat Tombol Share Arlina:

• Share link pada tombol twitter tidak disertai judul post
• Share twitter tanpa Username

Sumber : tulisanwortel.com