Cara Buat Menu Navigasi Breadcrumbs Dengan CSS3

1. Login ke blogger.com
2. Pilih Template --> Edit HTML dan klik "Expand Widget Template"
2. Cari kode dibawah ini :

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

3. Letakkan kode berikut ini tepat di bawahnya :( jika ada 2 letakkan setelah kode yang pertama)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ul id='breadcrumbs'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li><b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> </b:loop> </b:if><li><a class='current' expr:href='data:post.url'><data:post.title/></a></li></ul></b:if>

4. Lalu cari kode ]]></b:skin> dan copy dan pastekan kode dibawah ini  tepat diatasnya :

ul#breadcrumbs {
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs{
background: #eee;font-size:11px;
border-width: 1px;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);
box-shadow: 0 0 2px rgba(0,0,0,.2);
/* Clear floats */
overflow: hidden;
width: 100%;
}

#breadcrumbs li{
float: left;
}

#breadcrumbs a{
padding: 3px 12px 3px 17px;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, right bottom, from(#f5f5f5), to(#ddd));
background-image: -webkit-linear-gradient(left, #f5f5f5, #ddd);
background-image: -moz-linear-gradient(left, #f5f5f5, #ddd);
background-image: -ms-linear-gradient(left, #f5f5f5, #ddd);
background-image: -o-linear-gradient(left, #f5f5f5, #ddd);
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}

#breadcrumbs li:first-child a{
padding-left: 1em;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

#breadcrumbs a:hover{
background: #fff;
}

#breadcrumbs a::after,
#breadcrumbs a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}

#breadcrumbs a::after{
z-index: 2;
border-left-color: #ddd;
}

#breadcrumbs a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}

#breadcrumbs a:hover::after{
border-left-color: #fff;
}

#breadcrumbs .current,
#breadcrumbs .current:hover{
font-weight: normal;
background: none;
}

#breadcrumbs .current::after,
#breadcrumbs .current::before{
content: normal;
}

5. Simpan template. lihat hasilnya

Keterangan : untuk warna disesuaikan saja dengan tools html colors codes.

Read More

Cara Membuat Garis Bawah Judul Postingan Blogger

Pada templates blogger terkadang terkadang berbeda tampilan tergantung pembuat templates blogger.
Jika masih menggunakan template standar bawaan blogger masih banyak yang harus dicustomize biar templates blog kelihatan lebih menarik. Nah kali ini kita ingin menambahkan tanda garis bawah pada judul postingan.

Caranya mudah jika template sobat ingin menerapkan ini:

1. Login dulu dengan account blogger sobat
2. Backup tempaltes sebagai cadangan
3. LAYOUT --> EDIT HTML -->

Cari kode seperti ini :

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
Atau code seperti ini :

#main-wrapper {
width: 410px;

4. Copy paste code berikut dan sisipkan diantara code diatas

border-bottom:1px solid #000000;

5. Save templates dan lihat hasilnya

Read More

Cara Pasang Iklan Di Sebelah Kanan Atau Kiri Postingan Blogspot

1. Login ke Blogger
2. Siapkan Kode iklan yang ingin dipasang dikanan atau kiri postingan blog
3. Edit HTML ==> Backup template
4. Beri tanda Centang Expand Template Widget
5. Lalu cari kode <data:post.body/> (jika terdapat lebih dari satu kode seperti itu, pilih kode yang ke dua)
6. Copy pastekan kode berikut ini di atas kode <data:post.body/>, pilih salah satu untuk posisi kanan atau kiri postingan

A. Kode dibawah ini untuk menampilkan iklan di sebelah kiri postingan blog

<div style='float:left;margin-right:10px'>
Ganti dengan Kode iklan yang sudah di parse
</div>

B. Kode dibawah ini untuk menampilkan iklan di sebelah kanan postingan blog
<div style='float:right;margin-left:10px;'>
Ganti dengan Kode iklan yang sudah di parse
</div>

7. Save template dan lihat hasilnya.

Untuk memparse kode iklannya silahkan parse Disini
Cara ini bisa diterapkan untuk menampilkan iklan google adsense atau PPc lainnya.
Selamat mencoba.

Read More