T10/25/2016

Cara Membuat Tombol Share Flat Arlina Design

Tombol share berguna untuk membagikan postingan blog kalau postingan tersebut bermanfaat untuk pembaca lainnya ke sosial media seperti facebook,twiter,bbm,line,whatsapp, dan lainnya

Baca Juga: Menghapus Tombol Share di blog

Tombol share yang saya bagikan dengan tema material design buatan arlina design.
Pasti kamu ada yang sudah tau arlina design kan? Yang blognya keren gitu.. 😄

Tombol sharenya seperti ini:

Nah sekarang kita pasang tombol sharenya
Masuk ke blogger>template>edit html

1. Cari kode dibawah ini

<data:post.body/>

2. Copy Kode dibawah ini dan pastekan di bawah kode di atas tadi

<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;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;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>


3.cari kode ]]></b:skin>

4. Sesudah cari kode di atas copy kode di bawah dan pastekan sebelum kode di atas

./* 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('http://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}}


5. Simpan template dan lihat blog kamu. pasti hasilnya keren... 😀

Show/Hide Comment

Muat Lebih Banyak
About Author

Menjadi Seorang Blogger Yang Berguna Untuk Orang Lain Dan Tetap Berbagi Ilmu Walau Hanya Sepotong Kata
Follow Me :
Related Article