Cara Membuat Share Box Responsive

Ketemu lagi sama saya kali ini saya akan membuat tombol Share Box Responsive untuk blog. Mungkin bagi kalian ada yang menganggap tidak perlu? tetapi sebenarnya ini perlu untuk mempopulerkan situs / blog agan. Hal ini sangat bermanfaat, diantaranya adalah agar pengunjung dapat membagikan sebuah postingan anda di Sosial Media

Dengan tombol share ini pengunjung dapat mengeshare ke media sosial dengan mudah dan simple. Ok bila sudah siap lanjut ke Cara Membuat Share Box Responsive.

Screenshot :

Cara nya :
1. Buka Blogger - Kemudian Login

2. Dashboard - Kemudian Template.

3. Edit HTML.

Proses Pembuatan.

1. Temukan <CTRL+F> kode ]]></b:skin> atau </style>.

2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>.


/* Share Box By DanAndroid-Download*/

.share-box{height:33px;position:relative;line-height:0;margin:0 0 20px;padding:0}

.share-art{display:block;margin:0;padding:0}

.share-art a{float:left;width:20%;height:33px;line-height:33px;color:#fff;font-weight:400;font-size:15px;text-align:center;display:inline-block;box-sizing:border-box;opacity:.75;margin:0;padding:0;transition:all .25s ease}

.share-art a:hover{opacity:1}

.share-art .fac-art{background:#3b5998}

.share-art .twi-art{background:#00acee}

.share-art .goo-art{background:#db4a39}

.share-art .pin-art{background:#CA2127}

.share-art .lin-art{background:#0077B5}

3. Jika sudah dipasang? Temukan lagi kode <data:post.body/>.
4. Copy & Paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>.
Note :

" Bisanya kode ini lebih dari satu, silakan anda pilih yang kedua. Atau anda bisa mencobanya satu/satu."


<!---Share-Box-DanAndroid-Download-->
<div class='share-box'>
<div class='share-art'>
<a class='fac-art' expr:href='&quot;http://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='twi-art' expr:href='&quot;http://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='goo-art' 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='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' 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-pinterest'/></a> 
<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?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-square'/></a>
</div>
</div>
<!--Clear-->

5. Supaya Responsive? Sekarang kita pasang script Bootstrapcdn atau Font Awesome. Karena Icon pada tombol share ini, menggunakan font awesome icons "Contoh : fa fa-twitter"
6. Selanjutnya Temukan kode </head>
7. Copy & Paste kode berikut ini, dan letakkan diatas kode </head>


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

8. Terakhir , Simpan template

Sekian Tutorial Blogger kali ini, bila ada kesalahan? Silakan, jangan sungkan untuk berkomentar. Terima kasih sudah mengunjungi dan sampai ketemu lagi di kesempatan berikutnya. Saya akhiri Cara Membuat Share Box Responsive. Semoga bermanfaat & Share Cara Membuat Share Box Responsive.