Jimmy Sun

  • HomeStart Here
  • ContactJust Ask
  • Pasang IklanShow Your Site
  • LinkTukeran Link
  • CategoriesBrowse
    • Miscellaneous
    • Online Money
    • Opini
    • Personal
    • Refreshing
      • Cool Stuff
      • Games
      • Jokes
    • Reviews
      • Books
      • Movies
    • Techonology
      • Android
      • Computer
      • Internet
      • My Softwares
      • Programming
      • WordPress
    • Uncategorized
  • SitemapNavigate Here

Membuat Tombol Social Bookmark Tanpa Plugin

Karena ada beberapa teman blogger yang meminta dibuatkan tutorial membuat tombol-tombol social bookmark seperti yang ada di blog ini, maka sekarang saya buatkan tutorialnya, sekalian jadi ada bahan posting nih πŸ˜€

Tutorial yang akan saya buat adalah sesuai dengan yang ada di blog saya ini. Untuk “Home” tombolnya kecil-kecil dan letaknya berderet ke samping di bawah judul posting. Dan untuk di halaman single post tombolnya besar-besar dan saya letakkan di kanan layar monitor pengunjung dan letaknya fixed. Maksudnya fixed adalah apabila Anda scrolling ke atas dan ke bawah, tombol-tombol itu tetap berada dan terlihat di kanan layar monitor Anda (silakan coba membuka halaman single page di blog ini πŸ™‚ ).

OK, langsung ya. Social bookmark yang akan ditampilkan adalah Twitter, Facebook, Google Buzz, Digg, StumbleUpon dan Facebook Like. Tambahan lagi, semuanya ditampilkan tanpa menggunakan plugin apa pun, murni coding, jadi bisa diterapkan juga di website lain selain WordPress.

Langkah Pertama.

Tambahkan kode di bawah ini di file header.php theme Anda, sebelum kode </head>:

<script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script><script src=’http://static.ak.fbcdn.net/connect.php/js/FB.Share’ type=’text/javascript’></script>

<script type=”text/javascript” src=”http://www.google.com/buzz/api/button.js”></script>

Fungsi ketiga baris kode itu adalah agar kita bisa menempatkan tombol Digg, Facebook dan GoogleBuzz di mana saja dan kapan saja.

Langkah Kedua (untuk Home).

Tambahkan kode berikut di file style.css theme Anda:

.bookmarkbox {border-bottom:1px solid #DDD; border-top:1px solid #DDD;padding:5px 0px 5px 0px;}
.bookmarkitem {float:left;padding:5px;}

Baris kode pertama adalah untuk membuat garis batas atas dan bawah seperti ini:
social bookmark

Dan baris kode kedua berfungsi untuk memposisikan tombol-tombolnya.

Langkah Ketiga (untuk Home).

Di file index.php theme Anda, cari kode yang menampilkan judul postingan. Biasanya kodenya seperti ini:

<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?></a>

Tambahkan kode berikut di bawahnya:

<div class=”bookmarkbox”>
<div class=”bookmarkitem”>
<iframe src=’http://api.tweetmeme.com/button.js?url=<?php the_permalink() ?>&amp;source=jimmysun&amp;style=compact’ height=’20’ width=’70’ frameborder=’0′ scrolling=’no’></iframe>
</div>
<div class=”bookmarkitem”>
<a name=’fb_share’ type=’button_count’ share_url='<?php the_permalink() ?>’ href=’http://www.facebook.com/sharer.php’>Share</a>
</div>
<div class=”bookmarkitem”>
<a title=”Post on Google Buzz” class=”google-buzz-button” href=”http://www.google.com/buzz/post” data-button-style=”small-count” data-url=”<?php the_permalink() ?>”></a>
</div>
<div class=”bookmarkitem”>
<a class=’DiggThisButton DiggCompact’ href=’http://digg.com/submit?url=<?php the_permalink() ?>&amp;title='<?php the_title() ?>’></a>
</div>
<div class=”bookmarkitem”>
<script src=”http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=<?php the_permalink() ?>”></script>
</div>
<div style=”clear:both;”></div>
</div>
<br />
<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=35″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:35px;” allowTransparency=”true”></iframe>

Penting: ganti kode yang saya beri warna merah di atas dengan username Twitter Anda.

Kode di atas fungsinya untuk menampilkan tombol-tombol social bookmark-nya. Kemudian yang baris terakhir untuk menampilkan tombol Facebook Like.

Nah, tombol-tombol social bookmark untuk Home sudah selesai. Sekarang lanjut untuk halaman single post.

Langkah Keempat (untuk Single).

Tambahkan kode berikut di file style.css theme Anda:

#bookmarkleft {
position: fixed;
width: 60px;
top: 100px;
right: 0px;
font-size: 0.9em;
border: 1px solid #DDD;
background-color: white;
padding: 10px;
z-index: 2;
}

Kode di atas fungsinya untuk membuat tombol-tombol social bookmark tetap diam di tempatnya dan tidak ikut naik turun ketika layar digulung (scroll) ke atas dan ke bawah. Apabila Anda ingin letaknya di sebelah kiri, ganti right menjadi left. Anda bisa juga mengganti parameter top untuk menentukan posisinya seberapa jauh dari atas layar monitor. Silakan coba-coba sendiri untuk mengganti parameter-parameternya.

Oh ya, kode ini sudah saya test di FireFox, Chrome dan Opera tidak ada masalah. Tapi bermasalah di Internet Explorer 6. Internet Explorer versi 8 sudah bisa menampilkannya dengan baik (tapi masih tetap merupakan browser yang payah!).

Langkah Kelima (untuk Single).

Di file header.php theme Anda, copy kode berikut tepat di bawah <body>:

<?php if(is_single()) { ?>
<div id=”bookmarkleft”>
<div class=”bookmarkitem”>
<a name=’fb_share’ type=’box_count’ share_url='<?php the_permalink() ?>’></a>
</div>
<div class=”bookmarkitem”>
<iframe src=’http://api.tweetmeme.com/button.js?url=<?php the_permalink() ?>&amp;source=jimmysun&amp;style=normal’ height=’61’ width=’50’ frameborder=’0′ scrolling=’no’></iframe>
</div>
<div class=”bookmarkitem”>
<a title=”Post on Google Buzz” class=”google-buzz-button” href=”http://www.google.com/buzz/post” data-button-style=”normal-count” data-url=”<?php the_permalink() ?>”></a><script type=”text/javascript” src=”http://www.google.com/buzz/api/button.js”></script>
</div>
<div class=”bookmarkitem”>
<script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script><a class=’DiggThisButton DiggMedium’ href=’http://digg.com/submit?url=<?php the_permalink() ?>&amp;title='<?php the_title() ?>’></a>
</div>
</div>
<?php } ?>

Penting: ganti kode yang saya beri warna merah di atas dengan username Twitter Anda.

Langkah Keenam (untuk Single).

Terakhir adalah menampilkan Facebook Like di halaman single post. Edit file single.php theme Anda, lalu tempatkan kode Facebook Like ini di mana saja Anda mau:

<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=35″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:450px; height:35px;” allowTransparency=”true”></iframe>

Untuk meletakkannya di atas postingan, paste-kan kode tersebut di atas kode ini:

<?php the_content(‘Continue Reading…’); ?>

Silakan Anda coba-coba sendiri untuk posisinya ya :wink2:

Selesai! Tombol-tombol social plugin Anda sudah beres. Bagaimana kalau mau menambahkan tombol-tombol dari social bookmark lain seperti Reddit atau Yahoo Buzz? Gampang koq, Anda tinggal masuk ke website mereka, cari kode untuk menampilkan tombolnya, lalu edit parameter ‘url’ dengan <?php the_permalink() ?>, lalu paste kode nya seperti contoh di atas.

Semoga bermanfaat dan selamat mencoba :thumb1:

May 22, 2010Jimmy
Bikin Plugin WordPress Simple Popular PostsLiburan Dulu
You Might Also Like
 
Google Tidak Menghiraukan Meta Tag “Keywords”
 
Aktifasi Multisite Dengan WordPress 3.0
Comments: 71
  1. Rock
    May 22, 2010 at 6:11 am

    Wahhh… keren nich…
    Aku simpan dulu mas…
    Thanks.

  2. addiehf
    May 22, 2010 at 10:01 am

    mangstabs πŸ˜€ tapi belum bisa dipraktekin skrng neeh om, karena yang udah ada baru semingguan nempel di blog tuh tombol (yg plus itungan). itu juga ampe puyeng2 nempatinnya yang enak dimana plus ada aja error (doh)

    di bokmak dulu ah, ntar kalo kepengen langsung praktekin hahahaaa

  3. hasi aulia
    May 22, 2010 at 10:41 am

    mantaf om jimmy,,,dari script yang di kasih di atas saya jadi bisa menghias blog saya juga om,,biar gk bete karena sering error :laughloud:

    kalo mau di ganti pake yang lain di kanan bawah juga bisa tuh,,,misalnya saya mau kasih banner-banner apa gitu om,,,hehehe,,,

    mmakasih ya om tutorial nya,,, :thumb6:

  4. spydeeyk
    May 22, 2010 at 12:36 pm

    manteebb.. :thumb5: saya cobain dl ya.. thanks alot mas.. :salute: :salute:

  5. Gus Ikhwan
    May 22, 2010 at 4:05 pm

    salam sahabat, makasih atas infonya mas
    saya izin bookmark dulu ya

  6. Paramadharma
    May 22, 2010 at 8:42 pm

    Tips dan trik yang sangat bermanfaat. Kita perlu mencobanya. Terima kasih atas informasi yang diberikan.

  7. zee
    May 22, 2010 at 8:58 pm

    Tips yang oke banged Jim. Kalau bisa tanpa plugin kenapa tidak?

  8. Meri Wardana
    May 22, 2010 at 9:33 pm

    Terima kasih sekali mas..berguna sekali informasinya…

  9. TUKANG COLONG
    May 23, 2010 at 9:00 am

    Bisa bantu gag om..scroll komen saya jadi dobel n kalo diliat di hape jadi gag keliatan kotak komennya..
    bales ke blog saya aja om.thx 😐

  10. Lirik Lagu
    May 23, 2010 at 10:04 am

    woww :thumb5: keren banget bos,, mo coba sih, tpi blog ku masih blogspot, lom bisa beli hosting. salam kenal bos.. :salute:

  11. iskandaria
    May 23, 2010 at 2:26 pm

    Wah, mantap deh ko. Ntar mau saya coba ah. Soalnya blog saya masih miskin fitur..hehehe

  12. Godaddy Coupon
    May 24, 2010 at 4:43 am

    tutorial bermanfaat bagi saya belajar buat tombol step by step, tapi apa ada pengaruhnya terhadap kecepatan blog? bagaimana cara mengatasinya?

  13. megalibraryonline
    May 24, 2010 at 11:37 am

    :thumb5: good info

  14. Deka
    May 24, 2010 at 12:23 pm

    Theme saya defaultnya ada sich tombol social bookmark tapi sengaja saya hapus. Kurang terlalu suka.

  15. Harry Sue
    May 24, 2010 at 4:27 pm

    nice info bro, salam kenal πŸ˜€

  16. kangtatang
    May 24, 2010 at 7:01 pm

    sip, saya serap dulu ilmunya dan siap2 dipraktekkan πŸ™‚
    terimakasih atas wejangannya Om.

    salam

  17. 2R
    May 24, 2010 at 8:02 pm

    Mantafffph Koh. Ijin Bookmark dolo deh. Thanks for share :thumb5:

  18. Rudi ISL
    May 24, 2010 at 10:55 pm

    minta ijin coba ya om…. thanks…

  19. Haryanto
    May 25, 2010 at 3:53 am

    Terima kasih atas sharingnya

  20. Haryanto
    May 25, 2010 at 8:13 am

    seru bos

  21. maskoetot
    May 25, 2010 at 4:01 pm

    walah baru tahu aku, buat nambah wawasan, pernah dengar β€œDLINGO” main ya ke http://margi-rekaos.blogspot.com trimakasih.

  22. dJumTKS Weblog
    May 25, 2010 at 7:14 pm

    di save dulu infonya mas jimmy ini πŸ™‚ besok2 bisa dicoba, thanks mas.

  23. nich
    May 25, 2010 at 7:21 pm

    Social Bookmarking emang afdol buat bikin tulisan bergaung di dunia maya, itu juga kalau ada yang pencet tombolnya πŸ˜›

    nice tips, Om.. kaya’nya bakalan saya implementasikan (tapi pilih-pilih dulu).

  24. nich
    May 25, 2010 at 7:44 pm

    baru nyobain.. ada sedikit yang perlu diperhatikan nih (misi Om Jimmy):

    kalau copy-langsung-paste code di atas, perlu diperhatikan tanda petik yang di-paste, karena ’ beda dengan ‘ (perhatikan, agak serong tuh yang pertama).

    jadi kalau script-nya gak jalan, ganti secara manual tanda petik yang bermasalah :thumb4:

  25. ekopras
    May 25, 2010 at 10:40 pm

    terima kasih atas tutorialnya ya..
    tak simpan dulu

  26. Brady
    May 27, 2010 at 12:43 am

    Very useful information, helps me out alot. thank you. :thumb5:

  27. Tips SEO
    May 29, 2010 at 12:20 pm

    Bagus sekali postingannya, Saya pasang di blog saya. Thank a lot

  28. Portal Seminar
    May 30, 2010 at 12:17 am

    Terima kasih mas Jimmy.. saya emang mau bikin tombol Social Bookmark nih.

    Saya langsung coba ya…

  29. scorpion EXO helmets
    May 31, 2010 at 11:27 am

    :thumb3: Sangat bermanfaat postingannya mas Jimmy…
    Thanks ya, selama ini saya masih pake plugin utk nambah tombol social bookmark.

  30. Flame Project
    May 31, 2010 at 11:42 pm

    bagus mas tipsnya :thumb5:
    buat blogspot ada ngga mas?

  31. poetra
    June 8, 2010 at 1:17 am

    :ask: waduh .. kayaknya rumit neh …..
    di coba dulu ah …..

  32. putu
    June 8, 2010 at 2:45 am

    wadow rumit ni…
    bookmark dulu ah…
    btw ga da pluginnya ya???

  33. villa ininda ligaya
    June 8, 2010 at 2:21 pm

    ternyata rumit juga mas, buat aku yang ga ngerti pemrograman. kalo ada pluginnnya bisa kasi link download nya ya mas thx

  34. Belajar Bisnis Online
    June 8, 2010 at 2:23 pm

    mumet banget mas, jadi puyeng nih.hehe..
    aku ga mudeng masalah script2 pemrograman..
    kalo ada pluginya biar lebih gampang ya mas
    thx tutorialnya :clap:

  35. abdul gani
    June 8, 2010 at 2:39 pm

    thanks infonya bos
    kunjungin blog saya dong…

  36. PutraHosting.com dapur hosting hemat
    June 10, 2010 at 1:36 pm

    ijin ctrl+d dulu ya..laen kali mau ane coba neh,,mantep banget sharenya

  37. okayana
    June 12, 2010 at 12:30 am

    yang byar d bwah judul post ada gak pak?

  38. PutraHosting.com dapur hosting hemat
    June 13, 2010 at 10:01 am

    yang buat blogspot caranya gmn bro? :thumb5:

  39. manajemen resiko
    June 13, 2010 at 10:18 pm

    wah makasih mas.
    ijin copy codenya ya.
    langsung dicoba.

  40. california travel insurance
    June 17, 2010 at 10:11 am

    mantappp…..kereb banget om infonya,… langsung di coba tuh .. πŸ˜€

  41. MindsetBisnisOnline
    June 17, 2010 at 10:16 pm

    mantap ilmunya mas, OK langsung take action ! :thumb4:

  42. Belanja Busana Muslim Modern Terbaru
    June 18, 2010 at 8:13 am

    wah..keren banget mas artikelnya.. :thumb6:
    saya copy dulu nie..
    biar bisa langsung take action
    oh ya mas, tp kalau yang belum th tentang html2 kayak di atas gmn ya..
    hee…he….entar error ga ya mas
    ma kasih banget nie tips buat social bookmarkingnya
    semoga makin sukses ya..
    saya tunggu jawaban pertanyaan sya mas

  43. pen camera
    June 19, 2010 at 5:43 am

    Kalau untuk tombol facebook like seperti pada artikel2 di blog ini gimana Mas Jimmy?

  44. Reviewa
    June 21, 2010 at 8:39 pm

    Fungsi dari widget widget bookmark itu untuk apa mas??

  45. pergola awning
    June 24, 2010 at 4:02 pm

    Sangat bermanfaat mas….
    Selama ini saya mengunakan plugin untuk nambah tombol social bookmark.
    Thank ya

  46. d'amateur
    June 28, 2010 at 8:30 am

    Ini untuk wordpress ya sob? kalo di blogger bisa nggak?… :thumb1:

  47. venty
    June 28, 2010 at 3:41 pm

    nice post..
    thx shared script-nya mas.. πŸ™‚

  48. reza
    June 28, 2010 at 7:59 pm

    nice info
    keep posting !!!

    see us at :
    http://uii.ac.id/

  49. risky
    June 29, 2010 at 8:15 am

    makasih infonya….

  50. Bali villa
    July 5, 2010 at 3:55 am

    wah Membuat Tombol Social Bookmark Tanpa Plugin ternyata rumit juga, ga semudah saya bayangkan. jika ada plugin nya, saya minta link download nya mas jimmy. makasih :thumb4:

  51. jasa warnet
    July 5, 2010 at 11:03 pm

    mantaaf bro tutorialnya .. langsung di praktekin, langsung jooss
    Jasa Setting Pembuatan Warnet

    SEO | Technology |News

  52. Rizky Bintang Utama
    July 7, 2010 at 10:16 am

    Keren keren πŸ™‚

    salam kenal ya ..

  53. Kata-kata Mutiara Cinta
    July 8, 2010 at 7:07 pm

    thanks tipsnya :thumb5:

  54. semesta tronik
    July 22, 2010 at 7:31 am

    Keren info nya

  55. souvenir pernikahan murah
    September 21, 2010 at 3:26 pm

    waduh…waduhhhhh….pusing nih…

  56. peluang bisnis
    December 17, 2010 at 1:03 pm

    wah blog ini emang mantab2 infonya! i love this blog!

  57. spy pen camera
    February 22, 2011 at 11:04 am

    kayaknya enakan pake pluggin ya

  58. kolostrum
    March 15, 2011 at 8:26 pm

    makasih bos tutorial nya! bermanfaat banget! :thumbup:

  59. Vista 84
    March 20, 2011 at 12:04 pm

    mkasih kang jimmy tutorialnya πŸ™‚

  60. info seminar
    April 11, 2011 at 7:50 pm

    lama tak berkunjung, ni blog makin keren aja!

  61. 0mem qRen
    April 19, 2011 at 3:54 pm

    Asik tuh boss, tutor nya. Ada yang untuk blogspot ga? Mohon bimbingannya…

  62. Radio H2 FM
    April 19, 2011 at 8:39 pm

    :thumb6: keren,
    thanks ilmunya gan!

  63. BURSA IKLAN
    July 13, 2011 at 3:28 am

    mantap tutorialnya,…

  64. Salman Herbal
    August 23, 2011 at 10:01 am

    Luar biasa sharenya. Bookmark dulu ah. Makasih banyak Pak Jimmy.

  65. Blogger Bodoh
    September 7, 2011 at 12:50 pm

    Wow ..!!
    Langkah2nya panjang amir gan, tapi tetap semangat dach demi mendapatkan visitor !

  66. infomasi pretelan
    March 25, 2012 at 10:36 am

    bookmark dulu dah, ini yang saya cari cari πŸ˜€ thank dah share agan jimmy

  67. bang kaus
    April 27, 2012 at 11:49 pm

    terima kasih atas tutorial nyang bermanfaat ini ya, Mas.
    Selama ini saya selalu pake plugin, tapi sekarang saya belajar untuk tidak bergantung pakai plugin karena bikin berat.

    thank you :thumbup:

  68. Pengguna Android
    May 3, 2013 at 7:57 pm

    Lumayan nih buat hias blog..
    Coba dulu semoga berhasil πŸ˜€

  69. citragarment
    September 11, 2013 at 9:44 am

    wow scriptnya banyak bgt :noidea:
    agak gimana gitu klo pas liat script2 :laughloud:

  70. citragarment
    September 17, 2013 at 11:11 am

    wow banyak bgt scriptnya :ask:

  71. InfoKorupsi
    November 25, 2013 at 2:45 am

    Lumayan nih buat hias blog..
    Coba dulu semoga berhasil

Jimmy
May 22, 2010 Personal, WordPress digg, facebook, facebook like, google, google buzz, plugin, social bookmark, stumbleupon, twitter, WordPress
Recent Comments
  • Budiman on Yamaha FreeGO dan Kymco FreeLX: “Keren mas ulasannya ,”
  • Toko aksesoris iphone on Ini Dia Daftar Keluaran Mobil Suzuki Terbaru 2018: “suzuki terus berinovasi ya”
  • Lutfi on Ini Dia Daftar Keluaran Mobil Suzuki Terbaru 2018: “foto-fotonya mobilnya kurang om”
  • Riko Rahmanto on Ini Dia Daftar Keluaran Mobil Suzuki Terbaru 2018: “Thanks sharingnya bang”
  • Jimmy on Membuat Wallpaper Android Diam Tidak Bergerak: “Bisa πŸ™‚”
Categories
Blogroll
  • BlogDokter
  • Deddy Andaka
  • Jersey Futsal
  • Jiewa
  • Jual Kaos
  • Souvenir Pernikahan
  • Tipis
  • Yudi World
  • Zee
Facebook & Twitter
Tweets by @jimmysun
Buku Pramuka Boyman
Buku Pramuka Boyman
natural balmut
Check This Out!
Follow me on Pinterest!
Visit Jimmy Sun's profile on Pinterest.
2021 © Jimmy Sun
  • Home
  • Contact
  • Pasang Iklan
  • Link
  • Categories
    β–Ό
    • Miscellaneous
    • Online Money
    • Opini
    • Personal
    • Refreshing
      β–Ό
      • Cool Stuff
      • Games
      • Jokes
    • Reviews
      β–Ό
      • Books
      • Movies
    • Techonology
      β–Ό
      • Android
      • Computer
      • Internet
      • My Softwares
      • Programming
      • WordPress
    • Uncategorized
  • Sitemap