 |
| Widget Profile Blogger dibawah setiap postingan Blog |
Salam Blogger, Artikel kali ini sebenarnya berkaitan dengan E-MAIL Sobat Blogger yang ingin memasang Widget Biografi Profile Penulis di bawah Posting Blognya dan disertai widget sosial bookmarknya. Alhamdullilah blogging pasuruan bisa menepati permintaan sobat dengan widget biografi penulis yang mencakup semua aspek blogging seperti Media Sosial Facebook, Twitter, Youtube, dalam widget ini Anda akan mendapatkan Donasi Button, Button Blogger .
Jika sobat Blogger yang lain jika tertarik untuk memasangnya, silahkan ikuti tutorialnya di bawah ini :
۞Masuk ke Akun Blogger
۞ Masuk ke TEMPLATE >> EDIT HTML ( backup dulu template Sobat, Penting …! )
۞ Cari kode ]]></b:skin> ( gunakan Ctrl+F biar cepat cari kodenya )
۞ Masukkan kode dibawah ini sebelum kode ]]></b:skin>
CSS
.clear {
clear:both;
}
#author-box {
margin:10px 0;
}
#author-box a:hover {
background:none!important;
}
#author-box .row-1 {
background:#333;
padding:20px;
}
#author-box .row-1 .avatar {
float:left;
line-height:1;
-moz-box-shadow:0 0 10px #FFF;
-webkit-box-shadow:0 0 10px #FFF;
box-shadow:0 0 10px #FFF;
}
#author-box .row-1 .info {
margin:0 0 0 110px;
}
#author-box .row-1 .info h6 {
color:#FFF;
font-size:20px;
margin:-4px 0 0;
}
#author-box .row-1 .info h6 span {
font-size:11px;
font-weight:400;
background:#1BA1E2;
-webkit-border-radius:40px;
-moz-border-radius:40px;
border-radius:40px;
filter:alpha(opacity=60);
opacity:0.6;
margin:0 0 0 1em;
padding:1px 9px 2px;
}
#author-box .row-1 .info p {
color:#DDD;
font-weight:400;
font-size:14px;
margin:0;
}
#author-box .row-2 {
background:#666;
}
#author-box .row-2 a.social-item {
display:block;
float:left;
color:#FFF;
text-align:center;
padding:15px;
}
#author-box .row-2 .social-item .icon {
height:32px;
width:32px;
}
#author-box .row-2 .social-item > span {
display:block;
text-align:center;
margin:auto;
}
#author-box .row-2 .social-item .label {
font-weight:700;
font-size:13px;
}
#author-box .row-2 .social-item .click {
font-size:11px;
color:#EAEAEA;
line-height:1;
}
#author-box .row-2 a.social-item:hover {
background:#1BA1E2!important;
}
#author-box .row-3 {
background:#1BA1E2;
}
#author-box .row-3 form,#author-box .row-3 a.donation-button {
display:block;
float:left;
}
#author-box .row-3 .donation-button {
background:#1BA1E2;
border:none;
font-family:Impact;
font-size:30px;
color:#FFF;
line-height:1.2em;
margin:0;
padding:10px;
}
#author-box .row-3 .donation-button:hover {
background:#000;
cursor:pointer;
}
#author-box .row-3 .register-button {
display:block;
color:#FFF;
border:none;
font-family:Impact;
font-size:30px;
text-align:right;
line-height:1.2em;
margin:0;
padding:10px;
}
#author-box .row-3 .register-button:hover {
color:#000;
cursor:pointer;
}
#author-box .row-2 .social-item.twitter .icon {
background-position:0 -32px;
}
#author-box .row-2 .social-item.facebook .icon {
background-position:0 -64px;
}
#author-box .row-2 .social-item.gplus .icon {
background-position:0 -96px;
}
#author-box .row-2 .social-item.linkedin .icon {
background-position:0 -128px;
}
#author-box .row-2 .social-item.youtube .icon {
background-position:0 -160px;
}
#author-box .row-2 .social-item.pinterest .icon {
background-position:0 -192px;
}
#author-box .social-item .icon {
background-image:url(https://lh5.googleusercontent.com/--PQVoN23nrI/UYHHvhtNSxI/AAAAAAAAJPA/5weO87qvER4/s224/ausocial.png)!important;
background-repeat:no-repeat;
}
۞ Kemudian cari kode <div class='post-footer-line post-footer-line-1'>
۞ Letakkan kode dibawah ini dibawah kode <div class='post-footer-line post-footer-line-1'>
HTML
<div id='author-box'>
<div class='row row-1'>
<div class='avatar'>
<a href='http://bloggingpasuruan.blogspot.com/'><img alt='author-avatar' class='avatar avatar-90 photo' height='90' src=' letakkan URL foto Anda disini ' width='90'/></a>
</div>
<div class='info'>
<h6>Penulis Oleh: Nama Anda<span>Admin and Author</span></h6><p><strong><a href='http://bloggingpasuruan.blogspot.com/'>Nama Anda</a> Silahkan tulis kata kata tentang profile dan lain sebagainya disini</strong></p>
</div>
<div class='clear'/>
</div>
<div class='row row-2'>
<a class='social-item website' href='http://bloggingpasuruan.blogspot.com' meta='website' target='_blank'>
<span class='icon'/>
<span class='label'>Website</span>
<span class='click'><span class='val'>113576 Visitors</span> </span>
</a>
<a class='social-item twitter' href='https://twitter.com/ id-anda' meta='twitter' target='_blank'>
<span class='icon'/>
<span class='label'>Twitter</span>
<span class='click'><span class='val'>200 Followers</span></span>
</a>
<a class='social-item facebook' href='http://www.facebook.com/id-anda' meta='face' target='_blank'>
<span class='icon'/>
<span class='label'>Facebook</span>
<span class='click'><span class='val'>500 Likes</span></span>
</a>
<a class='social-item gplus' href='https://plus.google.com/id-anda' meta='gplus' target='_blank'>
<span class='icon'/>
<span class='label'>Google+</span>
<span class='click'><span class='val'>70 Joined</span></span>
</a>
<a class='social-item linkedin' href='http://ph.linkedin.com/ id-anda ' meta='linkedin' target='_blank'>
<span class='icon'/>
<span class='label'>LinkedIn</span>
<span class='click'><span class='val'>40 Links</span></span>
</a>
<a class='social-item youtube' href='https://www.youtube.com/user/Widgetgenerators' meta='youtube' target='_blank'>
<span class='icon'/>
<span class='label'>Youtube</span>
<span class='click'><span class='val'>30 Followers</span></span>
</a>
<div class='clear'/></div>
<div class='row row-3'>
<form action='https://www.paypal.com/cgi-bin/webscr' class='author-donation' method='post'>
<input name='cmd' type='hidden' value='_donations'/>
<input name='business' type='hidden' value=’ email dari akun paypal anda '/>
<input name='lc' type='hidden' value='US'/>
<input name='item_name' type='hidden' value='Donate Blogger'/>
<input name='no_note' type='hidden' value='0'/>
<input name='currency_code' type='hidden' value='USD'/>
<input class='donation-button' name='submit' type='submit' value='+Donate to Author'/>
</form><a class='register-button' href='http://blogger.com/'>Become a Blogger</a><div class='clear'/></div>
</div>
Kustomisasi
>> Id-Anda ganti dengan ID milik Sobat
>> Email dari akun paypal Anda , silahkan sobat ganti dengan Email Paypal Anda ( wajib )
۞ Simpan Template ( Selesai )
Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Membuat WIDGET PROFILE BLOGGER di bawah Posting Blog. Semoga bermanfaat dan terima kasih..