Pasang Social Bookmarking

By: ArtWork69 - In: , - 2 komentar

Apa si gunanya pasang social bookmarking di blog? Mungkin itu adalah salah satu pertanyaan yang muncul.
Biasanya yang melintas dipikiran setiap blogger adalah bagaimana mendapatkan traffic sebanyak-banyaknya ke blog kita.
Sebenarnhya kunci yang paling utama adalah kualitas posting kita. Apakah artikel kita cukup mewakili kebutuhan para pengunjung blog kita. Poin yang satu ini memang sepenuhnya bergantung pada si pemilik blog tersebut. Jika content blog anda benar-benar memenuhi kebutuhan pengunjung, maka secara otomatis mereka akan kembali lagi dan lagi.
Kemudian konsistenti si pemilik blog dalam menulis artikel-artikel nya juga sangat penting. Jika content yang anda miliki sekarang sudah cukup menarik bagi pengunjung, dan pengunjung memutuskan untuk kembali lagi ke blog anda lain kali dan mereka selalu melihat artikel yang sama, maka ahirnya mereka akan berhenti untuk mengunjungi blog anda.
Anggap saja dua point diatas sudah terpenuhi, maka tentu saja para pengunjung anda tidak mau kehilangan jejak dari blog anda. Karena mereka akan kembali lagi nantinya. Nah inilah peran social bookmarking bagi anda. Yaitu untuk mempermudah pengunjung untuk keep on track blog anda di social bookmark mereka.

Social bookmarking ini meliputi beberapa situs utama yang dianjurkan yaitu:Digg, Technorati, Blinklist, Del.icio.us, Furl, Stumble , Reddit, yahoo, dan Simpy Spurl.

Bookmark tersebut akan muncul di bagian bawah setiap posting anda.
Untuk cara pemasanganya ikuti langkah berikut ini:

1. Sperti biasa anda login ke blogger>Layout>Edit HTML

2. Kemudian anda cari script ini:

<p><data:post.body/></p>


3. Kalau sudah ketemu, Pasang script ini di bawah script di atas (no.2)


<!-- Start of social bookmarks. Check http://bloggeraccessories.blogspot.com/ for updates -->
<span class='post-author' style='font-size: 95%;'><br/>
Add Post To: |
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Digg</a>|
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'>Technorati</a>|
<a expr:href='&quot;http://tipd.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Tip&#39;d</a>|
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>del.icio.us</a>|
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Stumbleupon</a>|
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Reddit</a>|
<a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot; + data:post.url + &quot;&amp;Title=&quot; + data:post.title' target='_blank'>BlinkList</a>|
<a expr:href='&quot;http://www.furl.net/storeIt.jsp?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank'>Furl</a>|
<a expr:href='&quot;http://www.spurl.net/spurl.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Spurl</a>|
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.title + &quot;&amp;u=&quot; + data:post.url' target='_blank'>Yahoo</a>|
<a expr:href='&quot;http://www.simpy.com/simpy/LinkAdd.do?href=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>Simpy</a>|
<br/></span>
<!-- End of social bookmarks -->


4. Kalu sudah, silahkan SAVE hasil edit anda.
5. SELESAI.


Diimport dari: Mas Eko
-------

Sexy Social Bookmark


Blogwalking adalah salah satu cara yang paling tepat untuk cari inspirasi. Buktinya dengan blogwalking kita dapat informasi dan ide-ide cemerlang dan bisa kita tuangkan kedalam blog kita. Seperti postingan saya kali ini. Saya mendapatkan widget unik dari blogwalking blog Cahaya Biru. Widget Social Bookmark yang terlihat tampil beda. Social Bookmark ini dinamai dengan Sexy Social Bookmark, karena tampilannya terlihat sexy dan stylist. Coba liat gambar dibawah ini.




Saya akan jelaskan tutorial membuatnya. Ga usah panjang lebar basa-basinya hehehe


Yang pasti anda harus login blogger terlebih dahulu. Lalu tuju langsung ke halaman EDIT HTML, jangan lupa Expand Widget Template. Cari kode ]]></b:skin> kemudian letakkan kode CSS dibawah ini persis diatas kode ]]></b:skin> 






.sexy-bookmarks {

height:54px;

background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;

position:relative;

width:540px;

}



.sexy-bookmarks span.sexy-rightside {


width:17px;

height:54px;

background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;

position:absolute;

right:-17px;

}



.sexy-bookmarks ul.socials {

margin:0 !important;


padding:0 !important;

position:absolute;

bottom:0;

left:10px;

}



.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;

}



.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('http://img509.imageshack.us/img509/3131/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>
Jangan lupa disimpan terlebih dahulu kalo sudah. Kemudian cari kode <data:post.body/>



Note : biasanya letaknya ini dibagian kode Read More bagi blog anda yang sudah menggunakannya.



Letakkan HTML berikut ini dibawah kode <data:post.body/> :




<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;amp;&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;amp;&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;amp;&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;amp;&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;amp;&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;amp;&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;amp;&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;amp;&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;amp;&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;amp;&amp;title=&quot; + data:post.title' target='_blank'/></li>



</ul>

<span class='sexy-rightside'/></div>
Lihat teks yang berkedip-kedip itu. Nah teks tersebut kamu ganti dengan Feedburner ID kamu. Setelah selesai jangan lupa simpan dan lihat hasilnya.




Sedikit penambahan nie...Kamu juga bisa meletakkan widget tersebut selain di bawah <data:post.body/>.



Kamu bisa letakkan di bawah kode

  •  <p class='post-footer-line post-footer-line-1'> yaitu letaknya persis dibawah label author.

  •  <p class='post-footer-line post-footer-line-2'> yaitu letaknya persis ditengah-tengah antara label author dan label Category.


  • <p class='post-footer-line post-footer-line-3'> yaitu letaknya persis dibawah label Category.

Selamat Mencoba...Happy Tutorial with NdyTeeN

Print this post

Sincerely,
Padhang Bulan
Layla Signature

About the author

author Admin

Duis sed tellus et tortor vestibulum gravida. Praesent elementum elit at tellus. Curabitur metus ipsum, luctus eu, malesuada ut, tincidunt sed, diam. Donec quis mi sed magna hendrerit accumsan.

2 komentar:

Seti@wan Dirgant@Ra mengatakan...

Kalau buat Bloquote gimana la?

Jumat, Juni 26, 2009 12:57:00 PM
ArtWork69 mengatakan...

Untuk blog ini, Lela cuma modifikasi pake kode di bawah ini:

# modifikasi blockquote
blockquote {
background:#e4e3e3 url(http://lh5.ggpht.com/_pt7i0nbIOCY/SeKVrG5uTtI/AAAAAAAABxc/JlBRASMRw7A/blockquote_thumb%5B2%5D.png?imgmax=800) no-repeat top left;
margin:0 25px 15px;
padding: 40px 15px 10px 80px; }

Jumat, Juni 26, 2009 6:35:00 PM

Posting Komentar

Langganan: Posting Komentar (Atom)

Copyright © 2013 Blogumulus Journal and Blogger Templates

Back to Top