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

%MINIFYHTML70f2ff9851613703626bd4de61d282a910%

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.

Comments

    1. @afiv, masa ga ada sob? semua theme wordpress pasti ada single.php kok. Karena file itu untuk menampilkan 1 halaman posting.
      Coba di cari lagi sob πŸ™‚

        1. @afiv, udah saya cek sob. Memang ga ada single.php nya.
          Tapi kan di themenya sudah ada option untuk menambahkan tombol share.
          Jadi ya ga perlu tambah ini πŸ™‚

  1. pengen pasang social bookmark lagi nih kayaknya, langsung dinclude di single aja. thank mas sekalian saya donlot kodenya πŸ˜€

  2. bagus mas ini yang saya tunggu2 :D. mas, tapi bisa tidak bookmark lintas berita di ganti menjadi google +1 ? saya tdak begitu minat sama lintas berita.

        1. @Guusn, udah kebiasaan kok mas. Jadi kalau cowok saya panggil mas, cewek saya panggil mbak. Walau usianya masih muda πŸ™‚

  3. menarik sekali mas, sepertinya lebih bagus ketimbang menggunakan plugin sexy bookmark, ijin download dulu ya, sapa tahu melepas ketergantungan dari plugin

  4. Caranya hampir sama ya dengan menambah social bookmarking di blogspot, cuma bedanya di tag codenya aja. makasih mas tipsnya.

  5. iiijiiin download mas adi… saya mau nambahkan juga.. tp apakah kalau pake yg JS nanti laoding blog tidak melambat? atau enakan pake yg php aja yaa

    1. @tomi, silahkan mas tomi. Kan code js hanya untuk menampilkan tombol google +1 mas. Memang dari mbah googlenya harus pakai code js kok πŸ™‚
      Yang lain mah tetep sama pakai php πŸ™‚
      cmiiw

  6. Sip triknya mas. Kebetulan beberapa hari yang lalu saya juga memasang social bookmark tanpa plugin di blog saya. Tapi sayangnya kode pemberian facebook dan twitter itu nggak ada yang lolos tes validitas W3C. Terus saya perhatikan kode milik mas, kok nggak sama dengan kode asli facebook dan twitter. Lebih bersih :). Jadi saya minta izin ambil, mau aku coba di blog saya.

      1. @Adi Wibowo,

        Mas, saya mau kasih saran saja. Di bookmark.php milik mas itu pakai <?php the_permalink() ?>. Walaupun tidak salah, tapi kalau misal alamat domain blog kita + judul artikelnya panjang, terus kita share lewat Twitter, maka akan menghabiskan jatah 140 karakter dari Twitter. Kalau kita sendiri yang ngetweet sih nggak masalah. Tapi bagaimana kalau tweet kita di retweet? Nggak ada ruang yang cukup untuk retweet mas (sudah saya coba)

        Mungkin ada baiknya <?php the_permalink() ?> diganti dengan <?php echo wp_get_shortlink($post->ID); ?>. Jadi yang ditweet adalah Post-IDnya, bukan judul artikel yang panjang.

    1. @hanif mahaldy, setahu saya ga akan eror mas.
      Karena ini ga utak-atik core wordpressnya. cuma edit bagian themesnya saja.
      Kalau salah mohon di koreksi πŸ™‚

  7. Wah, blog saya belum saya pasangin link share nih. Tapi bukan nggak mungkin suatu saat saya pasang. Postingan ini saya simpan dulu mas. Nanti kalau udah mantap mau pasang, saya akan buka postingan ini lagi.

  8. […] Jika anda kebingungan tentang cara penggunaan Icon Pack ini, silahkan membaca ulasan saudara Adi Wibowo. Download file yang diulas di sana. Lalu ganti icon-icon yang ada di folder image dengan Icon Pack […]

  9. Do not a lot of cash to buy a house? Worry no more, just because that’s possible to receive the mortgage loans to work out such kind of problems. Thence take a term loan to buy everything you need.

  10. Mau usul gimana kalau beberapa kodenya di seperti css di penanda: /* Bookmark * ,,dilengkapi mejadi /* Bookmark */ dan kode PHP

    dikurangi menjadi

    agar orang yang awam coding seperti saya ini tidak bingung ,soalnya code tidak akan bekerja krn dlm keadaan nonaktif ,,,Trims,,artikel yg bermanfaat…..

  11. discover the…

    video games will make it attainable so that you can manage children during holidays. You solely want to help them determine appropriate games and if…

  12. millbrook beds…

    although web sites we backlink to beneath are considerably not connected to ours, we feel they may be essentially really worth a go via, so possess a look…

  13. article blaster…

    Final month, when i visited your weblog i received an error on the mysql server of yours.*~,”*…

  14. wp syndicator plugin…

    Finally, an issue that I am passionate about. I’ve seemed for data of this caliber for the previous varied hours. Your website is tremendously appreciated….

  15. race game…

    Howdy I’m so delighted I located your website, I really situated you by mistake, while I used to be wanting on yahoo for one thing else, Anyhow I am right here now and could similar to to say cheers for an incredible post and a all round entertaining …

  16. brilliant time…

    of individuals with interest in or experience of taking part in the form of sport you desire. On-line video games offer you taking part in…

  17. revision door…

    that may be the end of this write-up. Here you will come across some web pages that we consider you will appreciate, just click the links over…

  18. tooth whitening…

    usually posts some pretty exciting stuff like this. If you are new to this site…

  19. Cool, this looks like {a great|an excellent|a fantastic|an incredible|a terrific|an awesome} release I {think|believe|feel} it {will be|will probably be|will likely be|is going to be|might be|are going to be} {helpful|useful|valuable|beneficial}…

    Gutscheincode Coupon Gutscheine Aktionscode Einkaufsgutscheine…

  20. GPS Fleet Tracking…

    Wonderful story, reckoned we could combine a couple of unrelated data, nonetheless really worth taking a appear, whoa did 1 learn about Mid East has got extra problerms at the same time …

  21. Bridging loan…

    we like to honor numerous other world-wide-web internet sites on the web, even though they aren?t linked to us, by linking to them. Underneath are some webpages worth checking out…

  22. Digital pr…

    check below, are some entirely unrelated websites to ours, nevertheless, they are most trustworthy sources that we use…

  23. furniture hire scotland…

    very couple of internet sites that transpire to become comprehensive beneath, from our point of view are undoubtedly nicely worth checking out…

  24. Caribbean villas…

    we came across a cool website which you could possibly get pleasure from. Take a appear should you want…

  25. You should check this out…

    Wonderful story, reckoned we could combine a few unrelated data, nevertheless really worth taking a look, whoa did one learn about Mid East has got more problerms as well ……

  26. Hi, I do think your website could be having internet browser compatibility issues.
    Whenever I look at your website in Safari, it looks fine however, when opening in I.E.,
    it has some overlapping issues. I merely wanted to provide you with a quick heads up!
    Other than that, fantastic site!