Home » » Cara membuat tombol share sosial media blog-web situs blogger gratis

Cara membuat tombol share sosial media blog-web situs blogger gratis

Cara Membuat tombol share sosial media di sidebar blog-web blogger gratis terbaru.

Tombol share dengan Ikon sosial media adalah fitur yang memungkinkan pengunjung blog-web untuk mengikuti atau melihat aktivitas dari blog-web yang di kunjungi.kebanyakan dari website populer menggunakan ikon ini,ada yang menempatkan di header halaman,sidebar atau footer.



Script ikon di bawah ini kami membuat untuk di tempatkan di sidebar.agar lebih jelasnya anda dapat melihat berbagai fitur ikon di bawah ini.


Setelah anda melihat berbagai jenis ikon sosial media di atas dan anda tertarik untuk menggunakan fitur tersebut.dapat anda salin/copy code script di bawah ini.lalu tempelkan pada sidebar web blog anda.

Tips.
Untuk yang masih baru dapat anda baca tuthorial yang berada di bawah code script icon ini.


Code script tombol share sosial media
<style scoped="" type="text/css">
/* CSS Social Network */
.slenasabu-sosmcq-icons{margin:0 0 20px 0}
.slenasabu-sosmcq-icons ul{margin:0;padding:0;list-style:none;margin-bottom:-5px;margin-right:-5px;overflow:hidden}
.slenasabu-sosmcq-icons ul li:before{display:none}
.slenasabu-sosmcq-icons ul li{margin:0;padding:0;list-style:none;float:left;width:45px;height:45px;line-height:45px;text-align:center;background:#00baff;font-size:21px;margin-right:5px;margin-bottom:5px;opacity:.9;border-radius:3px;}
.slenasabu-sosmcq-icons ul li:hover{opacity:1;}
.secondary-sidebar .slenasabu-sosmcq-icons ul li{width:36px;height:36px}
.secondary-sidebar .slenasabu-sosmcq-icons ul li a{line-height:45px}
.secondary-sidebar .slenasabu-sosmcq-icons ul li a i{font-size:20px}
.slenasabu-sosmcq-icons ul li a{line-height:45px;display:block;color:#fff}
.slenasabu-sosmcq-icons ul li a:hover{color:#fff}
.slenasabu-sosmcq-icons ul li.codepen{background:#83868a}
.slenasabu-sosmcq-icons ul li.facebook{background:#516ca4}
.slenasabu-sosmcq-icons ul li.googleplus{background:#f20000}
. slenasabu-sosmcq-icons ul li.rss{background:#f29400}
.slenasabu-sosmcq-icons ul li.youtube{background:#f20000}
.slenasabu-sosmcq-icons ul li.dribbble{background:#dc71a6}
.slenasabu-sosmcq-icons ul li.deviantart{background:#4c5e51}
.slenasabu-sosmcq-icons ul li.pinterest{background:#f20000}
.slenasabu-sosmcq-icons ul li.instgram{background:#406f94}
.slenasabu-sosmcq-icons ul li.tumblr{background:#395875}
.slenasabu-sosmcq-icons ul li.linkedin{background:#1985bc}
.slenasabu-sosmcq-icons ul li.soundcloud{background:#f60}
.slenasabu-sosmcq-icons ul li.github{background:#111}
.slenasabu-sosmcq-icons ul li.whatsapp{background:#2ECC71}
</style>
<div class='slenasabu-sosmcq-icons mcq-sosmed-widget'>
<ul>
<li class='googleplus'><a href='#' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus'/></i></a></li>
<li class='twitter'><a href='#' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/></i></a></li>
<li class='facebook'><a href='#' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook'/></i></a></li>
<li class='youtube'><a href='#' rel='nofollow' target='_blank' title='Follow us on Youtube'><i class='fa fa-youtube '/></i></a></li>
<li class='rss'><a href='#' rel='nofollow' target='_blank' title='Follow us on RSS'><i class='fa fa-rss '/></i></a></li>
<li class='linkedin'><a href='#' rel='nofollow' target='_blank' title='Follow us on LinkedIn'><i class='fa fa-linkedin '/></i></a></li>
<li class='instgram'><a href='#' rel='nofollow' target='_blank' title='Follow us on Instagram'><i class='fa fa-instagram '/></i></a></li>
<li class='pinterest'><a href='#' rel='nofollow' target='_blank' title='Follow us on Pinterest'><i class='fa fa-pinterest '/></i></a></li>
<li class='soundcloud'><a href='#' rel='nofollow' target='_blank' title='Follow us on Soundcloud'><i class='fa fa-soundcloud '/></i></a></li>
<li class='tumblr'><a href='#' rel='nofollow' target='_blank' title='Follow us on Tumblr'><i class='fa fa-tumblr '/></i></a></li>
<li class='dribbble'><a href='#' rel='nofollow' target='_blank' title='Follow us on Dribble'><i class='fa fa-dribbble '/></i></a></li>
<li class='deviantart'><a href='#' rel='nofollow' target='_blank' title='Follow us on DeviantArt'><i class='fa fa-deviantart'/></i></a></li>
<li class='codepen'><a href='#' rel='nofollow' target='_blank' title='Follow us on codepen'><i class='fa fa-codepen'/></i></a></li>
<li class='github'><a href='#' rel='nofollow' target='_blank' title='Follow us on github'><i class='fa fa-github'/></i></a></li>
<li class='whatsapp'><a href='#' rel='nofollow' target='_blank' title='Follow us on WhatsApp'><i class='fa fa-whatsapp'/></i></a></li>
</ul>
</div>
  • Cara membuat tombol share sosial media di sidebar blog-web.
    1. Copy code script di atas atau membuat salinan code script.
    2. Masuk ke situs blogger dan dari dasbor blogger, sentuh tata letak kemudian sentuh tambahkan gadget.
    3. Di dalam tab baru yang terbuka,cari atau menemukannya fitur "HTML/JavaScript" lalu sentuh ikon tambah yang berada di samping kanan fitur tersebut.
    4. Lengkapi judul, kemudian sentuh dan tahan pada area menulis konten,tempelkan salinan code script yang telah dibuat.
    5. Selanjutnya Sentuh pada tombol oranye "simpan".
Untuk memastikan apakah script sudah terpasang dengan benar, dapat anda lakukan pratinjau melalui homepage blog-web anda.

Informasi:
Masukkan alamat (url) atau gantikan Tanda "#" berwarna hijau yang berada di dalam code script dengan alamat (url) sosial media anda.

Semoga bermanfaat.
Thanks for reading : Cara membuat tombol share sosial media blog-web situs blogger gratis

Share this

0 komentar:

Post a Comment