Adsense For Newbie

Sama-sama belajar. Sama-sama berbagi.

Friday, March 12, 2010
Berlangganan

Men'Social'kan Bookmark si Sexy

Posted by idotkontji at

Kegiatan blogwalking mencari info tentang program Paid Review (ceritanya saya lagi pengen belajar) membuat saya kembali gatal ingin merubah template serta widget2 keren yang sebelumnya tidak pernah saya pakai di blog Kontjidot ini. Banyak sekali blog2 yang membuat saya lapar untuk mengubah template, juga blog2 yang membuat saya lapar untuk make money online karena membaca postingan2 atas kesuksesan mereka dalam internet business (pengen banget bikin blog pure membahas satu niche, misalkan tentang: Auto Insurance, Home Improvement, Gardening Tips, Life and Health >> Tapi suka tetep melenceng jadi general - lagi general lagi ^_^).

Sebelumnya saya mencoba untuk mengganti theme lama blog Kontjidot ini dengan theme Arthemia yang memang dulu belum saya temukan modifikasi untuk diimplementasikan pada blogspot. (padahal dari dulu sudah kepincut banget) Ternyata sudah ada sekarang (Maklum baru turun gunung, masih dalam proses adaptasi kembali dengan dunia perbloggeran). Nah, kali ini saya tertarik juga untuk 'kencan' dengan si Sexy icon2 bookmarking yang memang bener2 bikin orang2 ingin menggunakannya. Namun ada beberapa kendala saat saya menambahkan kode2 HTML nya ke dalam halaman Editor HTML, karena beberapa postingan dari blogger2 yang saya temukan tidak begitu detail untuk bagian penambahan di halaman Editor HTML yang sudah ada. Malahan ada beberapa blogger luar yang menyarankan untuk meng-hosting sendiri icon2 Sexy Social Bookmark tersebut. (Tidaaaaakkk....). 

Meskipun banyak tutorial bagaimana cara untuk memasang kode2 HTML Sexy Social Bookmark ini, tidak ada salahnya saya menambahkan sedikit tentang kendala saya dalam pengimplementasiannya.

To the point aja ya (Saya mengansumsikan anda telah berada di halaman Editor HTML blogspot)

1. Tepat di ATAS kode </head> sisipkan: (cari kode dengan menekan CTR+F)
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(&#39;http://i43.tinypic.com/2ueii3t.png&#39;) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(&#39;http://i43.tinypic.com/2ueii3t.png&#39;) 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(&#39;http://i941.photobucket.com/albums/ad259/spiceupyourblog/sexybookmarksbuttons.png&#39;) 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>
 2. Setelah kode <data:post.body/> tambahkan kode HTML di bawah ini:
    <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://feeds.feedburner.com/AdsenseForNewbie' title='Subscribe to RSS' rel='nofollow'/></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>
Note: Untuk URL feedburner http://feeds.feedburner.com/AdsenseForNewbie ini gantilah dengan URL feedburner anda.

Nah, kendala yang saya temukan pada nomor 2 adalah, karena ada begitu banyaknya kode: <data:post.body/> yang terdapat di kode2 HTML Arthemia saya (rententan kode2 nya bisa dilihat di bawah ini).
<div class='post-body'>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style>.fullpost{display:inline;}</style>
      <data:post.body/>
      <b:else/>
      <style>.fullpost{display:none;}</style>
      <data:post.body/>
<div class='entry clearfloat'>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style>.fullpost{display:inline;}</style>
      <data:post.body/>
<b:else/>
      <style>.fullpost{display:none;}</style>
      <data:post.body/>

Nah, tepatnya di bawah kode warna biru-lah ternyata kode2 pada cara nomor 2 dicopas dan si Sexy Social Bookmark dapat tampil dengan sempurna. Jadi untuk para newbie yang mengalami kesulitan seperti saya nggak bingung lagi kan?

Oh iya... Ada banyak postingan blogger juga untuk cara nomer 1 dengan men-copas nya di bawah kode ]]></b:skin> bukan di atas kode </head>. Letak kode ]]></b:skin> dan kode </head> memang berdekatan. Tapi di atas kode </head> pada template saya ada sederet kode lain yang memisahkan antara kode ]]></b:skin> dan kode </head> jadi untuk cara nomor 1 mencopas di atas kode </head> lah yang berhasil buat template Arthemia ini.

Mudah2an untuk para newbie sedikit tambahan saya ini bisa mempersingkat kebingungan anda. Kalo masih bingung yuk bingung bareng-bareng... Heuheuy deudeuh...

Related with : Men'Social'kan Bookmark si Sexy

Subscribe to: Post Comments (Atom)