Saat saya ke blog orang barat eh saya agak tertarik dengan salah satu widget yang ada pada blognya yakni social bookmarking, yang biasanya muncul dibawah postingan, saya berusaha mencari hingga ke barat dan mengambil kitab suci (oke stop lebay) :p hheheh. Fungsi widget di atas adalah jika ada pengunjung blog kamu yang tertarik dengan salah satu postingan blog kamu, pengunjung blog dapat langsung membagikan postingan blog kamu ke FB, Twitter, Myspace, Technorati, dll. Mantep Banget bukan ? kalau kamu tertarik membuat widget diatas, berikut di bawah ini langkah2nya :
1. Masuk ke Blogger.com
2. Klik Rancangan --> Edit HTML --> Klik Expand Template Widget dan Jangan lupa di Backup dulu template yang kamu punya.
3. Cari kode ini </head> dan Letakan kode di bawah ini sebelum/di atas kode </head>.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery('.sexy-bookmarks').height();
var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight>sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+'px'
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+'px'
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth=jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px');
}
});
</script>
<style type='text/css'>
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTqjSfw8XveSJOlmmJ0tDdinGkQRZ88xa2rvhHqgqhbfzGRb5yxbUpc2bMwWMQEWWXF30z-CoI4XhgfX-pz56eSrtH_XiFsuSjpyibfahWZ18SOwfxPiv1sSi3AvtpQeL2HTID90CBk9YQ/') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:95% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz: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-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://bnote.googlecode.com/files/sexy-sprite-new.png') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>
4. kemudian kamu cari lagi kode <data:post.body/> dan jika kamu menemukan 4 kode <data:post.body/> maka letakan pada bagian yang kedua. Copas kode di bawah ini dan letakan di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'> <ul class='socials'> <li class='sexy-delicious'><a class='external' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li> <li class='sexy-digg'><a class='external' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li> <li class='sexy-stumbleupon'><a class='external' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li> <li class='sexy-reddit'><a class='external' expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li> <li class='sexy-google'><a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li> <li class='sexy-twitter'><a class='external' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a></li> <li class='sexy-facebook'><a class='external' expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li> <li class='sexy-mixx'><a class='external' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li> <li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a></li> <li class='sexy-yahoobuzz'><a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li> <li class='sexy-linkedin'><a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li> <li class='sexy-designfloat'><a class='external' expr:href='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li> <li class='sexy-technorati'><a class='external' expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li> <li class='sexy-scriptstyle'><a class='external' expr:href='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a></li> <li class='sexy-myspace'><a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li> <li class='sexy-blinklist'><a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li> <li class='sexy-friendfeed'><a class='external' expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li> <li class='sexy-newsvine'><a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li> </ul> <div style='clear:both;'/> </div> </b:if>
5. Simpan Template :)
tetep koment walau tidak ditampilkan....
ReplyDeletekomennya bukan tidak ditampilkan sob, tapi di moderasi dahulu biar say tahu siap saj yang berkomentar :)
Deleteoke juga, tapi sepertinya berat ...
ReplyDeleteyah begitulah sob, tapi tadi sudah ane coba dan tidak terlalu berat :) thu buktinya ada di gambar postingan ane hehe
Deletekayaknya keren sob tapi blogku udah kebanyakan widget :D
ReplyDeletebang hzndi ini keren , sehari bisa posting berkali2 ..:D
semangat !!
Hahaha bisa saja sob, ane mah kalw lg da inspirasi z, trus biar traffic alexa cepet naek hehe maklum lah blog baru 1 bulang bang edot :D
Deletepingin banget sih sob pasang ini, tapi kira2 berat gak y? mohon jawabannya... sekali lagi kira2 berat gak? itu doang yg ane mo tanya... :D n jwbnny mohon segera dibalas.^_^
ReplyDeletesalam blogger^^
Engga berat kok sob, ane udh nyoba td, tuh ada gambarnya di atas, 98% widget yg ada disini sudah ane coba :) tp kalw menurut sobat berat, bisa di hapus widgetnya. Jadi sblm nyoba widget ini, ente backup dulu ok :D
Deletebtw, bisa kan kalo dipasang cuma beberapa saj? misalnya hanya 5 widget....
ReplyDeletebtw, makasih sebelmny atas jawabnnya sob. sukses selalu^^
Bisa sob, tinggal dihapus saja beberapa kode html-nya :) widget diatas juga nampil hanya 5 saat ga dsorot, namun jika disorot akan nampil banyak seperti diatas :D
Deletewahhh...widgetnya mantep banget tuh bang... muncul-ndelesep...hehehe asik dilihat...
ReplyDeletemakasih untuk tutor yg supper inio bang...hahayyy
Beh bisa aja nih si akang :D hahaha
Deletenice tips and tutorial, patut di coba nihhh... ijin nyimak ya sob...?!!!
ReplyDeleteheheh oke sob jangan cuma nyimak aje, di coba juga :)
Deletenyobah ah.. . tar kalo ga bisa nangis. . .
ReplyDeletebhahaha ada2 aja lu le, masa ga bisa sih nangis, jangan cengeng lo haha :p
Deletetutor mantap...kayanya cocok nih buat blog ane yang baru...hehehehe....salam sehat bang....
ReplyDeletewah emang blog ente yang baru apa bang ? silahkan di coba abanggg :D salam sehat juga :)
DeleteSepertinya harus di coba satu demi satu yang ada di blog ini, agar blognya tambah bagus. Thanks sob, dah mau berbagi.
ReplyDeletewah banyak banget dong kalau dicoba satu2 hehehe iya sob sama2 makasih sudah datang :)
Deletewalah baru sebulan blognya udah gahoool :D
ReplyDeletegak tertarik masang iklan di blog bang .. hee
kalo lagi nganggur tag coba pasang aah tu widgetnya , jadi penasaran deh :P
bahaha blog ane biasa aja bang tapi adminnya yang gahooll hahaha, silhakan coba bang widget-nya heheh belum tertarik bang :) mngkin beberapa bulan lagi ane pasang :)
DeleteWah, bagus gan
ReplyDelete