Banyak sekali tips dan trik yang terdapat pada blogger ini salah satunya yang terbaru adalah memberikan nomor pada kolom kotak komentar seperti contoh diatas :
Kali ini saya akan memberikan cara bagaimana memberikan nomor pada kolom kotak komentar :
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode ini :
]]></b:skin>
6. Tambahkan kode ini diatasnya :
.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*comments-counter position*/
text-align: right;
font-family: ‘Century Gothic’,'Lucida Grande’,Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}
.numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}
.numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}
Silahkan ganti tulisan yang berwarna hijau dengan warna yang kalian sukai.
7. Tambahkan kode merah di bawah ini diantara kode-kode di bawah :
<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
<span class='numberingcomments'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</b:loop>
</dl>
8. Save dan lihat hasilnya.
Keep Blogging...
Mungkin para blogger sudah tidak asing lagi dengan myblog blog karen ini merupakan salah satu widget yang paling sering digunakan oleh para blogger mania. Pada tutorial kali ini saya akan memberikan tutorial bagaimana cara menghapus kata-kata yang ada pada my blog blog seperti contoh kasus diatas.
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. cari kode ini :
]]></b:skin>
6. Tambahkan kode ini diatasnya :
td.mbl_fo_hidden{display:none;}
td.mbl_join_img{}
td.mbl_join{}
tr#tr0{display: none}th.mbl_h{display:none;}
7. Save dan lihat hasilnya
Mungkin teman-teman kalian masih pada bingung apa itu Tab Accordion Bubbling Library, sekarang blogger memperbolehkan kita untuk memakai tutorial ini pada semua blog di blogspot. Ok kalau kalian masih pada bingung coba kalian lihat contoh demonya :
Demo 1
Nah begini cara membuatnya :
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode ini : (Untuk Lebih memudahkan kalian klik ctrl + f)
</head>
6. Tambahkan kode ini diatasnya :
<style type="text/css">
.myAccordion {
float: left;
margin-right: 15px;
}
h3{
padding: 8px;
color: #636363;
background-color: #ffffff;
background-image: url(http://alien.keren.googlepages.com/1.gif);
background-position: top;
background-repeat: repeat-x;
font-weight: normal;
}
.myAccordion .yui-cms-accordion .yui-cms-item {
border: 1px solid #cccccc;
width: 200px;
}
.myAccordion .yui-cms-accordion .yui-cms-item h3 {
margin: 0px;
}
.myAccordion .yui-cms-accordion .yui-cms-item .accordionToggleItem {
background: url(http://alien.keren.googlepages.com/accordion.gif) no-repeat 0px 0px;
text-decoration: none;
padding-left: 20px;
display: block;
}
.myAccordion .yui-cms-accordion .yui-cms-item.selected .accordionToggleItem {
background: url(http://alien.keren.googlepages.com/accordion.gif) no-repeat 0px -100px;
}
.myAccordion .yui-cms-accordion .yui-cms-item .bd {
height: 0px;
overflow: hidden;
background-color: #fff;
}
.myAccordion .yui-cms-accordion .yui-cms-item .bd .fixed {
overflow: hidden;
padding: 5px;
height: 230px;
}
</style>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js">
</script>
<script type="text/javascript" src="http://js.bubbling-library.com/1.5.0/build/bubbling/bubbling.js"></script>
<script type="text/javascript" src="http://js.bubbling-library.com/1.5.0/build/accordion/accordion.js"></script>
7. Tambahkan Page elemen HTML / Javascript lalu tambahkan kode di bawah ini :
<div class="myAccordion">
<div class="yui-cms-accordion persistent rollover slow">
<div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>
<div class="bd">
<div class="fixed">
<p>
Masukkan teks atau kod HTML disini
</p>
</div>
</div>
</div>
<div class="yui-cms-item selected">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>
<div class="bd" style="height: auto;">
<div class="fixed">
<p>
Masukkan teks atau kod HTML disini
</p>
</div>
</div>
</div> <div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>
<div class="bd" style="height: auto;">
<div class="fixed">
<p>
Masukkan teks atau kod HTML disini
</p>
</div>
</div>
</div> <div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="click to expand">Tajuk</a></h3>
<div class="bd" style="height: auto;">
<div class="fixed">
<p>
Masukkan teks atau kod HTML disini
</p>
</div>
</div>
</div>
</div>
<div style="text-align: right;">Widget by <u><a href="http://klinik-tutorial.blogspot.com/">klinik-tutorial</a></u></div>
</div>
8. Save dan lihat hasilnya.
Jangan lupa ganti tulisan berwarna hijau diatas dengan tulisan kalian.
untuk mempercepat prosesnya tinggal kalian ganti tulisan slow menjadi fast.
Selamat mencoba
Mungkin biasanya teman-teman mendapat template yang hanya standar dari pembuat template itu tapi kalau kalian ingin menambahkan gambar pada template kalian yang sesuai dengan keinginan kalian seperti contoh gambar diatas saya akan memberi tahu cara-caranya :
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode di bawah ini :
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
6. Kemudian tambahkan kode merah di bawah ini dan ganti tulisan berwarna hijau di bawah dengan URL gambar yang kalian inginkan :
body {
background:$bgcolor url(http://img152.imageshack.us/img152/6574/3d169tl1.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
7. Save dan lihat hasilnya
selamat mencoba..
Apa kalian pernah melihat blog atau website yang tulisan home, posting lama dan posting barunya berupa gambar. Nah kali ini saya akan memberikan tutorial bagaimana mengganti tulisan-tulisan tersebut dengan gambar.Ok deh dari pada berlama-lama langsung saja kita mulai tutorialnya.
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode di bawah ini :
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
6. Ganti tulisan hijau diatas dengan kode di bawah ini :
<img src="http://alien.keren.googlepages.com/first.gif"/>
7. Kemudian cari kode ini :
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
8. Ganti tulisan yang berwarna hijau dengan kode di bawah ini :
<img src="http://alien.keren.googlepages.com/last.gif"/>
9. Lalu cari kode ini :
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond=’data:newerPageUrl’>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
</b:if>
</b:if>
10. Ganti tulisan berwarna hijau diatas dengan kode di bawah ini :
<img src="http://alien.keren.googlepages.com/home.gif"/>
11. Save dan lihat hasilnya.
akhirnya selesai juga deh....selamat mencoba
