Membuat Kotak Admin Di Bawah Postingan

Sebagian blogger Membuat Kotak Admin Di Bawah Postingan itu perlu, ada yang bilang ini juga salah satu SEO untuk Blog anda. Apa yang di maksud Kotak Admin Di Bawah Postingan ? Untuk lebih jelasnya silahkan anda lihat gambar di bawah ini, letaknya tepat di bawah postingan Blog.

Cara Membuat Kotak Admin Di Bawah Postingan :

• Sign In terlebih dahulu di www.blogger.com
• Dashboard > Template > Edit HTML
• Centang Expand Widget Templates
• Cari Kode <div class='post-footer'> dan letakkan Kode berikut diatas Kode 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> ~ Sample of My Blog</h4>
<div class='kontainer'>
<img src='http://i1204.photobucket.com/albums/bb401/RizQy-RChild/Favicon/LetterR.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 anda serta kesediaan anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

• Kemudian, Cari Kode ]]></b:skin> dan letakkan Kode berikut diatasnya

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

• Simpan

 Keterangan :
Warna Merah : Ganti Dengan URL/Alamat Gambar Foto Anda.

Read More »

Posted in: Tutorial Blog

Membuat Navigasi Breadcrumb

Apa itu Navigasi Breadcrumb ?

Navigasi Breadcrumb adalah nama yang diberikan untuk link navigasi yang biasanya ditampilkan di atas judul atau title posting di blog dan di bagian atas halaman. Navigasi Breadcrumb menyediakan sarana tambahan di mana visitor atau pengunjung blog dapat dengan mudah melakukan navigasi di situs atau blog kita. Pada umumnya, Navigasi Breadcrumb menampilkan Halaman Depan atau Home > Label > Judul Posting.

Cara Membuat Navigasi Breadcrumb :

• Sign In terlebih dahulu di www.blogger.com
• Dashboard > Template > Edit HTML
• Centang Expand Widget Templates
• Cari Kode <b:if cond='data:post.title'> dan letakkan Kode berikut dibawah Kode tadi

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

• Kemudian, Cari Kode ]]></b:skin> dan letakkan Kode berikut diatasnya

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

• Simpan

Apa penyebab Navigasi Breadcrumb tidak muncul di blog ?
Jawabannya adalah "Sobat blogger belum membuat Label di setiap postingan sobat. Jadi, sobat blogger harus melabelkan dulu semua posting blog sobat sebelum memasang Navigasi Breadcrumb."

Read More »

Posted in: Tutorial Blog