Cara Menampilkan Labels Pilihan Pada Template Blogger

1. Login ke blogger.com
2. Pilih  Template --> Edit HTML
3. Kode paste kode CSS dibawah dan letakkan diatas kode  ]]></b:skin>

/* Labels pilihan blogger cybermales */
img.label_thumb{
float:left;
padding:5px;
border:1px
solid #F3F3F3;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{
float:left;
width:100%;
min-height:70px;
margin:0px 10px 2px 0px;
padding:0}
ul.label_with_thumbs li{
padding:8px 0;
min-height:65px;
margin-bottom:10px;
list-style:none;
}
.label_with_thumbs a{}
.label_with_thumbs strong{}

4. Kemudian cari kode </head>
5. copy dan pastekan kode dibawah, lalu letakan diatasnya

<script src='http://blogger-cybermales.googlecode.com/files/labelspilihan.js.txt' type='text/javascript'/>

6. Save Template
7. Lihat navigasi kanan dan Klik "Layout"
8. Klik Add Gadget >> pilih "HTML/javascript"
9. Letakkan kode dibawah pada form yang muncul dan isikan judul sesuai keinginan

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Category Here?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

# Rubahlah teks merah (Category Here) dengan kategori yang ingin ditampilkan.
10. Simpan

Read More

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