CARA MEMBUAT NAVIGASI PERMALINK CANTIK DI BLOG

CELAKET 21. Untuk melengkapi widget navigasi dalam sebuah blog perlu dipikirkan serta diperhatikan secara baik-baik perihal manfaat dan atau kegunaannya. Banyak ditemukan blog-blog yang memasang berbagai ragam widget navigasi ini sampai blognya sendiri menjadi penuh dan terkesan semrawut, sehingga nilai estetikanya menjadi hilang, karena penuh sesaknya widget-widget navigasi tersebut. Umumnya mereka memaksimalkan widget navigasi ini untuk kepentingan pemasangan iklan atau banner iklan.

Boleh-boleh saja memasang iklan sebanyak mungkin di dalam suatu blog, namun faktor estetika serta kecepatan loading suatu blog hendaknya juga menjadi perhatian atau pertimbangan utama. Visitor atau pengunjung blog, sudi mendatangi blog yang kita miliki bukan karena banyak iklannya, namun faktor konten yang berkualitaslah yang menjadi tujuan utamanya. Barangkali mereka menemukan jawaban suatu masalah pada salah satu tulisan/artikel/konten blog kita.

Pada kesempatan kali ini saya akan membagikan cara membuat widget permalink yang cantik, berfungsi untuk memperkenalkan siapa penulis artikel serta beberapa pesan-pesan penting yang berkaitan dengan suatu artikel yang sedang dibaca oleh seorang visitor atau pengunjung. Di samping itu, widget navigasi permalink ini juga dapat membantu sekaligus memudahkan mesin pencari (search engine) saat datang dan merayapi seluruh isi blog kita.

Berikut ini adalah contoh gambar widget permalink tersebut  :

Contoh aplikasinya, ada pada bagian bawah artikel ini, silahkan anda perhatikan sejenak. Bilamana anda tertarik untuk memasangnya di blog, berikut ini cara-cara memasangnya.

1. Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget
3. Letakkan kode berikut di atas kode ]]></b:skin>

.admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

4. Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya. 

<!-- Permalink Celaket 21 -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tips dan Trik Blogspot</h4>
<div class='kontainer'>
<img alt='Christian angkouw' src='http://i1108.photobucket.com/albums/h405/christian410/269111_225685127450056_100000257112719_900053_7432574_n.jpg'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  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://chordy-celaket21.blogspot.com/2012/03/cara-membuat-permalink-di-blog.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Permalink Celaket 21 -->

5. Klik save dan lihat hasilnya.

Tambahan :

• Ganti kode yang berwarna biru dengan Url foto / gambar milik sobat
• Sesuaikan angka yang berwarna merah dengan ukuran template blog sobat ( ukuran textarea )

Selamat mencobanya, semoga bermanfaat.

Sumber tulisan : http://christiantatelu.blogspot.com/2012/03/cara-membuat-permalink-di-blog.html