Cara Menyembunyikan widget tertentu di halaman home

Caranya sebagai berikut :

1. Login dulu ke Account Blogspot.

2. Pilih Rancangan >>  Edit HTML, 

3. Carilah kode]]></b:skin>  kemudian letakkan kode berikut ini di bawah kode ]]></b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style>

#HTML1,#Feed1,#Label1,#HTML4,#HTML8,#HTML14 {display:none;}

</style>

</b:if>

4. Ganti tulisan berwarna merah dengan ID widget yang mau disembunyikan pada halaman posting. perlu

untuk mengetahui ID/kode widget ikuti cara dibawah ini:

- Menuju ke Element Laman / tata letak 

- Arahkan mouse ke tulisan "Edit" dan lihatlah URL dibagian bawah browser akan terlihat widget ID yang dimaksud kode bisa HTML1, HTML2, Label1, Feed1, Followers1 dan sebagainya. Lihat gambar dibawah ini!

5. Jika sudah Klik save template 

Membuat 2 atau 3 kolom di bawah header

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Simpan hasil pekerjaan sobat
3. Kemudian cari kode <div id='main-wrapper'>, setelah ketemu masukkan kode di bawah ini di atas kode tersebut.

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Simpan kembali hasil pekerjaan sobat
4. Setelah selesai menyimpan, kemudian sobat ke Layout dan lihat hasilnya.

Kode pada tahap 3 bisa sobat modifikasi apabila ingin menambahkan 3 kolom di bawah header yang perlu di perhatikan adalah widht dengan floatnya!!

Tapi kalau sobat bingung saya sudah sediakan kode untuk menambahkan 3 kolom di bawah header, silahkan ikuti langkah 1 dan 2 kemudian ketika tahap 3 masukkan kode ini :


<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


Semua tergantung kebutuhan sobat dalam menambahkan widget, dan saya sampaikan terimakasih banyak telah menjadi pembaca setia blog ini :p .

Cara membuat widget 2 kolom di bawah postingan

sebenarnya cara nya sih tidak terlalu susah , bisa di bilang cukup gampang .
oke untuk mempersingkat waktu berikut Cara membuat widget 2 kolom di bawah postingan :

1. Login ke blogger.com

2. pilih menu Rancangan

3. klik Edit Html , dan jangan lupa centang Expand Template Widget

4. kemudian letakan kode dibawah ini , tepat di atas kode ]]></b:skin>

.bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}

.bawahkanan {
float:right;
width:265px;
}

5. setelah itu letakan kode di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='bawahpost'>
               <div class='bawahkiri'>
                Kode Widget atau tulisan anda ada di sebelah kiri disini
               </div>
              <div class='bawahkanan'>
              Kode Widget atau tulisan anda ada di sebelah kanan disini
               </div>
    </div>
    </b:if>

Catatan :

#apabila anda sudah memasang readmore maka kode <data:post.body/> ada 2 . pilih saja yang kedua

# apabila ukuran kolom nya tidak sesuai , silahkan anda atur saja di bagian Css nya .. (kode paling atas)

6. simpan template anda , dan lihat hasilnya..

Membuat Tulisan Berkedip-kedip

Berikut ini kode HTML yang sederhana untuk membuat tulisan berkedip-kedip:

<a style="text-decoration:blink;">Selamat Datang di Blog Saya</a>

Tampilannya akan seperti ini:

Selamat Datang di Blog Saya

Untuk kode yang lebih komplek, yaitu ada tambahan CSS untuk mengatur tulisan, font, ukuran atau menambahkan link. Berikut ini adalah contoh kode HTML yang lebih kompleks, warna merah kode yang bisa diubah sesuai keinginan, untuk membuat tulisan berkedip-kedip:

<a style="color:#380FF00;font-size:15px;font-family:Verdana,sans-serif;text-decoration:blink;" title="klik untuk melihatnya" href="http://sinforan.blogspot.com" target="_blank">Selamat Datang, Jangan Lupa Komentar</a>

Tampilannya akan seperti di bawah ini:

Selamat Datang, Jangan Lupa Komentar

Cara Menyembunyikan widget tertentu pada halaman posting

1. Login dulu ke Account Blogspot.
2. Pilih Rancangan >>  Edit HTML, 
3. Carilah kode ]]></b:skin>  kemudian letakkan kode berikut ini di bawah kode ]]></b:skin> 

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#HTML1,#Feed1,#Label1,#HTML9,#Followers1 {display:none;}
</style>
</b:if>

4.Ganti tulisan berwarna merah dengan ID widget yang akan disembunyikan pada halaman posting anda.

untuk mengetahui ID/kode widget ikuti cara dibawah ini:

• Menuju ke Element Laman / tata letak

• Arahkan mouse pada tulisan "Edit" dan lihatlah URL dibagian bawah browser akan terlihat widget ID yang dimaksud kode bisa HTML1, HTML2, Label1, Feed1, Followers1 dan sebagainya. Lihat gambar dibawah ini!

5. Jika sudah Klik save template !!! Semoga benrmanfaat.

Cara membuat jenis-jenis tabel pada blog

 

1.Tabel Biasa

Contoh:

belajar membuat tabel

Code:
<table width="300" border="1"><tr><td>belajar membuat tabel</td></tr></table>

2.Tabel Biasa dengan Huruf di posisi center / tengah

Contoh:

belajar membuat tabel

Code:
<table width="300" border="1"><tr><td align="center">belajar membuat tabel</td></tr></table>

3.Tabel Biasa dengan Huruf di posisi center / tengah serta border tebal

Contoh:

belajar membuat tabel

Code:
<table width="300" border="6"><tr><td align="center">belajar membuat tabel</td></tr></table>

4.Tabel Biasa dengan 2 (dua) kolom / columns

Contoh:

tabel kolom 1

tabel kolom 2

Code:
<table width="300" border="1"><tr><td>tabel kolom 1</td><td>tabel kolom 2</td></tr></table>

5.Tabel Biasa dengan 2 (dua) kolom / columns serta border tebal dan Posisi huruf center / tengah
Contoh:

tabel kolom 1

tabel kolom 2

Code:
<table width="300" border="6"><tr><td align="center">tabel kolom 1</td><td align="center">tabel kolom 2</td></tr></table>

6.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua

Code:
<table width="300" border="1"><tr><td>kolom satu</td><td>kolom dua</td></tr><tr><td>baris kedua</td><td>baris kedua</td></tr></table>

7.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris serta border tebal juga huruf posisi ceter / tengah

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua

Code:
<table width="300" border="6"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr></table>

8.Tabel Biasa dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr><tr><td align="center">baris ketiga</td><td align="center">baris ketiga</td></tr><tr><td align="center">baris keempat</td><td align="center">baris keempat</td></tr></table>

9.Tabel dengan Background Warna-Warni dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah

Contoh:

kolom satu	kolom dua
baris kedua	baris kedua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

10.Tabel yang terpisah.
Contoh:

satu
kolom satu	kolom dua
baris kedua	baris kedua
dua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><th>satu</th><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><th>dua</th><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

11.Tabel Istimewa (halah!)
Contoh:

Tabel Istimewa

Daftar Gan
No.	Name:
1.	Nama Satu
2.	Nama Dua
3.	Nama Tiga

Code:
<table align="center" border="1" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel Istimewa</b></caption><tr><th colspan="2">Daftar Gan</th></tr><tr><th>No.</th><th>Name:</th></tr><tr><td>1.</td><td>Nama Satu</td></tr><tr><td>2.</td><td>Nama Dua</td></tr><tr><td>3.</td><td>Nama Tiga</td></tr></table>

MEMASANG WIDGET ANIMASI POPULAR POST

Ikuti langkah-langkah berikut:

• Silahkan pasang terlebih dahulu widget popular post, Design > Page Elemen > Add a Gadget > Popular Posts (New!) 
• Jika sudah, masuk ke Edit HTML > Centang Expand Widget Template. Ingat! Selalu back-up template kamu sebelum melakukan perubahan. Sekedar untuk jaga-jaga jika terjadi kegagalan.
• Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatas kode ]]></b:skin> tersebut.

#postlist-spy { 
font-size: 11px;
overflow: hidden;
margin-top: 5px;
padding : 0; }
#postlist-spy ul { 
width: auto;
overflow: hidden;
list-style-type: none;
padding: 0;
margin: 0; }
#postlist-spy li {
padding: 0;
margin: 0 0 5px;
list-style-type: none; 
float: left; 
height: auto;
overflow: hidden;
line-height: 12px;
text-indent: 0px;}
#postlist-spy li a {
margin-left: 0; }
#postlist-spy li a img {
margin-top: 0;
float: left; }

• Cari kode </head> dan pastekan kode dibawah ini diatas kode </head> tersebut.

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>


<script type='text/javascript'><!--//--><![CDATA[//><!--
jQuery(function () {
jQuery('ul.spy').simpleSpy();
});
(function (jQuery) {
jQuery.fn.simpleSpy = function (limit, interval) {
limit = limit || 2; // Number popular post shown - maximal 4 default 2
interval = interval || 10000;
return this.each(function () {
// 1. setup
// capture a cache of all the list items
// chomp the list down to limit li elements
var jQuerylist = jQuery(this),
items = [], // uninitialised
currentItem = limit,
total = 0, // initialise later on
height = jQuerylist.find('> li:first').height();
// capture the cache
jQuerylist.find('> li').each(function () {
items.push('<li>' + jQuery(this).html() + '</li>');
});
total = items.length;
jQuerylist.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });
jQuerylist.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
// 2. effect 
function spy() {
// insert a new item with opacity and height of zero
var jQueryinsert = jQuery(items[currentItem]).css({
height : 0,
opacity : 0,
display : 'none'
}).prependTo(jQuerylist);
// fade the LAST item out
jQuerylist.find('> li:last').animate({ opacity : 0}, 1000, function () {
// increase the height of the NEW first item
jQueryinsert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
// AND at the same time - decrease the height of the LAST item
// jQuery(this).animate({ height : 0 }, 1000, function () {
// finally fade the first item in (and we can remove the last)
jQuery(this).remove();
// });
});
currentItem++;
if (currentItem >= total) {
currentItem = 0;
}
setTimeout(spy, interval)
}
spy();
});
};
})(jQuery);
//--><!]]></script>

Keterangan:
Angka 2 pada kode diatas adalah jumlah post yang ditampilkan. Kamu bisa menampilkan hingga 4 popular post.

• Cari kode <div class='widget-content popular-posts'> dan hapus kode <ul> yang ada dibawahnya dan ganti dengan kode:

<div id='postlist-spy'>

<ul class='spy'>

• Langkah terakhir, cari kode </ul> yang pertama kali anda temukan setelah kode <div class='widget-content popular-posts'> dan masukkan kode </div> setelah </ul>

Simpan template kamu dan lihat hasilnya.

Demikian , selamat mencoba

CARA MEMBERI EFEK TULISAN PADA CBOK

Cara Membuat Teks Tebal  di CBOX
Apit kata-kata yang ingin dicetak tebal dengan [b] dan [/b]
Contoh: [b]teks tebal[/b] hasilnya teks tebal

Cara Membuat Teks Miring  di CBOX
Apit kata-kata yang ingin dicetak miring dengan [i] dan [/i]
Contoh: [i]teks miring[/i] hasilnya teks miring

Cara Membuat Teks Bergaris Bawah  di CBOX
Apit kata-kata yang ingin digaris bawah dengan [u] dan [/u]
Contoh: [u]teks bergaris bawah[/u] hasilnya teks bergaris bawah

Cara Membuat Teks Bergaris Tengah  di CBOX
Apit kata-kata yang ingin di garis tengah atau dicoret dengan [s] dan [/s]
Contoh: [s]teks dicoret[/s] hasilnya teks dicoret

Cara Membuat Tulisan Berukuran Kecil  di CBOX
Apit kata-kata yang ingin dicetak kecil dengan [small] dan [/small]
Contoh: [small]tulisan kecil[/small] hasilnya tulisan kecil

Cara Membuat Teks Berukuran Besar di CBOX
Apit kata-kata yang ingin dicetak besar dengan [big] dan [/big]
Contoh: [big]tulisan besar[/big] hasilnya tulisan besar

Cara Membuat Tulisan Rata Tengah  di CBOX

Apit kata-kata yang ingin dibuat rata tengah dengan [center] dan [/center]
Contoh: [center]rata tengah[/center]

Cara Membuat Tulisan Berwarna  di CBOX
Apit kata-kata yang ingin diberi warna dengan [color=warna] dan [/color]
Contoh: [color=blue]teks biru[/color] hasilnya teks biru

Buat warna kita hanya merubah namanya saja misalkan red atau bla...bla.....

Buat Kode warnanya silahkan lihat saja di menu blog saya.

Cara Membuat Teks Ber Link di CBOX
Apit kata-kata yang ingin diberi link dengan [url=alamattujuan] dan [/url]
Contoh: [url=http://cyber-benyo.blogspot.com]Sinforan [/url]
hasilnya adalah Sinforan

Cara Membuat Teks Berjalan  di CBOX
Apit kata-kata yang ingin dibuat bergerak dengan [scroll] dan [/scroll]
Contoh: [scroll]teks berjalan[/scroll]

Membuat Kode Warna Versi Terbaru

berikut ini cara membuatnya:

1.     Login dulu ke account blogger kamu.


2.     Pilih tab Design > Add Gadget

3.     Silakan copy kode script di bawah ini dan pastekan ke dalam gadget kamu

<div id="TrixCGv1"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="430" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"><param name="movie" value="http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf"><param name="quality" value="high"><param name="bgcolor" value="#cccccc"><embed src="http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf" quality="high" bgcolor="#cccccc" width="400" height="430" name="flash" align="middle" play="true" loop="false" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></div>  

<div id="TrixCGv1"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="430" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"><param name="movie" value="http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf"><param name="quality" value="high"><param name="bgcolor" value="#cccccc"><embed src="http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf" quality="high" bgcolor="#cccccc" width="400" height="430" name="flash" align="middle" play="true" loop="false" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></div>

4.    Ganti ukuran width dan height-nya (ada dua pengaturan tersebut, ubah kedua-duanya) sesuai dengan lebar dari tempat dimana kamu akan meletakan tampilan kode warna tersebut.


5.    Setelah selesai simpan gadget kamu dan lihat hasilnya.

Selamat mencoba, semoga berhasil

Cara Membuat Tulisan Berjalan

Kode HTML Untuk Tulisan Yang bergerak kekanan



<marquee direction="right"><span style="color: rgb(255, 0, 0); font-weight: bold;">Tulisan Bergerak Bergerak kekanan (ganti dgn tulisan anda)</span></marquee>


Kode HTML Untuk Tulisan Yang Bergerak kekiri : Lihat pada kode tulisan bergerak kekanan diatas,tinggal ganti kata "right" menjadi "left"



Kode HTML Untuk Tulisan Yang Ke Kanan dan Kekiri


<marquee direction="left" behavior="alternate"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri (ganti dgn tulisan anda)</span></marquee>



Kode HTML Untuk Tulisan Yang Bergerak kekanan Perlahan : Note : nilai scrolldelay menentukan cepat atau lambatnya tulisan bergerak.Direction = menentukan arah bergerak


<marquee direction="right" scrolldelay="500"><span style="color:red; font-weight: bold;">Tulisan Bergerak kekanan Perlahan (ganti dgn tulisan anda</span></marquee>



Kode HTML Untuk Tulisan Tulisan Yang Bisa Bergerak  Ke Kanan dan Kekiri Dan Bisa Di stop


<marquee direction="left" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri Dan Bisa Di stop??</span></marquee>



Kode HTML Untuk Tulisan Yang Bergerak Ke Atas


<marquee align="center" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Atas</span></marquee>



Kode HTML Untuk Tulisan Yang Bergerak Ke Atas dan Ke bawah


<marquee align="center" direction="up" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Atas dan Ke bawah</span></marquee>


Note : Anda bisa merubah warna tulisan dengan kode warna HTML :


red = warna merah

blue= warna biru

yellow = warna Kuning

white = warna putih

black = warna hitam


Kode warna HTML, pada contoh diatas seperti ini:


<span style="color:red; font-weight: bold;">


Bisa diganti dengan seperti ini :


<span style="color:#f00; font-weight: bold;">


#f00; = warna merah ;


#00f; = Warna Biru ;


#0f0; = Warna Hijau ;


#f0f; = Warna Ungu ;


Atau dikombinasi....Coba-coba aja ya....

Cara Membuat Iklan Melayang Dengan Tombol Close Sekali Klik

1. Login ke blog

2. Klik add gadget

3. Pilih HTML/javascript

4. Masukkan kode di bawah ini:

<style type="text/css">
#gb{
position:fixed;
top:3px;
right:3px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir-100;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<div style="text-align: right;">
<a href="javascript:showHideGB()">
.: Close [Click 1 x]:.
</a>
</div>

<center>

Script iklan anda disini

</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (20-gb.offsetWidth).toString() + "px";
</script></div>
</div>



5. Simpan.

Membuat Slider pada Blogspot

• Pertama login ke dashboard blog kamu.
  
• pilih Rancangan »» Edit HTML
  
• download template lengkap dulu barangkali terjadi kesalahan.
  
• Tandai kotak kecil pada Template Widget Content.
  
• Letakan kode CSS berikut diatas kode ]]></b:skin>
  
• kode CSS-nya:
  

  #slider { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfR4-knythKI4NJcz9Uoaj8dGeDLDXgYgEAWFCtOEfNwnRuaF4nqLy-TtLJuANQEVW-vFDOJkshVRL5PoSWXAeM5RW9iLpMvdvTpDGFW68DRMd3wGDqpU7YdLKzCVY4joKXj5OZ6v2LLCJ/s1600/latar+slider+uluumun.jpg); height: 300px; overflow: hidden; position: relative; margin: 5px 0; }
  #mover { width: auto; position:absolute; overflow:hidden; }
  .slide { padding: 20px 0px; width: 1000px; float: left; position: relative; height:200px; }
  .slide h2 { font-family:georgia, Helvetica, Sans-Serif; font-size: 24px; color: #ac0000; padding:0px 0px 0px 30px; margin:0px 0px; width:500px; overflow:hidden; }
  .slide h2 a:link, .slide h2 a:visited { color:#fff; background-color: transparent; }
  .slide h2 a:hover { color: #ddd; background-color: transparent; }
  span.slmet { color: #ee0909; font-size: 10px; font-family:Tahoma, georgia, Helvetica, Sans-Serif; line-height: 20px; width: 500px; padding:0px 0px 0px 30px; margin:0px 0px; text-transform:uppercase; }
  .slide p { color: #999; font-size: 12px; font-family:georgia, Helvetica, Sans-Serif; line-height: 20px; width: 500px; padding:0px 0px 0px 30px; margin:0px 0px; }
  .slide img { position: absolute; top: 20px; left: 577px; background:#fff; padding:10px 10px; }
  #slider-stopper { position: absolute; font-family: Georgia, Helvetica, Sans-Serif; top: 113px; right: 65px; color: #AC0000; padding: 3px 8px; font-size: 14px; text-transform: uppercase; z-index: 1000; }

• Kemudian letakan kode javascript berikut dibawah kode ]]></b:skin>
  

  <script src='http://blogtegal.googlecode.com/files/jquery.js' type='text/javascript'/> <script src='http://blogtegal.googlecode.com/files/slider.js' type='text/javascript'/> <script type='text/javascript'>
  <!--//--><![CDATA[//>
  <!-- sfHover = function() { var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //-->
  <!]]>
  </script>

• Kemudian cari kode dibawah ini:
  <div id='header-wrapper'> .......... ......... </b:section>
  
• Letakan kode berikut dibawah kode diatas.
  

  <!-- Casing -->
  <div id='casing'>
  <!-- Slider -->
  <div id='slider'>
  <div id='mover'>
  <div class='slide'>
  <span class='slmet'> Posted by uluumun </span>
  <h2><a href='http://uluumun.blogspot.com/2011/11/keberkahan-harta-ditangan-orang-shalih.html'>KEBERKAHAN HARTA DITANGAN ORANG SHALIH</a></h2>
  <p> Manfaat harta yang bersih dan halal di tangan orang shalih sangat banyak. Ibarat pohon kurma yang tidak menyisakan bagian sedikit pun, melainkan seluruhnya bermanfaat untuk manusia, sehingga tidak ada alasan bagi seorang muslim yang ingin meraih hidup bahagia di dunia dan akhirat untuk bermalas-malasan dan berpangku </p>
  <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqZM9RV2PWxYOJtrWHA3OVpfPtbDmxqowAx9xwnimRGG4H6_37jvXuDQPlkFVcWQeuQ16Jst2wlndek1TBGmKRGK6c8AoH0OoBTvRIPns-Ejzm6GJGJSRjPYeEkZfUZvoG7Rp87EVCllo/s1600/rokok.jpeg'/></div>
  <div class='slide'>
  <span class='slmet'> Posted by uluumun </span>
  <h2><a href='http://uluumun.blogspot.com/2011/11/rokok-dalam-timbangan-syariat-islam.html'>ROKOK DALAM TIMBANGAN SYARIAT ISLAM</a></h2>
  <p>Benda yang satu ini, meski kecil ukurannya, namun mengandung berbagai zat dan racun yang amat berbahaya bagi manusia. Tapi anehnya,</p>
  <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTLC7MO5EYZPRTsrQ-jijAr02O_zfbduJMGkIjNwtErXb42dKw7u-Ee8NSG33aj8ghUssC86Z5KwoU6OudIxc1euxhMMOqDCuUC4LdEjMUsgoWfClxc9fkpsAiWiwKl5YD7WGq4BgENRLz/s1600/harta-tahta.jpg'/></div>
  </div>
  <!-- /Mover --> </div>
  <!-- /Slider --> </div>
  <div class='clear'/>

• Yang terakhir Simpan Template dan lihat hasilnya

Mungkin kode-kode diatas ingin diganti dan di sesuaikan dengan selera kamu maka ada beberapa yang perlu di edit, apa saja itu?

1. Background image yang perlu di sesuaikan dengan kondisi template sodara-sodara, silahkan disesuaikan pada kode:
   #slider { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfR4-knythKI4NJcz9Uoaj8dGeDLDXgYgEAWFCtOEfNwnRuaF4nqLy-TtLJuANQEVW-vFDOJkshVRL5PoSWXAeM5RW9iLpMvdvTpDGFW68DRMd3wGDqpU7YdLKzCVY4joKXj5OZ6v2LLCJ/s1600/latar+slider+uluumun.jpg); height: 300px; overflow: hidden; position: relative; margin: 5px 0; }
   
2. Untuk menambah isi dari slider itu sendiri silahkan tambahkan kode berikut:
   
   <span class='slmet'> Posted by Admin </span>
   <h2><a href='http://link-artikel.com/detail-artikel.html'>Judul slider artikel</a></h2>
   <p>Deskripsi isi slider </p>
   <img alt='' src='http://link-gambar.jpg'/> </div>
   
3. Untuk mengatur warna text,bentuk text, warna link,jenis font silahkan di oprak-aprek pada kode CSSnya,děsini awak gak bisa jelaskan karna masing-masing template blog berbeda-beda.
   
4. Untuk mengatur delay (kecepatan slider) pada slider, silahkan buka file http://blogtegal.googlecode.com/files/slider.js menggunakan notepad atau wordpad atau sejenisnya, kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, mis 5000 atau 9000 (catatan: 1 detik = 1000)

Selamat mencoba dan berpusing ria

Cara membuat widget hanya tampil di home

ikuti langkah-langkah berikut ini :

1. Login ke Account/Dashboard blog kalian,kemudian pilih tab Design/Rancangan.

2. Masuk ke menu Edit HTML.

3. Cari kode ]]></b:skin>

4. Ganti kode tersebut dengan kode di bawah ini :

]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#HTML1 {display:none}
#HTML3 {display:none}

</b:if>
</style>
5. Perhatikan teks berwarna biru diatas.. itu adalah kode id elemen yang akan kita buat tampil di halaman home saja. Ganti kode tersebut dengan id widget kalian.untuk mengetahui id widget, Sobat bisa mencari berdasarkan judul widgetnya. Teks warna merah dibawah adalah judul widget,sedangkan yang berwarna biru adalah id widgetnya.

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Free Template' type='HTML'/>
<b:widget id='HTML3' locked='false' title='New Tutorial' type='HTML'/>
</b:section>
      </div>

dari contoh tersebut, yang tampil pada home hanya Subscribe dan New Tutorial. Sedangkan pada halaman membaca artikel,kedua widget tersebut ngga akan terlihat.

6. Save template,dan lihat hasilnya.

Mudah bukan? :) semoga bermanfaat sobat!

Sumber info script : www.resepblog.co.cc

Membuat Widget Melayang di Blogger

berikut caranya :

1. Login ke blogger, klik Design > Edit HTML.
   
2. Beri tanda centang pada kotak Expand Template Widget.
   

   

   
   
   
   
   
3. Cari kode ]]></b:skin> dan kalau sudah ketemu, letakkan kode berikut tepat di atasnya.
   #floating-widget { position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
4. Selanjutnya, carilah kode </body> dan letakkan kode berikut tepat di atasnya
   <div id='floating-widget'>

   Letakkan kode widget disini

   </div>
5. Jika sudah selesai klik SAVE / SIMPAN TEMPLATE, dan lihat hasilnya.
   

   

   
   
   
   

Silakan dicoba dan Semoga berhasil...

Mengganti Homepage dengan Daftar Isi

Caranya berikut ini :

• Langkah pertama Login ke blogger Sobat, Pilih Design/Rancangan > Page Element/Elemen Halaman.
• Klik Add a Gadget/Tambah Gadget.
• Pilih HTML/Java Script.
• Silahkan Copy kode berikut dan paste didalam konten HTML/Javascript nya.
  Daftar Isi Menurut Artikel Terbaru
  
  
  
  

  <div style="border: 1px; padding: 5px;"><div style="text-align: center;"><h2>.:: Daftar Isi ::.</h2></div><script type="text/javascript" src="http://html-scripts.googlecode.com/files/feeds.js"></script><script type="text/javascript" src="http://sinforan.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

  
  
  
  
  
  Daftar Isi Menurut Label

<div style="border: 1px; padding: 5px;"><div style="text-align: center;"><h2>.:: Daftar Isi ::.</h2></div><script src="http://post-xml.googlecode.com/files/feeds-labels.js"></script><script type="text/javascript" src="http://sinforan.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

        Daftar Isi Menurut Tanggal

<div style="border: 1px; padding: 5px;"><div style="text-align: center;"><h2>.:: Daftar Isi ::.</h2></div><script src="http://post-xml.googlecode.com/files/feed-dates.js"></script><script type="text/javascript" src="http://sinforan.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

• Ganti sinforan.blogspot.com dengan alamat blog Sobat.
• Lalu klik Save.
• Pindahkan widget tersebut ke bagian atas Blog Posts.
• Selanjutnya klik Settings > Formatting.
• Pada Show at most ganti dengan angka 0.
• Lalu klik SAVE SETINGS.
• Kemudian Klik Design/Rancangan > Edit HTML.
• Beri tanda centang pada Expand Template Widget.
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Cari kode ]]></b:skin>, lalu letakkan kode berikut ini di bawah kode ]]></b:skin>
  
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <style>
  #HTML5 {display:none;}
  </style>
  </b:if>

• Ket : Kode yang berwarna merah adalah ID widget, ganti dengan ID widget yang baru Anda buat.
  Untuk mengetahui ID widget, berikut caranya :
  • Pilih Design/Rancangan > Page Element/Elemen Halaman.
  • Letakkan posisi mouse pada tulisan Edit widget tadi, dan lihat dibagian bawah browser, akan terlihat URL widget tersebut.
• Terakhir klik Save / Simpan Template.

Selesai dan lihat hasilnya pada Homepage blog Sobat. Semoga bermanfaat...

Sekian tutorial tentang Mengganti Homepage dengan Daftar Isi.

Cara Membuat Spoiler Pada Blog

Contoh Spoiler:

Letakkan teks atau script anda disini

Berikut ini cara membuatnya :

1. Login ke akun Blogger anda

2. Pilih New Post atau Entri Baru seperti membuat postingan biasa

3. Pilihlah pada mode HTML saat membuat postingan

4. Gunakan script berikut ini untuk membuat spoiler:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Contoh Spoiler</b>: <input value="View" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'View'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau script anda disini
 <br>
</div>
</div>
</div>

Catatan :

1. Kata Contoh Spoiler adalah judul dari spoiler itu (yang terletak di sebelah kiri tombol View / Hidden). Anda dapat menggantinya sesuai keinginan anda.
2. Kata View dan Hidden adalah kata yang terdapat pada tombol. Anda dapat menggantinya sesuai keinginan

5. Klik Publish jika sudah selesai

Cara Mendaftarkan / Submit Blog ke Bing

Apabila saat ini anda sedang mengembangkan sebuah blog/website, namun belum optimal dari segi jumlah kunjungan, maka anda harus mengoptimalkan blog/website anda ke berbagai search engine. Terdapat tiga mesin pencari yang populer saat ini, yaitu Google, Yahoo dan Bing.

Yang akan dibahas kali ini adalah Cara Submit Blog ke Bing. Untuk lebih jelasnya silahkan ikuti langkah-langkah berikut ini.

• Mendaftar ke Bing :

1. Masuk ke Bing Webmaster
2. Klik Webmaster Tools Sign In.
   
3. Klik Sign up.
   
4. Isi Form pendaftaran, lalu isi Kode characters dan klik I Accept.
   
5. Buka email masuk Anda dan klik Link yang diberikan untuk langkah verify your account.
   
6. Pada halaman selanjutnya Klik OK.
   
7. Langkah selanjutnya isi data dan klik Save.
   

• Selanjutnya Daftarkan Blog Anda :

1. Klik pada Add Site.
   
2. Masukkan URL Blog Anda pada kolom URL, dan klik Submit.
   
3. Pada langkah Verifikasi pilih Option 2: Copy and paste a tag in your default webpage.
   
4. Copy Kode meta tag dari Bing.
   
   
   Dibawah ini cara memasang meta tag di Blogspot.
5. Lalu login blogger anda, klik Rancangan > Edit HTML.
   
   Beri centang pada Expand Template Widget.
   
   Dan pastekan meta tag dari Bing tadi tepat di bawah kode <head>.
   
6. Simpan template anda. Setelah itu kembali ke Bing dan klik tombol Verify.
   
   Selesai...

Semoga Bermanfaat...

Membuat Spoiler

Cara membuat spoiler sebagai berikut:

   1. Login Blogger.
   2. Copy kode HTML berikut ini, letakkan sesuai kebutuhan:

    <div id="spoiler">

    <div>

    <input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="SPOILER DEMO" /></div>

    <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">

    <div style="background: none repeat scroll 0% 0% #e8f7e7; border: 1px solid #aaccee; color: black; margin: 0px; padding: 7px;">



    <div class="separator" style="clear: both; text-align: left;">

    <img border="0" height="107" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd5JeG3yKufarSsd5F_90jI-cGvFXWEaV5xBDm7Ddicv-i1fu5GutrIb3W1vbp882YI6Y_X9ps4EDEx9llRV-OV-HYFfdC4GpwYNTA7opvqcm_j6smG71U2kwDuofa7TzgtU4Zv-onEe0/s1600/sproiler.jpg" width="125" /></div>


    <div style="text-align: center;">

    text area / kode HTML</div>



    </div>

    <div id="hide">

    </div>

    </div>

    </div>

      Save!.

text area / kode HTML

NB:

    * Untuk tulisan yang di beri tanda Biru silahkan rubah sesuai keinginan.
    * URL image yang berwarna Hijau ganti dengan URL image anda.
    * Text yang berwarana Merah isi dengan tulisan / kode HTML sesuai keinginan.
    * Untuk Baground bisa bisa di ganti dengan kode warna lain.
    * Untuk yang lain nya silahkan cari sendiri, seperti ukuran, font dll.

Selamat mencoba...