• Facebook Rocks

    Go to Blogger edit html and replace these slide 1 description with your own words. ...

  • Facebook vs Twitter

    Go to Blogger edit html and replace these slide 2 description with your own words. ...

  • Facebook Marketing

    Go to Blogger edit html and replace these slide 3 description with your own words. ...

  • Facebook and Google

    Go to Blogger edit html and replace these slide 4 description with your own words. ...

  • Facebook Tips

    Go to Blogger edit html and replace these slide 5 description with your own words. ...

Cara memasang related post wordpress tanpa plugin

Memasang related posts pada blog WordPress akan sangat mudah dilakukan jika pakai plugin,istilahnya tinggal colok saja maka sudah selesai.Namun tahukah kamu bahwa semakin banyak plugin maka resource yang dibutuhkan blog kamu ketika diakses akan semakin besar.Terutama plugin related post ini,banyak jasa shared hosting  menghimbau untuk menggunakan cara selain plugin.Mungkin tidak begitu terasa jika lalulintas blog kamu masih rendah,akan tetapi tujuan kebanyakan blogger seperti kita adalah target lalulintas yang tinggi.
Namanya saja shared hosting atau hosting berbagi (kalau tidak salah) :D yaitu satu server yang dipecah pecah untuk banyak domain.Jadi wajar saja jika sang pengusaha teriak terik jika blog kamu terlalu banyak memakan resource dan mengalahkan yang lain.Lainlagi jika blog kamu menggunakan dedicated sserver atau VPS pribadi khusus untuk sendirian.

Baiklah,jika blog wordpress kamu masih nitip server kepada shared hosting ada baiknya mengganti plugin related post ini dengan yang bukan plugin.Caranya sebenarnya juga sama mudahnya,hanya tinggal copas codenya selesai.
Diharapkan akses blog menjadi lebih ringan lagi dengan memasang related post tanpa plugin.

Caranya ,login kedalam admin area blog kamu > Appearance > Editor
Cara memasang related post wordpress tanpa plugin
Setelah kamu sudah berada didalam halaman  Editor ,kamu akan melihat barisan code didalam sebuah text area,code tersebut adalah style.css.Pada bagian bawah sendiri didalam barisan code css tersebut,pastekan code berikut;

#relatedpost a{font-size: normal;}
#related_posts ul li:hover{background : #f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0o9SS2UZ108TG8mwSqgBIQfwuTXsJaefPFp8iCwjI-jVxv6wmiQK5IjB8D-ZQ3dXudJzjS02RTru25QaZt0iCHqt-rZjcANBqFq0tnYroMGn2Ogkovd7IHuWxyUu3SNwGIG-Mw6BqV3E/") no-repeat center left;}
#related_posts h4{font-size: 15px;font-weight: bold;color: darkred;border-top: 1px solid #aaa;}
#relatedcontent { overflow:auto; margin:0px 0px;}
#relatedthumb img{ width:60px;height: 60px;}
#related_posts ul li{list-style: none;background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0o9SS2UZ108TG8mwSqgBIQfwuTXsJaefPFp8iCwjI-jVxv6wmiQK5IjB8D-ZQ3dXudJzjS02RTru25QaZt0iCHqt-rZjcANBqFq0tnYroMGn2Ogkovd7IHuWxyUu3SNwGIG-Mw6BqV3E/") no-repeat center left;margin:0;padding:5px 20px;border-bottom: 1px dotted #ccc;}
#related_posts ul li a{text-decoration:none;display:block;}

Simpan dengan klik button update file!

Jika sudah berhasil diupdate,sekarang perhatikan pada navigasi disamping kanan.Temukan tautan Single Post /single.php.Single.php adalah barisan code yang berfungsi untuk menampilan konten blog pada halaman postingan.Tepatnya buka single.php dengan tujuan untuk meletakkan code related post wordpress tanpa plugin ini tepat dibawah artikel.

Cara memasang related post wordpress tanpa plugin

Setelah berada di halaman editor single.php,cari code berikut atau semacamnya

<?php the_content('Read more...'); ?>

Kemudian pastekan code PHP berikut tepat dibawah/setelah nya.

<!-- start related post -->
    <?php $orig_post = $post;
    global $post;
    $categories = get_the_category($post->ID);
    if ($categories) {
    $category_ids = array();
    foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
    $args=array(
    'category__in' => $category_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=> 15, // Number of related posts that will be shown.
    'caller_get_posts'=>1
    );
    $my_query = new wp_query( $args );
    if( $my_query->have_posts() ) {
    echo '<div id="related_posts"><h4>Baca juga artikel yang terkait:</h4><ul>';
    while( $my_query->have_posts() ) {
    $my_query->the_post();?>
    <div id="relatedpost">
    <li>
<a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    </li>
    </div>
    <?
    }
    echo '</ul></div>';
    }
    }
    $post = $orig_post;
    wp_reset_query(); ?>
<!-- end related post -->

Update file single.php!
Keterangan: Lihat pada sourcecode related post diatas,perhatikan angka 15 yang berwarna merah,itu adalah jumlah artikel terkait yang ditampilkan.Ubahlah jika kamu menginginkan lebih banyak atau sedikit.
Selesai!

Cara membuat smooth scrolling blogspot

Smooth scrolling adalah suatu fitur navigasi blog yang berguna untuk kembali ke atas dengan sekali tekan tombol pada halaman blog dengan lembut (smooth).Untuk fungsi kembali keatas "smooth" ini akan menggunakan javascript yang cukup sederhana dan sangat mudah diterapkan.
Dengan fungsi smooth scrolling,maka blog anda akan semakin kelihatan prof layaknya situs situs yang sudah ternama.

Kamu tertarik?.......ikuti lagkah langkahnya berikut:

Cara pemasangan smooth scrolling untuk template blog blogger

Pertama,masuk kedalam edit HTML template blogspot kamu lalu paste code CSS berikut sebelum tag  ]]</b:skin>
#go-to-top {
padding:1px;
position:fixed;
bottom:0px;right:0px;
cursor:pointer;
}
#go-to-top img
{
height:40px;
width:35px;
border:none;
padding-right:5px;
}

Kemudian pastekan javascriptnya berikut sebelum tag </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' type='text/javascript'></script>
<script language='javascript' type='text/javascript'>
$(document).ready(function(){
    // hide
    $(&quot;#go-to-top&quot;).hide();
      // fade in
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() &gt; 100) {
                $(&#39;#go-to-top&#39;).fadeIn();
            } else {
                $(&#39;#go-to-top&#39;).fadeOut();
            }
        });

        // scroll to top
        $(&#39;#go-to-top img&#39;).click(function () {
            $(&#39;body,html&#39;).animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});
</script>

Catatan: jika code <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' type='text/javascript'></script> sudah ada pada template kamu,maka tak perlu dipakai.

Masih pada edit HTML,sekarang temukan tag </body> dan pastekan code berikut ini sebelum </body>

<a href='#' id='go-to-top'><img alt='Back to Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihKwYkNBMqH-ehKysJSRTtDDsuAfR6cyMFtQPwMeYBEBih2U3rzyGcYLQP_lvu-9FsKYNi9rDQqa6xXiNHg0o13SlKF6T5UzC39xjqluvbkhbb6d9zLQw9ROEbc0lWaXk8EAK_RIzHAMsl/'/></a>

Simpan template kamu!

Linkwithin hanya tampil dihalaman postingan

Linkwithin adalah sebuah situs pihak ketiga penyedia fungsi random related post dengan thumbnail untuk sebuah blog.

Related post dengan thumbnail dari linkwithin ini banyak diminati para blogger untuk melengkapi navigasi blog mereka.Keistimewaan dari linkwithin ini selain ringan dan tidak terlalu ngasih beban loading blog,artikel terkait yang ditampilkan adalah acak(random) setiap kali direload.
Dengan fungsi random ini ,kesempatan postingan yang sudah lama untuk dikunjungi orang semakin besar.

Navigasi semacam ini sangat dibutuhkan oleh blog, karena sangat penting untuk meningkatkan pageviews tiap halaman blog yang ada.
Kamu tertarik,jika iya silahkan teruskan membaca.Sebab ini special tips untuk menampilkan widget random related post dari linkwithin di blog kamu.

Cara pemasangannya sangat mudah,hanya tinggal registrasi dan melalui beberapa step step yg ada.Setelah kamu melakukan wizard instalasinya ,maka related post linkwithin  akan otomatis muncul dibawah setiap artikel.
Jika kamu tertarik dan belum pernah menggunakan fasilitas ini,silahkan registrasi gratis dan follow step di http://www.linkwithin.com/

Namun,terkadang sebagian blogger tidak suka related random thumbnail linkwithin ini muncul juga dimana mana selain dihalaman postingan.Walaupun menggunakan autoreadmore,related post tetap otomatis muncul dibawah semua artikel.Efek sampingnya halaman homepage blog akan menjadi sangat berat,apalagi jika jumlah postingan yang ditampilkan semakin banyak.

Bagi kamu yang menginginkan linkwithin hanya muncul dihalaman postingan saja,maka beginilah caranya (untuk blogspot).Hal inilah yang saya sebut tadi dengan "Special".

Pertama dasboard > masuk halaman Rancangan > lalu cari widget linkwithin yang terinstal otomatis didalam HTML/javascript widget blogspot.

Klik edit pada widget HTML/javascript dimana script linkwithin itu berada > copy dan pastekan kedalam notepad dan simpan dulu.

Code dari linkwithin tersebut seperti ini;

<script>
var linkwithin_site_id = 1221271;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>


Setelah script tersebut kamu simpan pada notepad,hapuslah widget linkwithin tadi.Kemudian langsung masuk ke halaman Edit HTML dan centang expand template widget.

Sekarang cari tag </body> lalu pastekan code linkwithin tadi yang kamu simpan didalam notepad tepat diatas tag </body> tersebut.Eitt,,,,masih belum selesai,jangan disimpan dulu sebelum kamu menambahkan tag kondisional dari blogger.

Jika sudah ditambahkan maka lengkapnya akan seperti dibawah ini,code warna merah itulah tag kondisional yang perlu ditambahkan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
var linkwithin_site_id = 1221261;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
</b:if>


Simpan template kamu!
DONE!

Keterangan: Code yang berwarna merah itulah yang berfungsi agar related random posts linkwithin hanya tampil dihalaman postingan saja.Tahukah apa code tersebut?,,,Namanya adalah conditional tag dari blogger yang berguna untuk mengkondisikan elemen elemen tertentu untuk ditampilkan.

Cara paling jitu agar artikel tidak bisa dicopypaste

Budaya copas atau copypaste blog sudah ada sejak mulai maraknya dunia ngeblog.Sebagian blogger banyak yang tidak senang tindakan seperti ini,apalagi copas mentah mentah bahkan tanpa memberikan sumbernya.Lebih kesal lagi jika blog yang copas justru mendapat posisi bagus di mesin pencari,sedangkan yang dicopas justru ada di belakangnya.
Sekedar himbauan saja bagi yang masih mencari artikel dengan copas mentah mentah,lebih baik diedit ulang atau disusun dengan bahasa sendiri agar menjadi lebih unik.Dengan cara demikian,blog anda masih mendapat nilai dimata mesin pencari agar tidak kena sensor.
Berikut bagi kamu yang tidak suka blognya dicopas,ada cara yang lumayan aman sehingga kemungkinan dicopas sangat kecil.Pendek kata tidak bisa dicopas lagi baik dengan ctrl +c + ctrl+V ,matikan javascript browser.
Agar blog benar benar tidak bisa dicopas,harus memiliki 3 perlindungan khusus terhadap bagian khusus pula kwakkwakkwak...
Langkah pertama
Cari tag <body> didalam template HTML blog kamu,setelah ketemu maka ganti dengan code berikut.

<body oncontextmenu='return false;' onkeydown='return true;' onmousedown='return true;'>

Dengan code diatas blog kamu sudah tidak bisa diklik kanan agar computer  mendapat opsion. Namun jika javascript browser dimatikan,ternyata klik kanan bisa berfungsi artinya blog masih bisa dicopas.Maka dari itu kamu perlu melanjutkan kepada langkah kedua berikut.
Langkah kedua
Cari tag </body> didalam template blog kamu kemudian pastekan code berikut tepat diatasnya:

<noscript>
    <div id="js-message">Anda harus mengaktifkan JavaScript browser untuk melihat halaman ini,aktifkan dulu lalu <a expr:href='data:blog.postUrl'>Klik disini untuk melanjutkan!</a></div>
</noscript>

Paste code CSS berikut sebelum tag ]]</b:skin>

#js-message {position:fixed !important;position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:999;background-color:black;padding-top:120px;font:bold 40px Arial,Sans-Serif;color:red;text-align:center;
}

Sekarang skenarionya apabila javascript browser dimatikan,maka akan muncul sebuah pesan "Anda harus mengaktifkan JavaScript browser untuk melihat halaman ini,aktifkan dulu lalu Klik disini untuk melanjutkan!" jadi yang muncul bukan halaman postingan.
Dengan cara tadi otomatis artikel tetap  tidak akan bisa dicopas,lha wong yang muncul halaman yang berisi peringatan saja.

Simpan template kamu!

Sampai disini ternyata artikel masih bisa dicopas,jika si tukang copas tadi masih belum puas yaitu dengan cara melalui feed blog.

Langkah ketiga
Lalu,setel feed blogspot kamu dengan cara masuk setelan > feed situs > izinkan feed blog > pada pilihan dropdown pilih "singkat" lalu simpan.

Saya kira sekarang si tukang copas sudah malas untuk mencari cara lain untuk copas blog kamu lagi.
Benarkah sudah benar benar tidak bisa di copy paste?,,,,,,
Jawabannya: MASIH BISA!..........
Lho kok,,katanya sudah sangat aman?.........

Tidak ada cara yang benar benar aman,ada saja jalan lain.Disini kita hanya berusaha untuk meminimalisir penggunaan caranya saja.Walaupun masih bisa,kemungkinan para copaster malas untuk menembus  4 lapisan tersebut.
Dengan Ctrl+U ternyata masih bisa melihat sumber code halaman blog,kemudian menyeleksi sebagian yang ingin dicopas.

Jika kamu membaca artikel sampai dibagian ini,saya yakin kamu adalah orang yang sangat antusias untuk selalu rajin belajar menambah wawasan.
Cara agar artikel tidak bisa dicopypaste
Jadi,sekarang kamu bukan saja bisa meminimalisir kemungkinan artikel blog kamu dicopas,namun juga bisa dengan mudah memasuki sumber artikel untuk dicopas walaupun sudah dilindungi sampai tujuh lapis.
Sebenarnya kalu copaster mau sadar,artikel copas sangat sulit untuk bersaing memperebutkan serp untuk blog baru.Dan untuk blog yang sudah banyak pengunjung ,artikel copas justru akan memperpuruk blog tsb keposisi bawah.

Ingat!,,jangan copas..........lebih baik menulis ulang dengan bahasa sendiri (rewrite) masih bisa menjadi lebih baik.

Okelah,sampai disini dulu tips tentang melindungi artikel hingga tujuh lapis.

Happy Blogging!

Cara memasang related post dibawah postingan

Setelah postingan kemarin yaitu Cara memasang related post di sidebar,kali ini saya share bagaimana jika ingin menerapkan related post pada blogger ini seperti pada umumnya yaitu dibawah postingan.
Sebenarnya source code yang digunakan sama,hanya saja peletakan generatornya saja yang berbeda.Artikel terkait berikut saya jamin pasti keren,simple dan tidak terlalu membebani loading blog.

Cara pemasangan script related post ini kamu bisa ikuti langkah mudah berikut.

Login > Rancangan >edit HTML > centang expand template widget (tampilan blogger lama),jika memakai tampilan blogger baru pilih option > Template > edit HTML >centang expand template widget.

Paste source code javascript berikut sebelum tag </head>
<script src='http://artikel-luarbiasa.googlecode.com/files/RLPproject.js' type='text/javascript'/>


Langkah berikutnya atau yang kedua,paste code CSS berikut sebelum code ]]</b:skin>
#related-posts {
overflow: hidden;
width : 550px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
margin-bottom:10px;
}
#related-posts h3 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts ul { border : medium none;
margin : 10px;
padding : 0;
}
#related-posts a:hover{
text-decoration: underline
}
#related-posts ul li { display : block;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0o9SS2UZ108TG8mwSqgBIQfwuTXsJaefPFp8iCwjI-jVxv6wmiQK5IjB8D-ZQ3dXudJzjS02RTru25QaZt0iCHqt-rZjcANBqFq0tnYroMGn2Ogkovd7IHuWxyUu3SNwGIG-Mw6BqV3E/) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Sebelumnya kamu cari dulu tag <data:post.body> urutan yang kedua,maksudnya biasanya tag tersebut ada 2 di dalam template.Jadi cari yang kedua,atau bisa juga kamu paste setelah <p class='post-footer-line post-footer-line-1'>.Gunakan CTRL+F untuk mencari tag tag diatas.
Kalau sudah ketemu,paste code related post berikut persis setelahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<h3>Artikel terkait: </h3>
<b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Keterangan: Lihat angka 5 yang saya kasih warna merah,itu adalah jumlah artikel terkait yang ditampilkan.Rubah sesuai dengan keinginan kamu.

Simpan template Kamu!

DONE!

Cara memasang related post di sidebar

Pada umumnya related post (artikel terkait) itu dipasang setelah artikel,namun kadang kurang disukai karena page blog akan terlalu memanjang kebawah.Jika kamu memiliki selera menampilkan related post pada sidebar blog kamu ,boleh memakai cara yang sederhana dan mudah berikut ini.
Ingat aplikasi related post ini untuk blogspot/blogger lho,kalau di wordpress mungkin ada caranya tersendiri.
Demo gak usah jauh jauh,saya pakai juga diblog ini kok,lihat disebelah! :p

Berikut langkah langkahnya memasang artikel terkait di sidebar blog blogspot.

Buka rancangan > edit HTML > Cari kode </head> lalu paste source code javascript berikut diatasnya.

<script src='http://artikel-luarbiasa.googlecode.com/files/RLPproject.js' type='text/javascript'/>

Lalu cari code berikut ini dengan CTRL+F agar cepat dan mudah

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>

Jika sudah ketemu seperti diatas Lalu cari angka 15 atau yang saya kasih warna merah,itu adalah jumlah list artikel terkait yang ingin kamu tampilkan.Ubah lah sesuai dengan keinginan kamu.

Simpan template!

Masih ada lagi yang terakhir,kalau template sudah disimpan lalu masuklah kedalam Design/Rancangan > Add new widget > HTML/javascript > pastekan code berikut dan kasih judul artikel terkait atau apalah..

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>

Simpan widget!

DONE!

Cara mudah membuat navbar menu dropdown

Navbar atau alat navigasi pada sebuah blog, ada beberapa jenis dan sistem yang bisa dipakai.Jenis navigasi yang umumnya banyak  dipakai adalah jenis daftar horisontal biasa,horisontal dropdown,horisontal dropdown bertingkat,vertical biasa ataupun vertical bertingkat.


System dari codenya bisa menggunakan CSS murni dan bisa juga ditambahin fungsi javascript untuk mendapatkan efek tertentu seperti fade out,smooth dan lainnya.
Banyak sekali model menu bar ini yang bisa dikreasikan dengan javascript,namun pakailah metode sesuai dengan kebutuhan pokok blog anda.
Sesuaikan dengan desain dari template,misalnya template anda berukuran lebih sempit namun ingin menambahkan daftar menu yang lebih banyak maka anda bisa memilih menudropdown atau menu dropdown bertingkat.

Baiklah,disini saya akan menambahkan satu masukkan untuk anda yaitu cara membuat menu dropdown horizontal dengan jQuery (metode baru dalam pemakaian javaScript).
Cara ini tergolong cara yang paling sederhana dan mudah,namun terkesan elegan untuk hasil akhirnya.

Cara mudah membuat navbar menu dropdown
Syarat untuk memakai system jQuery ini salah satunya adalah dengan menambahkan suatu framework yang dikembangkan oleh jQuery.

Cara menambahkan menubar dropdown ala jQuery
Pertama  tambahkan dulu source jquery berikut kedalam template blogspot anda sebelum tag </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">

Catatan: Jika template anda sudah terdapat source jQuery ini,maka tidak perlu ditambahkan lagi.Itulah salah satu keistimewaan jQuery,jika ingin menambahkan fungsi yang lain tinggal menambahkan sedikit code saja (plugin jQuery).

Langkah yang kedua adalah menambahkan plugin  jQuery yang berfungsi sebagai fungsi dropdownnya.

Paste plugin jQuery  berikut sebelum tag </head> atau sebelum tag </body>

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function () {
    $('.menudd li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').slideDown(200);
    }, function() {
        $(this).children('ul').slideUp(200);
    });
});
//]]>
</script>

Langkah yang ketiga tambahkan style dari menu dropdownnya sebelum code ]]</b:skin>

.menudd{font:normal 14px;line-height:normal;text-transform:none;margin:0;padding:0px 0px;color:white;text-decoration:none;text-align:left}
.menudd ul{border:1px solid #536FA7;background-color:#3057A5;height:30px;line-height:30px;margin:0;padding:0px 0px}
.menudd li{list-style:none;margin:0px 0px;padding:0px 0px;color:white;float:left;display:inline;position:relative}
.menudd li a{display:block;margin:0px 0px;padding:0px 15px;color:white;text-decoration:none;font-weight:bold;line-height:30px;outline:none;border-left:1px solid #536FA7;border-right:1px solid #3B4D72}
.menudd li a:hover{background:#394F7B}
.menudd li ul{position:absolute;z-index:10;left:0px;top:100%;height:auto;margin:0px 0px;padding:0px 0px;width:200px;display:none}
.menudd li ul a{border-left:none;border-right:none;border-bottom:1px dotted #6F80A1;display:block}
.menudd ul li a:hover{background:#394F7B}
.menudd li ul li{float:none;display:block;width:auto}
.menudd li ul ul{top:0px;left:100%}
.menudd li a:focus{background-color:#4B67A1;border-left-color:#777;border-right-color:#555}
.menudd ul li a:focus{background-color:#4B67A1;border-top-color:#777;border-bottom-color:#555}
.menudd li a:hover,.menudd li:hover > a{background-color:#4B67A1}


Catatan: Anda bisa merubah style dengan warna atau gaya CSS kesukaan anda.

Langkah Yang terakhir pasang kerangka menu navigasi dropdown berikut kedalam template anda.
Anda bisa menempatkan kerangka menu navigasi dropdown ini sesuai dengan keinginan,misalnya dibawah header.Berikut kerangkanya;

<div class='menudd'>
    <ul>
        <li><a href='#'>HOME</a></li>

        <li><a href='#'>MENU1</a>
            <ul>
                <li><a href='#'>SubMENU1 Satu</a></li>
                <li><a href='#'>SubMENU1 Dua</a></li>
                <li><a href='#'>SubMENU1 Tiga</a></li>
                <li><a href='#'>SubMENU1 Empat</a></li>
                <li><a href='#'>SubMENU1 Lima</a></li>
            </ul>
        </li>
        <li><a href='#'>MENU 2</a>
            <ul>
                <li><a href='#'>subMenu Satu</a></li>
                <li><a href='#'>subMenu Dua</a></li>
                <li><a href='#'>subMenu Tiga</a>
                    <ul>
                        <li><a href='#'>submenu Tiga Satu</a></li>
                        <li><a href='#'>submenu Tiga Dua</a></li>
                        <li><a href='#'>submenu Tiga Tiga</a></li>
                        <li><a href='#'>submenu TIga Empat</a></li>
                        <li><a href='#'>submenu Tiga Lima</a></li>
                    </ul>
                </li>
                <li><a href='#'>MENU 3</a></li>
                <li><a href='#'>MENU 4</a></li>
            </ul>
        </li>
        <li><a href='#'>MENU 5</a>
            <ul>
                <li><a href='#'>Submenu 5 Satu</a></li>
                <li><a href='#'>Submenu 5 Dua</a></li>
                <li><a href='#'>Submenu 5 Tiga</a></li>
                <li><a href='#'>Submenu 5 Empat</a></li>
                <li><a href='#'>Submenu 5 Lima</a></li>
            </ul>
        </li>
    </ul>
</div>


Kemudian masukkan link link yang anda inginkan  kedalam kerangka tersebut.

Terakhir simpan template anda!
Catatan: disaat mengedit kerangka menu,jangan sampai ada code yang terhapus karena template akan error dan tidak akan diterima oleh blogger.