Crack 4rt

Berikut ini cara menghilangkan Judul Blog pada Header:

• Masuk ke akun blogger sobat
• Klik Layout ---Klik Edit HTML
• Untuk berjaga-jaga, back up dulu template sobat.
• Kalau sobat sudah Back Up template sobat, beri tanda centang pada Expand Widget Template.
• Cari kode yang mirip seperti kode yang ada di bawah ini!

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

• Kalau sobat blogger sudah ketemu kode tersebut, Letakkan kode visibility:hidden setelah kode color. Lihat contoh berikut!

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden
}

• Terakhir, lakukan Preview dan Save template sobat

Satu hal yang perlu  Crack4rt  jelaskan disini. Teknik yang digunakan ini, sebenarnya TIDAK menghapus judul blog. Tetapi MENYEMBUNYIKAN judul blog dari header supaya Disain Header dari blog sobat terlihat indah.

• Sobat masuk dulu ke akun blogger sobat
• Pada Dashbor, klik Design
• Selanjutnya klik Add a Gadget
• Klik HTML Java Script

• Copy salah satu kode berikut

• Kalau sudah di copy, paste kode tersebut.
• Simpan template sobat.
• Silahkan sobat lihat hasil yang sudah sobat buat!

Di bawah ini terdapat delapan kode Effek Marquee, Silahkan sobat pilih salah satu dari kode ini dan sobat letakkan di kolom widget di blog sobat.


Tulisan berjalan lambat
<marquee behavior="scroll" scrolldelay=32 scrollamount=1>Tulisan sobat disini</marquee>
Contoh :
Tulisan sobat disini

Tulisan berjalan ke atas
<marquee height="30" behavior="scroll" direction="up"> Tulisan sobat disini </marquee>
Contoh :
Tulisan sobat disini

Tulisan Zig-zag
<marquee behavior="alternate" direction="up" height="50px"><br /> <marquee direction="right"> Tulisan sobat disini </marquee><br /> </marquee>
Contoh :

Tulisan sobat disini


Tulisan berjalan tetapi berhenti kalau dibayangi cursor
<marquee onMouseOver=this.stop() onMouseOut=this.start()>Tulisan sobat disini </marquee>
Contoh :
Tulisan sobat disini

Tulisan berjalan ke kanan
<marquee behavior="scroll" direction="right">Tulisan Tulisan sobat disini </marquee><br />
Contoh :
Tulisan Tulisan sobat disini


Tulisan dapat memantul
<marquee width="300" behavior="alternate"> Tulisan sobat disini </marquee>
Contoh :
Tulisan sobat disini

Tulisan Bouncing around
<marquee behavior="alternate" direction="up" width="200" height="50"><br /> <marquee direction="right" behavior="alternate"> Tulisan sobat disini </marquee><br /> </marquee><br />
Contoh :

Tulisan sobat disini


Setelah sobat blogger Copy kode tersebut, jangan lupa, mengganti kalimat "Tulisan sobat disini" dengan kalimat yang sobat blogger inginkan. Terima Kasih atas kunjungannya, dan semoga tutorial blog ini ada mamfaatnya.

1. Edit Post menggunakan HP atau Handphone
2. Edit Post dan merubah Lokasi.

Cara membuat Back to Top:

• Login dulu di akun blog sobat
• Di bagian Dashbor, Klik Design
• Klik Add a Gadget dan HTML Java Script
• Paste kode berikut dan masukkan di HTML Java Script

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar"></a>

• Simpan

Keterangan:
Ganti Tulisan URL Gambar dengan URL gambar yang sobat miliki.
kalau sobat blogger tidak memiliki gambar, sobat blogger bisa menggunakan gambar di bawah ini.




Url Gambar : http://i1179.photobucket.com/albums/x384/RinjaniLovers/Back%20to%20Top/Back2Top.gif



Url Gambar : http://i1179.photobucket.com/albums/x384/RinjaniLovers/Back%20to%20Top/Arrow.gif



Url Gambar : http://i1179.photobucket.com/albums/x384/RinjaniLovers/Back%20to%20Top/RinjaniLovers13.jpg



Url Gambar : http://i1179.photobucket.com/albums/x384/RinjaniLovers/Back%20to%20Top/RinjaniLovers5.jpg



Url Gambar : http://i1179.photobucket.com/albums/x384/RinjaniLovers/Back%20to%20Top/RinjaniLovers2.jpg



Url Gambar : http://i1179.photobucket.com/albums/x384/RinjaniLovers/Back%20to%20Top/RinjaniLovers4.jpg



Url Gambar : http://i1179.photobucket.com/albums/x384/RinjaniLovers/Back%20to%20Top/RinjaniLovers3.jpg



Url Gambar : http://i1179.photobucket.com/albums/x384/RinjaniLovers/Back%20to%20Top/RinjaniLovers1.jpg

Ketika Rinjani Lovers Membuka Google Webmaster Tools, Di bagian Diagnostik ( Galat Perayapan ) di temukan sebuah peringatan " Dibatasi oleh robots.txt ". Di situ terdapat tiga Halaman URL yang  Dibatasi oleh robots.txt.

Apakah yang di maksud dengan galat URL dibatasi oleh robots.txt itu?
Artinya Google tidak bisa melakukan perayapan URL Blog karena adanya pembatasan robots.txt.

Apa yang menyebabkan URL dibatasi oleh robots.txt?
Yang menyebabkan hal ini terjadi adalah :

1. Robot.text kita melakukan pembatasan Googlebot sepenuhnya
2. Robot.text kita melakukan pembatasan akses ke direktori letak URL tersebut
3. Robot.text kita melakukan pembatasan akses ke URL tertentu

Jadi intinya, robot.txt kta secara khusus telah mencegah Google untuk merayapi URL tersebut.

Apakah kasus yang seperti ini termasuk Galat? Tidak. URL dibatasi oleh robots.txt bukan termasuk dalam kategori Galat

Bagaimana Cara mengatasi URL dibatasi oleh robots.txt?
Sesuai dengan keterangan Google Webmaster Tools, kita tidak perlu memperbaiki hal tersebut. Kalau sobat blogger kurang yakin klik disini untuk membaca langsung keterangan dari Google.

Semoga Informasi yang singkat ini mengurangi kekhawatiran sobat blogger. Jangan lupa tinggalkan pesan atau komentar pada kolom yang tersedia.

Cara membuat Footer Navbar sebagai berikut:

• Silahkan sobat blogger login di http://www.blogger.com/
• Di bagian Dasboard sobat klik Layout
• Klik Edit HTML (Back up terlebih dahulu template sobat)
• Kasih tanda centang pada Expand Widget Template
• Cari kode ]]></b:skin> dan paste kode berikut di atas kode ]]></b:skin>

#navbar-footer a {
color: #000;
font-weight:bold;
}

#navbar-footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #fff;
width: 100%;
left: 0px;
text-align: left;
color: #000;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}

• Kalau sobat sudah melakukan langkah di atas, Cari kode </body> dan letakkan kode berikut setelah kode </body>

<div id='navbar-footer'>
<p align='center'>
<a href='http://crack4rt.blogspot.com/'>Crack4rt</a> © Januari 2012<br/>Template Designed by <a href='http://crack4rt.blogspot.com/' target='new'>MuhammadIbnuh</a> | on <a href='http://www.blogger.com/' target='new'>Blogger Templates</a></p>
</div>

• Lakukan Preview sebelum sobat klik save

Tambahan:
Tulisan yang berwarna Orange yang terdapat pada kode kedua, silahkan sobat blogger sesuaikan sendiri.

• Log In di http://www.blogger.com/
• Klik Menu Rancangan, lalu pilih Edit HTML.
• Kasih tanda Centang pada Expand Widget Template
• Pilih salah satu di antara kedua kode yang ada di bawah ini:

Kode Pertama :

    <a href='javascript:window.print()' title='Print this Page'><img src='http://i785.photobucket.com/albums/yy131/djnand/print.gif'/></a> <script type='text/javascript'>    var authorId = &quot;C7AAB579-3D36-4A37-B7A1-0863E2F39F4B&quot;;    var pageOrientation = &quot;0&quot;;    var topMargin = &quot;0.5&quot;;    var bottomMargin = &quot;0.5&quot;;    var leftMargin = &quot;0.5&quot;;    var rightMargin = &quot;0.5&quot;;    </script>

Hasil yang akan di tampilkan oleh kode pertama seperti ini :  


Kode Kedua : 

<a href="javascript:window.print()"><img src="http://i785.photobucket.com/albums/yy131/djnand/iconprint.png" alt="print this page" border="0"/> Print This Page</a>

Hasil yang akan di tampilkan oleh kode kedua seperti ini :  Print This Page

• Letakkan salah satu di antara kedua kode tersebut setelah<data:post.body/> atau <p><data:post.body/></p>
• Klik Simpan

Tambahan :
Kalau terdapat dua kode <data:post.body/> pada blog sobat, letakkan kode tersebut pada kode yang kedua

Cara Membuat Related Post atau Cara Pasang Related Post:

• Sobat blogger login dulu di blog sobat
• Di bagian dashboard--> Klik Layout- -> Klik Edit HTML
• Kasih tanda centang pada Expand Widget Template
• Copy kode berikut :

<!--Related Post javascripts start from here-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
<!--Related Post javascripts End here-->

• Paste kode tersebut setelah kode <data:post.body/> (Kalau sobat blogger sudah memasang fitur Read More, Sobat blogger harus paste kode tersebut setelah kode Read More)
• Save Template sobat.

Cara menghilangkan tulisan “Showing posts with label ……... Show all posts” di blog:

• Silahkan sobat Log in di blog sobat
• Di bagian Dashboard sobat klik layout dan klik Edit HTML
• Kasih tanda centang pada Expand Widget Template. Kalau sobat tidak kasih tanda centang, maka kode yang akan di cari tidak akan dapat ditemukan.
• Cari kode berikut:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if> </b:includable> 

• Kalau sobat blogger sudah menemukan kode tersebut, Hapus kode itu dan ganti dengan kode di bawah ini

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

• Simpan template sobat.

Cara Ganti Font, Ukuran dan Warna Komentar blog:

• Log in dulu di http://www.blogger.com/
• Di bagian Design, klik Edit HTML
• Cari kode /* Variable definitions
• Kalau sobat blogger sudah menemukan kode tersebut, letakkan kode berikut tepat di bawahnya

 <Variable name="sscommentfont" description="Comment Font" type="font"
         default="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif"/>   
     <Variable name="sscommentcolor" description="Comment Color" type="color" default="#000000" value="#000000"/>

• Selanjutnya, cari kode yang seperti ini /* Comments --------- */
• Di bagian bawah kode tersebut, letakkan kode berikut

• Simpan Template sobat

Untuk langkah selanjutnya, silahkan sobat klik Template Designer. Di bagian "Advance" akan muncul Settingan untuk komentar. Perhatikan Gambar di bawah ini.


Dari gambar terebut, terlihat setting untuk Font komentar dan warna tulisan komentar, Silahkan sobat sesuaikan tampilan komentar blog sobat dari situ. Bagaimana Hasilnya? Silahkan sobat blogger memberikan komentar melalui kolom komentar di bawah ini, akan terlihat hasil dari modifikasi font, ukuran dan warna komentar

Cara hapus Subscribe to: Posts (Atom):

• Login ke Blogger
• Klik menu Layout dan Edit HTML
• Kasih tanda centang pada "Expand Widget Template"
• Lalu cari kode di bawah ini: 

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

• Kalau sudah ketemu, hapus kode tersebut lalu klik Preview
• Kalu tuisan Subscribe to: Posts (Atom) sudah hilang, klik Save Template

Cara menambahkan Automatic SEO for Images pada blog : 

• Login ke Blogger sobat di alamat http://www.blogger.com/ 
• Klik Rancangan dan Klik Edit HTML 
• Kasih tanda centang pada Expand Template Widget 
• Copy kode yang ada di bawah dan paste SEBELUM kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[ $(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$("img:not([alt])").attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$("img:not([alt])").attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

//]]>
</script>

• Simpan Template sobat.

Berikut ini tampilan dan kode dari masing-masing kotak pencarian :

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Click to go" type="submit"/></form>

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text" style="background: #ffffff; border: 2px solid #cccccc"/><input id="search-btn" value="Search" type="submit" style="background: #cccccc; border: 2px outset #cccccc; color: #000000; font-weight: bold;"/></form>

<form id="searchthis" action="/search" style="display:inline;" method="get"><input id="search-box" name="q" size="25" type="text" value="Enter search query"/><input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwuiEjSoYdWnYkJIfSlVJwaTIrHXUt-i7AX-oZQ6b-_NODMiied0dd_XD78OkTWaUGq29HjBjEcln0UFa8fwUDwN1g_mxc3H0imOYpBoLMB9tis5ruSBtfAlTnpJdasqthavc3bPtCYVI/s1600/magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/></form>

Copy salah satu kode dari kotak pencarian tersebut, letakkan kotak pencarian tersebut di kolom widget/gadget.

Postingan yang kali ini sobat blogger baca adalah tentang cara memasang gambar di sebelah kiri halaman blog. Postingan ini  Crack4rt  publikasikan karena kebetulan salah seorang dari rekan sesama blogger sempat bertanya melalui kolom komentar.
“gimana, cara menampilkan foto seperti gambar sampean n langsung terhubung ke facebook”
Sebenarnya, ada beberapa alasan sehingga blog ini memasang gambar tersebut di sebelah kiri :

• Pertama, karena saya ingin blog ini terlihat beda dengan blog-blog yang lain (Bukan mau pamer muka).
• Kedua, supaya pengunjung blog bisa berinteraksi secara langsung dengan saya melalui situs jejaring sosial Facebook.

Untuk membuat gambar tampil di sebelah kiri halaman blog, sudah pasti sobat blogger harus memiliki foto atau gambar yang akan ditampilkan.
Kalau sobat blogger sudah memiliki gambar, sobat Upload gambar tersebut ke PhotoBucket misalnya atau ke website-website penyimpanan gambar yang lain.
Kalau kedua hal itu sudah siap, ikuti langkan di bawah ini.

Cara menampilkan gambar di sebelah kiri halaman blog :

• Sobat Login dulu di blog sobat
• Pilih tata letak lalu klik Edit HTML
• Kasih tanda centang pada Expand Widget Template
• Copy kode berikut :

#trik_pojok {
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); }

• Paste kode tersebut sebelum kode ]]></b:skin>
• Selanjutnya, copy kode berikut :

<div id="trik_pojok"><br /><a href="http://www.facebook.com/#!/MuhammadSeptiRosidi"><br /><img src="URL GAMBAR" border="0" /></a><br /></div>

• Paste kode tersebut sebelum kode </body>
• Simpan Template sobat

Tambahan :
http://www.facebook.com/#!/MuhammadSeptiRosidi bisa di ganti dengan URL Facebook, URL Twitter, atau URL Blog sobat
Ganti URL GAMBAR dengan URL gambar sobat

1. Kita dapat meng-upload logo kita sendiri.
2. Kita dapat mengedit judul dan deskripsi blog kita
3. Kita dapat menambahkan hingga ke dua link langsung ke situs web atau blog kita
4. Kita dapat melihat data yang di ukur secara langsung untuk tampilan halaman harian dan bulanan dan estimasi data pengunjung.
5. Kita menerima lencana yang menyatakan bahwa blog atau situs kita bersertifikat dengan Alexa.
6. Kita dapat mengubah situs kita dengan kontak Information.
7. Data blog atau Situs kita diperbarui setiap hari bukannya bulanan.

1. Tambahan Swasta statistik.
2. Tambahan Situs Management.

Cara buat Menu Navigasi Horizontal :

• Silahkan Sobat blogger log in terlebih dahulu di blog sobat
• Klik Design dan klik Add a gadget.
• Copy kode yang ada di bawah ini dan paste pada kolom yang tersedia :

    <style>

    /*------ CSS3 Drop Down Menu By  Crack4rt ---------*/

    #rl-menu, #rl-menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

    #rl-menu {

    width: 960px;

    margin: 60px auto;

    border: 1px solid #222;

    background-color: #111;

    background-image: -moz-linear-gradient(#444, #111);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));

    background-image: -webkit-linear-gradient(#444, #111);

    background-image: -o-linear-gradient(#444, #111);

    background-image: -ms-linear-gradient(#444, #111);

    background-image: linear-gradient(#444, #111);

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

    -moz-box-shadow: 0 1px 1px #777;

    -webkit-box-shadow: 0 1px 1px #777;

    box-shadow: 0 1px 1px #777;

    }

    #rl-menu:before,

    #rl-menu:after {

    content: "";

    display: table;

    }

    #rl-menu:after {

    clear: both;

    }

    #rl-menu {

    zoom:1;

    }

    #rl-menu li {

    float: left;

    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;

    -webkit-box-shadow: 1px 0 0 #444;

    box-shadow: 1px 0 0 #444;

    position: relative;

    }

    #rl-menu a {

    float: left;

    padding: 12px 30px;

    color: #999;

    text-transform: uppercase;

    font: bold 12px Arial, Helvetica;

    text-decoration: none;

    text-shadow: 0 1px 0 #000;

    }

    #rl-menu li:hover > a {

    color: #fafafa;

    }

    *html #rl-menu li a:hover { /* IE6 only */

    color: #fafafa;

    }

    #rl-menu ul {

    margin: 20px 0 0 0;

    _margin: 0; /*IE6 only*/

    opacity: 0;

    visibility: hidden;

    position: absolute;

    top: 38px;

    left: 0;

    z-index: 9999;

    background: #444;

    background: -moz-linear-gradient(#444, #111);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#444, #111);

    background: -o-linear-gradient(#444, #111);

    background: -ms-linear-gradient(#444, #111);

    background: linear-gradient(#444, #111);

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);

    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    box-shadow: 0 -1px 0 rgba(255,255,255,.3);

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -ms-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    #rl-menu li:hover > ul {

    opacity: 1;

    visibility: visible;

    margin: 0;

    }

    #rl-menu ul ul {

    top: 0;

    left: 150px;

    margin: 0 0 0 20px;

    _margin: 0; /*IE6 only*/

    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

    box-shadow: -1px 0 0 rgba(255,255,255,.3);

    }

    #rl-menu ul li {

    float: none;

    display: block;

    border: 0;

    _line-height: 0; /*IE6 only*/

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    box-shadow: 0 1px 0 #111, 0 2px 0 #666;

    }

    #rl-menu ul li:last-child {

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;

    }

    #rl-menu ul a {

    padding: 10px;

    width: 130px;

    _height: 10px; /*IE6 only*/

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

    }

    #rl-menu ul a:hover {

    background-color: #0186ba;

    background-image: -moz-linear-gradient(#04acec, #0186ba);

    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

    background-image: -webkit-linear-gradient(#04acec, #0186ba);

    background-image: -o-linear-gradient(#04acec, #0186ba);

    background-image: -ms-linear-gradient(#04acec, #0186ba);

    background-image: linear-gradient(#04acec, #0186ba);

    }

    #rl-menu ul li:first-child > a {

    -moz-border-radius: 3px 3px 0 0;

    -webkit-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    }

    #rl-menu ul li:first-child > a:after {

    content: '';

    position: absolute;

    left: 40px;

    top: -6px;

    border-left: 6px solid transparent;

    border-right: 6px solid transparent;

    border-bottom: 6px solid #444;

    }

    #rl-menu ul ul li:first-child a:after {

    left: -6px;

    top: 50%;

    margin-top: -6px;

    border-left: 0;

    border-bottom: 6px solid transparent;

    border-top: 6px solid transparent;

    border-right: 6px solid #3b3b3b;

    }

    #rl-menu ul li:first-child a:hover:after {

    border-bottom-color: #04acec;

    }

    #rl-menu ul ul li:first-child a:hover:after {

    border-right-color: #0299d3;

    border-bottom-color: transparent;

    }

    #rl-menu ul li:last-child > a {

    -moz-border-radius: 0 0 3px 3px;

    -webkit-border-radius: 0 0 3px 3px;

    border-radius: 0 0 3px 3px;

    }


    </style>


    <ul id="rl-menu">
    <li><a href="#">Home</a></li>
    <li>
    <a href="#">Categories</a>
    <ul>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Graphic design</a></li>
    <li><a href="#">Development tools</a></li>
    <li><a href="#">Web design</a></li>
    </ul>
    </li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>

• Klik save

Tambahan :
Jangan lupa mengganti tanda # dengan Link blog sobat