Screenshot :
Cara Membuat Share Box Responsive
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."
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>
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.
<!---Share-Box-DanAndroid-Download-->
<div class='share-box'>
<div class='share-art'>
<a class='fac-art' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='twi-art' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<a class='pin-art' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/></a>
<a class='lin-art' expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); 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.
3 comments
Hmm boleh juga dipake di blog ane
Iya gan pake aja :D
izin coba dulu gan tnks
Notes :
- Tidak Diperbolehkan untuk Mempromosikan Barang atau Berjualan
- Disarankan Berkomentar Menggunakan Bahasa Indonesia yang sopan