weLcome To Dai-detected

Cara membuat kotak admin dibawah postingan di blog

Bagikan ke Teman! :


Cara Membuat Kotak Admin di Blogger yang Terletak Pada Bagian Bawah Postingan

dalam kotak admin tersebut biasanya juga akan ditampilkan judul posting yang sedang dibaca oleh pengunjung .

contoh kotak admin (about author box) sendiri seperti yang ditampilkan pada gambar dibawah ini.


langkah-langkahnya
Cara Pasang Kotak Admin di Blog :


Cari kode : <div class='post-footer'>
Jika sudah selanjutnya copy kode dibawah ini, dan pastekan tepat diatas kode <div class='post-footer'>

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Newbie Was Here</h4>
<div class='kontainer'>
<img height='80' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPp9E4_ZiBgCw8ikIDV9JJ5nPLoHAAdtbFC8FD0TbDnOLcM4AbFfB9PvPFdg5h0kQG9ByK_5m5bs4vJ_V_mQovBYnBdUuJkia8ukQYQraQFsro2FL_-_XhbCk_xvIC0VaeXp68qK1yYoG/s320/313503_301632559848558_100000054482640_1367104_1041886808_n.jpg' width='75'/>
Anda sedang membaca sebuah artikel yang berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b>,, Terimakasih atas kunjungan Anda serta kesediaan Anda untuk membaca artikel Diatas. Semoga artikel tersebut bermanfaat untuk anda ....
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

Ganti kode berwarna hitam dengan deskripsi anda, ganti kode berwarna hijau dengan URL gambar milik anda, ganti kode berwarna merah sesuai dengan keinginan anda

selanjutnya cari kode : ]]></b:skin>
lalu copy kode CSS di bawah ini dan pastekan di atas kode ]]></b:skin>

.admin-tulisan{
display:block;
width:auto;
background:#E6E6FA;
border:2px solid #fff;
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:#000000;
border:none;
border-bottom:1px solid #699019;
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:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

Simpan dan lihat hasilnya

0 komentar — Skip ke Kotak Komentar

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: : :l: :m: :n: : : :q: :r: :s: :t: :u: :v: :w: : :y: Emotion lainnya?

Posting Komentar — or Kembali ke Postingan