Admin akan berbagi tutorial yaitu Membuat Autor Box Minimalis Terbaru, autor box ini sangat simple dan menarik bila anda tertarik silahkan lihat demonya, di bawah ini, silahkan simak Cara Membuat Autir Box Minimalis di bawah ini :
Pertama silahkan login ke blogger , ke menu >> Template >> Edit HTML >> cari code berikut ]]></b:skin> tepatkan script ini tepat di atas code tersebut
.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;cursor:pointer;}
.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/AVvXsEgAvU5QGPKQNRqDwcrQiPILYi1D7-Aeec8MvbkbHlsu0Q3nlCa0gHTaJrzOtvpW_t8KMDi9-anw-yDMXvXtDV5gTbDMgKY3OPtnZmolav4PwJmDn4ze3mVxmU1PGcgz8QYphU2b8kDC4us/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;
}
Kalo sudah cari code berikut <data:post.body/> kalo udah ketemu, ehh tapi bisanya code tersebut ada dua atau tiga, saran tepatkan script berikut tepat di atas code tersebut, yang dua kalo masih belom bisa yang ketiga :
<div class='Ib-authorboxs'>
<div class='container'>
<div><ul class='icon'>
<li><a expr:href='"https://plus.google.com/share?url=" + data:post.url' onClick='window.open (this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='SHARE WITH GOOGLE PLUS'><img alt='gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Fd5qbNmXnq3q353kR1NbLCx2apEOqV_l20a2zlYKqhO4p3gk-aYtnpHOdV0BdQth8lK48i8ID6wOQREMYil8Uah36jI6_D-oGULIPbFg07KBklOtXz8OfVHrjJTBiegAAG4JfyODHpyH/s1600/gplus5.png' title='SHARE WITH GOOGLE PLUS'/></a></li>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' onClick='window.open (this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='SHARE WITH FACEBOOK'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepzPzzr1SEO0DM5w38dJs8Fd1LL4o5LHoktA-aaBG_ToHIUu15VSsnu7vfLmH1Qh7boGluQvTVQ62ZxwfdA24N82iJG5Mai-mw6_DXQA9MlHF9sLGNgNHgkXwcEm-WVfo1CtARiuiAS4k/s1600/fb5.png' title='SHARE WITH FACEBOOK'/></a></li>
<li><a expr:href='"http://twitter.com/share?url=" + data:post.url' onClick='window.open (this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='twitter'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg6AH30XAfKY7UeZH8zqGQk8qBjf5sh93Q6hHKwbK1X0pV3RF0FCIDE-h0o-AaDY_40PxQ64no7llZxzTrhnIj0wKTZCJi_HP5GGjs_FyzA2aWywBrET-b-XxUSDq22BlZkWGgK9WIoAm2/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/AVvXsEgM1pgIji-2zkxcmyz7k3j7INGc0bxEAbaBAu04m_rGpg74tTJDuL_wCws_FJt9Ec6HCzUxDQtFLAX8ni1tnvgn_XLPIi-LIIBUe4DkAeHTC2ABgNtBGJhgkUGnSuRPsbLOimYLSVP0wJ2A/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'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea></span>
</div>
kalo sudah silahkan lihat apa yang terjadi...^ SELAMAT... MENCOBA...
Posts
Post a Comment
0 Comments