Membuat Tombol Share Stylish Dibawah postingan Blog tanpa Platform

//lh4.googleusercontent.com/-eAXyxy2JJKA/AAAAAAAAAAI/AAAAAAAAGS4/OHgzqHzCvtQ/s512-c/photo.jpg
October 26, 2018




Semua blogger pasti ingin mempunyai traffic blogg yang tinggi, salah satu yang mesti kalian lakukan adalah membuat tombol share artikel pada blog anda. Disamping itu memasang tombol share di blog anda akan meningkatka skor SEO pada blog atau website anda.

Tombol share ini dibuat tanpa menggunakan platform pihak ketiga, kenapa karena dengan menggunakan platform pihak ketiga akan berdampak secara langsung terhadap kecepatan loading website anda.




Membuat tombol share yang stylish dan keren sangat penting, kami berpikir dengan tombol share yang stylish dan keren akan membuat pengunjung website anda tertarik untuk mengklik tombol share yang ada pada website anda.

Gambar di atas merupakan gambr tombol share yang akan kita buat, gambar diatas terlihat keren dan stylish dan yang terpenting responsive.  Langsung saja mari kita memulainya.

1. Edit template pada blog anda, kemudian cari kode ]]></b:skin> masukkan kode dibawah ini tepat di atasnya.

 .post-share span {
    color: #aaa;
    font-family: Raleway;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 10px 0 0;
}

.post-share a {
    background: #121212;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 25px;
    color: #fff!important;
    margin-right: 2px;
    margin-top: 5px;
}

.post-share a:hover {
    background: #DE292E;

} 

2. Cari kode <data:post.body/> kemudian masukkan kode dibawah ini tepat di bawahnya.

 <div class="post-share">
<span>Share Article</span>
<a class='share-facebook' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='share-twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='share-google-plus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<a class='share-linkedin' expr:href='&quot;http://www.linkedin.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'/><i class="fa fa-linkedin"></a>
</div> 

3. Save dan silahkan lihat hasilnya.


Sekian share kali ini semoga apa yang kami share di atas bermanfaat bagi anda semua, jangan lupa share keteman kalian, dan jika kalian mempunyai pertanyaan silahkan tinggalkan komentar dibawah dan mulai berdiskusi dengan kami.


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed