Membuat Widget Statistik dari Blogger Menjadi Rata Tengah

Biasanya bila saya memasang widget atau gadget Statistik yang disediakan oleh Blogger pada sidebar, maka letaknya akan berada di sebelah kiri seperti yang terlihat pada gambar di samping ini.

Lalu agar tampak menarik, saya menginginkan agar posisi widget tersebut menjadi rata tengah atau berada di tengah-tengah dari lebar sidebar. Kalau untuk mengetengahkan widget yang didapat dari pihak ke-tiga, saya tinggal mengapit script dari widget tersebut dengan tag <center> dan </center>. Sedangkan untuk membuat widget Statistik dari Blogger menjadi rata tengah saya perlu mengedit HTML dari template blog.

Berikut cara yang saya gunakan untuk membuat posisi widget Statistik dari Blogger menjadi rata tengah.

1. Masuk ke akun Blogger.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template.

4. Cari kode ]]></b:skin>. Gunakan tombol Ctrl + F untuk memudahkan pencarian.

5. Kemudian copy kode di bawah ini dan paste di atas kode tersebut.

#Stats1 .widget-content{
text-align:center;
}

6. Klik tombol SIMPAN TEMPLATE.

Hasilnya akan tampak seperti pada gambar di bawah ini.

Cara Membuat Menu Navigasi Breadcrums di Blogger atau Blogspot

Sebelumnya saya sudah memposting artikel tentang cara membuat menu navigasi breadcrumbs di Blogger. Untuk membaca postingan tersebut silakan klik di sini. Kali ini saya akan membahas hal yang sama. Namun, cara yang berikut ini agak sedikit berbeda. Bila pada cara yang sebelumnya tidak berhasil, Anda dapat mencoba cara yang satu ini.

Langsung saja, berikut ini langkah-langkah dalam membuat menu navigasi breadcrumbs di Blogger atau Blogspot. Silakan disimak dan semoga sukses.

1. Masuk ke akun Blogger.

2. Klik Rancangan > Edit HTML.

3. Silakan klik Download Template Lengkap untuk membuat salinan template.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode ]]></b:skin>, lalu letakkan kode di bawah ini di atas kode tersebut. Gunakan tombol Ctrl + F untuk mempercepat pencarian.

.breadcrumbs {

padding: 5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height:1.4em;

border-bottom:3px double #e6e4e3;

}

6. Selanjutnya cari kode yang seperti di bawah ini.

<b:include data='top' name='status-message'/>

      <data:adStart/>

    <b:loop values='data:posts' var='post'>

7. Kemudian letakkan kode <b:include data='posts' name='breadcrumb'/> setelah kode <b:include data='top' name='status-message'/> sehingga hasilnya akan menjadi seperti di bawah ini.

<b:include data='top' name='status-message'/>

  <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

    <b:loop values='data:posts' var='post'>

8. Berikutnya cari kode <b:includable id='main' var='top'> dan letakkan kode di bawah ini tepat di atas kode tersebut.

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

&#187; <span><data:post.title/></span>

</b:if>

</b:loop>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Arsip untuk <data:blog.pageName/>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Seluruh Artikel

<b:else/>

Anda di sini &#187; <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; Artikel pada Label <data:blog.pageName/>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

9. Klik tombol SIMPAN TEMPLATE.

10. Lihat blog Anda untuk mengetahui hasilnya.