Cara Memasang Tombol Share Di Blogspot

Hai. kali ini ZTN CODE berkesempatan memberikan Tutorial Cara Memasang Tombol Share Di Blogspot, Oke Langsung Sajah kalian simak

---

Tampilan Tombol Share akan Seperti ini

---

1). Login Terlebih dahulu ke Blog kalian "Tema Edit Html"

2). Letakan Kode html di bawah ini Tepat di atas kode ]]></b:skin>

Tambahkan CSS

/* 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;}

3). Berikutnya Letakan Kode html di bawah Tepat Di bawah Kode <data:post.body/>

Tambahkan HTML

<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>

4). Dan Terakhir letakan font awesome Di bawa ke dalam/atas </head>

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

Selesai Lalu Simpan Tema dan Lihat Hasilnya

---

Tombol Share yang Ke Dua >>

---