Membuat kotak keren dibawah positng serti About Author dahulu aku pernah posting tentang cara membuiat About Author dengan css.
dan jika anda tertarik ingin membuatnya anda tinggal mengikuti langkah-langkah dibawh ini
1. Login blogger Anda
2. Masuk rancangan.
3. Pilih edit html
4. Jangan lupa centang Expand Template Widget
5. Cari kode ]]></b:skin> dan untuk memudahkan pencarian Anda tinggal tekan CTRL + F atau F3
6. Dan kalau sudah menemukan kode ]]></b:skin>copy kode dibawah ini tepat diatas kode ]]></b:skin>
Kemudian silahkan cari kembali kode script ini <div class='post-footer'> jika di template sobat ditemukan dua kode yang sama silahkan sobat pilih yang pertama kemudian silahkan Copy Paste script di bawah ini dan simpan di atas kode <div class='post-footer'>
untuk tulisan yang berwarna aqua silhakan Anda Ganti dengan code warna anda yang Anda inginkan.
Untuk code yang berwarna merah silahkan Anda ganti dengan url gambar Anda.
Dan untuk tulisan yang berwarna kuning silahkan anda ganti dengan kata-kata Anda sendiri
dan jika anda tertarik ingin membuatnya anda tinggal mengikuti langkah-langkah dibawh ini
1. Login blogger Anda
2. Masuk rancangan.
3. Pilih edit html
4. Jangan lupa centang Expand Template Widget
5. Cari kode ]]></b:skin> dan untuk memudahkan pencarian Anda tinggal tekan CTRL + F atau F3
6. Dan kalau sudah menemukan kode ]]></b:skin>copy kode dibawah ini tepat diatas kode ]]></b:skin>
/*---------------------------
kotak admin
---------------------------*/
.hisam-learning{
display:block;
width:auto;
background:#FFFFFF;
border:2px solid #000000;
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 Comic Sans Ms;
color:#222;
}
.hisam-learning .kontainer{padding:5px;}
.hisam-learning h4{
background:#000000;
border:none;
border-bottom:2px solid #000000;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Comic Sans Ms;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.hisam-learning h4 a{color:#FEEA83;}
.hisam-learning img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #0000FF;
padding:2px;
background:#000000;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
Kemudian silahkan cari kembali kode script ini <div class='post-footer'> jika di template sobat ditemukan dua kode yang sama silahkan sobat pilih yang pertama kemudian silahkan Copy Paste script di bawah ini dan simpan di atas kode <div class='post-footer'>
<!-- Kotak Admin -->CATATAN:
<b:if cond='data:blog.pageType == "item"'>
<div class='hisam-learning'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a></h4>
<div class='kontainer'>
<img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/370697_100000450229512_569825105_n.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan kalian semua serta kesediaan Anda membaca artikel ini, Kritik dan saran dapat Anda sampaikan melalui kotak komentar . Terimakasih Anda sudah mau membaca
<p><span style='float:right;font:italic 10px Comic Sans Ms;'><a href='http://his4myahya.blogspot.com/2012/01/membuat-kotak-diitulis-oelh-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
untuk tulisan yang berwarna aqua silhakan Anda Ganti dengan code warna anda yang Anda inginkan.
Untuk code yang berwarna merah silahkan Anda ganti dengan url gambar Anda.
Dan untuk tulisan yang berwarna kuning silahkan anda ganti dengan kata-kata Anda sendiri
terimakasih sob tutornya,, cek eotika.blogspot.com..
ReplyDeletefollowan blog yuk :bye:
sngt brmnfaat gan! di tunggu kunjung baliknya.
ReplyDeletehttp://alif-unique.blogspot.com
Thanks Before.
bro, gemana cara dapatkan url alamat foto frofil tu>????????
ReplyDeletemantap mas bro sy sudah coba kemarin setelah baca artikel ini,dan berhasil dengan dengan sedikit kreasi
ReplyDeleteterima kasih telah berkunjung di blog saya .. :)
Deletesaya gak tahu letak dari
ReplyDelete4. Jangan lupa centang Expand Template Widget
tolong bantuannya
untuk blogger yang sekrang tidak usah pakek centang expand template widget ..
Deletelangsung saja cari codenya ..