Custom Button Sharing Post To SocialMedia Custom Button Sharing Post To SocialMedia - Berguru IT - Tutorial Visual Basic, Networking, Tips dan Trik
VB.Net

VB.Net Tutorial Untuk pemula

Instant Article

Cara Membuat Instant Article Untuk Blogger

logo

Custom Button Sharing Post To SocialMedia

Tips membuat sharing button di blog

Tips Membuat Custom Button Sharing di Blog

Salah satu cara untuk meningkatkan trafik adalah dengan membagikan artikel ke media sosial baik ke teman facebook, twitter, google+ maupun ke yang lainnya, sebenarnya ini cara yang efektif untuk mengenalkan atau menyebarkan artikel-artikel yang telah dibuat.

Disini saya cuma mau berbagi pengalaman tentang cara membuat tombol sharing ke media sosial sebagaimana yang kita ketahui bahwa tombol sharing sebenarnya sudah disediakan oleh blogger namun sepertinya banyak yang kurang puas dengan tampilannya yang seperti ini :

tampilan sharing button blog

Nah kalau sahabat mau merubah atau custom sendiri seperti yang telah saya buat di bawah ini :

Tampilan sharing button custom


Okeh langsung aja kita ke TKP.

1. Buka blogger sobat, lalu pilih template dan pilih Edit HTML

cara membuat custom button

2. Setelah tampak area kode html cobalah untuk mencari kata/kode <data:post.body/> dengan cara klik diarea kode htmlnya dan gunakan Ctrl + F untuk memulai pencarian, contoh :

cara mempatkan code di edit html blog

3. Jadi kalo mau menaruh tombol diatas postingan, taruh kode (copy & paste) dibawah, tepat diatas <data:post.body/>

4. Kemudian jika ingin menaruh tombol share di bawah postingan, maka copy-paste kode dibawah tepat dibawah <data:post.body/>

5. Berikut code yang telah saya siapkan untuk bisa di copy dan pastekan ke tempat yang telah ditentukan.

----masukkan kode CCS dibawah ini di atas kode </style> atau di atas kode /]]></b:skin> ----------
.share-icon {
display:block;
position:relative;
height:43px;
line-height:43px;
padding:10px;
border-top:1px solid #dadada;
border-bottom:1px solid #dadada;
margin:auto
}

.fa-facebook-official{
display: inline;
float: center; 
position: relative; 
width: 80px; height: 40px;
padding: 1px;
border: 0;
box-shadow: 0;
background: #3b5998; 
border-radius: 3px;
cursor: auto;
}

.fa-google-plus{
display: inline;
float: center; 
position: relative; 
width: 80px; height: 40px;
padding: 5px;
border: 0;
box-shadow: 0;
background: #DC4E41; 
border-radius: 3px;
cursor: auto;
}

.fa-linkedin{
display: inline;
float: center; 
position: relative; 
width: 80px; height: 40px;
padding: 5px;
border: 0;
box-shadow: 0;
background: #0077B5; 
border-radius: 3px;
cursor: auto;
}

.fa-reddit{
display: inline;
float: center; 
position: relative; 
width: 80px; height: 40px;
padding: 5px;
border: 0;
box-shadow: 0;
background: red; 
border-radius: 3px;
cursor: auto;
}

.fa-twitter{
display: inline;
float: center; 
position: relative; 
width: 80px; height: 40px;
padding: 5px;
border: 0;
box-shadow: 0;
background: #00aced; 
border-radius: 3px;
cursor: auto;
}

.fa-print{
display: inline;
float: center; 
position: relative; 
width: 80px; height: 40px;
padding: 5px;
border: 0;
box-shadow: 0;
background: #787878; 
border-radius: 3px;
cursor: auto;
}

.fa-facebook-official:hover {
  background-color: #052871;
}

.fa-google-plus:hover {
  background-color: #8a0f04;
}

.fa-linkedin:hover{
background-color: #034b71;
}

.fa-reddit:hover {
background-color: #940101;
}

.fa-twitter:hover {
background: #035a7b;
}

.fa-print:hover {
background: #444343;
}

------- Kode HTML ini masukkan tepat di atas <data:post.body/> atau dibawahnya terserah aja--
<pre data-codetype="HTML" title="HTML"><b:if cond="data:blog.pageType == &quot;item&quot;">
<div class="share-icon">
<!-- Facebook -->
<a expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url" href="https://draft.blogger.com/null" onclick="window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;" rel="nofollow" target="_blank">
<button alt="Facebook" aria-hidden="true" class="fa fa-facebook-official" style="color: white; font-size: 16px;">
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"> 
</a>
    
<!-- Google+ -->
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'>
<button alt='Google' aria-hidden='true' class='fa fa-google-plus' style='font-size:16px;color:white'/>
</a>
    
<!-- LinkedIn -->
<a href='http://www.linkedin.com/shareArticle?mini=true&amp;url=https://www.berguruit.com&amp;' rel='nofollow' target='_blank'>
<button alt='LinkedIn' aria-hidden='true' class='fa fa-linkedin' style='font-size:16px;color:white'/>
</a>
    
          
<!-- Reddit -->
<a href='http://reddit.com/submit?url=https://www.berguruit.com&amp;title=berguru it' rel='nofollow' target='_blank'>
<button alt='Reddit' aria-hidden='true' class='fa fa-reddit' style='font-size:16px;color:white'/>
</a>
    
<!-- Twitter -->
<a expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'>
<button alt='Twitter' aria-hidden='true' class='fa fa-twitter' style='font-size:16px;color:white'/>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
</button></a>
<!-- Print -->
<a href="javascript:;" onclick="window.print()">
<button alt="Print" aria-hidden="true" class="fa fa-print" style="color: white; font-size: 16px;">
</button></a>
</div>
</b:if>

----Ini jangan lupa taruh di atas------
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Demikian sahabat artikel tentang cara memasang tombol sharing pada blog, tutorial ini saya buat berdasarkan oprek-oprek sana-sini dan telah saya aplikasikan kedalam blog saya ini. Jika ada yang ingin ditanyakan silahkan di komen aja... Jangan lupa subcribe ya...


Tags

0 Komentar untuk "Custom Button Sharing Post To SocialMedia"