Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts

Saturday, November 6, 2010

Cara Menampilkan Status YM di Blogger

Cara Menampilkan Status YM di Blogger - Ayo percantik blog kita dengan Dengan Cara menampilkan status YM di Blogger .Dengan cara menampilkan status YM di blogger, blog kita akan terlihat lebih cantik.Akan lebih cantik blog kita dengan adanya status YM. Dan juga dinamis.hehehe,..Berikut cara menampilkan satus YM di blogger

Pertama..login dulu di blogger.masuk ke tata letak,tyus tambahkan gadget. Pilih Html/javaScript.trus lg copy script dibawah ini:






ganti IDMUdengan id YM kamu..
Status YM


Pilih jenis tapilan status YM yang kita sukai, dengan kita mengganti nilai t=14 dengan angka –angka dari 0 – 16. Tergantung tapilan status YM kita mau pilih yang mana. Pilihan tapilan status YM ada di bawah seperti yang ada di bawah.

t=0
Status YM


t=1
Status YM


t=2
Status YM


t=3
Status YM


t=4
Status YM


t=5
Status YM


t=6
Status YM


t=7
Status YM

t=8
Status YM


t=9
Status YM


t=10
Status YM

t=11
Status YM


t=12
Status YM


t=13
Status YM


t=14
Status YM


t=15
Status YM


t=16
Status YM


Friday, November 5, 2010

Cara Kompres Kode CSS dan Javasript

CSS dan JavaScript Terlalu banyak menggunakan akan sangat mempengaruhi loading blog anda. Bagi anda yang menggunakan banyak CSS dan JavaScript akan saya ajarkan cara mengkompresnya. Dengan kompres maka loadingpun akan sedikit banyak lebih cepat. Bagaimana cara kompresnya? tidak repot, karena kita akan menggunakan bantuan Online YUI Compressor

Preview
Cara menggunakannya? sangat mudah. Apa yang ingin anda kompres? CSS atau JavaScript? Tenang akan saya bahas keduanya.

Untuk kompres JavaScript cukup dengan mengcopy paste kode JavaScriptnya. TAPI ! bukan semua kode JavaScript nya. Yang di copy adalah kode yang ada di antara <script type='text/javascript'> dan </script> atau <script type='text/javascript'> //<![CDATA[ dan //]]> </script> 

Contoh :
<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 450;

summary_img = 450;

img_thumb_height = 120;

img_thumb_width = 120;

</script>



<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>

</script>
Cara kompresnya masukan kode JavaScript dari blog anda ke kotak yang tersedia, File Tipe isi dengan JS lalu Compress

Sekarang jika ingin mengkompres CSS. Design > Edit HTML > Lalu copy semua kode yang ada di antara <b:skin><![CDATA[/* dan ]]></b:skin>

Cara kompresnya isi kota yang tersedia dengan kode CSS anda lalu isi File Type dengan CSS dan Compress

Thursday, October 28, 2010

Memasang Artikel Populer di Blogger

Setiap blog pasti memiliki artikel yang paling populer (popular posts), biasanya popular post tersebut di munculkan berdasarkan komentar (posting yang banyak di komentari) atau karena paling sering di baca orang.

Baru-baru ini blogger meluncurkan widget/gatget baru yaitu gadget untuk menampilkan popular posts di blog kita, jadi tidak perlu repot-repot pasang kode html lagi.

Sebenarnya Cara Memasang Artikel Populer Di Blogger ini sudah sering di bahas di blog-blog yang memuat tutorial blogger, namun karena dulu gadget popular post di blogger belum ada akhirnya mereka menuliskan panduan cara menampilkan popular post di blogger menggunakan script dan kode html.
Ok, kembali ke LapTop

Cara Memasang Artikel Populer Di Blogger

Seperti bisa, langkah pertama yang harus anda lakukan adalah login ke Dashboard Blogger kemudian pergi ke Design/Rancangan.

Setelah berada di halaman Tata Letak/Rancangan blog blogger silahkan klik Add a Gadget.

Pilih Gadget Popular Post.

Silahkan setting sesuai keinginan, mau menampilkan popular post yang bergambar atau tidak.

Nah itulah Cara Mudah Untuk Menampilkan Popular Posts Di Blogger.
Selamat mencoba.

Friday, October 22, 2010

Cara Membuat Kotak Komentar Facebook di Blogger

Cara Membuat Kotak Komentar Facebook di Blogger - Akhirnya setelah beberapa kali otak atik Cara terakhir inilah yang menurut saya bisa di aplikasikan siapa saja dengan mudah.
So Silahkan Ikuti Langkah-langkah berikut ini :

  • Silahkan Buat Aplikasi Anda disini : Facebook developer page


    Agar Alamat Blog Sobat di terima Jangan Lupa Tambahkan Backslash " / " di belakang Ulr.
    Contoh  : http://bos-sulap.blogspot.com
    Menjadi : http://bos-sulap.blogspot.com/
    Ambil ID Aplikasi Copy dulu di Notepad



  • Sekarang LoginLah ke Account Blogger sobat
    Silahkan Menuju Layout ( Rancangan )> Edit HTML dan check Expand Widget Templates. Cari code berikut:
    <data:post.body/> atau <div class='post-header-line-1/>
    dan paste code berikut dibawahnya :
    Jika Pernah pasang readmore maka letakkan dibawah <data:post.body/> kedua

Ini Scriptnya
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><a href='http://bos-sulap.blogspot.com/2010/10/cara-membuat-kotak-komentar-facebook-di.html' target='new'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkb0esByYMXnG0E0ohcNzSBPbyxWV3t9rQ6Dw1I1eJxDbYaKvWhxVYY8RGMBxXSq_Tc-vujCS_8BYHkMjKm4JG7z9cLFrV6fLud3anbqDcDu2uEo7wWKilEjhNJzXfQlO5vn94ovJ1Aco/'/></a></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;ID-Aplikasi&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://bos-sulap.blogspot.com/2010/10/cara-membuat-kotak-komentar-facebook-di.html' target='_blank' title='Facebook Comment'>Facebook Comment , Mau ?</a></b></div>
Silahkan Ganti ID-Aplikasi dengan ID-APlikasi anda

Jika Tidak Mau Pusing Bikin APlikasi Silahkan Copas Code Berikut dan tinggal di pasang sesuai Arahan Diatas:

Script Jadi dan Tinggal Pasang tanpa Buat APlikasi
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><a href='http://bos-sulap.blogspot.com/2010/10/cara-membuat-kotak-komentar-facebook-di.htmll' target='new'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkb0esByYMXnG0E0ohcNzSBPbyxWV3t9rQ6Dw1I1eJxDbYaKvWhxVYY8RGMBxXSq_Tc-vujCS_8BYHkMjKm4JG7z9cLFrV6fLud3anbqDcDu2uEo7wWKilEjhNJzXfQlO5vn94ovJ1Aco/'/></a></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;136575963025211&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://bos-sulap.blogspot.com/2010/10/cara-membuat-kotak-komentar-facebook-di.html' target='_blank' title='Facebook Comment'>Facebook Comment , Mau ?</a></b></div>

Selamat Kotak Komentar Anda sudah Jadi, Jka ada Maslah jangan segan-segan Komentar

Saturday, October 2, 2010

Daftar Kode-Kode HTML

Berikut Daftar Kode-Kode HTML untuk web atau blog anda :

daftar kode html

Wednesday, September 29, 2010

Cara Cek Broken Link di BLog

Untuk mulai Mengecek Broken Link di Seluruh Halaman Blog anda melalui Google Webmaster Tools, bisa mengikuti beberapa langkah yang terukir di bawah ini:

1. Pertama-tama Login ke webmaster tools.

posting terjadwal 1

2. Setelah sampai di dasbor webmaster tools, Klik blog anda.

posting terjadwal 2

3. Lirik kolom crawl errors, maka akan terlihat dua buah link. Yaitu Not found dan restricted by robots.txt. Not Found merupakan broken link blog anda dan restricted by robots.txt merupakan link yang di batasi untuk diindeks robot google. Di sebelah kanan masing-masing link akan di tunjukkan jumlah dari masing-masing link tsb.

4. Klik Not found, Maka akan di tunjukkan semua broken link yang di sertai keterangan lengkap dari masing-masing broken link yang ada di keseluruhan halaman blog anda.

terbitkan otomatis 3

posting terjadwal 4

Masing masing cara antara Mengecek Broken Link di Halaman Tertentu Pada Blog dan juga di keseluruhan halaman blog memiliki kekurangan dan kelebihannya masing-masing. Jika menggunakan add-ons kita akan tahu letak dari broken link dalam blog kita, namun kita akan sulit untuk mengecek broken link yang ada dalam artikel karena harus di periksa satu persatu setiap artikel anda.

Jika menggunakan webmaster tools, kita akan mengetahui detil secara lengkap tentang broken link blog kita, namun akan sangat sulit untuk mengetahui letak broken link tersebut pada blog kita. Mungkin anda dapat menggunakannya dengan bijak dan sesuai kebutuhan.

source : www.phonecompi.co.cc 

Tuesday, September 7, 2010

Membuat Efek Light Box Blogger

Membuat Efek Light Box Blogger - Light Box merupakan salah satu fasilitas blogger yang paling baik. Dengan menambahkan add on ini, gambar kita akan mendapatkan efek cahaya yang sangat elegant.

OK. Bagi yang ingin tahu cara buat nya saya akan memaparkannya.

1. Login ke Dashboard anda
2. Masuk ke Layout > Edit HTML
3. Cari Kode </head>

dan ganti dengan

<!--Light Box Code Starts  bos-sulap.blogspot.com-->
<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT_aXdfRTsyyRDlxF8xR4dQLnuqNgY8fEHLs9P8e8JNqqEjwXr1GmqVymcGaK5bbHxsBZRc0LSLasIn1VAhOu1e-1JacNWENfa7A7-ZUOwSF28qPG2h00RWczEanLmAnhL6aWai7H0kQk/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYHHwD1J27PPj9SNm63wIoO-vTH55LQkAtSNOFruT9yM1jmbRUNuyBbqjIs5SectjEUAKrRiWcZuqzW4kt-YvVBbPUknYzInXGuwpL5NX0Iz2Fmn8qKiiq6z9exCLvsnc8LNpr0UTBWUo/) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }         
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends bos-sulap.blogspot.com-->
</head>

4. Save template anda


Cara Mengaktifkan Efek Light Box

1. Buat Postingan Baru
2. Upload Sebuah Gambar yang ingin diberi Efek Light Box
3. Ganti ke tampilan EDIT HTML
4. Tambahkan rel="lightbox" title="Your image Caption" pada kode gambar anda


kalau ada pertanyaan silahkan isi kotak komentar di bawah 




Membuat Sitemap atau Daftar Isi Blogger

Sitemap ini dibuat oleh kang Abu Farhan. Kita patut berterima kasih kepada kang Abu Farhan karena berkat tangan dinginnya beliau dapat membuat sitemap untuk blogspot sama seperti plugin sitemap wordpress. Untuk mengetahui contoh hasil sitemap untuk blogspot sendiri bisa dilihat di halaman Daftar isi blog saya ini. Tau klik DISINI untuk melihatnya.

* Silahkan membuat postingan baru dengan mode HTML bukan compose.
* Judul postingan terserah, misalnya Sitemap.
* Silahkan copas script berikut ini di postingan kosong tersebut :
<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.bos-sulap.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>


  • Ganti url feed di atas dengan url anda.
  • Sebaiknya pada post options disetel tanggalnya pada tanggal/tahun yang lalu supaya postingan sitemapnya tidak muncul di halaman depan.
  • Selesai
Mudah bukan? Silahkan dicoba.... 

Thursday, September 2, 2010

Membuat Halaman Statis di Blogger

agaimana cara membuat halaman statis di blogger atau blogspot?

1. Masuk ke blogger in draft lalu masukkan email yang anda gunakan di blogger serta password anda.

login blog

2. Setelah masuk ke dalam dashboard, di pojok kanan atas, ada pilihan untuk menjadikan blogger in draft sebagai kondisi default. Kalau anda mau, anda bisa memberikan centang. Sehingga setiap login ke blogger.com nantinya anda otomatis masuk ke blogger in draft.

blogger draft

3. Setelah itu klik edit posts.

halaman statis di blogspot 1

4. Lalu klik “edit pages”, lalu klik “new page” untuk membuat halaman statis blogspot baru.

halaman statis di blogspot 2

5. Lalu anda buat halaman statisnya,seperti di bawah ini misal

halaman blogger

Isinya bisa anda kreasikan sesuai kebutuhan anda. Misalkan di judul anda tuliskan:Temukan Rahasia Blog Sukses Spektakuler.

Lalu di tubuh halamannya misal anda tulis,

Ingin tahu bagaimana rahasia blog sukses spektakuler yang mampu meledakkan bisnis internet anda?
Jawabannya hanya ada di Rahasia Blogging

(Jangan lupa untuk memasukkan URL Rahasia Blogging anda.)

6. Jika sudah, klik “publish page” atau jika ingin menyimpannya klik “save as draft”

publish page

7. Kalau anda klik “publish page” ketika pertama kali melakukannya akan muncul pilihan. Apakah anda ingin memasukkannya ke sidebar, tabs, atau memasukkannya secara manual ke link yang anda inginkan?

halaman statis di blogspot 3

Pilih salah satu dan klik “save and publish”.

8. Untuk melakukan pengaturan posisi seperti yang anda inginkan, anda bisa masuk ke “layout” dan “page elements”

halaman statis di blogspot 4

Kalau sebelumnya anda mempublikasikan halaman statis blogspot anda, anda tinggal mengatur letak widgetnya dengan menariknya.

9. Tapi jika belum, untuk memunculkan widgetnya, anda bisa klik add a gadget.

gadget

Di halaman baru yang muncul, anda klik pages.

widget page

Lalu anda bisa atur pilihan sesuai kebutuhan anda. Jangan lupa klik save.

set page

Kalau sudah, anda bisa tarik gadget tersebut di posisi yang anda inginkan.

atur widget

Sangat mudah kan

Tuesday, August 31, 2010

Menambahkan Icon Pada Link List

red arrow
Sekarang kita akan mencoba menambahkan icon pada label dan link sidebar. Yang dimaksud dengan icon link list adalah icon kecil di samping daftar link yang biasa kita tempatkan pada sidebar blog kita. Icon ini bisa bermacam-macam. Pertama sekali anda harus sudah menyimpan icon pada image hosting anda. Misalnya di tiniypic.com, photobucket.com atau tempat tempat hosting gambar lainnya. Contohnya icon panah hijau dengan alamat penyimpanan seperti ini:

http://i35.tinypic.com/2n03mgz.jpg

Nanti bisa anda ganti dengan icon milik anda. Seperti biasa
login ke blogger dengan id anda. Cari kode berikut:

.sidebar li {
border-bottom:1px dotted #cccccc;
margin:0;
padding:0 0 .25em 17px;
line-height:1.2em;
}

Mungkin ada perbedaan pada template, fokus saja kode .sidebar li { yang merupakan kode pada daftar link di sidebar atau cari kode yang hampir mirip. Kemudian tambahkan alamat icon anda di bawahnya. Contohnya:

.sidebar li {
background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .20em;
border-bottom:1px dotted #cccccc;
margin:0;
padding:0 0 .25em 17px;
line-height:1.2em;
}

Lalu klik tombol
Simpan Template dan lihat hasilnya. Jika tidak ada masalah, hasilnya akan seperti gambar di bawah ini :

Link List / Label

Di sebelah kiri daftar link dan label akan ada
icon panah kecil. Oke selamat menambahkan icon pada label dan link sidebar, mudah-mudahan berhasil ya...

Saturday, July 24, 2010

Cara Pasang Iklan di Blog (KuumpulBlogger)

Anda sudah merasa lama didunia perbloggeran?, Anda merasa tidak mendapatkan apa-apa dari blog selain kepuasan hati?. Jangan salah blogger juga bisa dijadikan sumber penghasilan lho, Antara lain dengan cara memasang iklan di blog Anda dengan jasa periklanan Indonesia kumpulblogger.com, Anda tidak perlu bersusah-susah mencari iklan sendiri tinggal daftar terus pasang scriptnya di blog Anda karena kumpulblogger.com sudah mencarikan iklan untuk Anda jadi Anda tinggal terima beresnya saja.
Apalagi kalau blog Anda pengunjungnya sudah banyak pasti uang akan mengalir dengan sendirinya. Kumpulblogger.com menghitung setiap text link atau banner yang disediakan dengan cara PPC (pay per clik) atau setiap ada pengunjung yang mengklik zona iklan Anda.

Gimana enak gak? mau? ikuti caranya dibawah ini

Langkah pertama yang harus Anda lakukan adalah mendaftar kumpulblogger.com disini dengan cara mengklik link "register now" pada pojok kanan atas di situs kumpulblogger.com

Lalu masukkan alamat email Anda lalu klik tombol "Register" otomatis password untuk Log In sudah ada di email Anda. Anda bisa mengubah passwordnya setelah Anda Log In

Lalu setelah Anda Log In sebelum pasang scriptnya klik link "Tambah Blog" Pada menu Blogger

Isi form sesuai perintahnya lalu klik tombol "Submit"

Kalau sudah klik link "Script Text Advertising untuk Blog anda" dan pilih style iklan yang Anda sukai lalu copy scriptnya dan tempatkan di blog Anda dengan cara masuk menu Layout (tata letak) pada dashboard blogger lalu pada menu Page element (elemen halaman) pilih tempat yang Anda sukai dan klik "add a gadget" lalu pilih "HTML/JavaScript" dan Paste Script tadi yang Anda copy di kumpulblogger.com

Nah selesai

Selamat datang didunia Blogger dan selamat datang didunia periklanan.

Jquery Multi Level Menu Horizontal


Masih membahas tentang cara membuat menu horizontal atau menu navigasi di blog kita, dan dulu sudah pernah saya memposting tentang cara membuat menu horizontal dan menu vertical di blog ini, namun kali ini saya akan menulis tutorial bagaimana membuat menu horizontal yang lebih canggih dibandingkan yang kemaren yaitu membuat multi level menu atau menu bertingkat.

Okkey langsung saja ke cara pembuatanya ya


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>



.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}
Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>


Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah code yang diatas tadi


<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>


Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"



Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan di SAVE deh.