Pages

Friday, January 28, 2011

Menambahkan "Sharingis Sexy/Caring" Widget


Meskipun ada banyak cara untuk meningkatkan blog traffic namun media jejaring sosial dan bookmarking adalah cara yang paling efektif . hampir semua bloggers mengalami kesulitan dalam menambahkan bookmarking sosial dan icon promosi blog di dalam blog mereka, termasuk saya; jadi sekarang saya ingin membagikan langkah demi langkah dalam menambahkan yang disebut "Sharing is sexy/Caring" Widget dalam blogger.


Apakah "Sharing is sexy/caring" widget ?
Widget ini akan menampilkan sekumpulan icons setelah setiap blog post yang menyatu bersama dengan isi posting. "Following" adalah yang paling keren dari widget ini, widget ini memberikan animasi sekumpulan icons/buttons tadi, saat "mouse" menghapiri ukuran dari tombol akan berubah( icons sebenarnya akan muncul).
secara otomatis akan menambahkan post blogmu ke dalam link icon.
tutorial langkah demi langkah ini akan memandumu menambahkan tombol yang secara otomatis tersembunyi untuk "social bookmarking"-mu kedalam bloggermu. membantu pengunjug untuk mem-bookmark dan membagikan artikelmu dengan mudah. kumpulan icons/button terlihat seperti ini:
Widget in action:
Secara default semua icon "bookmark social" akan ditampilkan sebagiannya saja; jika "mouse" diarahkan ke salah satu icon, maka icon yang penuh akan muncul dengan gambar yang utuh. dengan men-click icon/gambar yang keluar, pengunjung dapat mempromosikan/bookmark posting blog. 
Step 1:
Login ke Blogger, go to Layout > Edit HTML and cek dalam " Expand Widget Template", 

Step 2:
Cari kode "]]></b:skin>" dan copy paste kode dibawah ini (setelah ]]></b:skin>) :

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3pxk1SviTTTjdjezIYxlUi6ilLuxO2bWkC-25waE1EFcRdesi_qVBzND2EXYwXvWjlGk1CMTuw5TJrEczjFadZeID0HOrsf2a5v1wrSqeQGsEYfoW1D349ZOcwF97K2crY6mLFDlCEtQ/s800/sharingsexy.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3pxk1SviTTTjdjezIYxlUi6ilLuxO2bWkC-25waE1EFcRdesi_qVBzND2EXYwXvWjlGk1CMTuw5TJrEczjFadZeID0HOrsf2a5v1wrSqeQGsEYfoW1D349ZOcwF97K2crY6mLFDlCEtQ/s800/sharingsexy.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;
font-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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibY2p6y2udB4Pf15-tuHuw8QTeakX5PN-CfmHNacrB8nRBGg7xOpJqQZIEm2D2IIVAYuDD28qE23YmEotW01tWNZy71s49vKI__RJtn2oiB8BeLPoSVyv4IwDkjtGMJjxvPyb8iswP5pg/s800/Sexysprite.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>


Step 3: Cari kode "<data:post.body/>" dan copy paste kode dibawah ini (setelah <data:post.body/>) :
Perhatian:

jika kode diatas ditemukan lebih dari satu, temukan yang terakhir. Biasanya, ini hanya terjadi pada blogger yang menggunakan "read more". kode terakhir ini berarti bahwa "sexy bookmark" widget ini juga akan ditampilkan saat kita masuk salah satu halaman post.



<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>

<span class='sexy-rightside'/></div>
Step 4: 
Save template dan selesai! Anda dapat meng-edit kode sesuai kebutuhan, jika kau ingin membuang beberapa tombol sesuai kebutuhan.
Pastikan anda update FEED URL dengan alamat url feedmu sendiri. 
Saat update template blog, xml file mungkin saja ada error terutama pada tag yang tidak ditutup jadi pastikan format kodemu benar sebelum menyimpan customized template.


Posted by
Labels:

3 comments:

  1. AnonymousFebruary 2, 2011 at 6:00 AM

    thanks :D
    membantu sekali

    ReplyDelete
  2. AtebeFebruary 2, 2011 at 1:32 PM

    @diphtegh : semoga bisa salig share, saya sudah liat blog antum, templatenya bagus banget.....share asalnya juga donk kalo boleh ^_^

    ReplyDelete
  3. AnonymousFebruary 3, 2011 at 7:29 AM

    makasih ya atas kunjungannya...
    sebenarnya itu template dari perancang template yang tersedia kok.

    ReplyDelete

Subscribe to: Post Comments (Atom)