Dari satu laman kesatu laman saya menjelajah, Waktunya sudah kepagi, mata pula rasa mengantuk. Tiba-tiba tiba disatu ruang, website dari negara jiran, saya terjumpa sesuatu yang mungkin boleh dikongsi bersama, mungkin ada yang berminat mungkin juga sebaliknya, Itu terpulanglah kepada anda, sekadar ingin berkongsi apa yang saya jumpa.
Sharing sexy bookmark, tab yang menyenangkan juga begitu cantik, memudahkan pelawat berkongsi posting anda secara cepat kelaman-laman sosial atau lainnya. Bagi saya ianya cukup mesra pengguna. dan sungguh sexy seperti apa yang dikatakan dan bersesuaian dengan tajuknya.
Lihat contoh bagaimana saya telah lakukan kepada page saya, pada setiap bahagian bawah posting terdapat bookmark tersebut, yang pada asalnya saya sendiri tercari-cari dimana kemunculannya.
Nah, beginilah contoh yang anda boleh nampak bookmark tersebut, setiap kali mouse melintasi ta tersebut, akan muncul secara jelas tab yang dimaksudkan, dan tanpa menghalakan mouse kearahnya, ianya hanya nampak separuh sahaja tab tersebut, sungguh menarik, ini saya dapatkan daripada cahayabiru, dan saya tidak pasti samaada cahayabiru
pemilik asal ciptaan ini. Walaubagaimana pun terima kasih kepada beliau kerana sudi berkongsi. Dan sekarang saya pula berkongsi dengan anda. Mungkin anda boleh dapatkan daripada cahayabiru, berbezanya disini saya kemukakan keterangan mengikut gaya saya dan menggunakan bahasa Malaysia. Kepada anda yang tidak memahami bahasa Melayu atau Malaysia, anda boleh gunakan Gadget Language Translator yang telah saya sediakan bagi kemudahan anda, dan saya cuba sebaik mungkin bahasa saya agar translator dapat berfungsi dengan baik menterjemah lengok bahasa saya kepada bahasa anda.
pemilik asal ciptaan ini. Walaubagaimana pun terima kasih kepada beliau kerana sudi berkongsi. Dan sekarang saya pula berkongsi dengan anda. Mungkin anda boleh dapatkan daripada cahayabiru, berbezanya disini saya kemukakan keterangan mengikut gaya saya dan menggunakan bahasa Malaysia. Kepada anda yang tidak memahami bahasa Melayu atau Malaysia, anda boleh gunakan Gadget Language Translator yang telah saya sediakan bagi kemudahan anda, dan saya cuba sebaik mungkin bahasa saya agar translator dapat berfungsi dengan baik menterjemah lengok bahasa saya kepada bahasa anda.
Sekarang berbalik kepada topik utama. Bagaimana untuk melakukan atau menghasilkan alat ini berfungsi di halaman anda?
Langkah pertama,
Anda Perlu muat turun file ini, file yang dimuat turun adalah jenis WinRAR. Selepas muat turun file ini, anda perlu keluarkan 2 file yang terdapat didalamnya,
1- sharingsexy.png
Selepas anda muat turun, kemudian keluarkan 2 file gambar yang terdapat didalamnya, kemana mana bahagian folder komputer anda, kemudian anda perlu muat naik semula kedua-dua file ini kemana mana hosting image, anda boleh gunakan Hosting Photobucket.com atau anda juga boleh gunakan Picasa Web. Apa yang perlu anda cuma copy link gambar yang dimuat naik tadi untuk gantikan pada 3 tempat dimana telahsaya tandakan dengan tulisan biru tebal. File sharingsexy.png perlu anda tampal didua tempat dan sexysprite.png cuma satu tempat.
Langkah seterusnyanya,
Seperti biasa, untuk bermain dengan css kod, anda perlu kepada blog layout --> Edit HTML, kemudian klik pada expand widget template.
Pada ruangan css script kod, Tekan CTRL + F, cara biasa atau shortcut untuk carian. Apa perlu anda cari kali ini adalah perkataan ]]></b:skin>,
Seperti mana biasa, anda boleh copy perkataan tu disini, kemudian praktikkan dilaman anda. Dan sekarang apa yang perlu anda lakukan, Salin kod dibawah ini, dan tampalkan dibawah perkataan ]]></b:skin> ini.
Salin kod dibawah. Seeloknya anda salin kod dibawah ini, kemudian tampalkan didalam format notepad untuk sementara. Bagi mengelakkan kekeliruan semasa menampal dalam ruang css kod. Setal kod dibawah ini anda telah tampalkan pada mana-mana notepad dalam komputer anda, Pada perkataan atau tulisan biru tebal yang saya tandakan dibawah, ianya perlu digantikan dengan alamat image posting yang telah anda muat naik sebelumnya. DAn anda harus ingat, jangan tertukar kedudukan file, saya cuma menandakan tulisan berwarna biru hanya untuk dimana image hosting anda berada, nama file image tidak saya tanda untuk tidak mengelirukan anda membezakan image file yang mana perlu berada ditempat tersebut. Setelah anda telah menetapkan alamat image posting yang anda edit menggunakan notepad, sekarang pilih semua kod css yang telah anda edit, salin sekali lagi, kemudian tampalkan dibawah perkataan ]]></b:skin>,
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://YOUR-IMAGE-HOSTING/sharingsexy.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://YOUR-IMAGE-HOSTING/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('http://YOUR-IMAGE-HOSTING/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>
Sekiranya terdapat lebih daripada satu perkataan data:post.body ini, anda perlu mencari yang paling akhir, atau paling bawah sekali. Anda mesti memastikan betul-betul mengenai perkataan ini, disebabkan secara kasarnya ia seakan-akan sama, mempunyai perkataan post.
Sekarang anda perlu salin kod dibawah. Tetapi anda harus ingat, terdapat satu link dimana alamat atau url feed perlu di tukar. Jika blog anda tidak mempunyai rss feed, berdaftarlah dengan FeedBurner, ianya adalah percuma.
<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/YOUR-FEEDBURNER-ID' 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>
Sekarang anda perlu salin kod dibawah. Tetapi anda harus ingat, terdapat satu link dimana alamat atau url feed perlu di tukar. Jika blog anda tidak mempunyai rss feed, berdaftarlah dengan FeedBurner, ianya adalah percuma.
<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/YOUR-FEEDBURNER-ID' 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>
Sekarang anda lihat perkataan Your FEEDBURNER-ID, anda perlu gantikan dengan url feedburner id anda.
Setelah segalanya telah siap, apa yang perlu anda lakukan, anda boleh klik pada tab pra-tonton, sekiranya tidak terdapat ralat pada apa yang anda buat sebentar tadi, dan page menunjukan laman anda, anda boleh tutup pra-toton tersebut, kemudian SAVE TEMPLATE.
Sekarang anda boleh lihat hasilnya, bagaimana ia membuatkan laman anda labih menarik dan mesra pelawat yang ingin berkongsi posting anda dilaman sosial mereka.
Selamat mencuba dan semoga berhasil.
Sekian.
Setelah segalanya telah siap, apa yang perlu anda lakukan, anda boleh klik pada tab pra-tonton, sekiranya tidak terdapat ralat pada apa yang anda buat sebentar tadi, dan page menunjukan laman anda, anda boleh tutup pra-toton tersebut, kemudian SAVE TEMPLATE.
Sekarang anda boleh lihat hasilnya, bagaimana ia membuatkan laman anda labih menarik dan mesra pelawat yang ingin berkongsi posting anda dilaman sosial mereka.
Selamat mencuba dan semoga berhasil.
Sekian.
Note: Cuba anda lihat sharing sexy saya dibawah :)
No comments:
Post a Comment