Menambahkan Tombol Bookmark Tanpa Plugin

bookmarkSetelah beberapa hari lalu saya mengganti theme blog ini dengan yang lebih ringan, ternyata mas Guusn tertarik dalam menerapkan tombol bookmark yang sudah terintegrasi dengan theme dan tanpa perlu menggunakan plugin. Untuk memenuhi keinginannya maka saya tuliskan artikelnya

Semua code dalam artikel ini hanya saya ambil dari theme Tricks yang saya pakai. Saya belum menguasai banget jadi cuma bisa sebatas menulis dan memodifikasi . Oke, dalam pembuatan tombol bookmark ini terdiri dari 3 bagian file yaitu file bookmark yang berisi kode PHP dari penyusun urutan tombol di atas, kemudian file CSS yang berfungsi sebagai pengatur tampilan dari tulisan, background, margin, dll. Yang terakhir berisi icon-icon yang akan kita gunakan sebagai tombol bookmark. Sobat bisa menggunakan icon yang sudah ada atau pengin di ganti dengan icon bikinan sendiri

Oke untuk yang pertama kita mulai dengan membuat file bookmark.php dan masukkan dalam satu directory theme yang sobat gunakan (wp-content/themes/nama-themes)

Untuk file bookmark.php ini silahkan ketikkan kode dibawah ini


Kemudian untuk file css silahkan di tambahkan saja ke file css theme sobat biasanya style.css (wp-content/themes/nama-themes/style.css). Tambahkan saja di baris paling bawah

/* Bookmark *
.bookmark{padding:10px;border:1px solid #f0f0f0;background:#f5f5f5;}
.bookmark h4{color:#666;font:bold 19px/19px Arial, sans-serif;border-bottom:solid 1px #eee;padding:0;margin-bottom:10px;}
.bookmark img{}
.book{float:left;margin:0 11px 0 0;padding:1px;border:1px solid #eee;background:#ffffff;}
.booklast{float:left;margin:0;padding:1px;border:1px solid #eee;background:#ffffff;}

Dan untuk yang terakhir ialah icon bookmark. Icon-icon ini bisa sobat pasang sendiri sesuai yang di inginkan, dengan ukuran yang bisa di sesuaikan keinginan kita. Dan jangan lupa icon-icon ini di masukkan dalam directory images tempat theme sobat berada (wp-content/themes/nama-themes/images)

Setelah semua file sudah masuk ke dalam directory themes, sekarang tinggal kita buka file single.php dan tambahkan kode ini

di bawahΒ <?php the_content(); ?> . Kode di atas berfungsi untuk memanggil file bookmark.php yang telah kita buat sebelumnya

Nah bagi sobat yang ga mau repot menulis kode program di atas, bisa mendownload file yang saya sertakan berisi Β file bookmark.php, bookmark.css, dan folder images berisi icon-icon yang saya gunakan.

Download File Bookmark

Dan kalau sobat ingin mengganti salah satu tombol share di atas dengan yang lainnya, misalnya tombol Google +1 seperti permintaan mas Guusn. Maka kita tinggal mengganti link share kirim berita dengan link google +1 yang bisa kita dapatkan dari halaman google +1.

Download File Bookmark Plus 1

Bila sobat menggunakan file bookmark-plus1.php maka kode untuk memanggilnya ialah

Tapi jangan lupa menambah kan file javascript ini

Di header.php maupun di footer.php theme blog sobat πŸ™‚

Semoga bermanfaat πŸ™‚

Update :Β Untuk code bookmark.php kemarin belum ada link lintas berita. Sekarang sudah saya update. Untuk file downloadnya juga sudah saya update lagi.

39 Comments

  1. afiv
    • Adi Wibowo
  2. afiv
    • Adi Wibowo
    • Adi Wibowo
      • afiv
      • afiv
        • Adi Wibowo
          • afiv
            • Adi Wibowo
  3. Satria Yudha
    • Adi Wibowo
  4. JhezeR
    • Adi Wibowo
  5. Guusn
    • Adi Wibowo
      • Guusn
        • Adi Wibowo
          • Guusn
    • Adi Wibowo
  6. Bisnis Newbie
    • Adi Wibowo
  7. afiv
    • Adi Wibowo
  8. Leo
    • Adi Wibowo
      • Leo
  9. hanif mahaldy
    • Adi Wibowo
    • Adi Wibowo
  10. slashtips
  11. Pingback: 20 Wooden Social Media Icon Pack | Majuterus
    September 1, 2011
  12. loans
    • Adi Wibowo
  13. Pingback: benchtops auckland
    February 1, 2012
  14. Pingback: franchises for sale nz
    February 2, 2012
  15. Pingback: Net Game
    February 2, 2012
  16. February 7, 2012
  17. Pingback: millbrook beds
    February 7, 2012
  18. Pingback: powerpoint design
    February 7, 2012
  19. Pingback: clairvoyant phone readings
    February 7, 2012
  20. February 7, 2012
  21. Pingback: water softener
    February 7, 2012
  22. Pingback: Excerpt
    February 7, 2012
  23. Pingback: digi article blaster
    February 7, 2012
  24. Pingback: Current Excerpt
    February 8, 2012
  25. Pingback: wp syndicator
    February 8, 2012
  26. Pingback: racing game
    February 8, 2012
  27. Pingback: New Excerpt
    February 8, 2012
  28. Pingback: ego C
    February 9, 2012
  29. Pingback: free racing games
    February 9, 2012
  30. Pingback: revision door
    February 9, 2012
  31. February 9, 2012
  32. Pingback: tooth whitening
    February 9, 2012
  33. Pingback: homemade meal replacement shakes for weight loss
    February 9, 2012
  34. Pingback: Epson Toner Cartridges
    February 11, 2012
  35. Pingback: http://www.startrekconventions.net/2012/01/24/medical-billing
    February 11, 2012
  36. Pingback: cheap b&b lond
    February 11, 2012
  37. Pingback: GPS Fleet Tracking
    February 12, 2012
  38. Pingback: joinery auckland
    February 13, 2012
  39. Pingback: Bridging loan
    February 13, 2012
  40. Pingback: Air charter
    February 13, 2012
  41. Pingback: Jet Charter
    February 13, 2012
  42. February 13, 2012
  43. Pingback: pool tables
    February 16, 2012
  44. Pingback: Digital pr
    February 16, 2012
  45. Pingback: furniture hire scotland
    February 17, 2012
  46. Pingback: ski chalets
    February 17, 2012
  47. Pingback: Caribbean villas
    February 21, 2012
  48. Pingback: Weblinx Ltd
    February 21, 2012
  49. Pingback: Bboy
    February 21, 2012
  50. Pingback: Weblinx reviews
    February 21, 2012
  51. Pingback: christmas jumpers
    February 23, 2012
  52. Pingback: chain link fence
    February 25, 2012
  53. Pingback: online home design
    February 25, 2012
  54. Pingback: play online
    February 26, 2012
  55. a