Cara Membuat Kotak Permalink Terbaru di Bawah Postingan Dengan Tampilan Keren

Apa kabar sobat blogger semua!!! Kali ini saya akan mempostingan jawaban atas pertanyaan sobat blogger tentang cara membuat / memasang permalink di blog sama persis dengan permanen link di blog ini. Sebelum kita ke TKP ada baiknya saya jelaskan sedikit dulu tentang Permalink ( permanen link).

Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang di biasanya di letakan di bawah atau sesudah postingan, fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan seo on page blog sobat. Biasanya sobat yang newbie menemukan artikel seperti ini dengan keyword cara membuat link tetap atau tambahan detail postingan yang letaknya di bawah artikel/postingan, sebelum sobat tahu bahwa namanya adalah permanen link.

Permalink kali ini saya sudah melengkapi dengan author box dimana di dalamnnya bisa di pasangi foto / gambar milik sobat, juga di lengkapi dengan url artikel yang auto drag ( otomatis ter blok ), dan juga memakai background sembaran petir.

Dan kali ini Raja_Dihati membantu sobat bagaimana membuat widget/gadget Permalink tersebut. Sebagai contoh hasilnya silahkan sobat lihat gambar di bawah ini.

Klik show untuk melihat

Sobat yang tertarik dengan widget yang satu ini, silahkan ikuti tutorial berikut.
Buat sobat pemula mungkin ada yang merasa bingung bagaimana cara mengedit HTML templatenya silahkan klik DISINI.

Langkah - Langkahnya Sebagai Berikut

1. Login ke akun blog sobat / klik DISINI
2. Klik rancangan/template --> Edit HTML --> Centang kotak expand template widget
3. Cari kode ]]></b:skin> ( gunakan Ctrl + F ) untuk mempermudah pencarian
4. Letakkan kode dibawah ini di atas kode ]]></b:skin>

Klik show untuk melihat

.admin-tulisan{ display:block; width:auto; background:url(http://i1058.photobucket.com/albums/t405/R474_MUDA/Badry-petir.gif); border:2px solid#00FF00;

    box-shadow:0 1px 3px #00FF00;-moz-box-shadow:0 1px 3px #00FF00;-webkit-box-shadow:0 1px 3px #00FF00;

    padding:0;margin:30px 0 10px 0; font:normal 12px Arial, Sans-Serif;color: #FF0000;}

    .admin-tulisan .kontainer{padding:5px;}

    .admin-tulisan h4{background:#00FF00;border:none;border-bottom:1px solid #;color:#0000FF; text-transform:normal; text-  box-shadow:0 1px 3px #00FF00;-moz-box-shadow:0 1px 3px#00FF00;-webkit-box-shadow:0 1px 3px #00FF00; font:bold 12px Arial,Sans-Serif;padding:5px 10px; margin:0 0 0 0; display:block; }

    .admin-tulisan h4 a{color:#00FFFF;}

    .admin-tulisan img{width:110px;height:110px; margin:0 10px 0 0; float:left; border:1px solid #00FF00;padding:2px; background:#00FF00;   box-shadow:0 1px 3px #00FF00;-moz-box-shadow:0 1px 3px #00FFFF;-webkit-box-shadow:0 1px 3px #00FF00;}

5. Cari kode <data:post.body/>  ( gunakan Ctrl + F ) biasanya ada dua kode atau lebih yang sama dengan kode tadi, dan letakkan kode dibawah ini tepat di bawah kode yang pertama. Jika misalnya sudah di simpan ternyata widget/gadgetnya tidak berfungsi alias error maka sobat cukup sekedar menindahkannya di bawah kode yang ke dua.

Klik show untuk melihat

<!-- Permalink Tatelu -->

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='admin-tulisan'><h4>Ditulis Oleh : <b><data:post.author/></b> ~ Badry</h4><div class='kontainer'><img alt='Raja_Dihati' src='http://i1058.photobucket.com/albums/t405/R474_MUDA/Raja_Dihati.gif'/>

Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Dan terimakasih atas kunjungan sobat. Oleh Admin :  Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>

<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>

<a href='http://badry7.blogspot.com/2012/08/cara-membuat-kotak-permalink-terbaru-di.html' target='_blank'>:: Get this widget ! ::</a></span></p>

<div style='clear:both;'/></div></div></b:if><!-- Permalink Tatelu -->

6. Klik save dan lihat hasilnya. Maka widget/gadget Permalink keren ini akan ada di bawah artikel/postingan sobat.

7. Selesai...! Semoga bermanfaat

Tambahan :

• Ganti kode yang berwarna Pink dengan Nama sobat
• Ganti kode yang berwarna Kuning dengan URL photo sobat
• Sesuaikan angka yang berwarna Putih dengan ukuran template blog sobat ( ukuran textarea )

Sekian dulu ya sobatku semua, sampai jumpa di Tutorial Blog berikutnya dari Raja_Dihati. Oia kalau ada yang merasa kurang paham atau ada kekurangan dsb, silahkan sobat beri komentar di kotak komentar di bawah insyaallah saya akan cepat membantu sobat semua. Tetap semangat. Wassalam....!