Cara Buat Border Lengkung pada Blog

Menukar tampilan bagi mengindahkan blog tentunya merupakan antara yang tidak dapat tidak dilakukan oleh seseorang blogger.Selain dari cantik dan tidak memberatkan loading blog adalah antara yang perlu diberi perhatian bila melakukan sesuatu perubahan pada template.Sebelum ini saya ada membuat entri tentang membuat border disekeliling posting.tapi dalam bentuk persegi.Kali ini pula dipenjuru border adalah dalam bentuk bulat.

Untuk membuatnya:

1.Masukk ke blogger dan pilih design
2.Klik edit HTML dan tandakan pada Expand template widget
3.Cari kod h2.date header{ 

dan letakkan kod ini dibawahnya

border-left:3px solid #0000FF; 
border-right:3px solid #0000FF; 
border-top:3px solid #0000FF; 
border-bottom:0px solid #0000FF; 
-moz-border-radius-topleft:15px; 
-moz-border-radius-topright:15px;



4.cari kod . post-body { 

dan letakkan kod ini dibawahnya

border-right:3px solid #0000FF; 
border-left:3px solid #0000FF;
5. Kemudian cari kod ini pula, .post-footer { 
Tambah kod ini dibawahnya
border-left:3px solid #0000FF; 
  border-right:3px solid #0000FF; 
  border-top:0px solid #0000FF; 
  border-bottom:3px solid #0000FF; 
  -moz-border-radius-bottomleft:15px; 
  -moz-border-radius-bottomright:15px; 

6.Untuk mengganti border pada sidebar pula cari kod ini:

.sidebar .widget { 

dan letakkan kod ini dibawahnya

border:1px solid #0000FF; 
-moz-border-radius-topleft:15px; 
-moz-border-radius-topright:15px; 
-moz-border-radius-bottomleft:15px; 
-moz-border-radius-bottomright:15px

Kod berwarna HIJAU adalah kod bagi warna MERAH ,boleh di ganti sesuai keinginan anda.

7.Seterusnya save template .

Cara Letak Background dan Border Pada Sidebar

Kebiasaanya warna ruangan posting dan sidebar pada template adalah sama.Mungkin ada yang inginkan kelainan dengan meletakkan border dan background yang berbeza pada sidebar.

Berikut adalah caranya:

Masuk ke design-pilih Edit HTML-expand template widgets
cari kode di bawah ini:

#sidebar {
width:150px;
float:left;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

background-image: url(letakkan url imej disini);

border:12 px dashed #0000FF;

}

jika tidak ada kode seperti diatas cari kode di bawah ini:

.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);

background:url(letakkan url imej disini)repeat;

border:12 px dashed #0000FF;

}
background imej perlu diupload dan dapatkan url utk dimasukkan pada kode diatas
#cuma tambah kode warna merah.Untuk border selain dari dashed boleh juga ditukar dengan solid,dotted,ridge,groove.Begitu juga dengan kode warna bagi border juga boleh ditukar mengikut kesesuaian.
Semoga Bisa lebih mempercantik blog anda..

Membuat Halaman Bernomor

Setelah lama saya mencari akhirnya dapat juga, jika biasanya pada halaman pada blog anda hanya ada older post ternyata itu bisa di ganti dengan halaman bernomor seperti gambar berikut:
Penasaran bagaimana cara membuatnya, langsung aja :
yang paling penting anda harus login dulu
2. masuk ke tata letak (layout) >> element halaman
3. tambah gedget >> pilih HTML/java script
4. copas dan code berikut:

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}


.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;


}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;


}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;




}


.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;


}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}


.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';




var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';






var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';


for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}


postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){


itemCount++;
}


}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}


if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}


for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/"'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}


fFlag++;
}


if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}


if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

5. text yang berwarna merah bisa anda ganti dengan text seperti: first menjadi home,
next menjadi lanjut, Previous menjadi kembali, dan last menjadi terakhir
6. letakkan di bawah posting blog seperti gambar berikut:

7. simpan template, lihat hasilnya . . .Semoga bisa bermanfaat

Mengganti Gaya Bulet Unorder List (UL) & (LI)

Agar tidak terlalu bosan dengan gaya <UL> dan <li> yang selalu begitu dengan gayanya, contohnya seperti ini

<-- Lihat itu (kosong)
• <-- Yang ini juga

Yang seperti ini mungkin sudah menjadi hal yang sangat biasa sekali di dunia pemrograman, bagaimana jika sekarang mengedit bulet <ul> dan <li> menjadi gambar!
Pertama buat dulu gambar yang berukuran 20x20px bisa bentuk panah atau icon emoticom juga bisa, tapi inget gambar tidak boleh terlalu besar.
Jika sudah mempunyai gambar yang bakalan menggantikan buletnya <UL> dan <LI> ikuti langkah berikut.

Pertama login dengan akun anda, lanjut ke Tata Letak > Edit HTML
cari kode seperti ini ]]></b:skin>
Jika sudah ketemu taruh kode berikut ini tepat di atas kode tersebut

.post ul{list-style-type:none;
margin:10px 5px 0px;}
.post ul li{background:url(alamat gambar anda)no-repeat;padding:0px 0px 5px 30px;}

yang berwarna biru ganti dengan url gambar anda, anda juga bisa mengatur jaraknya di warna merah,
atau anda juga bisa menulisnya seperti ini

<ul style="background:url('http://www2.blogblog.com/rounders/icon_arrow.gif') no-repeat;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;
">isi text
<li style="background:url('http://www2.blogblog.com/rounders/icon_arrow.gif') no-repeat;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;
">isi textnya</li>
</ul>

Semoga ini bermanfaat buat anda...

Penulis: Dhodho

Mengubah dan Menambah Image Header Dengan Desain Sendiri

Mungkin banyak di antara sobat yang merasa tampilan header blognya terlihat biasa dan tulisan judul blognya hanya sebatas text dengan jenis dan warna huruf yang terkesan monoton. Jika kamu kreatif dan cukup menguasai aplikasi gambar, baik itu Corel, Photoshot, atau yang lainnya, header tersebut bisa kamu ubah dengan desain yang kamu sukai.

Untuk mengubah tampilan header ini ada dua cara, tergantung dari template yang digunakan. Pertama, mengubah gambar header jika template yang digunakan sudah memakai gambar header. Kedua, menambah gambar header jika template yang digunakan belum memakai gambar header.

Mengubah Gambar Header Pada Blogspot

Sebagai contoh pada cara ini saya menggunakan template Art Template.

• Dari dasbor, pilih Rancangan - Edit HTML.
• Lakukan duplikasi template untuk jaga-jaga jika bermasalah.
• Carilah kode CSS untuk header (dalam beberapa template yang lain menggunakan kode header-wrapper), misalnya seperti ini:
  
  #header {

  width: 1000px;

  height: 176px;

  float: left;

  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirk7z65l8aQ-Jd7UHcM235sTZpoo8qwif59t9UAMnu1ZIxPltzDaPje72OhKGqFHXPtLvDYzx4DcRysDW_0d_5qBueCOEZr-q9GRdFmZYJp3K8P-boZglrD8rxgkHKsCWRzCrRvplhnwOa/s1600/header_bg.jpg) no-repeat;
  

  }
• Copy-paste URL gambar header template kamu pada address bar, lalu simpan gambar ke harddisk.
  Misalnya URL gambar header pada CSS Art Template di atas seperti ini:
  
• Edit gambar tersebut dengan aplikasi gambar, misalnya jadi seperti ini:
  
• Setelah itu upload gambar hasil edit kedalam image hosting kamu.
• Kemudian ubahlah URL gambar pada CSS tadi dengan URL gambar dari image hosting kamu.
• Selanjutnya carilah kode berikut (supaya mudah, cari id='Header1'):
  
  <b:widget id='Header1' locked='true' title='Judul Blog Kamu (Header)' type='Header'/>
• Hapus kode tersebut lalu Simpan Template.

Sebagai contoh dari hasil editing gambar header Art Template di atas dapat dilihat pada blog ini.

Menambah Gambar Header Pada Blogspot

Untuk template yang tidak ada gambar header-nya saya mengambil contoh dari template Amoebaneo.

• Langkah 1 dan 2 sama dengan di atas.
• Carilah kode CSS untuk header (dalam beberapa template yang lain menggunakan kode header-wrapper), misalnya seperti ini:
  
  #header-wrapper {
  width: 980px;
  height: 70px;
  padding-top:20px;
  }
• Dengan melihat ukuran pada CSS tersebut, buatlah gambar berukuran lebar=980px dan tinggi sesuai keinginan.
  Misal gambarnya seperti ini, dengan ukuran 980 x 200:
  
• Setelah itu upload gambar hasil buatan kedalam image hosting kamu.
• Kemudian ubah CSS header-wrapper tersebut dan tambahkan perintah background kedalamnya. Misal seperti ini:
  
  #header-wrapper {

  width: 980px;

  height: 200px;

  padding-top:0px;

  background: url(URL gambar dari image hosting kamu) no-repeat;
  

  }
• Selanjutnya carilah kode berikut (supaya mudah, cari id='Header1'):
  
  <b:widget id='Header1' locked='true' title='Judul Blog Kamu (Header)' type='Header'/>
• Hapus kode tersebut lalu Simpan Template.

Sebagai contoh dari hasil penambahan gambar header Amoebaneo di atas dapat dilihat pada blog ini.

Ok, segitu aja sob. Semoga bermanfaat dan dapat dimengerti .....

Cara Membuat Menu Scroll

Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja liat contoh dibawah ini!

• Percantik Tampilan Kontak Komentar Dengan Gambar
  
  
• Cara Membuat Related Post Pada Blogspot
  
  
• Cara Menambahkan Cook Emoticon di Kotak Komentar
  
  
• Mebuat Bintang Bertaburan Pada Blog
  
  
• Cara Mengganti Tulisan Posting Baru, Psting Lama, dan Home Dengan Icon
  
  
• Cara Membuat Scroll Pada daftar Komentar(NEW)
  
  
• Cara Mudah Menambahkan Reply di Comment
  
  
• Cara Membuat Buku Tamu/Guest Book
  
  
• Archive Hierarki Hemat Tempat
  
  
  

Cara buat menu scroll seperti diatas:

Copi code berikut:

<div style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; overflow: auto; width: 255px; padding-top: 10px; height: 141px" 1px="1px" solid="solid">
  <ul>
    <li><p><a href="http://bapukstyle.blogspot.com/2011/02/percantik-tampilan-kotak-komentar-blog.html">Percantik Tampilan Kontak Komentar Dengan Gambar</a> </p>

    <li><p><a href="http://bapukstyle.blogspot.com/2011/02/cara-membuat-related-post-pada-blogspot.html">Cara Membuat Related Post Pada Blogspot</a> </p>

    <li><p><a href="http://bapukstyle.blogspot.com/2011/02/cara-menambahkan-cook-emoticon-di-kotak.html">Cara Menambahkan Cook Emoticon di Kotak Komentar</a> </p>

    <li><p><a href="http://bapukstyle.blogspot.com/2011/02/membuat-bintang-bertaburan-pada-blog.html">Mebuat Bintang Bertaburan Pada Blog</a> </p>

    <li><p><a href="http://bapukstyle.blogspot.com/2011/02/cara-mengganti-tulisan-posting-baru.html">Cara Mengganti Tulisan Posting Baru, Psting Lama, dan Home Dengan Icon</a> </p>

    <li><p><a href="http://bapukstyle.blogspot.com/2011/02/cara-mebuat-scroll-pada-daftar.html">Cara Membuat Scroll Pada daftar Komentar(NEW)</a> </p>

    <li><p><a href="http://bapukstyle.blogspot.com/2011/02/cara-mudah-membuat-reply-di-coment.html">Cara Mudah Menambahkan Reply di Comment</a> </p>

    <li><p><a href="http://bapukstyle.blogspot.com/2011/02/cara-membuat-buku-tamuguestbook.html">Cara Membuat Buku Tamu/Guest Book</a> </p>

    <li><p><a href="http://bapukstyle.blogspot.com/2011/02/archive-hierarki-hemat-tempat.html">Archive Hierarki Hemat Tempat</a> </p>


  </li></li></li></li></li></li></li></li></li></ul>
</div>

Setelah itu paste pada tempat yang sobat inginkan di blog sobat , apakah pada postingan, sidebar dll. Untuk alamat URLnya sobat ganti dan sesuaikan sendiri!
Untuk memasangnya pada postingan sobat harus berada dalam tab edit HTML, sedangkan untuk memasangnya pada sidebar saran saya untuk sobat agar tak bingung menyesuaikan dengan lebar sidebar ganti lebarnya menjadi 100% kodenya widht: 100% cara memasangnya (untuk yang belum tahu ni):

• Login ke blogger
• Pada bagian dasbor pilih menu layout/ tata letak
• Klik elemen halaman
• Tambah gadget pada sidebar yang anda ingin tampilkan menu scroolnya!
• Pilih tambah HTML/JavaScript
• Beri titel, simpan codenya dalam konten
• Save, lihat hasilnya diblog sobat !

Semoga bermanfaat!

Cara Mebuat Scroll Pada Daftar Komentar(NEW)

Pada trik membuat scroll pada daftar komentar pertama seperti terlihat pada image diatas. Ok dari pada menunggu lama-lama kita langsng saja membuatnya..Langkah-Langkahnya seperti yang ada di bawah ini..!!

• Log in ke blogger=> pada dasbor=> klik tata letak=> edit HTML=> Expand Template Widget

Cari kode berikut: 

<dl id='comments-block'> 

Untuk memudahkan gunakan tab CTRL+f

• Sisipkan kode berikut di atas kode tadi:

<div style='overflow:auto; width:ancho; height:400px;'>

• Scroll kebawah sampai anda temukan kode </dl> atau gunakan lagi   tombol  ctrl+f untuk mencari

• Setelah dapat letakkan kode berikut setelahnya

</div>

• Simpan template.

Kalau masih bingung, lihat kode berikut, yang warna merah adalah kode yang harus anda sisipkan. Untuk ukuran height bisa anda ganti sesuai selera

<div style='overflow:auto; width:ancho; height:300px;'>
      <dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + 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/>
          </dt>
          <b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
          <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>
</b:if>
          <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>
        </b:loop>
      </dl>
</div>

Jangan lupa simpan template!

Percantik Tampilan Kotak Komentar Blog Dengan Gambar

Semua tampilan blog tidak lepas dari keindahan. Pada postingan ini saya akan memberikan Cara mudah mempercantik kotak komentar blog. Diantaranya adalah dengan memberikan Background pada Latar Kotak Komentar. Banyak para blogger yang telah menggunakannya :D Bagaimana ingin mencoba ??

(Preview Tampilan Kotak Komentar Dengan Background)

1. Pertama Login pada Dashbor Blogger anda.

2. Masuk pada Rancangan - Edit HTML

3. Copy Paste Kode dibawah ini , Letakkan diatas Kode ]]></b:skin>

#CSS-Kotak iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzNhQCMkqLxtJLE20aDV_3IKw8vVsoN8kk2lWVvfqw4IMDi1iavG3H9pBAUtqLwVQU9PEwzUf9E1IXlo1MrCr1Ic7AL1i0JmxXBqkJDQ82qURfgKxkDDT2RgL1ExyYxBoER9v5U12fmII/s320/385512.jpg) ;
border:7px solid #9999FF;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:450px;
}
#CSS-Kotak iframe:hover{
background:#000000 url(http://lh5.ggpht.com/_UEOySJCSmVg/TD_GUupXCWI/AAAAAAAAA_U/SubsszWnD0U/s144/3855126.jpg);
border:7px solid #999FFF;
}
#CSS-Kotak a{
color:#1E90FF;
}

4. klik simpan template, dan setelah di simpan klik centang expand widget

5. Cari Kode <a name='comment-form'/>

6. Letakkan Kode <div id='CSS-Kotak'> . . . . </div> diantara kode diatas, sehingga menjadi seperti ini :

<div class='comment-form'>
<div id='CSS-Kotak'>
<a name='comment-form'/>
<h4 id='comment-post-message'>Post a Comments</h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</div>

Keterangan : Kode Merah dan Biru pada Point.3 adalah (URL) Alamat gambar, anda dapat menggantinya sesuai keinginan anda. Selamat Mencoba dan semoga bermanfaat :D

Cara Membuat Related Post pada Blogspot

Ada tips baru nih. Namanya "Related Post". Related Post itu yang suka ada di bawah posting itu lhoo.... Related post itu Menampilkan beberapa Post ! Tetapi apa gunanya Related Post ?? Menurut saya, related Post itu berguna sekali untuk menambah jumlah Views Page ! Wahh... Mantab kan ? Ayo langsung pasang pada blogmu !!

1. Log in ke blogger !!
2. Klik Layout
3. Klik Edit HTML
4. Centang Expand Template Widget
3. Cari Kode <data:post.body/> [ CTR + F ][ F3 ] !!

Kalo Dah Ketemu !!
4. Pastekan kode dibawah ini dibawah kode <data:post.body/> !!

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>


<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>


var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;


maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;




function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;


for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;


if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {


var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}


var labelArray = new Array();
var numLabel = 0;


<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;


var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>


</div>
</b:if>

5. Simpan Template !!

Selamat Mencoba..semoga bermanfaat..jangan luap di comment ya!!

Cara Menambahkan Cook Emoticon di Kotak Komentar Blogspot

Dengan adanya cool emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui icon-icon (emoticon). Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di area komentar. bagaimana cara menambahkan cool emoticon di kotak komentar blogspot?


Di tutorial blogspot ini akan diberikan dua macam cool emoticon, yaitu emoticon kucing dan emoticon yahoo. Kamu tinggal pilih mana yang kamu suka.

Emoticon Yahoo : 



Emoticon Kucing : 
      
       
Gini nih cara membuatnya :

1. Pertama login ke blogger, trus ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode </body> 

Untuk Emoticon Yahoo :

<script src='http://grandis.hexat.com/smile1.js' type='text/javascript'/>

Untuk Emoticon Kucing :

<script src='http://grandis.hexat.com/smile2.js' type='text/javascript'/>

4. Kemudian cari kode berikut ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Kalo sudah ketemu letakkan kode2 berikut setelah kode <p class='comment-footer'>

Ini untuk Yahoo emoticon :

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> 
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> 
:)] 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/> 
;)) 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> 
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> 
:D  
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> 
;)  
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> 
:p 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> 
:(( 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> 
:)  
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> 
:( 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> 
:X  
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> 
=(( 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> 
:-o  
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> 
:-/ 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> 
:-*  
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> 
:| 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 
8-}  
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> 
~x(  
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> 
:-t 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/> 
b-( 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/> 
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x( 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> 
=))
</b> 

Kalo mo yang emoticon kucing pake yang ini :

<b><img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/capek.gif'/>
:f
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/bigsmile.gif'/>
:D
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/hi.gif'/>
:)
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/kagum.gif'/>
;;)
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/love.gif'/>
:x
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/malu.gif'/>
:$
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/marah.gif'/>
x(
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/bingung.gif'/>
:?
</b>
<br/>
<b>
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/mumet.gif'/>
:@
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/muntah.gif'/>
:~
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/mentok.gif'/>
:|
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/ngakak.gif'/>
:))
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/sedih.gif'/>
:(
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/senang.gif'/>
:s
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/tolong.gif'/>
:((
<img border='0' src='http://i496.photobucket.com/albums/rr329/grandisyf/wow.gif'/>
:o </b>

6. Kalo sudah trus di "save" dan coba klik di salah satu postingan melihat hasilnya.

Selamat mencoba trik blogging ini..Jangan lupa commentnya