√ Memasang Tombol Share Ala Template Arlina Design

Memasang Tombol Share Ala Template Arlina Design

6/22/2017

Memasang Tombol Share Ala Template Arlina Design - Tombol Share di blog berfungsi sebagai tombol praktis dan otomatis berada di setiap artikel yang bertujuan untuk membagikan artikel blog di berbagai macam social media seperti Facebook, Twitter, Google+, dan lain-lain.

Sudah tahu dengan Blog Arlina Design? Blog ini banyak menciptakan karya-karya template blogger yang keren dan bergaya flat, nah kali ini saya akan berbagi cara Memasang Tombol Share Ala Template Arlina Design. Berikut tutorialnya

Memasang Tombol Share Keren Ala Template Arlina Design

1. Login ke blog > Buka Template > Salin kode di bawah ini sebelum ]]></b:skin> atau </style>

/* 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. Kemudian letakkan kode HTML pemanggilannya tepat di bawah <data:post.body/>, biasanya ada lebih dari 1 kode <data:post.body/>, letakkan di bawah <data:post.body/> yang ke 2, atau coba satu persatu, atua sobat bisa juga meletakkannya di tempat yang sobat inginkan, seperti di atas artikel terkait

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:post.id' itemprop='postId'/>
<div class='clear'/><div class='sharepost'>
<ul>
<li><a class='twitter' expr:href='&quot;https://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;https://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;https://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;https://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;https://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>
</b:if>

3. Langkah terakhir klik Simpan Template.

Jika ada yang kurang jelas silahkan bertanya melalui kotak komentar. Semoga Bermanfaat.