Cara Membuat Kotak Permalink di Bawah Posting Blog

kotak permalink blogger
Halo sobat! Setelah agak lama tidak share tips-trik blogger di blog ini karena persentase fokus lebih besar untuk mengembangkan tautweb.com, di posting ini saya membagi lagi satu widget/elemen fungsional untuk posting blog.

Sudah pernah melihat kotak permalink, bukan? Salah satu elemen blog yang berfungsi untuk memberikan kemudahan bagi blog/web lain membuat tautan/linkback ke salah satu halaman posting blog; seperti yang saya sediakan di bawah posting-posting blog ini. Adanya kotak atau kolom permalink sangat membantu sobat dalam meningkatkan visibilitas dan traffic blog karena apabila ada blogger lain menyukai dan menganggap posting atau artikel blog sobat penting, maka dia dapat dengan mudah menemukan tag permalink di bawah artikel, meng-copy-nya, dan memasang/membaginya di blog; sehingga dia tidak perlu repot-repot membuat tag permalink sendiri. Jika sobat belum memiliki dan ingin membuat, silahkan ikuti tutorial menambahkan kotak permalink di bawah posting berikut. 

Konsep dan Kode Kotak Permalink

Konsep yang saya gunakan adalah kotak permalink otomatis dengan memanfaatkan dua tag XML Blogger, yaitu <data:post.url/> untuk memanggil url posting yang sedang ditampilkan, dan <data:post.title/> untuk memanggil judul posting yang sedang ditampilkan, very easy! Permalink juga dilengkapi dengan tag link </a>. Kemudian permalink tersebut diletakkan pada textarea dengan memanfaatkan beberapa fungsi javascript sederhana. Dengan cara ini, semua isi kotak permalink tampil secara otomatis tanpa harus membuat isi secara manual dan dapat langsung digunakan.

Berikut kode-nya:
<div style='line-height:1.4em;padding: 1px; margin: 2px;background-color: #ffffff;font-size: 11px;text-align: justify'>
<span>Ganti teks ini dengan informasi mengenai permalink atau apapun di sini.</span><br />
<textarea cols='60' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2' style='margin-top:3px;width:auto;'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea><br/>
</div><br />
Kostumisasi CSS:
Secara default saya menggunakan:
- background-color: #ffffff (putih), ganti #ffffff dengan kode warna lain sesuai dengan warna background posting blog.
- padding: 1px dan margin: 2px, ganti 1px dan 2px dengan nilai lain untuk menambah atau mengurangi padding dan margin.
- font-size: 11px, ganti  dengan nilai lain untuk menambah/mengurangi ukuran huruf (pada text di atas kotak permalink).

Cara Memasang Kotak Permalink di Bawah Posting Blog

1. Copy kode di atas setelah melakukan kostumisasi, jika belum tahu apa yang harus dikostumisasi agar kotak permalink sesuai dengan desain blog, copy dulu saja.
2. Buka HTML editor blog, Dashboard > Template > Edit HTML.
3. Jangan lupa centang "Expand Widgets Template"
4. Cari <data:post.body/>. Bagi yang menggunakan readmore otomatis, akan ada lebih dari satu tag tersebut. Pada kebanyakan template, tag yang ditampilkan secara penuh adalah tag kedua. Jika tidak yakin, pilih dan coba dulu yang pertama, jika tidak bisa pilih tag sama yang kedua.
5. Letakkan kode kotak permalink tepat di bawah <data:post.body/>.
6. Save template.
Jika dipasang dengan benar, maka hasilnya akan tampak seperti ini:
Ganti teks ini dengan informasi mengenai permalink atau apapun di sini.
7. Cek hasilnya pada salah satu halaman posting dan lihat apakah dibutuhkan kostumisasi di bagian CSS seperti di atas.

Okay, itu dia langkah-langkah memasang kotak permalink di bawah posting Blogger. Semoga dulu sobat yang pernah menanyakan mengenai kotak permalink yang saya gunakan terpuaskan. And, have a nice blogging, guys!

Update:
Jika pada kasus tertentu anda mengalami kesulitan menampilkan permalink yang ikut tampil di halaman utama, itu karena pemasangan kode di data:post.body yang di bagian bawah readmore. Jika tidak tahu data:post.body yang mana yang tepat, gunakan ini (caranya sama persis dengan di atas):
<b:if cond='data:blog.pageType == "item"'>
Letakkan kode kotak permalink di sini
</b:if>
© buka-rahasia.blogspot.com

Cara Membuat Kotak Permalink di Bawah Posting Blog
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 69 Comment(s):

beritakamu.tk said...

wah... keren ya! coba dulu yah, tapi kayknya yang pantas masang permalink kayak gitu bagi yang blognya sudah tenar..... hiks jadi malu!

Penerjemah Tersumpah said...

Bagus banget widgetnya nih mas bro. Ijin ngicpin ya mas.
Thanks sharingnya.

Unik dan Aneh said...

mas azmi,saya mau nanyak,,gimana ya caranya bikin rating anda writen di bawah postingan kayak mas azmi?ditunggu ya jawabannya,,,,

Mari Ngenet said...

Bagus untuk dicoba,,,

ridayocha said...

layak dicoba karena lagi ikut lomba blog. Oh ya mo nanya nich... kenapa key word dalam artikel blogku tidak diindex oleh google. Yang diindex kok malah labelnya aja. Mohon informasinya.

Deni said...

Makasih tutorialnya

desi said...

mantap..... :)

mas mau tanya, gimana cara buat link button

untuk cetak arikel blog? he...

thank you....

GEDE AWAN said...

gan,makasi infonya ,berarti banget buat saya yang pemula ne,,

Kang Soegie said...

Info yang sangat bermanfaat... Terimakasih.. Salam ^^

My Laboratorium said...

Akhirnya dapat juga artikel yang dicari-cari dan dapatnya di tempat om Azmi.Maklum saya gak tau kata kuncinya.Terimakasih ya om Azmi,semoga semakin sukses terus dan makin mantap tautweb.com nya :)

Solichin Toip said...

Info bagus, gan. Slm kenal saja.

Eckhart™ said...

Numpang tanya Gan..
Kenapa ya di setiap belakang url blog saya suka ada kode? Itu apa ? Kode smacam ini #axzz1wbGR776A
contohnya http://www.nurhakim21.com/#axzz1wbGR776A

Gimana menghilangkannya

miss said...

trimakasih telah berbagi.. salam kenal ya

Burinik dot com said...

masih belum ngerti betul fungsi nya om
padahal banyak yg bahas masalah permalink
maklum, newbie asli

yaheu said...

baru taw nii sob,, aq coba nii..

yaheu said...

kembali menyinggahi kawan,, tutorialnya keren2 bang.

BLOG DOFOLLOW said...

sudah ane coba di blog ane Gan..
keren hasilnya..
tahanks infonya..

Candra said...

ijin nyoba mas :)

Senang BacaBlog said...

patut dicoba neeh... ^_^

mksh gan...

Klick Arie said...

dapet juga di sini heheheheee.... terima kasih share nya gan,,, izin praktek,,, :)

wikibagus.com said...

thanks pencerahannya

Danang Ary Yunanto said...

sip...mantapzz

mampir ke blog ane : motivasi4life.blogspot.com

Tifan Dwi Avianto said...

Nice post! artikel bermanfaat, kreatif & informatif. terus aktif untuk buka rahasia lagi! salam kenal,

http://www.anvity.com/

artha said...

thanks gan infonya...

mata-dunia said...

kerent broo

Admin - Faiz said...

Wah Nice Info gan, jadi nambahin koleksi lagi nih :D

kowandy said...

cara membuat permalink seperti blog buka-rahasia gmana mas? yg ada judulnya disamping kiri dan juga "Thanks for reading! Suka dengan artikel ini? " si samping kanan. ada tutorialnya mas?

myhafiezers said...

terimakasih banyak atas infonya sobat
ditunggu kunjungan baliknya

Rifqi Andrea said...

langsung dicoba gan :D

xthe_prince said...

permalink lumayan yaa buat nambah trafik

Ahmad Khoirul Azmi said...

@Eckhart: Halo, itu adalah id blog yang ditandai karena mengandung adult content. Jadi ketika pengunjung masuk, dia tidak langsung ke homepage, tapi masuk dulu ke halaman agreement, menyetujui dan membuktikan dia sudah berusia legal untuk masuk ke halaman konten (dengan id). Ini sebenarnya masalah settings. Jika ingin ganti, masuk aja ke dashboard > settings. Kalo blog sobat mengandung konten demikian, sebaiknya jangan diganti.

Musik Asiik said...

Nyoba ah...........!! ijin gan..!!

Gopar said...

sukses terpasang sob..

Sokat Rachman said...

Aku coba pakai, ya Mas.... eh, biar warnanya gak putih dan mengikuti warna template blog kita pakai kode warna apa, ya, Mas? :)

Cah Gembloengz said...

bermanfaat sekali untuk newbie seperti saya, terimakasih atas infonya bro,, kunjungan balik yha bro >> fchords.blogspot.com <<

rizaldi said...

postingan yang bagus dan sangat membantu, thanks alot mas bro.

kunjungi blog ssaya ya kawan,, :D http://www.holook.blogspot.com/

penggunacerdas said...

saya kok gak ada gan ...
bantuan gan... dan jika saya masukkan di bawah maka waktu di homenya permalinknya muncul juga, jadi jelek gan

penggunacerdas said...

aduh maaf gan lupa saya bahwa kode scrip tidak bisa di masukkan di kotak komentar, data post body saya gak ada gan, yang adanya cuma data post body penutup ( / )

Rizal Surya said...

iya gan. punya saya code.nya itu ga ada. heheh

penggunacerdas said...

gan kalau data post body-nya gak ada gimana ??
pencerahannya sangat di butuhkan.

Ahmad Khoirul Azmi said...

@penggunacerdas dan kawan2 lain: data:post.body pasti ada, karena itu yang memuat konten post. Jangan lupa centang "expand widgets template" di pojok atas.
Kalo masih ada masalah dengan edit template simak ini dulu sebelum edit:
http://buka-rahasia.blogspot.com/2011/05/tips-edit-template-html-blogger-mudah.html

kusnul prasetyo said...

keren gan bisa di coba gan

@ramadhanaR.A said...

kalau caranya buat permalink yg kayak punya agan gimana caranya

BRIAN MUDA ARYANA said...

Nice info nya Gan

Media Infonetku said...

Mas, manfaatnya sama seperti "link to this post" atau "create a link" bukan?

riza-pikirpikir.blogspot.com said...

klau ingin yang pakek blank gimana om?

Herry Rachman said...

Thx bos, dah dicoba dan di modifikasi sebagiannya.
salam :)

Warga Sipil said...

pak setelah saya edit html terus saya ketik control+F buat search kode tapi kok gak ada ya pak? mohon solusinya pak. makasih.. ini blog sederhana saya mohon di cek http://psipil.blogspot.com

Jefry said...

Kreatif ni
terima kasih atas tutorialnya, salam sukses...

cara diet aman said...

thanks gan untuk tutorialnya..

choiril anam said...

sukses,,tenkyu gan...

Belajar NgeBlog said...

TQ infonya mas Bro , Tipsnya berhasil semua nice Share lah...

Top Online Games said...

mantaps nich infonya ngebantu ane banget bro! thanks :)

Zamrud Hijau said...

Info yang baguz sekali untuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

( http://zamrudhijau.blogspot.com/ )

download film said...

artikel dan posting yg menarik bro dan juga salam kenal dari mico batam islands dan sekalian bagi teman2 yg ingin download gratis film box office terbaru silakan kunjungi situsnya ok. thanks buat admin ini.makasi ya.

Yoga Pardiansyah said...

om ijin share scriptnya :D

Patriot Muslim said...

< data : post . body > tidak ditemukan di html,ada yang salah dengan template blog saya?how?mohon pencerahannya www.mypatriotmuslim.blogspot.com

Keiruchan Agatha said...

mantap infonya, oh ia, kl mau buat info yg dibawah postingan diatas permalink itu gmn cara buatnya? apa nmnya ya mas?

Effry Muhammad said...

Trimakasih mas
http://effrycyber8.blogspot.com/

bocahporis said...

Mkasih ya tutornya mas Ahmad .. :D
#Blogwalking

alief7max.blogspot.com said...

maaf mas, saya malah gagal, permalinknya muncul di halaman blog di bawah posting setelah read more, kenapa ya? yang salah apa? oh ya gak ada mas yang ada www.alief7max.blogspot.com

Ahmad Khoirul Azmi said...

Gunakan ini saja:

<b:if cond='data:blog.pageType == "item"'>
Letakkan kode permalink di atas di sini
</b:if>

cara meletakkannya sama seperti di atas.

Alief Rezki said...

maaf sekali lagi tanya, apa itu quot quot? kok banyak template blog baru yang menggunakan itu

Ahmad Khoirul Azmi said...

& quote ; atau biasa disebut double quote adalah bahasa lain (ASCII) dari tanda kutip dobel ( " ), penggunaan ascii memudahkan browser dan engine suatu platform web untuk bisa membaca kode/script dengan lebih cepat dan tepat. Pada suatu kasus khusus, mesin Blogger tidak bisa membaca tag dan atribut html tertentu apabila ditulis apa adanya, maka penggunaan ASCII sangat dibutuhkan. Sebagai contoh, kode iklan adsense yang secara mentah dimasukkan ke dalam template Blogger, tidak dapat diparse oleh engine Blogger, sehingga iklan tidak tampil. Solusinya adalah dengan parsing dulu dengan HTML parser.

Sang Rapuang said...

mas, sy pendatang baru di blog mas..
sy mau tanya mas...
sy berhasil pasang kotak permalink di bawah postingan, tp kok ada tulisan Proin tempor diatas kotak permalinknya mas..???
cara ngilanginnya gimana ???

Ahmad Khoirul Azmi said...

kasih url blognya

Oke-Reload said...
This comment has been removed by the author.
duniainformasikesehatan said...

sebenarnya fungsi dari kotak permalink ini banyak sekali..
tergantung kita saja mau digunakan dalam konten apa...
sukses buat mas khoirul...

Aray SBK said...

Mantap mas broo artikelnya sangat bermanfaat, buat blogger pemula kyk saya :D

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap