Sebelumnya saya sudah pernah membahas cara memasang widget share facebook di bawah judul postingan. Kurang lebih sama fungsinya, namun kali ini saya akan memberikan sedikit tips buat sobat pemula yang ingin membagi artikelnya lewat situs-situs social bookmark ataupun jejaring sosial, seperti facebook, myspace, twitter, dll.
Dengan memasang widget sharing is sexy, maka postingan atau artikel sobat akan cepat tersebar dan otomatis blog sobat akan cepat terkenal di situs-situs social bookmark yang notabennya memang tempat berkumpulnya para blogger di seluruh di dunia. Tapi dengan catatan isi konten menarik, dan sobat wajib mendaftar di berbagai situs social bookmark agar sobat bisa langsung sharing tanpa menunggu pengunjung blog yang mengklik widget sharing is sexy-nya.
Baiklah mari kita lanjutkan !
- Silahkan login ke blogger.
- Kemudian klik tab Edit HTML.
- Klik Expand Template Widget.
- Copy kode di bawah ini setelah kode ]]></b:skin>
<style type='text/css'>
div.sexy-bookmarks { height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat left bottom;position:relative; width:540px }
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat right bottom; position:absolute; right:-17px }
div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }
div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important }
div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarI2MridI/AAAAAAAAE4U/Qspdg7GUj5g/sexy_thumb%5B3%5D.png) no-repeat !important }
.sexy-furl { background-position:-300px top !important }
.sexy-furl:hover { background-position:-300px bottom !important }
.sexy-digg { background-position:-500px top !important }
.sexy-digg:hover { background-position:-500px bottom !important }
.sexy-reddit { background-position:-100px top !important }
.sexy-reddit:hover { background-position:-100px bottom !important }
.sexy-stumble { background-position:-50px top !important }
.sexy-stumble:hover { background-position:-50px bottom !important }
.sexy-delicious { background-position:left top !important }
.sexy-delicious:hover { background-position:left bottom !important }
.sexy-yahoo { background-position:-650px top !important }
.sexy-yahoo:hover { background-position:-650px bottom !important }
.sexy-blinklist { background-position:-600px top !important }
.sexy-blinklist:hover { background-position:-600px bottom !important }
.sexy-technorati { background-position:-700px top !important }
.sexy-technorati:hover { background-position:-700px bottom !important }
.sexy-myspace { background-position:-200px top !important }
.sexy-myspace:hover { background-position:-200px bottom !important }
.sexy-twitter { background-position:-350px top !important }
.sexy-twitter:hover { background-position:-350px bottom !important }
.sexy-facebook { background-position:-450px top !important }
.sexy-facebook:hover { background-position:-450px bottom !important }
.sexy-mixx { background-position:-250px top !important }
.sexy-mixx:hover { background-position:-250px bottom !important }
.sexy-script-style { background-position:-400px top !important }
.sexy-script-style:hover { background-position:-400px bottom !important }
.sexy-designfloat { background-position:-550px top !important }
.sexy-designfloat:hover { background-position:-550px bottom !important }
.sexy-syndicate { background-position:-150px top !important }
.sexy-syndicate:hover { background-position:-150px bottom !important }
.sexy-email { background-position:-753px top !important }
.sexy-email:hover { background-position:-753px bottom !important }
</style>
- Lalu cari kode <data:post.body/>
- Jika sobat sudah menggunakan read more, maka akan terdapat 2 kode <data:post.body/>. Letakkan kode dibawah ini setelah kode <data:post.body/> yang pertama
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/miscah' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div>
Kemudian Simpan Template.
Ganti tulisan yang berwarna merah dengan ID feedburner sobat, jika belum punya sobat bisa daftarkan blog sobat langsung di feedburner.
Tweet
|
Berlangganan artikel terbaru via Email
|
57 comments
Perasaan ada yg ke duanya loh BOS
yg pake script, pas mouse diarahkan ada buanyak ke bawah
@ Beben : maksudnya apa ya ben..yg ke duanya yg mana? kode <data:post.body/> kah?
@Kang DODDY : bukan tutornya, tapi bookmar sexynya udah ada yg up to date BOS...xixixixi
tenk kyou boz...!
Ini yang akuw cari selama ber-abat abat lamanya...!
mau tanya nie bos, kalo' cara meletakkan Kotak Langganan itu gimana caranya bos...!
Plish jawab yya, akuw butuh bangets
jawab di www.blogsuka-suka.co.cc
Aku tunggu...!
@ Nabil Muhammad : klo mo buat kotak berlangganan email, sobat kudu ikutan feedburner.com daftar aja dulu tar ada penjelasannya cr meletakkannya
mantab sobbbb
Makasih Sob!!!
kok di HTML template saya gak ada kode itu ya? -pdhl pngn naroh-, ddoooohh! :(
hmmm...artikel bagus mas
jadi pengen nyoba
salam kenal ya
Muantab mas boleh nanya mas di blog saya kok komentar nya bisa dobel bagaimana y mas
keren kk infonya :)
mauu nanya dunn kalu misalnya d'tambahin button sharenya lg gmn caranya ?
misal d'tambahin button share lintas berita .
thanks :D
nanti akan saya bahas cara memasang widget lintas berita biar lebih jelas
kok aku gk ada perubahan ya, tolong dong. tolong di bales ke comment blog aku ya
kang dody kok di blog ku munculnya di halaman utama?
@fachry : coba tambahkan kode berikut
<b:if cond='data:blog.pageType == "item"'>
KODE YANG KE-2 ( setelah <data:post.body/> )
</b:if>
keren postingnya, mudah dimengerti..langsung tak praktekkan dan ternyata sukses,,he,he,, trimakasih om Dody...
makasih infonya gan.... baru tau ane...maklum blogger pemula
tanya nich , punya ku pake auto readmore , link within nya thumbnail marquee , knp qo g muncul ya widget "sharing is sexy" nya ??
http://whatuget.blogspot.com
maklum , baru newbie . . , :D
makasii
wah akhirnya bisa juga thx sob............
thanks gan
Thanks ye....
dicoba dulu deh
wah, widget ini salah satu yang saya cari.
langsung dicoba, ah...!
Terima kasih Gan..
Akhirnya bisa juga. Cz kemaren punya saya rusak jadi gak bisa. Sekarang dah normal lagi.. terima kasih..
di template saya malah ada 3 , jadi yg mana yg dipakai. masih bingung sob
makasih infonya sob, akn saya coba
sob....punyaku kok social bookmarknya ada di bawah kotak komentar ya...? Mohon bantuannya!!!
mas kok di blog saya cuma muncul di halaman depan aja.. di pos y enggak
@Denny Ramdhani Zain : coba tambahkan kode berikut
<b:if cond='data:blog.pageType == "item"'>
KODE YANG KE-2 ( setelah <data:post.body/> )
</b:if>
image h0stingnya udah wassalam kang, mohon pencerahan :)
mkasih Kang :)
makasih mas. mau tnya mas, cara mengatur jarak antara icon yang satu dgn yg lainnya gmna y mas? coz saya pke template 3 kolom jadi hasilnya ada satu icon tdk tampak.. mhon solusinya y mas.
saya bisa bos, tapi kok nya ku coba yg pertama tidak bisa padahal aku pakai readmore, dan kocoba aja yang ke kedua bisa
Gan mau tanya, cara buat menu collapse gmana caranya........ (maksudnya kaya blog gan, ''POPULAR POST'', 'DOMAIN', ''KODE WARNA''.... Seperti blog mas punya..... jadi collapse menu, (seperti anak tangga, menu POPULAR POST punya anak direktorynya) klo diclik ada menu tambahan dibawahnya + sub menu tambahanny ........ thanks sebelumya.......
Thank mas bro tutorialnya :)
thank kang udah bisa neeh :)
menghilangkan tulisan menu sharing sexynya gimana mas comen balik ea
thanks ya... ilmunya bermanfaat banget... ^_^
ko ga ada mas ?.. padahal uda saya pasang ?..
bolehlah ntar kucoba pasang biar tambah menarik. Thx ya
Terima Kasih sob ..... !
Thanks tutorialnya...
Berhasil... hehe
terma kasih bro... widgetnya lansung jadi
kalo diganti bookmark lintas berita gmn bos??
terima kasih mas.. Infonya, trus skalian minta ijin copy script nya y masterima kasih mas.. Infonya, trus skalian minta ijin copy script nya y mas
Terima kasih Postingannya...
Sangat Bermanfaat Sekali
makasih gan :)
Dicoba di blog ku ni ya.. trims..
Makasi mas infonya, saya berhasil masang :)
thnks infonya,,
berguna bgt,,
Bagusnya lagi kita dapat cepat terindek oleh google dan gampang ditemukan blog kita dibanding tidak submit ke social bookmark
kl widget share-nya seperti punya mas dodi gmana ya?
kode nya enggk bisa di prsingkat lgi ya sob, klw gini kan bisa mmberatkan blog,,, mohon dukungan Pulsa Elektrik Murah Semarang...tq
Terimakasih infonya
thx banget infonya, kunjungi blogku jga ya, www.colekinfo.blogspot.com
Mantap gan artikelnya , mau coba buat di blgo aye ah
cara mengetahui FeedBurnernya gmanaaa ???
Posting Komentar