author box style 1

Author box style 1 - cara membuat widget author box style 1 di blogspot atau tutorial memasang widget author box style 1 di halaman postingan blogspot. Pada postingan kali ini saya akan memberikan suatu design author box yang sederhana buat anda, yang saya namakan dengan nama widget author box style 1. Untuk melihat bagaimana tampilan dan statistik kodenya silahkan lihat pada tabel dibawah ini, bila anda tertarik untuk memasangnya silahkan simak penjelasan dibawah ini, langsung saja menuju TKP tentang pemasangan widget author box style 1 pada blog anda, dan tunggu update terbaru untuk versi selanjutnya...

Demo

Code CSS

/*****************************************
Name : author box style 1
By : Rivai Silaban | Blog Design
Update :Minggu 16, Desember 2013
site : www.rivai.org
******************************************/
.author-box-stylebdrs {
width: 580px;
margin: 0;
padding: 5px;
background-color: #FFFFFF;
border:solid 1px #000;
border-radius: 10px;
font-family: Verdana;
font-size: 12px;
color: #333333;
height: 200px;
}
.author-box-stylebdrs a{
color: #0066FF;
text-decoration: none;
}
.author-box-stylebdrs a:hover{
color: #000000;
}
.author-box-stylebdrs .img{
width: 80px;
height:80px;
margin: 5px;
float: left;
border: 5px solid #fff;
border-radius: 50% 50% 50% 50%;
box-shadow: 0px 0px 5px 5px rgb(153, 153, 153);
}
.author-box-stylebdrs .tulisan {
position: relative;
padding: 15px;
margin: 0 0px 1em;
border: 5px solid #FF0000;
color: rgb(51, 51, 51);
border-radius: 10px 10px 10px 10px;
width: 410px;
float: right;
background-color: #FFFFFF;
}
.author-box-stylebdrs .tulisan:before {
content:"";
display:block;
position:absolute;
bottom:-40px;
left:40px;
width:0;
height:0;
border:20px solid transparent;
border-top-color:#FF0000;
}
.author-box-stylebdrs .tulisan:after {
content:"";
display:block;
position:absolute;
bottom:-26px;
left:47px;
width:0;
height:0;
border:13px solid transparent;
border-top-color:#fff;
}
.author-box-stylebdrs .tulisan:before {
top:10px;
left:-30px;
bottom:auto;
border-width:15px 30px 15px 0;
border-style:solid;
border-color:transparent #FF0000;
}
.author-box-stylebdrs .tulisan:after {
top:16px;
left:-21px;
bottom:auto;
border-width:9px 21px 9px 0;
border-style:solid;
border-color:transparent #fff;

}
.author-box-stylebdrs .tulisans{
width: 95%;
margin: 10px auto;
padding: 5px;
background-color: #FFFFFF;
border: solid 1px #ccc;
}
.author-box-stylebdrs .kiri{
width: 50%;
margin: 10px auto;
padding: 5px;

float: left;
}
.author-box-stylebdrs .kanan{
width: 45%;
margin: 0 auto;
padding: 5px;
float: right;
}
.author-box-stylebdrs .BD-box {
padding : 3px;
text-align : right;
width:250px;
}
.author-box-stylebdrs .BD-box input {
font-size : 14px;
padding : 5px;
text-shadow : 1px 1px 0 #FFF;
width : 100%;
color : #666666;
font-family : georgia;
margin-bottom : 3px;
border : solid 1px;
border-color : #666666;
border-radius:5px;
}
.author-box-stylebdrs .BD-box .submit {
border : solid #444 1px;
color : #000;
cursor : pointer;
font-family : verdana;
font-size : 12px;
padding : 0 0 3px 0;
text-shadow :none;
width : 100px;
height : 25px;
background-color : #FFFF00;
}
.author-box-stylebdrs .BD-box .submit:hover {
box-shadow: 0 0 2px #000;
color : #000000;
border-color : #fff;
text-shadow :none;
background-color : #CACA00;
}
.author-box-stylebdrs .BD-box .submit:active {
box-shadow : 0 1px 4px rgba(0, 0, 0, 0.5) inset;
border-color : #333;
}
/*** Blog Design CSS and ***/

Code HTML

<div class="author-box-stylebdrs"><!-- box author Rivai Silaban start-->
<img class="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhli0eeKkwqQSmBnFcU-alizVvkiCVRqLf6sz3zYYy8Om4GomriSvZ79_poF-8gJt7rbTosK5IP6PqMfIu95fGfbWgjXHnpClYNfa4WdfVY839bTx_X38VEfDmonqeSCOrqBuwF0KpjkQE/s1600/s.jpg" alt="admin" title="RIVAI SILABAN" />
<div class="tulisan"><span style="color:#990000;">RIVAI SILABAN | OWNER BLOG DESIGN</span><br/>Tunduk bukannya saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya... <a href="LINK PROFIL ANDA " target="_blank" title="more">readmore</a></div>
<div class="kiri">
<a href="https://www.google.com/+RivaiSilaban" target="_blank" rel="nofollow" title="GPLUS RIVAI SILABAN"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN7vWJ7ZXnNM2FW1-CR5dU-zcNd8cXgLm1N8PhgyARDDaqLf2rdau19ijSEzeOVDGcscc-6TRwBuBO7UyqSggKTRMAmo0Em5MV5KcdrO4OYzVdvkmvNMENZkQx2f-NbluEl1IeZ9S0200/s1600/G+.png" title="GPLUS RIVAI SILABAN" /></a>
<a href="https://www.facebook.com/rivaisilaban" target="_blank" rel="nofollow" title="FACEBOOK RIVAI SILABAN"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_KrSuaUBpI7f3gbvwSeaAYGVU1jC3Xq80U36y7w5yVE_XlgPKmdEURsxYn9zo_TIaJ4TNswf8szXnv96ETuhfKVAEn-mSZabrJfrl2umJ7OhDw52iZjdYEXC2XR51UPGm-s0aro2YbF0/s1600/FB.png" alt="facebook" title="FACEBOOK RIVAI SILABAN"/></a>
<a href="https://twitter.com/Rivai_Silaban" target="_blank" rel="nofollow" title="TWITTER RIVAI SILABAN"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7sqKlHaeQ_Gc6eWwNWxdA2NYRmrLhCTUebjHHQgG1ouaz4fEIqG8tmkoya8IFiI_6YAk1V9uW6O9wJocGa4SrQONYLZoqGiAYYKTnFN92ukb0OiJCsdA2ijnMOo7Sfvj1wB_ewyoSGI/s1600/TW.png" alt="twiter" title="TWITTER RIVAI SILABAN"/></a>
<a href="http://feeds.feedburner.com/RivaiSilaban " target="_blank" rel="nofollow" title="RSS RIVAI SILABAN"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZE4hLPMWii_Sc_nuql96m08Fk_SvVQjaG4dlHZ_A9IFS_MF78aQNkMnvFuJeh8-vyCgeE2C0odH1AP3dB-ax2QB9BTGNkCjc00mSbVmt0pkqaI-Nfez_jgrLWSGZ-vSfdD6_8ho10ats/s1600/RSS.png" alt="rss" title="RSS RIVAI SILABAN"/></a></div>
<div class="kanan">
<div class='BD-box'><b>Free Update artikel for you here....!!!</b>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=RivaiSilaban&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=550&apos;);return true' target='popupwindow'>
<input class='required email' name='email' onblur='if (this.value == &apos;&apos;) this.value = &apos;Enter email here !!&apos;;' onclick='if (this.value == &apos;Enter email here !!&apos;) this.value = &apos;&apos;;' type='text' value='Enter email here !!'/>
<input class='submit' id='submit' name='submit' title='subscribe' type='submit' value='SUBSCRIBE'/><input name='uri' type='hidden' value='RivaiSilaban'/>
<input name='loc' type='hidden' value='en_US'/></form></div></div>
</div></div><!-- box author Rivai Silaban end-->

Code diatas merupakan code CSS dan code tag HTML widget author box style 1, anda dapat memasangnya pada blog anda, bila anda belum memahami atau ingin melihat tata cara pemasangannya dan detail dari widget author box style 1 atau code widget author box style 1 ini silahkan kunjungi halaman dibawah ini...

http://www.rivai.org/2013/12/author-box-style-1.html

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 : 11:48 AM