Cara Mudah Membuat Tombol Share Di Blog - sebenarnya banyak variasi yang dapat kita pasang di blog, dari yang keren, super keren hingga kita bisa Membuat Tombol Share Di Blog dengan warna-warni agar terkesan menarik dimata pengunjung.
Dengan adanya Widget Tombol Share yang Menarik di blog seakan memberi pesan kepada Visitor Blog agar dengan mudah melakukan Share/Berbagi atas apa yang telah mereka baca di artikel blog anda. Namun jika anda tidak memasang tombol share sekalipun sebenarnya blogger telah menyediakan widget tombol share di setiap template default blogger. Hanya saja banyak diantara pengguna blogger kurang menyukai tampilan widget tombol share default blogger karena tidak valid HTML5, sehingga mereka melakukan modifikasi widget tombol share tersebut hingga terlihat menarik dengan paduan warna-warni.
Untuk Cara Mudah Membuat Tombol Share Menarik Di Bawah Postingan Blog kita hanya menggunakan kode CSS, disini saya akan sedikit berbagi Kode CSS widget Tombol Share dipertemuan kita kali ini.
Artikel terkait -
Berikut Tutorial Cara Mudah Membuat Tombol Share Di Blog
Keterangan- Silahkan ganti kata yang berwarna merah sesuai dengan selera anda.
Selanjutnya Copy CSS Berikut dan Paste ke-Template Sobat sebelum kode </head>
Jangan lupa langsung di Save Templatenya, dan lihat hasilnya.
Semoga apa yang saya sampaikan diartikel tentang Cara Mudah Membuat Tombol Share Di Blog ini dapat memberikan manfaat, dan tunggu artikel menarik lainnya di pertemuan kita lain waktu. Terimakasih
Dengan adanya Widget Tombol Share yang Menarik di blog seakan memberi pesan kepada Visitor Blog agar dengan mudah melakukan Share/Berbagi atas apa yang telah mereka baca di artikel blog anda. Namun jika anda tidak memasang tombol share sekalipun sebenarnya blogger telah menyediakan widget tombol share di setiap template default blogger. Hanya saja banyak diantara pengguna blogger kurang menyukai tampilan widget tombol share default blogger karena tidak valid HTML5, sehingga mereka melakukan modifikasi widget tombol share tersebut hingga terlihat menarik dengan paduan warna-warni.
Untuk Cara Mudah Membuat Tombol Share Menarik Di Bawah Postingan Blog kita hanya menggunakan kode CSS, disini saya akan sedikit berbagi Kode CSS widget Tombol Share dipertemuan kita kali ini.
Artikel terkait -
Berikut Tutorial Cara Mudah Membuat Tombol Share Di Blog
- Login ke Akun Blogger Sobat
- Pilih menu TEMPLATE lalu klik Edit-Template
- Silahkan Copy CSS berikut dan Paste ke-Template sobat tepat di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='bookmark'>
<style>
.bookmark{margin-top:5px;border:5px double red;border-right:1px solid red;border-left:1px solid red;background:#9fc5ed;box-shadow: 0 2px 5px 2px #ddd;}
.bookmark h4{color:#666;border-bottom:1px double red;padding:0;margin-bottom:10px;padding-left:10px;}
.bookmark img{}
.book{float:left;margin:0 8px 0 0;padding:1px;border:1px solid #eee;background:#ffffff;}
.booklast{float:left;margin:0;padding:1px;border:1px solid #eee;background:#ffffff;}
</style>
<h4>If You Like This Post, Share it With Your Friends</h4>
<div align='center'>
<span class='st_facebook_large' displayText='Facebook'/>
<span class='st_twitter_large' displayText='Tweet'/>
<span class='st_linkedin_large' displayText='LinkedIn'/>
<span class='st_digg_large' displayText='Digg'/>
<span class='st_stumbleupon_large' displayText='StumbleUpon'/>
<span class='st_reddit_large' displayText='Reddit'/>
<span class='st_tumblr_large' displayText='Tumblr'/>
<span class='st_email_large' displayText='Email'/>
<span class='st_dzone_large' displayText='DZone'/>
<span class='st_netlog_large' displayText='Netlog'/>
<span class='st_google_large' displayText='Google'/>
<span class='st_identi_large' displayText='identi.ca'/>
<div style='clear:both;'/></div></div>
</b:if>
<div class='bookmark'>
<style>
.bookmark{margin-top:5px;border:5px double red;border-right:1px solid red;border-left:1px solid red;background:#9fc5ed;box-shadow: 0 2px 5px 2px #ddd;}
.bookmark h4{color:#666;border-bottom:1px double red;padding:0;margin-bottom:10px;padding-left:10px;}
.bookmark img{}
.book{float:left;margin:0 8px 0 0;padding:1px;border:1px solid #eee;background:#ffffff;}
.booklast{float:left;margin:0;padding:1px;border:1px solid #eee;background:#ffffff;}
</style>
<h4>If You Like This Post, Share it With Your Friends</h4>
<div align='center'>
<span class='st_facebook_large' displayText='Facebook'/>
<span class='st_twitter_large' displayText='Tweet'/>
<span class='st_linkedin_large' displayText='LinkedIn'/>
<span class='st_digg_large' displayText='Digg'/>
<span class='st_stumbleupon_large' displayText='StumbleUpon'/>
<span class='st_reddit_large' displayText='Reddit'/>
<span class='st_tumblr_large' displayText='Tumblr'/>
<span class='st_email_large' displayText='Email'/>
<span class='st_dzone_large' displayText='DZone'/>
<span class='st_netlog_large' displayText='Netlog'/>
<span class='st_google_large' displayText='Google'/>
<span class='st_identi_large' displayText='identi.ca'/>
<div style='clear:both;'/></div></div>
</b:if>
Keterangan- Silahkan ganti kata yang berwarna merah sesuai dengan selera anda.
Selanjutnya Copy CSS Berikut dan Paste ke-Template Sobat sebelum kode </head>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
<script type='text/javascript'>stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
Jangan lupa langsung di Save Templatenya, dan lihat hasilnya.
Semoga apa yang saya sampaikan diartikel tentang Cara Mudah Membuat Tombol Share Di Blog ini dapat memberikan manfaat, dan tunggu artikel menarik lainnya di pertemuan kita lain waktu. Terimakasih
- Happy Blogging -
Diperbaharui pada Wednesday April 16, 2014
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Cara Mudah Membuat Tombol Share Di Blog
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
tombol share ini memang sangat bagus untuk penghias blog dan juga untuk meningkatkan pageview blog kita. Thanks ya atas share nya :)
BalasHapusjadi pengen juga nich pasang tombol share ini, soalnya blog sya belum ada hehe :D
BalasHapus@Wahyu Eka Prasetiyarini- silahkan sob,,oh ea..kayaknya saya sering melihat foto profil kamu tetapi di site cara ririn tapi ko ini beda ea site nya..
HapusTerimakasih sob udah mau berkunjung
Itu Memang Mba Ririn :)
HapusMaster Blogger yang tersembunyi heheheh
mantap dhe postingannya ,ijin praktik di blog saya :)
BalasHapusartikel anda mulai dari halaman awal nggak bosen bacanya, ijin copas mbak devy.. langsung praktek
BalasHapusmenarik mbak mau saya praktekin
BalasHapusterima kasih
BalasHapusmba devy, ne xo gk muncul,,,??
BalasHapuskode data:pos.body ada banyak pada template mas, coba letakkan pada kode yang terakhir
Hapusthanks banget tutorialnya bro, mudah dimengerti dan enak dicustom...
BalasHapusartikelnya baguzz bangett!! (h)
BalasHapuslangsung dicoba nih
komen back ya http://rakaraperz.blogspot.com x-)
Wah boleh di coba, terimakasih gan infonya... :d
BalasHapusmampir gan
BalasHapushttp://cybermanlink.blogspot.com/
Ada JSnya SOb :(
BalasHapusKALAU DI WEB BLOGDETIK BAGAIMANA,SAYA KOK SUSAH BUAT KOTAK SHARE PADA TULISAN DI BLOG SAYA
BalasHapusWah manteb sob infonya...
BalasHapushttp://www.kopnamikaze.blogspot.com/
thanks gan, izin copas ya
BalasHapus(h)
BalasHapuswah nice post. asli 100 % berhasil gan tutorialnya. thnx y gan.
BalasHapushttp://dananxkusuma.blogspot.com/
Neng kalo share di pos body mah udah ada bawaanya, kalo buat di halaman, gimana perintahnya,..???
BalasHapuskalau buat halaman banyak mas, sidebar halaman,header halaman atau halaman postingan, yang mana satu ini mas..?
HapusOK saya ambil satu contoh saja
jika ingin menempatkan bersamaan dengan header, maka carai kode selector yang mengatur tampilan header, tempatkan kode HTMLnya tepat dibawah kode penutup header </div> namu jika diatas maka cari class untuk pengaturan headernya lalu tempatkan diatas jika ingin diatas header
terimasksh....
BalasHapusSaya nyimpen Script di textarea gagal terus, kadang terbaca menjadi yang seharusnya, contohnya seperti di blog ini pada widget Free Backlink. Bagaimana caranya supaya script Backlink di textarea tidak terbaca menjadi perintah. Mohon pencerahan.
BalasHapuskompresor kode mbak. misalnya jika ingin menuliskan simbol < maka tulis sebagai kode seperti ini (& l t ; )
Hapussehingga perintah kode akan terbaca sebagai teks. semoga dapat membantu
ijin nyoba........... terima kasih
Hapuskok kagak bisa ya
BalasHapusmungkin penggunaan atau peletakan kode scrip yang bermasalah, karena setip template berbeda versi, jika diletakkan diwilayah kode </head> tidak dapat berfungsi, coba letakkan diatas kode penutup tag </body>
HapusMantap nih, pembaca jadi bisa dengan mudah menyebarkan artikel kita jejaring sosial. Bisa dipasang nih bagi yang blognya pingin banyak dikunjungi.
BalasHapusWah bagus banget jangan lupa mampir ke blog saya mbak http://adf.ly/lTIc3
BalasHapusmantapppppp.......itu kategori file sama dropdown menunya keren abis.......kasih tau dong cara bikinnya
BalasHapusmantap gan ijin coba dan di praktiken :d
BalasHapuskalo ada waktu mampir gan
http://indo-sharebest.blogspot.com/
Thanks bro
BalasHapusudah coba tapi kok ga berhasil ya mbak...mohon pencerhannya...www.crystalxnasa.biz
BalasHapusOm Thank Infonya+Aq Udah Pasang Link Om Di Blog Saya
BalasHapusJangan Lupa Kunbalnya Yaa
www.tebaskalbarindonesia.blogspot.com :D
siap meluncur ke blog ibu dech, terimakasih ya sudah memasang link blog saya;
Hapussalam kenal
gimana cara memasang hati saya ke tempat mbak yah..tolonk yah :))
Hapusgood
BalasHapusjangan lupa cek kami ya
http://bikinkaosmurahbandungonline.blogspot.com/
terima kasih atas informasinya gan..
BalasHapusblog saya jadi lebih bagus dengan tombol shareny...
kalo mao berkunjung silahkan.. http://duniainformasikesehatan.blogspot.com
Terima kasih semoga bermanfaat, kunjungi blog kami www.arabianbutik.blogspot.com
BalasHapusterima kasih banyak, infonya sangat bermanfaat :)
BalasHapuswww.hachibi.tk
terima kasih. kunjungin juga dan follow di bawah ini.
BalasHapushttp://muhammadimamsirait.blogspot.com/
mbak menu barnya keren bangetz gimana bikinya
BalasHapus*maaf aga membelok dari post*
minta kunjungannya
http://salmanbloger.blogspot.com
cari saja mas di label blog ini tentang menu navigasi, tutorilnya sudah saya share
Hapusoke siip mba, jangan pake mas umur saya baru 14
Hapuskalo cara buat tombol balas di komentar gimana mba?
tombol balas gimana maksudnya ya, masalahnya setiap blog yang mengaktifkan fitur komentar saya yakin setiap pengaturan pada kolom komentar sudah dilengkapi dengan tombol balas dan hapus,
Hapusmaksud sobat salaman gimana ya?
Komentar yang ada di Blog tidak bisa dibalas
HapusThanks gan.
BalasHapusKunjungan balik http://www.imamblog.com/
terima kasih kak :) tapi kak kalau cara hapusnya gimana?
BalasHapusterima kasih kak :) tapi kak kalau cara hapusnya gimana?
BalasHapuscara hapus apanya ya?
Hapussaya uda coba kok ngak bisa ya....
BalasHapussaya pake template sederhana uda coba semua cara tetap ngak bisa hehehehe
pastikan template Anda sudah menggunakan jQuery
Hapusmampir balik yah.. (o)
BalasHapushttp://new-magz.blogspot.com/
sip kunjungi juga
BalasHapushttp://magezine123.blogspot.com
sudah cuba pastekan sebagaimana yang ditunjuk ajar..tetapi tak menjadi apa-apa..bahagian mana yang saya buat silap?
BalasHapusAldi taher dan Atiqah Aziz.
Hapuspastikan template Anda sudah dilengkapi dengan script-jquery seperti ini:
[pre]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>[/pre]
kalau belum ada pasang script-jquery di mana ya mba?
HapusThanks gan, udah ane terapkan di blog ane, sarwoediblogspot.blogspot.com
BalasHapusSebuah Blog yang sangat bermanfaat .... Maju terus blog Indonesia
BalasHapushahaha blog aku juga dah pake thanks ya
BalasHapushanghangs.blogspot.com
makasih atas infonya, bagus banget.
BalasHapusdi tunggu kelanjutannya
bagus bro,,,
BalasHapussungguh bermanfaat,,
Mohon kiranya kunjung web ane yang lagi GALAU saja.
diebago.blogspot.com
maacih qaqa
trims sudah berbagi..
BalasHapuskeren nih blog nya sob..
kok ada tulisan ini mbak>?? The widget with id "Blog1" contains at least two b:includable elements with the same id: "shareButtons". All b:includable elements should have a unique id for a given widget.
BalasHapusTerima kasih mbak Dev share buttonnya, sedikit saya edit tampilan warnanya
BalasHapusaku langsung coba nih mbak , makasih yaa jadi dapet ilmu baru css buat masang tombol share hehe
BalasHapusMantap gan......mau saya terapkan....maklum...newbie
BalasHapuskeren gan.. mampir juga di www.magknowledge.blogspot.com
BalasHapuswaw keren ya mas..
BalasHapusenjoy
keren themanya
BalasHapus