CARA MEMASANG WIDGET PREMALINK DI BLOGSPOT

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/AVvXsEjimN44cya3MMgEWv_WSsjdJfU9Gvq4n9DGPioCf0XraUII5QeA102k2Ysnai0sDQtBLTGeThSVErXBz9b4BNndlOFxnlz-33Hmpa72hENW69SHCx5pKG1Q5qoqNk_r-FpVVjW0yEhrPxU/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.

Penulis : alifian ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel CARA MEMASANG WIDGET PREMALINK DI BLOGSPOT ini dipublish oleh alifian pada hari Saturday, August 24, 2013. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan CARA MEMASANG WIDGET PREMALINK DI BLOGSPOT