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. Cari Kode <a name='comment-form'/>

5. 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

Setting Domain di co.cc

Seperti yang sudah kita ketahui, bahwa co.cc adalah top level domain yang bisa kita dapatkan secara gratis. Kita bisa mengganti nama blog kita dari "http://namadomain.blogspot.com" atau"http"//namadomain.wordpress.com" (dll) menjadi"http://namadomain.co.cc" . Dengan co.cc kita bisa mengontrol DNS Records, A, MX, dan CNAME records, sehinga domain co.cc bukan hanya sekedar "URL Forwarding". Berikut ini akan saya coba mengungkapkan tentang cara setting domain di co.cc:

• Pada kolom "Host" isikan dengan nama domain yg sudah km daftarkan, misal "www.namadomain.co.cc" (jangan lupa dikasih "www")


• Untuk option "TTL" biarkan saja, gak perlu dirubah2


• Pada option "Type" pilih yang "CNAME"


• Untuk kolom "Value" isikan "ghs.google.com"

Sehingga akan seperti pada gamabr dibawah ini:

Langkah selanjutnya yaitu merubah settingan di blogger/blogspot caranya begini:

• Login ke blogger/blogspot kemudian masuk ke menu "Setting-->Publishing"


• Kemudian pilih "Switch to: • Custom Domain


• Setelah itu klik pada "Already own a domain? Switch to advanced settings"


• Kemudian isikan nama domain kamu yang baru pada kolom"Your Domain".



• Selanjutnya klik tombol "Save Setting"

Selesai. Kalau berhasil (Settingnya sudah benar) maka domain kamu yang baru akan aktif dalam waktu antara beberapa jam sampai 2 hari. Jadi sabar aja menunggunya. Blog kamu akan tetap bisa diakses dengan melalui domain yang lama.

Memasang Widget "I LOVE INDONESIA"

Mau widget "I LOVE INDONESIA" ??

Kalau Anda ingin memasangnya juga, silahkan copy code di bawah ini :

<script language="JavaScript" src="http://adabisnis.com/js/widget.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://lh6.googleusercontent.com/_9W8681AXnyo/TWS8zq3XKFI/AAAAAAAAAL8/VNes2sF4baw/iluvindonesia.png")</script>

Untuk wordpress self hosted, paste aja di widgets. Atau kalau tidak bisa, coba di header.php bagian paling bawah. Atau kalau ternyata tidak bisa juga, coba aja paste di sidebar.php paling bawah. Kalau masih tidak bisa, coba di footer.php paling bawah. Otak atik sendiri deh. Hehehe.

Untuk blogspot, paste kode di atas dengan cara :

Tata letak > tambah gadget > tambahkan HTML/Javascript > Paste kode di atas di konten, tanpa judul.

Contoh tampilan untuk CMS wordpress seperti : frog.web.id

Contoh tampilan untuk blogspot seperti : medica-holic.blogspot.com

Ya udah deh… kalo temen2 mau pasang widget ini, silahkan ambil source code di atas, lalu  tinggalkan komentar di bawah ini

Cara Memasang Widget Alexa Di Blog

Dalam artikel saya sebelumya yang membahas tentang Alexa Rank, maka postingan kali ini khusus membahas bagaimana cara pasang widget Alexa di blog.

Alexa rank membuat peringkat berdasarkan banyaknya pengunjung blog kita, semakin banyak pengunjung blog atau web maka alexa rank akan tinggi nilainya. Darimana alexa mengetahui jumlah kunjungan suatu web atau blog? alexa akan mengetahui jumlah kunjungan terhadap suatu web atau blog berdasarkan informasi dari komputer yang browser internetnya memasang alexa toolbar.alexa widget pada blog atau web untuk mendapatkan data yang akurat tentang banyaknya kunjungan. Dengan memasang alexa widget di blog, maka mesin alexa akan mengetahui secara akurat berapa pengunjung serta Page view (halaman yang di lihat) pada web atau blog sobat.

Langkah Pertama

1. Klik disini untuk login ke Alexa
   
2. Masukkan alamat blog sobat pada kolom yang tersedia, contoh --> www.miscah.blogspot.com kemudian klik tombol "Build Widget"
   
   
   
3. Kemudian akan ada halaman yang memperlihatkan 3 ukuran dan bentuk widget yang berbeda, silahkan pilih sesuai selera sobat. Copy kode HTML yang terdapat didalam kolom kedalam notepad atau word.
   
   

^^^ Langkah Kedua

1. Login ke Blogger dengan ID sobat tentunya.
   
2. Klik Tata Letak
   
3. Klik tab Elemen Halaman
   
4. klik Tambah Gadget
   
5. Kemudian klik yang HTML/Java Script.
   
   
   
6. Paste kode HTML yang tadi sobat simpan di notepad kedalam kolom yang tersedia.
   
7. Klik Simpan.
   
8. Selesai.
   
   Selamat Mencoba !! mudah-mudahan dengan terpasangnya widget Alexa, blog sobat jadi semakin tinggi peringkatnya di Alexa.

POINT BLANK-Cheat PB Terbaru

Cheat Point Blank Terbaru 

 

Download cheat Point Blank Terbaru klik di sini :

Unlimeted Darah (harus jadi ROOM MASTER)

1. Login Game, Open Enginer, Open Prosses, jgn lupa check list check box yang dekat tanda OK
2. Scan First pilihan yang Float isi dengan angka 100, lempar bomb harus sampai darah kita berkurang tapi jgn sampai mati
3. Scan Second isi dengan darah yang ada skarang (Contoh : 52) Lalu setelah selesai scan tinggal 1 macam address, nah itu tinggal di click 2x nanti akan pindah lalu edit menjadi 999 di dua kolom, dan jgn lupa check box yang bacaan lock di check list.

Peluru Tidak Habis-habis

1. Login Game, Open Enginer, Open Prosses, jgn lupa check list check box yang dekat tanda OK
2. Scan First menggunakan Byte sesuai peluru yang ada di senjata, contoh : mp7 = 30
3. Scan Second, tembakan senjata kalian tapi jangan sampai habiz, lalu angka yang tertera pada peluru misalkan 25, isi kan scan 2nd dengan 25, kalau masih bnyak address, kalian scan lagi tapi kalian harus membakan lagi pelurunya menjadi anggaplah 21, scannya tetap di scan 2nd ya
4. Setelah mendapat address yang di tuju kalian hanya cukup menambahkan check box lock menjadi check list
5. Selamat bermain

Bug Cash (Sudah Di uji 100% bisa)

1. Login Game, Open Enginer, Open Prosses, jgn lupa check list check box yang dekat tanda OK
2. Scan 1st menggunakan Short, dengan jumlah yang ada di cash (harus ada cash di atas 1000)
3. Setelah Scan Selesai, belikan Cash dengan senjata atau barang (Contoh : Cash awal 1000 di belikan senjata menjadi sisa 516) nah 516 itu menjadi Value Scan 2nd, setelah itu kalian akan mendapatkan 1 address nah itu kalian ganti menjadi “50000″ Cash itu max, kalau lebih dari itu akan di banned (50.000 Cash = 500 Ribu Rupiah)
4. Kalau waktu di coba membeli ada bacaan seperti ini “Gagal membeli, Koneksi Sedang ada Masalah” tandanya Koneksi di warnet itu kurang bagus, coba warnet lain.

Cheat ini sudah banyak orang pakai dan berhasil, Anda juga harus nanggung sendiri resikonya bilamana ketahuan, akun Point Blank anda akan dibanned oleh GM. Berhati-hatilah bermain dengan menggunakan cheat Point Blank di warnet, karena IP Adressnya akan dibanned juga jika ketahuan (Warnet ga bisa online ke server Point Blank)

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!