-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

sekarang yang akan saya bahas adalah memasang scroll pada archive blog. kalau memasang scroll pada widget java script mungkin mudah karena tinggal copy paste sript pembuka di atas sendiri dan meletakkan script penutup diakhirnya. tapi jika yang di beri scroll adalah widget bawaan blogger maka membutuhkan sedikit trik khusus.

Seberapa pentingkah scroll pada archive blog ? kalau menurut blogger newbie manfaat dari scroll down itu sendiri adalah menghemat tempat. jadi sidebar blog kita terlihat lebih rapi. untuk contoh perbandingannya seperti gambar dibawah ini.




Archive Blog (memakai scroll)


Archive Blog (tanpa scroll)




Tertarik untuk membuatnya ?? ikuti langkah - langkah berikut :
  1. Masuk ke Acount Blogger atau Dashboard
  2. Pilih Layout , lalu klik Edit HTML
  3. Centang Expand Widget Templates
  4. Cari kode <div id='ArchiveList'> (pakai Ctrl + F untuk lebih mudahnya)
  5. Tambahkan kode bercetak tebal seperti dibawah ini (hasil jadi penempatan script seperti dibawah ini:





www.master-lutfi.co.cc




  1. Angka 250px (tinggi kotak scroll) bisa kamu ganti sesuai selera
  2. Klik Simpan template

untuk membuat fungsi Scroll seperti ini caranya seperti pada widget punya saya atau di posting ini :


1. Pertama Login dulu ke blogger
2. Pilih Layout ( Tata Letak ) >> Page Element ( Elemen Halaman )
3. Add a Gadget ( Tambah Gadget )
4. Pilih HTML/JavaScript dan copy aja kode ini didalamnya:



<div style="border: 1px solid rgb(238, 238, 238); height: 50px; overflow: auto; padding: 10px; width: 320px;">
Masukkan teks nya disini kawan......... </div>
Keterangan :
width
: lebar
height
: tinggi
padding
: jarak antar tulisan dengan garis pinggir menunya
border
: ketebalan garis pinggir menu

Selamat mencoba kawan... contoh Hasilnya juga akan seperti penyimpanan script di atas...

Effect flashing didalam text adalah murni dari pengaruh JavaScript, tanpa menggunakan kode CSS.
Neon Text Color jQuery ini dapat digunakan di postingan ataupun di sidebar, guna mempercantik tampilan blog/website sobat.
Contoh tampilannya ada pada Widget sebelah kanan sobat "assalamualaikum wr.wb kawan-kawanku.....".
Jika ada yang tertarik langsung saja ke langkah-langkah membuat Neon Text Color jQuery.
Masukan kode JavaScript dibawah ini pada postingan pada mode Edit HTML
atupun di sidebar dengan cara Tambah GadgetHTML/JavaScript pada widget sidebar sobat



<script language="JavaScript1.2">
var message="Tulisan Yang diberi Efek"
var neonbasecolor=""
var neontextcolor="#fd3d3a"
var neontextcolor2="#ff8080"
var flashspeed=50 // kecepatan flashing dalam milliseconds
var flashingletters=5 // jumlah huruf yg di flashing dlm neontextcolor
var flashingletters2=1 // jumlah huruf yg di flashing dlm neontextcolor2 (0 to disable)
var flashpause=0 // pause diantara flash-cycles dlm milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>

ganti kode Tulisan Yang diberi Efek dengan tulisan yang akan diberikan efek.
kode #fd3d3a dan #ff8080, ganti kode warna dengan kode warna yg sobat suka.
angka 50 adalah kecepatan flashing effect neon. lebih besar angkanya maka akan lebih lambat kecepatan flashing nya.
angka 5 adalah merupakan jumlah huruf yang di flashing.
angka 1 adalah jumlah huruf yg di flashing setelah kode pada baris ketujuh.

Contoh tampilan : Assalamualaikum wr.wb Kawan-kawanku maaf blog nya masih baru jadi masih banyak kurangnya.. hehe

sobat bisa lihat sendiri backgroundnya pada postingan ini, dan hanya pada postingan ini saja tidak merubah background postingan keseluruhan blog ini
Berikut cara pembuatan nya :

Tambahkan kode dibawah ini pada editor Edit HTML postingan blog sobat.

<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnZS47XaKBwbWIJEnAfXTBsoTQBQv58GS3b9_Uw8IIas0_eHulFdfT5YvbwLaHewTEq07bGtQNK0z4VsQh0nsZtiI9phe56Loc37QCvKyGqE6HAXcWNGUxHWIO2UN54QM3jpEKY-lz4vw/s1600/papers.jpg
) no-repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;">



Isi Postingan

</div>


Keterangan :

Ganti URL gambar diatas dengan URL gambar milik sobat.
Kode no-repeat adalah kode untuk tidak menampilkan gambar berulang-ulang, jika memang menghendaki gambar yang ditampilkan berulang sampai ke bawah postingan, maka tinggal dihapus saja kode no- pada kode tersebut

Isi Postingan adalah isi dari artikel/post sobat keseluruhan. jadi integrasinya kode diatas adalah mengapit keseluruhan isi artikel milik sobat.
Sebelum posting tersebut diterbitkan, maka sebelumnya di Pratinjau terlebih dahulu.
Setelah semuanya beres, maka terbitkanlah postingan sobat. dan lihat hasilnya.
Satu postingan sobat memiliki background yang berbeda.

Selamat mencoba

  1. Log in blogger
  2. Masuk ke menu Rancangan, Edit Html,
  3. Centang Menu Expand Template Widget
  4. Simpan kode berikut Diatas kode </head> :


<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

Jika sudah SIMPAN TEMPLATE

Untuk melihat hasilnya biarkan sebentar dan jangan menggerakkan mouse maka layar monitor komputer sobat akan tertutup dengan warna hitam tanda Energy Saving sudah berjalan. gerakkan mouse untuk menghentikkan saving screen nya......

Selamat mencoba

Disini saya akan membahas cara membuat background kotak komentar dengan menggunakan CSS3, seperti kotak komentar blog saya....
Seperti biasa Login ke Blogger
Klik RancanganEdit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget

lalu cari kode


]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)
Jika sudah ketemu, Copy kode berikut dan Paste di atas kode tersebut






#kotak_komentar{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPnZS47XaKBwbWIJEnAfXTBsoTQBQv58GS3b9_Uw8IIas0_eHulFdfT5YvbwLaHewTEq07bGtQNK0z4VsQh0nsZtiI9phe56Loc37QCvKyGqE6HAXcWNGUxHWIO2UN54QM3jpEKY-lz4vw/s1600/papers.jpg) ;
padding:20px;
width:530px;
height:250px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-webkit-box-shadow: 2px 2px 4px #8bd268;
-moz-box-shadow: 2px 2px 4px #8bd268;
}

#kotak_komentar:hover{
background:#000);
-webkit-box-shadow: 2px 2px 20px #cc40fb;
-moz-box-shadow: 2px 2px 20px #cc40fb;
}
Kemudian scroll ke bawah dan cari kode seperti berikut :



<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display:inline'/>
<iframe class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='490'/> <data:post.iframeColorizer/></div>

Jika sudah ketemu letakkan kode berikut diatasnya

<div id='kotak_komentar'>

Dan kode berikut dibawahnya

</div>
Keterangan : ganti kode yang berwarna biru sesuai dengan Template sobat.
jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

Untuk membuat Efek se[erti pada judul posting saya  ini sangatlah mudah, sobat tinggal menambahkan sedikit kode CSS3 pada Template Blog kawan semua maka Efek bayangan akan muncul di Teks Blog sobat.
Untuk lebih jelas silahkan ikuti langkah-langkah berikut :

Sebagai contohnya sobat ingin memberi Efek bayangan pada judul postingan

Login ke Blogger
Klik Rancangan Edit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
cari kode seperti berikut
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)



.post h3 {
color: #444;
font-size: 22px;
font-weight:normal;
line-height:1.4em;
margin: 0 0 5px;
padding: 10px 0 10px;
}

Jika sudah ketemu tambahkan kode text-shadow: 2px 2px 2px #DDD; kedalamnya
maka hasilnya akan menjadi seperti dibawah :


.post h3 {
color: #444;
font-size: 22px;
font-weight:normal;
text-shadow: 2px 2px 2px #DDD;
line-height:1.4em;
margin: 0 0 5px;
padding: 10px 0 10px;
}


Silahkan diatur nilai propertynya untuk mendapat Efek Shadow yang sobat inginkan.
Efek ini juga bisa ditambahkan pada Teks di bagian sidebar, form komentar, footer, dan lain-lain.

jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

Login ke Blogger
Klik RancanganElemen LamanTambah GadgetHTML/JavaScript
Kemudian Copy kode Script berikut dan Pastekan ke dalamnya :

Contoh gambar :
bintang_merah

Kode script :
<script src="http://kangdadang.googlecode.com/files/bintang_merah.js"></script>

Contoh gambar :



bintang_kuning

Kode script :
<script src="
http://kangdadang.googlecode.com/files/bintang_kuning.js"></script>

Contoh gambar :

 bintang_hijau

Kode script :
<script src="
http://kangdadang.googlecode.com/files/bintang_hijau.js"></script>

Contoh gambar :
Contoh gambar

Kode script :
<script src="
http://kangdadang.googlecode.com/files/bintang_biru.js"></script>

jika sudah selesai SIMPAN dan lihat hasilnya

Selamat mencoba

Login ke Blogger
Klik Rancangan → Elemen Laman → Tambah Gadget → HTML/JavaScript
Kemudian Copy Paste kode berikut kedalamnya

<br
/><br /><marquee behavior="scroll" direction="down"
style="position: absolute; right: 1100px; top: 52px; width: 100px;
height: 900px;" scrollamount="14"><br /><img
src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbj-jdOjDSbk9uLOre-h-btKffO7i0je4wjMiN5F7Z6SloIAHQof5pwHY6Vh1QTgOxmvPI57GWt0bDUSsjSeV_B2ASm7x3CZu2UDhZ5IwUX4iPn-TFc7oERqMD3XjW7jZOdR2i6THHTw/s1600/burung.gif" width="100" height="100"
/><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; left:
358px; top: 2px; width: 60px; height: 450px;"
scrollamount="5"><br /><img
src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbj-jdOjDSbk9uLOre-h-btKffO7i0je4wjMiN5F7Z6SloIAHQof5pwHY6Vh1QTgOxmvPI57GWt0bDUSsjSeV_B2ASm7x3CZu2UDhZ5IwUX4iPn-TFc7oERqMD3XjW7jZOdR2i6THHTw/s1600/burung.gif" width="30" height="30"
/><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
441px; top: 55px; width: 60px; height: 250px;"
scrollamount="9"><br /><img
src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbj-jdOjDSbk9uLOre-h-btKffO7i0je4wjMiN5F7Z6SloIAHQof5pwHY6Vh1QTgOxmvPI57GWt0bDUSsjSeV_B2ASm7x3CZu2UDhZ5IwUX4iPn-TFc7oERqMD3XjW7jZOdR2i6THHTw/s1600/burung.gif" width="30" height="30"
/><br /></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
498px; top: 53px; width: 60px; height: 380px;"
scrollamount="6"><br /><img
src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbj-jdOjDSbk9uLOre-h-btKffO7i0je4wjMiN5F7Z6SloIAHQof5pwHY6Vh1QTgOxmvPI57GWt0bDUSsjSeV_B2ASm7x3CZu2UDhZ5IwUX4iPn-TFc7oERqMD3XjW7jZOdR2i6THHTw/s1600/burung.gif" /><br
/></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
800px; top: 51px; width: 60px; height: 350px;"
scrollamount="7"><br /><img
src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbj-jdOjDSbk9uLOre-h-btKffO7i0je4wjMiN5F7Z6SloIAHQof5pwHY6Vh1QTgOxmvPI57GWt0bDUSsjSeV_B2ASm7x3CZu2UDhZ5IwUX4iPn-TFc7oERqMD3XjW7jZOdR2i6THHTw/s1600/burung.gif" /><br
/></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
390px; top: 55px; width: 60px; height: 450px;"
scrollamount="5"><br /><img
src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbj-jdOjDSbk9uLOre-h-btKffO7i0je4wjMiN5F7Z6SloIAHQof5pwHY6Vh1QTgOxmvPI57GWt0bDUSsjSeV_B2ASm7x3CZu2UDhZ5IwUX4iPn-TFc7oERqMD3XjW7jZOdR2i6THHTw/s1600/burung.gif" /><br
/></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
749px; top: 54px; width: 60px; height: 250px;"
scrollamount="5"><br /><img
src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbj-jdOjDSbk9uLOre-h-btKffO7i0je4wjMiN5F7Z6SloIAHQof5pwHY6Vh1QTgOxmvPI57GWt0bDUSsjSeV_B2ASm7x3CZu2UDhZ5IwUX4iPn-TFc7oERqMD3XjW7jZOdR2i6THHTw/s1600/burung.gif" /><br
/></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
325px; top: 52px; width: 60px; height: 300px;"
scrollamount="10"><br /><img
src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbj-jdOjDSbk9uLOre-h-btKffO7i0je4wjMiN5F7Z6SloIAHQof5pwHY6Vh1QTgOxmvPI57GWt0bDUSsjSeV_B2ASm7x3CZu2UDhZ5IwUX4iPn-TFc7oERqMD3XjW7jZOdR2i6THHTw/s1600/burung.gif" /><br
/></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
600px; top: 49px; width: 60px; height: 350px;"
scrollamount="8"><br /><img
src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbj-jdOjDSbk9uLOre-h-btKffO7i0je4wjMiN5F7Z6SloIAHQof5pwHY6Vh1QTgOxmvPI57GWt0bDUSsjSeV_B2ASm7x3CZu2UDhZ5IwUX4iPn-TFc7oERqMD3XjW7jZOdR2i6THHTw/s1600/burung.gif" /><br
/></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
873px; top: 52px; width: 60px; height: 400px;"
scrollamount="3"><br /><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbj-jdOjDSbk9uLOre-h-btKffO7i0je4wjMiN5F7Z6SloIAHQof5pwHY6Vh1QTgOxmvPI57GWt0bDUSsjSeV_B2ASm7x3CZu2UDhZ5IwUX4iPn-TFc7oERqMD3XjW7jZOdR2i6THHTw/s1600/burung.gif" /><br
/></marquee><br /><br /><marquee
behavior="scroll" direction="down" style="position: absolute; right:
50px; top: 55px; width: 60px; height: 700px;"
scrollamount="12"><br /><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbj-jdOjDSbk9uLOre-h-btKffO7i0je4wjMiN5F7Z6SloIAHQof5pwHY6Vh1QTgOxmvPI57GWt0bDUSsjSeV_B2ASm7x3CZu2UDhZ5IwUX4iPn-TFc7oERqMD3XjW7jZOdR2i6THHTw/s1600/burung.gif" /><br
/></marquee><br />
Keterangan : Url gambar yang berwarna biru bisa sobat ganti dengan Url gambar pilihan sobat.

jika sudah selesai SIMPAN dan lihat hasilnya

Selamat mencoba

Login ke Blogger
Klik Rancangan → Elemen Laman → Tambah Gadget → HTML/JavaScript
Kemudian Copy kode Script berikut dan Paste ke dalamnya :


<script language="JavaScript1.2" src="http://kangdadang.googlecode.com/files/float_balon.js"></script> 


jika sudah selesai SIMPAN dan lihat hasilnya


Selamat mencoba

  1. Login ke Blogger
    Klik Rancangan  
  2. Edit HTML  
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
Kemudian cari <data:post.body/>

Jika sudah ketemu silahkan Copy kode berikut dan letakkan dibawahnya  :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2> Artikel Terkait </H2>
<div class='Box_Artikel'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
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;albri&#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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

Untuk menambahkan efeknya cari kode ]]></b:skin> dan letakkan kode berikut diatasnya:

.Box_Artikel{
border: 1px solid #87CEEB
padding: 5px; 
background-color: #f0f0f0;
-moz-border-radius:5px; margin:5px;
}
.
Box_Artikel{
background-color: #ffffff
border: 1px solid #ff6100;
}
Kode yang berwarna biru silahkan ganti sesuai kreasi kawan-lawan..

Selamat mencoba

Kawan-kawan mungkin pernah melihat pada sebuah blog ada gambar melayang di samping blog baik itu di bawah maupun di atas....
cara membuatnya adalah sebagai berikut:

  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :
#gambar_melayang {
position:fixed;_position:relative;top:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
huruf berwarna biru bisa anda ganti untuk posisinya dengan kombinasi kode : top (untuk atas) bottom (untuk bawah), dan left (seblah kiri) right (sebelah kanan) dipilih berdasarkan keinginan kawan-kawan.

untuk selanjutnya cari kode </body> dan letakkan kode ini di atas kode tadi:

 
<div id='gambar_melayang'>
<a href='http://kangdadang.co.cc/'>
<img alt='' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc8eV_x08vsivgNh8YteAVZ4yl1any02-ya__08lnMHfxqD58tFfHRjQzAUaRBwFM4_n5CpEfTo_wegXYMfLSnvyR1efJsO7nRCpKQL8LnrNfKV_8qKHbECWccOpHVh5um3qjNSrGyiW8/s1600/NarutoVSSasuke.gif'/></a>
</div>
Simpan template...

  1. Log in blogger
  2. masuk ke rancangan , Edit HTml
  3. Lalu cari kode  ]]></b:skin> Lalu kopikan kode di bawah ini di atasnya :

.paginator {
 margin-top:60px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;
}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zdCpzyQOLRDYassH6DTJ2bDq_iuI18x4XP4aJ54HyLujsNWqOJoxRcqjBFUXrsL_ah5PrX4RqGslVP6l2N41Q6FJ4SypBhum40A6q9sLcwEOv7d077w77UJbji1uLFfCpbA6i8AkQTA/s1600/slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}

.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}
Selanjutnya cari kode  </body> dan kopikan kode berikut diatasnya :
<script src='http://kangdadang.googlecode.com/files/Paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;</script>
<script src='http://kangdadang.googlecode.com/files/PaginatorForBlogger.js' type='text/javascript'/>
yang berarna biru ubah sesuai pengaturan blog anda :

PostPerPage: Berapa banyak Post setiap Halaman untuk blog Anda
numshowpage: Banyak cara nomor akan muncul pada halaman Anda Navigasi



selanjutnya centang tanda Expand Widget Templates


'data:label.url'

lalu ganti dengan kode berikut :

'data:label.url + &quot;?&amp;max-results=7&quot;'

Ubah 7 berdasarkan berapa banyak posting setiap halaman

selamat mencoba..........................

  1. Login blogger
  2. masuk ke rancangan 
  3. edit html
  4. Centang tanda Expand Template Widget
  5. lalu letakkan kode di bawah ini di bawah kode </head> (ctrl+F untuk mempermudah pencarian) :  
<script language='JavaScript'>alert("Selamat datang di situsnya anak Sunda semoga bisa bermanfaat");</script>
Atau bisa juga menggunakan kode yang di bawah ini :

<script type="text/javascript">
var yourName = prompt("
Selamat datang di situsnya anak Sunda semoga bisa bermanfaat");
</script>
Teks yang berwarna Biru silahkan ganti sesuai keinginan kawan-kawan.........

simpan template, dan selesai......
Selamat mencoba....

  1. Login blogger
  2. masuk ke rancangan 
  3. edit html
  4. Centang tanda Expand Template Widget
  5. lalu letakkan kode di bawah ini di bawah kode </head> (ctrl+F untuk mempermudah pencarian) :   
<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('Terima kasih telah berkunjung !! Silahkan Kembali dan Beri Komentar Anda! Terimah Kasih');
}
parent.window.onunload=goodbye;
</script>
Teks berwarna biru silahkan ganti sesuai keninginan..........
simpan template,
selesai

Selamat mencoba.............

Sedikit ingin sensasi menghilangkan icon obeng dan tang pada tampilan blogger saat kita log in akun blogger pada sudut-sudut element blog... jika kawan masih bingung dengan maksud obeng dan tang mungkin bisa sedikit mengerti dengan melihat gambar disamping.....
Icon tersebut di sebut juga dengan icon Quick Edit atau dengan kata lain untuk mengedit secara cepat. Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa melihat icon tersebut.
Namun ternyata ada beberapa blogger yang tidak suka dengan kehadiran icon tersebut dan ingin menghapusnya. Apakah kita bisa  menghapus icon tersebut? Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita.
Cara menghilangkannya yaitu sebagai berikut :


  1. Login blogger
  2. Klik  Rancangan.
  3. Klik tab Edit HTML.
  4. Cari kode seperti ini ]]></b:skin>Masukkan kode dibawah ini di atas kode tadi : 

.quickedit{
display:none;
}

simpan template....... dan selesai

Demonya bisa dilihat disni

  1. Login blogger
  2. Klik  Rancangan.
  3. Klik tab elemen laman, tambah gadget pilih html/java script
  4. masukkan kode berikut : 
 <script language="javascript">

function signs() {
var start = 1901, birthyear = document.zodiac.year.value, date=document.zodiac.date.value, month=document.zodiac.month.selectedIndex;

with (document.zodiac.sign){

if (month == 1 && date >=20 || month == 2 && date <=18) {value = "Aquarius";}
if (month == 1 && date > 31) {value = "Huh?";}
if (month == 2 && date >=19 || month == 3 && date <=20) {value = "Pisces";}
if (month == 2 && date > 29) {value = "Say what?";}
if (month == 3 && date >=21 || month == 4 && date <=19) {value = "Aries";}
if (month == 3 && date > 31) {value = "OK. Whatever.";}
if (month == 4 && date >=20 || month == 5 && date <=20) {value = "Taurus";}
if (month == 4 && date > 30) {value = "I'm soooo sorry!";}
if (month == 5 && date >=21 || month == 6 && date <=21) {value = "Gemini";}
if (month == 5 && date > 31) {value = "Umm ... no.";}
if (month == 6 && date >=22 || month == 7 && date <=22) {value = "Cancer";}
if (month == 6 && date > 30) {value = "Sorry.";}
if (month == 7 && date >=23 || month == 8 && date <=22) {value = "Leo";}
if (month == 7 && date > 31) {value = "Excuse me?";}
if (month == 8 && date >=23 || month == 9 && date <=22) {value = "Virgo";}
if (month == 8 && date > 31) {value = "Yeah. Right.";}
if (month == 9 && date >=23 || month == 10 && date <=22) {value = "Libra";}
if (month == 9 && date > 30) {value = "Try Again.";}
if (month == 10 && date >=23 || month == 11 && date <=21) {value = "Scorpio";}
if (month == 10 && date > 31) {value = "Forget it!";}
if (month == 11 && date >=22 || month == 12 && date <=21) {value = "Sagittarius";}
if (month == 11 && date > 30) {value = "Invalid Date";}
if (month == 12 && date >=22 || month == 1 && date <=19) {value = "Capricorn";}
if (month == 12 && date > 31) {value = "No way!";}
}
x = (start - birthyear) % 12
with (document.zodiac.csign){
if (x == 1 || x == -11) {value = "Tikus";}
if (x == 0) {value = "Ox";}
if (x == 11 || x == -1) {value = "Macan";}
if (x == 10 || x == -2) {value = "Kelinci";}
if (x == 9 || x == -3) {value = "Naga";}
if (x == 8 || x == -4) {value = "Ular";}
if (x == 7 || x == -5) {value = "Kuda";}
if (x == 6 || x == -6) {value = "Kambing";}
if (x == 5 || x == -7) {value = "Monyet";}
if (x == 4 || x == -8) {value = "Ayam";}
if (x == 3 || x == -9) {value = "Anjing";}
if (x == 2 || x == -10) {value = "Babi";}

}
}
</script>
<form name="zodiac">
<center>
<table bgcolor="#9DACBF" border="2" bordercolor="#000000" rules="none" cellspacing="2" cellpadding="4">
<tr>
<td width="55"><b>Tahun</b></td>
<td width="155"><input type="text" size="10" name="year" onClick=value=""></div></td>
<tr>
<td><b>Bulan</b></td>
<td>
<select name="month">
<option value="x">Pilih Bulan</option>
<option value="1">Januari</option>
<option value="2">February</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Augustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select></td>
</tr>
<tr>
<td><b>Tanggal</b></td>
<td><input type="text" name="date" size="3" onClick=value=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#9DACBF"><div align="center">
<input type="button" value="Klik Untuk Melihat Hasilnya" onClick="signs()">
</div></td>
</tr>
<tr>
<td><b>Zodiak: </b></td>
<td bgcolor="#9DACBF"><div align="right">
<input type="text" name="sign" size="12" value="" align="right"></div></td></tr>
<td></td></tr>
<tr>
<td><b>Shio:</b></td>
<td bgcolor="#9DACBF"><div align="right">
<input type="text" name="csign" size="12"></div></td>
</tr>
</table>
</center>
</form>
Simpan


dan selesai.......

View demonya disini
untuk caranya yaitu sebagai berikut :

  1. Login blogger
  2. Pilih Rancangan --> EDIT HTML (centang expand template widget)
  3. Simpan CSS berikut Diatas kode ]]></b:skin>

/**
* SyntaxHighlighter
* http://alexgorbatchev.com/
*
* SyntaxHighlighter is donationware. If you are using it, please donate.
* http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate
*
* @version
* 2.1.364 (October 15 2009)
*
* @copyright
* Copyright (C) 2004-2009 Alex Gorbatchev.
*
* @license
* This file is part of SyntaxHighlighter.
*
* SyntaxHighlighter is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* SyntaxHighlighter is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with SyntaxHighlighter. If not, see <http://www.gnu.org/copyleft/lesser.html>.
*/
/************************************
* Default Syntax Highlighter theme.
*
* Interface elements.
************************************/
.syntaxhighlighter
{
background-color: #fff !important;
}
/* Highlighed line number */
.syntaxhighlighter .line.highlighted .number
{
color: black !important;
}
/* Highlighed line */
.syntaxhighlighter .line.highlighted.alt1,
.syntaxhighlighter .line.highlighted.alt2
{
background-color: red !important;
}
/* Gutter line numbers */
.syntaxhighlighter .line .number
{
color: #f7f5f5 !important;
background-color: #c0bfbf !important;
}
/* Add border to the lines */
.syntaxhighlighter .line .content
{
color: #000 !important;
}
.syntaxhighlighter.printing .line .content
{
border: 0 !important;
}
/* First line */
.syntaxhighlighter .line.alt1
{
background-color: #f5f5f5 !important;
border-top: white solid 5px !important;
}
/* Second line */
.syntaxhighlighter .line.alt2
{
background-color: #f5f5f5 !important;
border-top: white solid 5px !important;
}
.syntaxhighlighter .toolbar
{
background-color: #c0bfbf !important;
}
.syntaxhighlighter .toolbar a
{
color: #a0a0a0 !important;
}
.syntaxhighlighter .toolbar a:hover
{
color: red !important;
}
/************************************
* Actual syntax highlighter colors.
************************************/
.syntaxhighlighter .plain,
.syntaxhighlighter .plain a
{
color: #000 !important;
}
.syntaxhighlighter .comments,
.syntaxhighlighter .comments a
{
color: #008200 !important;
}
.syntaxhighlighter .string,
.syntaxhighlighter .string a
{
color: #0404ab !important;
}
.syntaxhighlighter .keyword
{
color: #cf0202 !important;
font-weight: bold !important;
}
.syntaxhighlighter .preprocessor
{
color: black !important;
}
.syntaxhighlighter .variable
{
color: #a70 !important;
}
.syntaxhighlighter .value
{
color: #d4af02 !important;
}
.syntaxhighlighter .functions
{
color: #ff1493 !important;
}
.syntaxhighlighter .constants
{
color: #2a8506 !important;
}
.syntaxhighlighter .script
{
background-color: yellow !important;
}
.syntaxhighlighter .color1,
.syntaxhighlighter .color1 a
{
color: #d301d1!important;
}
.syntaxhighlighter .color2,
.syntaxhighlighter .color2 a
{
color: #ff1493 !important;
}
.syntaxhighlighter .color3,
.syntaxhighlighter .color3 a
{
color: red !important;
}

Sekarang simpan script berikut diatas kode </head> :

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushDiff.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushGroovy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushScala.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>

Selanjutnya cari kode </body> dan Simpan kode berikut diatas kode tadi:
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

simpan template............

Untung cara memanggilnya pada postingan kawan yaitu simpan kode di bawah ini pada edit html postingan kawan :
Untuk menyimpan CSS :

<pre class="brush: css;">

SIMPAN CSS YANG AKAN DIPASANG DISINI

</pre>


Untuk menyimpan Java Script

<pre class="brush: js;">

SIMPAN Script Js YANG AKAN DIPASANG DISINI

</pre>


Dan selesai...........
selamat mencoba

Membuat sebuah menu horizontal yang di sisipi effect jQuery, saat Kursor mouse menyorot menu ini, maka salah satu menu ini akan terselip atau berjungkir balik secara otomatis :
Untuk demo nya bisa dilihat disini
Cara membuat nya yaitu sebagai berikut :

  1. Login Blogger2
  2. Pilih Rancangan ---> EDIT HTML 
  3. Simpan Kode CSS berikut diatas kode ]]></b:skin>
ul#topnav {
margin: 10px 0 20px;
padding: 20px;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
}
ul#topnav.v2 a{
color: #555;
border: solid #999 1px;
background-color:#eeeeee;
}
Kemudian Cari kode:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Simpan kode berikut di bawah kode di atas(Sesuai tema blog kawan):

<ul class='v2' id='topnav'>

<li><a href='#' title='HOME'>HOME</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a></li>

<li><a href='#' title='MENU 2'>MENU 2</a></li>

<li><a href='#' title='MENU 3'>MENU 3</a></li>

<li><a href='#' title='MENU 4'>MENU 4</a></li>

<li><a href='#' title='MENU 5'>MENU 5</a></li>

<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>
Yang berwarna biru # (alamat link) MENU 3 (nama menu) Silahkan ganti sesuai keinginan......


Selanjutnya cari kode </head> dan simpan script berikut diatasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>


$(document).ready(function() {


$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
});

$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});


});
</script>

Selamat mencoba......

Membuat sebuah menu horizontal yang di sisipi effect jQuery, saat Kursor mouse menyorot menu ini, maka salah satu menu ini akan terselip atau berjungkir balik secara otomatis :
Untuk demo nya bisa dilihat disini
Cara membuat nya yaitu sebagai berikut :

  1. Login Blogger2
  2. Pilih Rancangan ---> EDIT HTML 
Kemudian Cari kode:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

Simpan kode berikut di bawah kode di atas(Sesuai tema blog kawan):

<ul class='v2' id='topnav'>

<li><a href='#' title='HOME'>HOME</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a></li>

<li><a href='#' title='MENU 2'>MENU 2</a></li>

<li><a href='#' title='MENU 3'>MENU 3</a></li>

<li><a href='#' title='MENU 4'>MENU 4</a></li>

<li><a href='#' title='MENU 5'>MENU 5</a></li>

<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>
Yang berwarna biru # (alamat link) MENU 3 (nama menu) Silahkan ganti sesuai keinginan......


Selanjutnya cari kode ]]></b:skin> dan simpan script berikut diatasnya:
<style type='text/css'>
#nav {
width:100%;
margin-left:-40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPA-hpvpDYnt_bGssOse0sW_N1rArTfhfWEcJJsK7-1MzBdWwGIiAO2oFNkLTBxKqrZAAXlpCkzlYEDA9YmMqFUGEjg4-1XV3yVeNxCoOhLZ_bkOp8B14dneos5XVSznHEBwIrmR-_6G4e/) repeat-x;
}

#nav li {
float: left;
display: block;
}

#nav li a {
float: left;
display: block;
padding: 12px 18px 12px 18px;
text-transform: uppercase;
text-decoration:none;
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat top right;
color:#ffffff;
}

#nav li a:hover {
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -40px;
color:#ffffff;
text-decoration:none;
}

ul#nav li.activee a, ul#nav li.current-cat a {
color: #fff;
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -80px;
}

#nav li ul {
display: none;
}
</style>

  1. Login  blogger
  2. Masuk ke rancangan --> EDIT HTML 
  3. Simpan kode CSS dibawah ini  diatas kode ]]></b:skin>
/*-- CSS Kursor Diikuti Jam --*/
.cursor_jam1{
background:transparent;
position:absolute;
top:0px;
left:0px;
width:16px;
height:16px;
font-family:cursive;
font-size:16px;
text-align:center;
font-weight:bolder;
}
.cursor_jam2{
position:absolute;
top:0px;
left:0px;width:12px;
height:12px;
font-family:cursive;
font-weight:bolder;
font-size:10px;
text-align:center;
}

/*-- END CSS --*/

Kemudian Simpan script dibawah ini diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
if (document.getElementById&&!document.layers){dCol='blue'; fCol='green'; sCol='blue'; mCol='red'; hCol='red'; del=0.7; ref=70;var ieType=(typeof window.innerWidth != 'number'); var docComp=(document.compatMode);var docMod=(docComp && docComp.indexOf("CSS") != -1); var ieRef=(ieType && docMod)?document.documentElement:document.body;theDays=new Array("MINGGU","SENIN","SELASA","RABO","KAMIS","JUM'AT","SABTU");theMonths=new Array("JANUARI","FEBUARI","MARET","APRIL","MEI","JUNI","JULI","AGUSTUS","SEPTEMBER","OKTOBER","NOVEMBER","DESEMBER"); date=new Date(); day=date.getDate(); year=date.getYear();if (year < 2000) year=year+1900; tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;D=tmpdate.split(""); N='3  9 12'; N=N.split(" "); F=N.length; H='...'; H=H.split("");M='....'; M=M.split(""); S='.....'; S=S.split(""); siz=40; eqf=360/F; eqd=360/D.length; han=siz/5.5;ofy=-7; ofx=-3; ofst=70; tmr=null; vis=true; mouseY=0; mouseX=0; dy=new Array(); dx=new Array();zy=new Array(); zx=new Array(); tmps=new Array(); tmpm=new Array(); tmph=new Array();tmpf=new Array();tmpd=new Array(); var sum=parseInt(D.length+F+H.length+M.length+S.length)+1;
for (i=0; i < sum; i++){ dy[i]=0; dx[i]=0; zy[i]=0; zx[i]=0;}
algn=new Array();for (i=0; i < D.length; i++){algn[i]=(parseInt(D[i]) || D[i]==0)?10:9;
document.write('<div id="_date'+i+'" class="cursor_jam2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'<\/div>');tmpd[i]=document.getElementById("_date"+i).style;} for (i=0; i < F; i++){
document.write('<div id="_face'+i+'" class="cursor_jam2" style="color:'+fCol+'">'+N[i]+'<\/div>');
tmpf[i]=document.getElementById("_face"+i).style; } for (i=0; i < H.length; i++){
document.write('<div id="_hours'+i+'" class="cursor_jam1" style="color:'+hCol+'">'+H[i]+'<\/div>');
tmph[i]=document.getElementById("_hours"+i).style;} for (i=0; i < M.length; i++){
document.write('<div id="_minutes'+i+'" class="cursor_jam1" style="color:'+mCol+'">'+M[i]+'<\/div>'); tmpm[i]=document.getElementById("_minutes"+i).style; } for (i=0; i < S.length; i++){
document.write('<div id="_seconds'+i+'" class="cursor_jam1" style="color:'+sCol+'">'+S[i]+'<\/div>'); tmps[i]=document.getElementById("_seconds"+i).style;} function onoff(){if (vis){ vis=false;
document.getElementById("control").value="Tampilkan Jam";}
else{ vis=true;document.getElementById("control").value="Sembunyikan Jam";Delay();} kill();}
function kill(){ if (vis) document.onmousemove=mouse; else document.onmousemove=null;}
function mouse(e){ var msy = (!ieType)?window.pageYOffset:0; if (!e) e = window.event;
if (typeof e.pageY == 'number'){ mouseY = e.pageY + ofst - msy; mouseX = e.pageX + ofst;}
else{ mouseY = e.clientY + ofst - msy; mouseX = e.clientX + ofst;} if (!vis) kill();}
document.onmousemove=mouse; function winDims(){ winH=(ieType)?ieRef.clientHeight:window.innerHeight;
winW=(ieType)?ieRef.clientWidth:window.innerWidth;} winDims();window.onresize=new Function("winDims()"); function ClockAndAssign(){ time = new Date(); secs = time.getSeconds();sec = Math.PI * (secs-15) / 30; mins = time.getMinutes(); min = Math.PI * (mins-15) / 30; hrs = time.getHours();
hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360;for (i=0; i < S.length; i++){
tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px";
tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px";}
for (i=0; i < M.length; i++){ tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px";tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px";}
for (i=0; i < H.length; i++){tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px";
tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px";} for (i=0; i < F; i++){
tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px";
tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px";}
for (i=0; i < D.length; i++){tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px";
tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px";} if (!vis)clearTimeout(tmr);}
buffW=(ieType)?80:90; function Delay(){scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset;if (!vis){
dy[0]=-100;dx[0]=-100;} else{ zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del);
zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del);} for (i=1; i < sum; i++){if (!vis){ dy[i]=-100;
dx[i]=-100;} else{ zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);} if (dy[i-1] >= winH-80) dy[i-1]=winH-80;
if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW;} tmr=setTimeout('Delay()',ref); ClockAndAssign();}
window.onload=Delay;}
//]]>
</script>


Simpan Template............

Selamat mencoba...............

  1. Login blogger
  2. Pilih Rancangan --> Elemen Halaman
  3. KLIK tambah Gadget --> HTML/Java Script
  4. Simpan Kode berikut :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://kangdadang.googlecode.com/files/BackToTopBlue.js"></script>
Untuk kode  http://kangdadang.googlecode.com/files/BackToTopBlue.js adalah Java script dengan tampilan gambar seperti di bawah ini :




Bisa diganti juga dengan http://kangdadang.googlecode.com/files/BackToTopGreen.js dengan tampilan gambar :

atau dengan http://kangdadang.googlecode.com/files/BackToTopYellow.js dengan tampilan gambar :

atau juga kawan-kawan ingin menggantinya dengan gambar keinginan masing-masing, bisa dilakukan dengan cara :

  1. Download Java script http://kangdadang.googlecode.com/files/BackToTopBlue.js lalu edit dengan notepad cari link gambar http://i1094.photobucket.com/albums/i447/kang-da2ng/back2top.png lalu ganti dengan link gambar yang diinginkan.... dan Save
  2. Upload Java script tadi midalnya pada google code, untuk tutornya bisa dilihat disini
selamat mencoba..............

  1. Log in blogger
  2. Rancangan, edit html, centang tanda Expand Template Widget
  3. Cari kode  ]]></b:skin> dan kopi kan CSS berikut diatasnya :

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

Selanjutnya </head> cari kode dan kopikan kode berikut diatasnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
 $(".panel").toggle("fast");
 $(this).toggleClass("active");
 return false;
});
});
</script>

Selanjutnya cari kode </body> lalu kopi kan kode berikut diatasnya :

<div class='panel'>
<h3>Selamat Datang kawan-kawan</h3>
<p style='text-align:justify'>Selamat datang di situs blog saya, maaf atas kekurangannya atau saya dianggap so tau dsb, sebenarnya saya membuat blog ini sebagai tempat belajar saya, sebagai tempat memuaskan rasa penasaran tentang semua yang ingin saya ketahui <a href='http://dadhang.blogspot.com/' title='Ciamis Blogger'>Selengkapnya tentang kami</a></p>

<h3>Sedikit Profil tentang saya</h3>
<img src='http://lh3.ggpht.com/_xTRukLv_HsA/TNjaYa1tSjI/AAAAAAAAABc/jZL2B4_PLHM/s140/screenshaver2.gif' width='73px' height='73px'/>
<p>Nama Saya dadang herdiana, saya seorang keluaran SMk jurusan Otomotif, nama sekolah saya SMkn 1 Kawali, alamat Ciamis</p>

<div style='clear:both;'/>

<div class='columns'>
 <div class='colleft'>
 <h3>Navigasi</h3>
  <ul>
   <li><a href='#' title='home'>Home</a></li>
   <li><a href='#' title='about'>About</a></li>
   <li><a href='#' title='portfolio'>Portfolio</a></li>
   <li><a href='#' title='contact'>Contact</a></li>
   <li><a href='#' title='blog'>Blog</a></li>
  </ul>
 </div>

 <div class='colright'>
 <h3>Social Stuff</h3>
  <ul>
   <li><a href='#' title='Twitter'>Twitter</a></li>
   <li><a href='#' title='Facebook'>Facebook</a></li>
   <li><a href='#' title='Digg'>Digg</a></li>
   <li><a href='#' title='Del.Icio.Us'>Del.Icio.Us</a></li>
   <li><a href='#' title='Gmail'>Gmail</a></li>
  </ul>
 </div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

Simpan template...........

Selamat mencoba......

Dibawah ini adalah contoh kode widget pada template blogger, kalian bisa melihat sendiri pada template kalian.


<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='HTML3' locked='false' title='SAMPLE' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='Profile1' locked='false' title='About' type='Profile'/>
Dari kode diatas, bisa kita ambil dan kita simpulkan type-type widget yang ada pada blogspot (warna merah). yaitu :

^^ Followers
^^ HTML
^^ Label
^^ Profile

dan masih banyak lagi "TYPE" widget blogger yang lainnya.

Setelah kita tahu Type dari widget nya, sekarang kita lanjutkan ke pembahasan awal, yaitu memindahkan widget blog dengan jQuery.

1. Login ke blogger kalian
2. Pilih Rancangan --> EDIT HTML
3. Simpan kode berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>


Catatan :Jika script diatas sudah ada dalam template kalian, tidak usah dipasang lagi / cuekin tahap No. 3 ini.

4. sekarang pasang script berikut dibawah kode script no.3


<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.widget.TYPEWIDGET&quot;).draggable();
});
</script>
Keterangan :
silahkan ganti kode warna merah dengan nama Type Widget yang akan di sisipkan effect drag.

Contoh untuk Widget Followers :
$(".widget.Followers").draggable();
Jadi script lengkapnya seperti berikut ini :
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.widget.Followers&quot;).draggable();
});
</script>
Untuk Widget TYPE HTML kalian tinggal menambahkan kata HTML pada scriptnya, jadi bentuknya seperti ini :
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.widget.HTML&quot;).draggable();
});
</script>

Tambahan :
Untuk TYPE HTML, kode diatas akan memindahkan semua WIDGET TYPE HTML yang ada di blog

Sekarang saya akan berikan contoh script lengkap meliputi HTML, Label, Followers, HTML, Profile dan Gambar:
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;div.drag_gambar img&quot;).draggable();
$(&quot;.widget.Label&quot;).draggable();
$(&quot;.widget.Profile&quot;).draggable();
$(&quot;.widget.HTML&quot;).draggable();
$(&quot;.widget.Followers&quot;).draggable();
});
</script>