cara membuat widget Author Box/permalink

 
kali ini saya ingin membagikan bagaimana cara membuat widget Author Box/permalink.nah ada yang tau apa itu widget permalink ?? saya kasih tau deh simak benar ya sob . Author Box/Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang dibiasanya di letakan di bawah atau sesudah postingan, fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan seo on page blog sobat.

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

Seperti biasanya saya mempostingkan tutorial blog saya akan membantu Anda agar bisa membuat widget Author Box/permalink.

Langkah - langkah membuat widget Permalink :

1. Login ke Dashboard Blogger
2. Klik rancangan/template --> Edit HTML --> Centang kotak expand template widget
3. Cari kode ]]></b:skin> ( gunakan Ctrl + F ) untuk mempermudah pencarian
4. dan taruh kode dibawah diatas kode ]]></b:skin>
   

   1	.admin-tulisan{ display:block; width:auto; background:url(http://gawsoti.googlecode.com/files/Gawsoti%20petir.gif); border:2px solid#00FF00;

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

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

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

   5

   .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; }

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

   7	.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 <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> letakkan kode dibawah ini tepat di bawah kode. Gunakan (Ctrl+F) Untuk mempermudah pencarian Anda.
   

   1	<!-- Permalink Gawsoti  -->

   2	<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='admin-tulisan'><h4>Ditulis Oleh : <b><data:post.author/></b> ~ sang pengembara</h4><div class='kontainer'><img alt='arieadie' src='http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash4/487093_382355741849598_74257071_n.jpg''/>

   3	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

   4	<textarea cols='45' 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>

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

   6	<a href='http://gawsoti.blogspot.com/2013/01/cara-membuat-widget-author-boxpermalink.html' target='_blank'>:: Get this widget ! ::</a></span></p>

   7	<div style='clear:both;'/>

   8

   </div>

   9

   </div>

   10

   </b:if>

   11	<!-- Permalink Gawsoti  -->

6. Tambahan :
   
   •  Ganti kode yang berwarna Hijau dengan Nama Anda dan nama blog anda
   • Ganti kode yang berwarna Biru dengan URL photoAnda
   • Sesuaikan angka yang berwarna Putih dengan ukuran template blog sobat ( ukuran textarea )
7. Setelah itu save template anda. Widget Permalink sudah ada di Blog sobat.

Twitter Delicious Digg Facebook Stumbleupon RSS