Widget author box blogspot

Widget author box untuk blog, atau yang saya sebut dengan widget author box blogspot ini memiliki tampilan menarik, widget author box blogspot ini dilengkapi perma link yang dapat digunakan para bloger mania yang ingin memposting kembali di halaman blognya dengan memasang link sumber dari postingan blog asalnya. Pada dasarnya widget author box blogspot memiliki tampilan yang rada rada mirip satu dengan yang lain, tapi tampilan widget author box blogspot yang satu ini memiliki tampilan yang berbeda dengan biasanya, nah untuk melihat tampilan widget author box blogspot ini secara nyata, silahkan klik demo dibawah dan jika anda tertarik silahkan simak tutorial tentang widget author box blogspot pada postingan blog saya yang sederhana ini, langsung saja menuju TKP.

Demo

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 widget author box blogspot dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSS widget author box blogspot tepat diatas </style> template anda.

/*****************************************
Name : widget author box blogspot
By : Rivai Silaban | Blog Design
Update :Minggu, 17 Nopember 2013
******************************************/
#rivai-silaban-author {
width: 90%; //LEBAR WIDGET
margin:5px auto;
}
#rivai-silaban-author .boxx{
padding: 20px;
border-radius: 5px;
box-shadow: 0 0px 5px 1px rgba(0, 0, 0, 0.3);
background-color: #FFFFFF;
}
#rivai-silaban-author .boxx:after,
#rivai-silaban-author .boxx:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#rivai-silaban-author .boxx:after {
border-top-color: #fff;
border-width: 20px;
left: 65%;
margin-left: -10px;
}
#rivai-silaban-author .boxx:before {
border-top-color: rgba(0,0,0,0.01);
border-width: 11px;
left: 65%;
margin-left: -11px;
}
#rivai-silaban-author .boxx {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
line-height: 20px;
position: relative;
}
#rivai-silaban-author .owner {
text-align: right;
padding: 20px 100px 20px 20px;
position: relative;
margin:5px 20px 0 0;
}
#rivai-silaban-author .owner-image-profil {
display: block;
width: 70px;
height: 70px;
border: 5px solid #fff;
border-radius: 50%;
background: url('LINK GAMBAR ANDA') no-repeat center center;
position: absolute;
right: 10px;
bottom:0;
box-shadow:
inset 1px 1px 4px rgba(0,0,0,0.5),
0 2px 3px rgba(0,0,0,0.6);
}
#rivai-silaban-author .owner-blog-name{
font-family: Georgia;
font-weight: bold;
font-size: 24px;
color: #FF0000;
text-shadow: 2px 1px 1px rgb(153, 153, 153);
font-style: italic;
margin:0;
}
#rivai-silaban-author .name{
font-family: Verdana;
color: #0000FF;
font-size: 12px;
text-decoration: none;
}
#rivai-silaban-author .name:hover{
color: #4F0000;
text-shadow: 0 1px 1px rgba(255,255,255,0.7);
text-decoration:underline;
}
#rivai-silaban-author .BDRS-textarea {
background-color:#ECFDF9;
border:dashed #666 1px;
width: 100%;
margin:5px auto;
}
#rivai-silaban-author .BDRS-text {
font-family: Verdana;
font-size: 12px;
color: #000000;
line-height: normal;
text-align: center;
margin-bottom:10px;
}/* widget author box blogspot css end */

Install Program Tag HTML

• Setelah anda sudah memasang CSS widget author box blogspot ini, 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'/>
• Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
• Copy Code HTML dibawah ini, paste di bawah code
  <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda seperti memasang wiget Relate post.
• Edit kode html widget author box blogspot ini dan save template anda kemudian lihat hasilnya, selamat berkarya.

<!-- Rivai Silaban | BLOG DESIGN CODE widget author box blogspot start -->
<div id="rivai-silaban-author"><div class="boxx">
<div class='BDRS-text'>Anda sedang membaca artikel tentang,<br/> <b><a expr:href='data:post.url'><data:post.title/></a></b> <br/> Jika anda tertarik dengan artikel ini, silahkan Anda COPAS di situs anda atau sebar luaskan artikel ini, <B>INGAT..!</B> jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya...!!!</div>
<span style='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>
<div class="owner">
<p class="owner-blog-name">Blog Design</p><a href="LINK PROFIL ANDA " target="_blank" rel="nofollow" title="Rivai Silaban" class="name">+Rivai Silaban</a><div class="owner-image-profil"></div></div></div>
<!-- Rivai Silaban | BLOG DESIGN CODE widget author box blogspot End -->

Keterangan Gambar

• Silahkan anda edit pada tulisan berwarna Code CSS dan HTMLnya sesuai yang tertulis pada tutorial.
• Silahkan anda edit kode widget author box blogspot ini sesuai dengan thems template blog anda.

Widget author box blogspot pada postingan kali ini memiliki tampilan yang begitu elegan dan lebih menarik dibaning biasanya, pemasangan link source pada widget ini menjadikan widget author box blogspot ini semakin disukai para blogger mania.

Bila anda mengalami kesulitan pada pemasangan tutorial pada postingan widget author box blogspot ini atau menemukan kode yang error, silahkan hubungi saya atau share dengan saya melalui form komentar dibawah. Pergunakan semua fasilitas di blog ini untuk mempermudah anda.

Widget author box blogspot
Minggu, 17 November 2013

Blog Design

+Rivai Silaban

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:20 PM