Home » » Membuat kotak author di bawah postingan

Membuat kotak author di bawah postingan

Assalamualaikum sobat blogger semua nya ariklek kali ini saya mau bahas bagaimana membuat kotak author di bawah postingan nah fungsi dari pada author ini bisa di bilang untuk menulis deskripsi blog sobat sekaligusmemperindah blog sobat sendiri contoh nya bisa di lihat sendiri di bwah postingan bawah ini yah sobat :D

Nah bagi yang sudah gak sabar untuk bagaimana membuat nya ayo mari kita praktekan saja . :~ perhatikan langkah-langkah nya di bawah ini:

1. Login ke akun blogger

2. Pilih rancangan, edit HTML

3. Centang expant template widget.

4. Kemudian sobat cari kode <div class='post-footer'>

5. Copy kode dibawah ini, paste di atas 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> ~ Deskripsi Blog Sobat</h4><div class='kontainer'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic73DYZiYUEZBBdqk_rBNBImbKTQrxbiAtKVr_X1NZWG9z6ypWKxeo3KLKk_fjdGBNqUxMZt5JpJ4qdhZ107YP_eu_3YZJzaS7j8Tj8mddzkU8ahrijPPZq5ruL25luCB1CfXXBtB6030/s1600/blogger+priangga.png'/>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 Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href=' http://www.an99a.com/ ' target='_blank'>:: Get this widget ! ::</a></span></p><div style='clear:both;'/></div></div></b:if><!-- Kotak Admin -->

masih lanjut lagi ni sobat semangat yah :D

6. Kemudian cari kode berikut.  ]]></b:skin> copy kode CSS dibawah ini tepat diatas kode  ]]></b:skin>


.admin-tulisan{display:block;width:auto;background:#CFE2E0;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:#8A9C04;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;}

7. Simpan template sobat dan lihat hasilnya semoga bermanfaat...

#catatan: Sobat bisa ganti kode yang berwarna merah diatas dengan foto dan deskripsi blog sobat.

0 comments:

Posting Komentar

Komentarlah sesuai artikel di atas
Tidak boleh berkomentar dengan live link di komentar