Tombol Share Keren Ala Arlina Design

Tombol share blog ala Arlina Design, kenapa alirna design ya, karna css share button ini saya ambil dari salah satu template yang di share mbak Arlina, berhubung saya sudah terlanjur pakai template ini dan sudah telanjur design juga jadi saya putuskan untuk tidak mengganti template dan hanya mengambil tombol share dari template Arlina design yang keren. Demonya tombol share tersebut dapat sobat lihat di blog ini, kurang lebih kira-kira seperti itulah.

Tutorial Membuat Tombol Share Ala Arlina Design

1.CSS
Letakan kode CSS berikut di atas ]]></b:skin> atau </style> template sobat, ini berfungsi sebagai pembentuk dari tombol share tersebut.

/* CSS Share Button Arlina Design */
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}

2 .Berikutnya
Letakan kode berikut di atas </head> template blog sobat. 

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

3. Terakhir Penerapan HTML
Letakan kode berikut di bawah <data:post.body/> nomor 2 di dalam template sobat, kalau tidak muncul, silahkan cobakan saja pada kode <data:post.body/> yang lainnya satu per satu karna kode <data:post.body/> ini biasanya lebih dari satu.

<div class='clear'/><div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' 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' target='_blank' title='LinkedIn Share'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank' title='Pin It'><i class='fa fa-pinterest'/>Share</a></li>
</ul>

</div> 

Dan terakhir jangan lupa simpan template blog anda. 

• Tweet
• Share
• Share
• Share
• Share