widget permalink with social media share

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. Oke langsung saja menuju TKP dan simak tutorial dibawah ini :

Fitur Aplikasi

1. Link Sumber
2. Sosial media share
3. Name admin
4. Image admin
5. Join To Blog
6. Link Contact

Untuk DEMO silahkan " KLIK DISINI " Lihat Kotak permalink dibawah 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 : 21/08/2013
******************************************/
.BDRS-permalink{
width:600px; // lebar widget
border:1px dashed #0066FF;
border-radius:5px;
margin:30px 0 10px -8px;
display:block;
color:#000;
background-color: #FFFFFF;
height: 150px;// tinggi widget
}
.BDRS-text {
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 12px;
color: #000;
vertical-align: baseline;
margin-top: -30px;
padding:4px 5px 10px 30px;
margin-left:80px;
margin-bottom:5px;
}
.BDRS-permalink .isi-box{
padding:5px;
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-size: 12px;
color: #333333;
height: 100px;
}
.BDRS-permalink img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:8px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
.BDRS-permalink img:hover{
opacity: 0.5;
}
.BDRS-sosial a {
background-color:#F7F7F7;
font-family: Georgia, &quot;Times New Roman&quot;, Times, serif;
font-style: italic;
font-size: 13px;
color: #FF0000;
font-weight: bold;
text-decoration: none;
padding:5px 10px;
margin-right:5px;
border: solid #B2B2B2 1px;
text-shadow: 0px 1px 1px #111;
text-align: center;
}
.BDRS-sosial a:hover {
background-color:#FFFFFF;
color: #333333;text-shadow: 0px 1px 0px #111;
border: solid #666 1px;box-shadow:0 0 2px #666;
}
.BDRS-textarea {
background-color:#F4FDD7;
width: 475px;
float: right;
}
.judul{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}/*** 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='BDRS-permalink'>
<div class='isi-box'>
<div style='background-color: #C6FFFF;border-radius:3px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center; width: 92px; padding:5px 2px; box-shadow:0 0 2px #666 inset; font-style: normal; font-weight: bold; text-transform: uppercase;border:solid #999999 1px;'> Rivai Silaban </div>
<a href='LINK PROFIL ANDA' target='_blank' title='ADMIN'><img alt='Rivai Silaban' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqBLKAguWnUy5g089y9_93TxXnsMOaW01fL5EdHCAS87bygvKR54w-jQHAikltjtwjb0DdqqdXoj-0Cn-EheOSZm8zW3PeShahwl28aoyX1piUCJurh-AMJbag345TxD765s1o4SLb6bo/h120/rivai.jpg' title='ADMIN'/></a><div class='BDRS-text'>Anda sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b> silahkan Anda COPAS di situs anda atau sebar luaskan artikel ini, jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya...!!!</div>
<span style='float:left;font:italic 12px Arial, Sans-Serif;'><textarea class='BDRS-textarea' name='BDRS' 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></span></div><br/>
<div class='BDRS-sosial' style='margin-top:-5px;'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' expr:title='&quot;Share to Gplus : &quot; + data:post.title' target='_blank' title='gplus'>Gplus</a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' expr:title='&quot;Share to facebook : &quot; + data:post.title' target='_blank' title='facebook'>Facebook</a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' expr:title='&quot;Share to twitter : &quot; + data:post.title' target='_blank' title='twitter'>Twitter</a>
<a href='http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA ' target='_blank' title='follow'>Join to Blog</a>
<a href='LINK KONTAK ANDA ' target='_blank' title='contact'>Contact</a>
</div></div><div style='clear:both;'/></div>
<!-- Rivai Silaban | BLOG DESIGN Permalink start -->

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 BIRU silahkan ganti dengan nama anda.
  
• Untuk Tulisan warna MERAH silahkan ganti dengan link anda sesuai dengan yang tertulis di kode tersebut.

Kesimpulan

Widget permalink yang telah digabung dengan widget share dan Join to blog ini valid html 5 dan penulisan kode tag yang SEO Friendly dapat anda gunakan untuk halaman blog kesyangan anda. Kode yang ringan menjadikan widget inimenjadi suatu pilihan untuk para bloger.

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
21 Agustus 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 : 4:20 PM