Saturday, February 25, 2017 Blogging Tips

Cara membuat tombol share dibawah judul atau di akhir postingan Style 1

Hmmmm mungkin artikel ini sudah banyak diinternet dan cukup banyak yang menyediakan. Tetapi ngga papa, biar agan" ga perlu pindah blog langsung ada semua di sini.

Nah, disini saya akan memberi tahu cara membuat tombol share dengan posisi dibawah judul postingan. Agan bisa liat sendiri contohnya yang saya pasang di blog saya ini. Nah untuk gambarangya seperti di bawah ini:

cara memasang tombol social share button di blogger dengan mudah 3.JPG

Untuk cara pemasanganya silahkan disimak... Cekidot

Cara pemasangan:

Pertama, silahkan pergi ke dashboard blog Blogger Anda
Setelah itu, masuk ke menu Template--> Edit HTML
Tekan tombol CTRL+F (tombol yang berfungsi untuk mencari kata/kode) secara bersamaan di keyboard, kemudian cari kode <head>

Jika sudah, copy-paste script dibawah ini tepat dibawah kode <head>

Code:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian cari kode <data:post.body/>

Jika sudah, copy-paste script dibawah ini tepat diatas kode <data:post.body/> jika Anda ingin tombol social share muncul dibawah judul, dan pasang script dibawah ini tepat dibawah kode <data:post.body/> jika Anda ingin tombol share muncul di akhir artikel.

Code:


<style>

.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 .twitter{background-color:#55acee;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .facebook{background-color:#3b5998;}

.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}

.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}

<b:if cond='data:blog.pageType == &quot;item&quot;'>
.sharepost li .fa:before{margin-right:5px}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
   <div class='sharepost'>
     <ul>

       <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='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='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'><i class='fa fa-linkedin'/>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='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'><i class='fa fa-pinterest'/>Share</a></li>
     </ul>

   </div> </b:if>

Kemudian klik tombol Simpan template
Tada! Kini tombol social share flat design dengan counter sudah terpasang di blog Anda

Bagaimana? mudah kan?

Masih belum paham silahkan coment, insyaalloh saya balas dengan cepat dan sebisa saya..

Dan selanjutnya saya akan membahas membuat tombol share di bawah postingan, untuk melihatnya silahkan baca disini.

Posted by Iman Faizal

Cara membuat tombol share dibawah judul atau di akhir postingan Style 1

1 Response to "Cara membuat tombol share dibawah judul atau di akhir postingan Style 1"