Repair Share Buttons Blogger Not Showing in Custom Template

It blogger share buttons aren't showing below your posts don't worry it happens if you are using a modified blogger theme. It's a easy fix. Follow steps below.

1. Log in Blogger.com
2. Go to Design >> Edit HTML
3. Check the "Expand Widget Templates" BOX
4. Search for any one of the following three line(you will find one of them for sure):

<p class='post-footer-line post-footer-line-3'>

If you don't find the code above, find the code below

<div class='post-footer-line post-footer-line-3'>

and if still didn't find the code above, find the code below

<data:post.body/>

5. After finding any of the line above paste the following code below it.

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

6. Save your template and view your template, you should see blogger share buttons now.

Read More

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