Widget

Showing posts with label Widget. Show all posts

Cara Merubah Widget Labels Blogger Warna Warni

Bosen dengan tampilan Widget Labels Blog yang hanya sederhana dengan mono color?.
Ingin punya tampilan widget labels blogger warna warni atau multi color. coba tips ini
dengan bantuan CSS akan merubah tampilan widget labels blogger menjadi penuh warna warni dan dengan kesan hover efek.

Demo

1. Login Blogger.com
2. Pilih Blogger --> Layout
3. Add the Labels Cloud Widget dahulu jika belum terpasang. .
4. Lalu klik Template --> Edit HTML
5. Cari code ini ]]></b:skin> ( Ctrl+F pada keybord biar mudah )
6. Lalu copy kode Css dibawah ini:
.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {
color:#fff!important;
background:#222;
padding:2px 2px;
margin:0 3px 3px 0;
float:left;
display:block;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#000}
.sidebar .label-size-2 a {background:#03B0FF}
.sidebar .label-size-3 a {background:#000}
.sidebar .label-size-4 a {background:#FF0080}
.sidebar .label-size-5 a {background:#03B0FF}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
background:#1CFFB8; color:#000; text-decoration:none}
.sidebar .label-size span {
background:#ff;
color:#000;
padding:8px 22px;
margin:0 0 3px;
clear:both;
float:left;
}
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:16px;
font-family:'Oswald', sans-serif;
color:#fff;
}
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}

6. Kemudian pastekan / letakkan sebelum kode ( ]]></b:skin> )
7. Save template, dan lihat hasilnya.

Selamat mencoba

Kode Warna Blogger

Buat Sobat yang memerlukan kode warna / html color code untuk blogger silahkan gunakan tools kode warna blogger ini. caranya mudah, tinggal klik warna pilihan dan kode warna akan muncul pada kolom kosong dibawah tabel warna, selanjutnya tinggal di copy saja kode warnanya. Begitu juga untuk warna yang lain.

Semoga bermanfaat.

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.

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 == "item"'>
<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 != "true"'> </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.

Facebook Like Box Valid Xhtml Blogspot

Facebook Like Box valid xtmhl ini berguna jika template sobat belum menggunakan HTML5 karena ada bagian attribut pada FB like box yang tidak valid xthml, tapi jika template sobat sudah menggunakan html5 rasanya sudah valid xhtml. berikut cara membuat facebook like box yang paling xhtml:

Klik disini dulu untuk mengambil kode script facebook like box:
Atau langung copy paste kode Facebook like box yang valid xhtml dibawah ini :

<div id="fb-root"></div>
<script type="text/javascript">
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js#xfbml=1';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div id="FbCont">
<script type="text/javascript">
<![CDATA[//><!]]>
</script>
</div>

Keterangan : Ganti "Your Facebook Fan Pages" dengan Punya sobat.
Selesai.

How To Make Rss Feed Link Button To Each Blogger Labels

Step 1. Back up Your Template before applying this hack.
Step 2. Your Blog must have Labels widget.

- Login to Blogger and Go To Layout > Edit Html
- Check Expand Widgets.
- Now search for below code :

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

And replace the above codes with below one :

<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

Save template

See Your Blog Labels widget

Navigasi Nomer Halaman Paling Mudah

Page Navigation hack is now also available in bloggers. As you may be viewing the numbered menu widget below the posts to visit the latest or previous posts. as these widgets are only provided in wordpress blogs or hosted blogs.But now his hack has been made available in bloggers.

Let us see how to add this Page Navigation Menu Widget :

Login To Your Blogger And Then Click On Settings And Navigate To Layout Section.

Then Click On Edit/Html.

Now Find for ]]></b:skin> tag and place below codes before it.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Now search for </body> and place the below codes before it.

In the above code you can find the below written word and can change its value from 5 to any you want.

1 : var pageCount=5;

*where 5 is the the number of post that apppear in another page you will visit.

2: var displayPageNum=2;

*This code determines the number of additional page navigation numbers that will be displayed on the page.

Paling Komplet

Cara Merubah Widget Labels Blogger Warna Warni

Kode Warna Blogger

Repair Share Buttons Blogger Not Showing in Custom Template

Cara Buat Menu Navigasi Breadcrumbs Dengan CSS3

Facebook Like Box Valid Xhtml Blogspot

How To Make Rss Feed Link Button To Each Blogger Labels

Navigasi Nomer Halaman Paling Mudah

Pages

Blog Archive

Popular Posts

Labels