Hay semunya..??? Saya akan update Cara Membuat Author Box di Bawah Postingan Blogger. Fungsi Author ini adalah untuk mempercatntik tampilan posting dan juga membuat pengunjung blog tahu tentang profil singkat si penulis blog, fungsi utama dari widget author box adalah menampilkan secara singkat biografi sang penulis atau profil singkat penulis pada bagian bawah posting agar bisa dibaca oleh pengunjung yang ingin tahu tentang si penulis blog istilah anak gaulnya si keppo, jika sobat ingin melihat contohnya seperti apa silakan lihat dibagian bawah posting ini, langsung aja nih praktekin tutorial Cara Membuat Author Box di Bawah Postingan Blogger.
1. silahkan login akun Blogger anda
2. klik menu Template, lalu klik Edit html
3. centang expand template widget
4. cari kode <data:post.body/> yang Posisinya Kedua
(gunakan CTRL:+F agar lebih cepat)
5. paste kan code di bawah ini tepat di atas code <data:post.body/>
<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a></h4>
<div class='kontainer'>
<img height='100' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizwGuuXnUjwZMgyY4IglzbxVKJp0xoe1EUcWvJju3ApGkaEqc8Q2MejDcOiT85WWelHVXoPrahOvTwPymO7KU2SCCTYpV4UknzjmgyUD5animZrCy4xDIBzYlyO7dZt2eLVOOeuBy12qI/w428-h427-no/qualcomm-snapdragon-better-than-psvita-0.jpg ' width='80'/>
Saat ini anda sedang membaca artikel yang berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b>,, Semoga artikel ini dapat bermanfaat dan berguna untuk anda. Kritik dan saran silahkan kirim melalui kotak komentar di bawah ini .... <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://blogspotdootcom.blogspot.com' target='_blank'>:: Thank you for visiting ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a></h4>
<div class='kontainer'>
<img height='100' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizwGuuXnUjwZMgyY4IglzbxVKJp0xoe1EUcWvJju3ApGkaEqc8Q2MejDcOiT85WWelHVXoPrahOvTwPymO7KU2SCCTYpV4UknzjmgyUD5animZrCy4xDIBzYlyO7dZt2eLVOOeuBy12qI/w428-h427-no/qualcomm-snapdragon-better-than-psvita-0.jpg ' width='80'/>
Saat ini anda sedang membaca artikel yang berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b>,, Semoga artikel ini dapat bermanfaat dan berguna untuk anda. Kritik dan saran silahkan kirim melalui kotak komentar di bawah ini .... <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://blogspotdootcom.blogspot.com' target='_blank'>:: Thank you for visiting ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
NB :
- ganti tulisan yang berwarna Merah dengan URL foto anda
- ganti tulisan yang berwarna Biru dengan URL blog anda
6. kemudian cari lagi kode ]]></b:skin>
7. paste kan code di bawah ini tepat di atas code ]]></b:skin>
.admin-tulisan{
display:block;
width:auto;
background:#F5F5F5;
border:1px solid #1BA000;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#C0C0C0;
border:none;
border-bottom:1px solid #C0C0C0;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:0px solid #E6E6FA;
padding:2px;
background:#E6E6FA
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
display:block;
width:auto;
background:#F5F5F5;
border:1px solid #1BA000;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#C0C0C0;
border:none;
border-bottom:1px solid #C0C0C0;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:0px solid #E6E6FA;
padding:2px;
background:#E6E6FA
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
8. klik simpan template , dan selesai ..
Gampang kan cara nya ,, gak susah2 kog :) oke itu saja yang bisa saya sampikan dalam tutorial Cara Membuat Author Box di Bawah Postingan Blogger kurang lebihnya mohon maaf.
Ditulis Oleh : Unknown | Tempat Menunggu Update Terbaru
Saat ini anda sedang membaca artikel yang berjudul Cara Membuat Author Box di Bawah Postingan Blogger,, Semoga artikel ini dapat bermanfaat dan berguna untuk anda. Jika anda ingin sebarluaskan artikel ini, mohon sertakan Sumber Link Asli. Kritik dan saran silahkan kirim melalui kotak komentar di bawah ini ....
:: Thank you for visiting ! ::
0 komentar:
Post a Comment