Tutorial : Cara buat kotak admin di bawah post

Pernah tak tengok ada kotak tentang admin blog di bawah post macam gambar kat atas ni. Biasanya kita akan ceritakan tentang blog dan diri kita supaya visitor yang baca blog kita kenal kita. Salah satu caranya ialah dengan meletakkan kotak admin ini di bawah post supaya setiap kali org baca entri kita dia akan baca juga penerangan tentang diri kita dan blog.

1. Pergi ke Dashboard > Design > Edit HTML > Expand widget templates

2. Cari code berikut dengan CTRL + F 

    <div class='post-footer'>


3. Copy code di bawah ni dan paste kan di atas code di step 2 tadi

<!-- 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> ~ Penerangan blog</h4>

<div class='kontainer'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguC6ISeOke0OQRvUs6DLFS7IIo_3SxdQN3sk43zc-FFVjCQZ59qlDDyeUYaZecV7z9wqA0B3rWuffLKhGPu5XCo_IGkGN-FICzyt-9GMQmpycmbYDWuX9Z9KtsFI1mycIoQb7zMItzqsQ/s220/AVATAR+KU-128.jpg'/>

Artikel <a expr:href='data:post.url'><data:post.title/></a>ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. LETAK SEBARANG ULASAN TENTANG BLOG KORANG DI SINI.

<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://easy-xs.blogspot.com' target='_blank'>:: Get this widget ! ::</a></span></p>

<div style='clear:both;'/>

</div>

</div>

</b:if>

<!-- Kotak Admin -->

4.  Cari code ]]></b:skin> dan copy code di bawah ni di atas code yang korang cari tadi.

.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;

}

Tukarkan perkataan yang berwarna merah kepada link URL gambar yang korang nak letak dan perkataan berwarna biru kepada ulasan tentang blog korang.

Korang boleh buang perkataan yang berwarna purple kalau rasa tak berkaitan degan blog korang. Ikut suka lah k.

5. Save dan Preview

Sumber asal : rayhanzhampiet