Panduan Membuat Tombol Bagikan dibawah Postingan Blog

Panduan Membuat Tombol Bagikan dibawah Postingan Blog

Sobat belajar | terbaik

Elementary-school | Sobat belajar yang terbaik, Belajar adalah kunci suksesnya seseorang untuk membangun diri dan sekitarnya untuk menjadi lebih baik dan maju. Banyak hal yang kiranya dapat membangun dan memudahkan untuk dipelajari, mari untuk tetap belajar dengan penuh semangat dan keikhlasan dan jadikan hal yang sukses sebagai acuan untuk menjadi lebih baik dan bisa kita bagikan atau Share pada sobat-sobat kita.

Semakin banyak artikel atau tutorial yang membangun dan menjadi inspirator bagi sobat semua untuk membuat hal yang sama bahkan  dari yang kita angan-angankan. Dan semua itu dapat kita bagikan melalui Media sosial maupun jenis lainnya. Berikut ini PojokSD ingin berbagi buat sobat semua, terutama buat Blogger pemula sama seperti PojokSD yang masih ingin lebih baik.

Berikut ini Panduan Membuat Tombol Bagikan dibawah Postingan Blog lebih simpel untuk di pahami, berikut ulasannya :

1. Silahkan sobat Log in diakun blog anda.
2. Pilih Tema >> Edit HTML
3. Lalu letakan kode berikut ini di atas Script ]]></b:skin> 
/* Tombol Share */
.share-judule {display: inline-block;margin: 0;color: #afafaf;text-transform: uppercase;
font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500;}
#share-container {margin: 20px auto;overflow: hidden;}
#share {margin:0 0 8px;padding:0;overflow:hidden}
#share p {display: block;padding: 5px 8px !important;margin: 0 3px 3px 0;font-weight: 700;
text-align: center;text-transform: uppercase;}
#share a {width: 25%;height: 40px;display: block;font-size: 24px;color: #fff;
transition: opacity 0.15s linear;float: left;text-align: center;}
#share a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)}
.wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222}
.wa-button i{font-weight:400;margin:0 10px 0 0}
.label-line {text-align: center;margin-bottom: 6px;position:relative;}
.label-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute;
top: 50%;left: 0;margin-top: -2px;}
4. Kemudian letakan kode script berikut ini di atas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
5. Selanjutnya silahkan Letakan kode script dibawah ini sesudah/dibawah kode <data:post.body/> (Letak kode ini biasanya ada beerapa, silahkan pilih urutan kedua atau yang ketiga) bisa kita ketahui dengan melakukan preview tema kita.
<div id='share-container'>
<div class='label-line'>
<p class='share-judule'>Bagikan Artikel ini</p>
</div>
<div id='share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.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' style='background:#3b5998;' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.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' style='background:#c0361a;' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' 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' style='background:#4099ff;' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a>
<a data-action='share/whatsapp/share' style='background:#43d854' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'></i></a>
</div>
</div>
6. Terakhir pilih Simpan dan liat hasilnya Sobat.

 Demikian Panduan Membuat Tombol Bagikan dibawah Postingan Blog semoga bermanfaat buat sobat semua, salam belajar....😊😊😊