Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Friday, February 14, 2014

cara membuat widget author box minimalis

Cara membuat widget author box minimalis - cara membuat widget author box minimalis sangat simpel, cara membuat widget author box minimalis kali ini trinspirasi dari seorang sahabat blogspot saya, dimana beliau membutuhkan author box yang sederhana tapi menarik, sehingga pada kesempatan kali ini saya membuat postingan artikel cara membuat widget author box minimalis di blogspot. Untuk melihat demonya silahkan klik demo dibawah ini lihat bagian bawah halaman , nah bila anda tertarik untuk memasangnya silahkan simak tutorial cara membuat widget author box minimalis di blogspot di bawah ini, langsung saja menuju TKP;

Demo

Pasang code script dibawah ini didalam code CSS template anda.

Code CSS here..


/*****************************************
Name : Author box minimalis
By : Rivai Silaban | Ide Blogspot | Blog Design
Update : Jumat 14 February 2014
*****************************************/
.Ib-authorboxs {width: 100%; margin:5px auto;}
.Ib-authorboxs .container{padding: 20px;border-radius: 5px;background-color: #376A7B;}
.Ib-authorboxs .container {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #fff;
line-height: 20px;
position: relative;
}
.Ib-authorboxs .container:after,
.Ib-authorboxs .container:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.Ib-authorboxs .container:after {
border-top-color: #376A7B;
border-width: 20px;
left: 65%;
margin-left: -10px;
}
.Ib-authorboxs .container:before {
border-top-color: rgba(0,0,0,0.01);
border-width: 11px;
left: 65%;
margin-left: -11px;
}
.Ib-authorboxs .icon {width: 100%;margin:0 auto;padding:0 10px;}
.Ib-authorboxs .icon ul{margin:0 auto;}
.Ib-authorboxs .icon li {display: inline;float: left;padding:0 10px;}
.Ib-authorboxs .BDRS-textarea {
background-color:#ECFDF9;
border:dashed #666 1px;
width: 100%;
margin:5px auto;
}
.Ib-authorboxs .owner {
text-align: right;
padding: 20px 100px 20px 20px;
position: relative;
margin:5px 20px 0 0;
}
.Ib-authorboxs .owner-image-profil {
display: block;
width: 70px;
height: 70px;
border: 5px solid #fff;
border-radius: 50%;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhli0eeKkwqQSmBnFcU-alizVvkiCVRqLf6sz3zYYy8Om4GomriSvZ79_poF-8gJt7rbTosK5IP6PqMfIu95fGfbWgjXHnpClYNfa4WdfVY839bTx_X38VEfDmonqeSCOrqBuwF0KpjkQE/s1600/s.jpg') 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);
}
.Ib-authorboxs .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 0 10px 0;
}
.Ib-authorboxs .name{font-family: Verdana;color: #0000FF;font-size: 12px;text-decoration: none;}
.Ib-authorboxs .name:hover{color: #4F0000;text-shadow: 0 1px 1px rgba(255,255,255,0.7);text-decoration:underline;}
.keyword {
height: 20px;
width: 15%;
text-align: left;
float: right;
margin: -31px 35px -30px 0px;
background: #FFD5D5;
border: solid 1px #fff;
}
/* Author box minimalis */


Pasang code html dibawah ini sebelum code <data:post.body/>

Code HTML here..


<!-- Author box minimalis code start-->
<div class='Ib-authorboxs'>
<div class='container'>
<div><ul class='icon'>
<li><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='SHARE WITH GOOGLE PLUS'><img alt='gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlbyoIwflPq7ns0r7r05S82D9kZvYNyXXErosMSUauhaf1Ml9oSRM-WRes9XZxSoe9m0eyPBW1uSka0PFo0M7c8xdm9cxiLBakZtkHxmWysTfi1WXvvrTA82vG39KRrQsYN2VeQ5Z9MbzJ/s1600/gplus5.png' title='SHARE WITH GOOGLE PLUS'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='SHARE WITH FACEBOOK'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqFiSjBvfiTbsWrQRV-c-Zz7KnI_eTnH_c7Gs1N7F4SFaYwLZAlxQrh0rdksz5npZMSzecN9dRpILA1XOk3BavuJB3EsDTWlHZngQioC9iot3_RXhps8Xx9jNchycVHK84o00K8Z4g95PF/s1600/fb5.png' title='SHARE WITH FACEBOOK'/></a></li>
<li><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onClick='window.open (this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='twitter'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNZYM_mFRWhcY5DscN8iXmJZoHB8gCpMAWeDkyFrrYbbZOTB1YQRq7hkLKbsHr2z0DTy06QHi0OezkkPdXvg7gJHqeURL1xrS9om1KPBxLUy8rLUejEUZbVToAXT69BLPkq81pv1dHcT9/s1600/twit5.png' title='SHARE WITH TWITTER'/></a></li>
<li><a href='LINK RSS' rel='nofollow' target='_blank' title='SHARE WITH TWITTER'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxnTpTcNcYT_XTC4wZ5AvugibExV89WC_nV__RiXhy_-agUoppAqYkXIrkYhbAo40M-jIzSFu49M7p-8Z1fDJ18RMx_2oKQthw4daumUYNP_x4W69gvkCMKFlh7UULsfc-33_-X8iLvVR/s1600/rss5.png' title='RSS'/></a></li></ul>
</div>
<div style='margin-bottom:-20px;'>Anda sedang membaca artikel tentang,<br/> <b><a expr:href='data:post.url' expr:title='data:post.title' style='color: rgb(255, 255, 0);font-size: 11px;font-family: arial;text-align: center;'><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;'><br/><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'>Ide Blogspot</p><a class='name' href='LINK PROFIL' rel='nofollow' target='_blank' title='Rivai Silaban'>+Rivai Silaban</a><div class='owner-image-profil'/></div></div></div>
<!-- Author box minimalis end-->


Bila anda masih belum memahami tata cara membuat widget author box minimalis ini silahkan kunjungi halaman sumbernya, dan lihat fungsi dari beberapa fitur codenya, semoga bermanfaat..
Sumber : http://www.ideblogspot.com/2014/02/author-box-minimalis.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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 8:44 PM

1 comment :

  1. terimakasih gan untuk tutorialnya ane kesulitan membuat widget penulis. salam kenal Superwash Laundry

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog