 |
| 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..
mas mau nanya nih mas,,
ReplyDeletepada template saya tidak ada ini nih mas < class='post-footer-line post-footer-line-1'>
trus bagaimna lagi mas??
trimaksih sebelmnya mas