Cara membuat permalink v.1

Permalink dapat dikatakan suatu pesan dari blog kita untuk para pengunjung blog. Kegunaan PERMALINK ini sangat bagus untuk blog/web kita, dimana kita dapat menyampaikan berbagai pesan terhadap para pengunjung blog kita. Permalink yang saya buat kali ini dapat anda andalkan dimana saya menambahkan beberapa fitur penunjang untuk meningkatkanrespons para pengunjung blog anda. Adanya icon social yang saya sematkan di antara element tag HTML Permalink ini selain mempercantik pastinya mempunyai kegunaan yang baik untuk blog maupun situs jejaringan sosial yang anda miliki.

 Gambar 1.0

Fitur Aplikasi

1. Email Subcribe
2. Sosial media share
3. RSS
4. Image admin
5. Judul Postingan

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
   

/*****************************************
Name : Permalink with media share
By : Rivai Silaban | Blog Design
Update : 14/05/2013
******************************************/
.permalink {
margin-top: 8px;
margin-bottom: -10px;
padding: 10px;
border: 2px solid rgb(9, 149, 223); border-style: dashed;
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(204, 204, 204);
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
border-color: #666666;
}
.gambar {border: 2px; border:double;
border-color:#000000;
box-shadow: 2px 4px 4px rgb(131, 129, 129);
margin: 2px 10px 20px 0px;
width:100px;
height:100px;
opacity: .3;

}
.gambar:hover { opacity: 1; }
.buttonrs_email{
background:#09f;
border: 2px solid rgb(9, 149, 223);
border-radius: 3px 3px 3px 3px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#fff;
cursor:pointer;
font-family:verdana;
font-size:12px;
padding:0px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:100px; height:25px;
background-color: #940A0A;
border-color: #FF0000;
}
.buttonrs_email:hover,.buttonrs_email:focus{
background-color: #CC0000;
color: #000000;
}
.buttonrs_email:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px; background-color:#3E0600;}


.kotak_email{
margin:10px 0 0;
background-color: #FFCACA;
}
.kotak_email:hover{background: #f3f3f3 ;}
.kotak_email:focus{outline:none;}
.rivaistyle{/* Rivai Blog */
list-style-type:none;
margin:5;
padding:0; width:200px; margin-top:5;
}
.rivaistyle li{
display:inline;
width: 60px;
height:60px;
}
.rivaistyle li img{
width: 30px;
height: 30px;
border:0;
margin-right: 4px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.rivaistyle li img:hover{
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
-o-transform:scale(1.2);
}/*** Blog Design CSS and ***/

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  <div class='post-footer-line post-footer-line-2'/>
  atau Kode
  <div class='post-footer-line post-footer-line-3'/>
• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Untuk script post snippet silahkan pastekan kode dibawah ini tepat dibawah kode <data:post.body/>
• Save template anda dan lihat hasilnya, selamat berkreative.

<!-- Rivai Silaban | BLOG DESIGN Permalink start -->
<div class='permalink' style='width:550px; height:120px'><a href='#' target='_blank'><img align='left' alt='Saya' border='0' class='gambar' height='100' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaZOZel8yEi9Af-78mav5ojdjLfRVWb8vLdTjQsaGz9dVkHqj0rusLtoRvwd_Oq7oy8j5DF7pt9d2H0Sj_OZ2rOpCkF_WrZPjsUKXUD6DufTJk50_ecaYu9EKwkD-BKKw95DTgTMH1MnQ/s1600/foto.gif ' style='padding: 0px 0px 0px 0px;' width='100'/></a>
<div style='margin-top:-15px; margin-left: 100px; white-space: inherit;' >
<p>Saat ini anda sedang membaca artikel tentang<br/> &quot;
<b>
<a expr:href='data:post.url'>
<data:post.title/>
</a> </b> &quot;<br/>
Bila anda suka dengan artikel ini silahkan berlangganan geratis Artikel dari blog ini. Pergunakan vasilitas dibawah ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui komentar. </p>

<div class='rivaistyle' style='float:left'>
<li> <div align='left'><a href='URL G PLOUSE ANDA ' target='_blank'><img alt='Invite G+' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiz2KfevnWsz_NggapVFDCLhh3bhci70qRj9-xAe1uF4QRxQOTufB-XHChsNSvWU6tSHpVdynw-PWvjDWnDHhO-x7XbSkC8yZ7kl7eyV1VZ2MimTtkuFpNCTy0ieFvU5KZtdcGOKkqmlM/s1600/gplus.png' title='Add to G+' width='24'/></a><a href='URL FACEBOOK ANDA ' target='_blank'><img alt='Add to Facebook' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjruQZg4boF9diQvgzFiojfNiqJJlh-5hTBNWGnnt93o-oFfGPX4uMdWdCadrhC89YghVbC3lLaErR81V1a8qwyO7fqasj0aqAvGTcBuYvXJCOKvXCHFeKgf2uLobLMBdeQBbj6PXABLpw/s1600/facebook.png' title='Add to Facebook' width='24'/></a><a href='URL TWITTER ANDA ' target='_blank'><img alt='Follow' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmcn3ripx9JS8Cw70vQtTzPeEIovudL8B2DwJqBB1MmTsxsAB83fk6TXj4Dn74QKIr0dF6e8NREXzgFZuGunDE4rfM-CXn6lGyLRC_2jvceHZyhwBuZCaX0knhsSv2CRjBe2yi2iNiWv8/s1600/twitter.png' title='Add to Twitter' width='24'/></a><a href='URL FEEDBURNER ANDA ' target='_blank'><img alt='Add RSS' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zcE6z2QFmrohUIGyo26c6v0ap0X7b0cusn8tRw_JCwTZuFDKzOk11uP8UDaQNhXUUlXSJOwUafF_OgsW9kgFlsgx1HNI3NRZRohHlV19uBpj5gkPjtADABI1LCQDLlQw1CTS881pKz8/s1600/RSS-icon.png' title='Add RSS Feed' width='24'/></a></div>
</li>
</div>
<div style='float:right; border:1px; border-color:#CCCCCC; margin:-40px 2px 0 0; width:300px; '>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onSubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBUNER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<div align='right'>
<input name='uri' type='hidden' value='ID FEEDBUNER'/>
<input name='loc' type='hidden' value='ID FEEDBUNER'/>
<input class='kotak_email' name='email' onBlur='if (this.value == &quot;&quot;) {this.value = &quot;Email anda...&quot;;}' onFocus='if (this.value == &quot;Email anda...&quot;) {this.value = &quot;&quot;}' type='text' value='Email anda...'/>
<input class='buttonrs_email' title='' type='submit' value='Subscribe '/>
</div>
</form></div>
</div>
</div><div style='clear:both;'/><br/>
<!-- Rivai Silaban | BLOG DESIGN Permalink end -->

Keterangan Code

• Untuk kode CSS silahkan anda edit sesuai dengan kebutuhan anda, sesuaikan ukuran lebar box subscribe pada kode CSS warna merah.
• Untuk tag Htmlnya silahkan ganti kode tulisan warna HIJAU dengan text anda.
• Tulisan kode warna KUNING silahkan ganti dengan link gambar anda.
  
• Untuk Tulisan warna MERAH silahkan ganti dengan link anda sesuai dengan yang tertulis di kode tersebut.

Kesimpulan

Widget permalink dipadu dengan media sosial share sangat cocok untuk halaman blog kesayangan anda, cara membuatnya dapat anda simak tutorial dibawah ini. Buat para bloger widget yang simple dan unik yang selalu dicari cari untuk dipasang dihalaman blognya, Itulah alasan saya untuk memadukan 2 widget ini menjadi satu untuk kepentingan bloging. Widget ini menganut sistem SeO Friendly dan Valid HTML 5 serta memiliki kode yang ringan jadi anda tidak perlu ragu untuk memasngnya pada halaman blog anda, Tampilan yang elegan menjadikan halaman blog anda semakin menarik dimata pengunjung blog anda.

Silahkan simak tutorial diatas untuk lebih jelasnya tentang cara memasangnya pada halaman blog kesayangan anda, bila ada masalah yang tidak dimengerti silahkan hubungi saya atau share bersama saya pada form komentar dibawah.

Widget Permalink with Media Share
14 Mei 2013
By : Admin Blog Design
Salam Bloger..!!!

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 1:33 PM