cara membuat widget permalink with space iklan

Widget permalink dipadu dengan media sosial share dan space iklan sangat cocok untuk halaman blog kesayangan anda, cara membuat widget permalink with space iklan dihalaman blog dapat anda simak tutorial dibawah ini. Buat para bloger widget yang simple dan unik serta memiliki space iklan yang selalu dicari cari untuk dipasang dihalaman blognya, Itulah alasan saya untuk memadukan 3 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 dan lihat screen shotnya pada gambar dibawah, atau lihat saja cara pemasangannya pada halaman blog klik DEMO dibawah:

Demo

Fitur Aplikasi

1. Link Sumber
2. Sosial media share
3. Name admin
4. Image admin
5. Join To Blog
6. Link Contact
7. Space advertise 4 kolom 120 X 120

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 atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
   

/*****************************************
Name : Permalink with Space Advertise
By : Rivai Silaban | Blog Design
Update : Jumat 20 September 2013
******************************************/
#BDRS-permalinks{
width:560px;/* LEBAR WIDGET */
border:1px dashed #990000;
border-radius:5px;
margin:30px 0 10px 0;
display:block;
color:#000;
background-color: #FFFFFF;
height: 300px;
margin-left:10px;
}
#BDRS-permalinks .BDRS-text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
vertical-align: baseline;
margin-top: -30px;
padding:4px 5px 10px 30px;
margin-left:80px;
margin-bottom:5px;
line-height: normal;
}
#BDRS-permalinks .bdrs-advertiser ul li{
padding:auto 4px;
margin-top:-10px;
margin-bottom:15px;
text-align: center;
list-style-type: none;
float: left;
width: 125px;
border-bottom:solid #111 2px;
}
#BDRS-permalinks .isi-box{
padding:5px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #333333;
height: 100px;
}
#BDRS-permalinks .img{
width:90px;
height:100px;
border:0px solid #0066FF;
border-radius:10px;
margin:8px 10px 0 0;
float:left;
padding:2px;
box-shadow: 0px 0px 5px 5px #ff0000 inset;
}
#BDRS-permalinks img:hover{
opacity: 0.5;
}
#BDRS-permalinks .BDRS-sosial a {
background-color:#F7F7F7;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 13px;
color: #FF0000;
font-weight: bold;
text-decoration: none;
padding:5px 10px;
margin-right:3px;
border: solid #B2B2B2 1px;
text-shadow: 0px 1px 1px #111;
text-align: center;
}
#BDRS-permalinks .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-permalinks .BDRS-textarea {
background-color:#FFD5D5;
border:dashed #990000 1px;
width: 430px;
float: right;
}
#BDRS-permalinks .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 berkreatife.

<!-- Rivai Silaban | BLOG DESIGN Permalink start -->
<div id='BDRS-permalinks'>
<div class='isi-box'>
<div class='bdrs-advertiser'>
<ul style=' margin-bottom:10px;'>
<li><a href='#' target='_blank' title='advertiser'><img alt='advertiser' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-y8C8FQsEpF4V-UsuyWNeyynIjGwy2j9RrPKVHhyphenhyphenPfLG2ntw8sK73nS8oakQSKpsaxYTGytHWmi2-1P4wWnmIK_NNEhcd8dt-kEdf3b11WhHgdkIlb1noLrkRpOSN7QvNWkGwu0jvYQA/s1600/advertiser2.png' title='advertiser'/></a></li>
<li><a href='#' target='_blank' title='advertiser'><img alt='advertiser' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-y8C8FQsEpF4V-UsuyWNeyynIjGwy2j9RrPKVHhyphenhyphenPfLG2ntw8sK73nS8oakQSKpsaxYTGytHWmi2-1P4wWnmIK_NNEhcd8dt-kEdf3b11WhHgdkIlb1noLrkRpOSN7QvNWkGwu0jvYQA/s1600/advertiser2.png' title='advertiser'/></a></li>
<li><a href='#' target='_blank' title='advertiser'><img alt='advertiser' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-y8C8FQsEpF4V-UsuyWNeyynIjGwy2j9RrPKVHhyphenhyphenPfLG2ntw8sK73nS8oakQSKpsaxYTGytHWmi2-1P4wWnmIK_NNEhcd8dt-kEdf3b11WhHgdkIlb1noLrkRpOSN7QvNWkGwu0jvYQA/s1600/advertiser2.png' title='advertiser'/></a></li>
<li><a href='#' target='_blank' title='advertiser'><img alt='advertiser' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-y8C8FQsEpF4V-UsuyWNeyynIjGwy2j9RrPKVHhyphenhyphenPfLG2ntw8sK73nS8oakQSKpsaxYTGytHWmi2-1P4wWnmIK_NNEhcd8dt-kEdf3b11WhHgdkIlb1noLrkRpOSN7QvNWkGwu0jvYQA/s1600/advertiser2.png' title='advertiser'/></a></li></ul></div>
<div style='color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; width: 92px; padding:5px 2px; font-style: normal; font-weight: bold; text-transform: uppercase;'> Rivai Silaban </div>
<a href='#' target='_blank' title='ADMIN'><img alt='Rivai Silaban' class='img' 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 10px 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:136px;'>
<a href='LINK GPLUS ANDA ' target='_blank' title='gplus'>Gplus</a>
<a href='LINK FACEBOOK ANDA ' target='_blank' title='facebook'>Facebook</a>
<a href='LINK TWITTER ANDA ' 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;'/>
<!-- Rivai Silaban | BLOG DESIGN Permalink start -->

Keterangan Code

• Untuk kode CSS silahkan anda edit sesuai dengan kebutuhan anda, Ukuran lebar widget = 560px.
• 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 link Iklan anda ( space iklan 120 X 120 ).
  
• 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 space iklan ini valid html 5 dan penulisan kode tag yang SEO Friendly dapat anda gunakan untuk halaman blog kesayangan 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 Space Iklan
Jumat, 20 September 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 : 3:13 PM