CARA MEMBUAT MENU NAVIGASI HORISONTAL BERCABANG (DROP DOWN MENU)

Ikuti langkah berikut:

Masuk ke akun blogger> Dasbor > tata letak > Tambahkan gadget > pilih HTML/Javascript, kemudian masukkan kode berikut ini, selanjutnya SAVE dan lihat hasilnya

 <style>
    #menunavigasihorisontal {
        background: #848484;
        width: 100%;
    
        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }

    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #2E9AFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav 

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
        left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li 

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav 

li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li 

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='#'>Home</a>
                </li>
                <li>
                  <a href='#'>Tentang Saya</a>
                </li>
                <li>
                  <a href='#'>Contact</a>
                     <ul>
                        <li><a href='#'>Sub Halaman 1</a></li>
                        <li><a href='#'>Sub Halaman 2</a></li>
                        <li><a href='#'>Sub Halaman 3</a></li>
                      </ul>
                </li>
                <li>
                  <a href='#'>Daftar Isi ▼</a>                 <ul> 
                    <li><a href='URL'>Sub Menu 1</a></li> 
                    <li><a href='Url'>Sub Menu 2</a></li> 
                    <li><a href='Url'>Sub Menu 3</a> 
                   <ul> 
                    <li><a href='#'>Sub Sub Menu 1</a></li> 
                    <li><a href='#'>Sub Sub Menu 2</a></li> 
                    <li><a href='#'>Sub Sub Menu 3</a></li> 
                  </ul> 
                  </li> 
                  </ul>             </li>

          </ul> 
        </div>

Read More

Kumpulan Artikel Penting

Jika ingin memasukkan gambar dari koleksi foto di komputer, pilih upload > Pilih file > cari di

Kunjungi Link berikut:
Cara Menghasilkan Uang Dari Blog
Cara Memasang Banner Iklan Pada Blog Blogger
 Cara Memasang Banner Iklan Dengan Mudah
 Cara Mudah Membuat Slide Show Foto di Blog
Cara Memasang Widget Slide Show Photo Pada Sidebar Blog
Cara Atur Panjang Cuplikan Widget Popular Posts
Cara membuat banner iklan bergantian otomatis di Blogspot
Penawaran Review Produk Di Blog Belajar Search Engine
Gambar Otomatis Berubah Saat Tersentuh Mouse 
Cara Membuat Gambar Berubah Saat Di Sorot Cursor Pada Blog
Cara Membuat Background Entri Berubah Warna Saat Disentuh Mouse
Membuat Bingkai (Kotak) Untuk Sebuah Tulisan 
Modifikasi Tampilan Widget Label Cloud Blogger
Cara Membuat Bingkai/Kotak Pada Sidebar Membuat border/kotak bigkai pada postingan
Membuat Border dan Kotak Pada Postingan
Cara Membuat Frame/Kotak Sidebar
Cara Membuat Bingkai/Kotak Pada Sidebar
Cara Membuat Bingkai Untuk Widget Yang Terdapat Di Area Footer Halaman Blog
Cara mudah buat label berbingkai 
Modifikasi Tampilan Widget Label Cloud Blogger
Membuat Box atau Bingkai Judul Posting
Cara Memberi Frame/Bingkai Pada Artikel Blog
Membuat Menu Vertikal Keren di BLOG dengan CSS 2015
CARA MEMBUAT MENU VERTIKAL DI BLOGGER
CARA MEMBUAT MENU VERTIKAL DI BLOG
CARA MEMBUAT DROP DOWN MENU HORIZONTAL DI BLOG
Cara Membuat Menu Navigasi Horisontal Blog
Cara Membuat Menu Vertikal di Blog 
Cara Membuat Widget Entri Populer Menjadi Animasi Gambar Berputar
Cara Membuat Populer Pos Bergerak Dengan Animasi
Cara Membuat Entri Populer Dengan Animasi Berputar
Cara Membuat Entri Populer Blog Dengan Animasi Bergerak
Kumpulan Efek Efek Blog Terlengkap
Cara Membuat Menu Slide Indah Di Atas Header

Read More

Membuat Menu Vertikal di Blogspot

 Cara Membuat Menu Vertikal di Blog
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh. 

Kodenya berikut ini:
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

blue1.gif dan blue2.gif merupakan kode warna yang bisa diganti.
Selanjutnya:
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
 

 <ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://about-tutorials.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Selesai dan SAVE.

Read More

Membuat Entri Populer Bergerak Dengan Animasi

Langkah-langkahnya:
1. Masuk ke Dasbor
2. Pilih Template
3. Klik Edit HTML
4. Cari kode di bawah ini (Gunakan CTRL+F untuk mempermudah pencarian)

]]></b:skin>

5. Copy kode di bawah ini, lalu pastekan di bawah kode ]]></b:skin>

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style

6. Klik Simpan Template
7. Pilih Tata Letak
8. Klik Tambah Gadget (pilih yang mana saja)
9. Copy Paste Code Berikut ini :

<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
  
}

#PopularPosts1 ul {
width:250px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;  
}

#PopularPosts1 {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

.tags span,
.tags a {
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script> <script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></scrip

10. Klik tombol Save untuk merekam Gadget.
11. Lihat tampilan blog

Read More

Membuat Bingkai (Kotak) Untuk Sebuah Tulisan

TULISAN ATAU GAMBAR
 Isi tks jika melebihi kotak ini akan muncul scroll bar
Lihat Scriptnya klik mode HTML



 

Read More