Cara Mengedit Template Blogger

Nih gue kasih caranya meng Edit template blog, ikuti langkah di bawah ini

1. Login ke account blogger kamu

2. Lalu pilih menu template

3. Pilih Edit html

4. Cari kode ]]></b:skin>

5. Lalu copy-paste CSS dibawah ini, letakkan tepat diatas kode ]]></b:skin>

CSS

#menujohanes{
    width: 100%; /* panjang menu */
    margin: auto; /* posisi menu auto */
    background: #fafafa; /* warna background */
    height: 49px; /*tinggi menu*/
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border: 1px solid #ddd;
    text-transform: uppercase; /* Huruf besar */
    box-shadow: 0px 3px 0px rgba(0,0,0,0.2);
    z-index: 99;}
    #menujohanes ul{
    list-style-type: none;
    z-index: 9;
    width: 1000px; /* panjang menu */
    margin: auto;}
    #menujohanes ul li{
    float: left;
    position: relative;
    padding: 12px;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
    #menujohanes ul li:hover{
    background:#557FFF; /* warna background ketika diarahkan*/
    box-shadow: 0px 3px 0px rgba(0,0,0,0.2);}
    #menujohanes ul li a:hover {
    color:#fafafa;} /* warna text ketika diarahkan */
    #menujohanes ul li a{
    color: #666; /* warna text */
    padding: 0 10px;
    line-height:25px;
    font-size:11px; /* ukuran text */
    display:block;
    text-decoration:none;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-shadow: 0px 2px 0px rgba(0,0,0,0.1);}
    #menujohanes ul li ul li{float: none;position: relative;}
    #menujohanes ul li ul{
    position: absolute;
    top:49px;
    left:0;
    display: none;
    box-shadow: inset 0 4px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
    width:150px;
    border-radius: 0px 0px 5px 5px;
    background: #fff;}
    #menujohanes ul li:hover > ul{display: block;}
    #menujohanes ul li ul li a{line-height:25px;}
    #menujohanes ul li ul li ul{
    position: absolute;
    top:0; left:150px;
    display: none;
    box-shadow:0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);
    border-radius:5px;
    width:150px;
    background: #fff;}
    #menujohanes ul li.selected{color: #000;border-left: 1px solid #ddd;border-right: 1px solid #ddd;}

6. Selanjutnya,copy-paste HTML dibawah ini diantara kode <body>...</body> tergantung anda ingin meletakan posisi menu ini.

HTML

<div id="menujohanes">
    <ul>
    <li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
    <li><a href="#">Download</a>
    <ul>
    <li><a href="#">Naruto</a>
    <ul>
    <li><a href="#">Episode 1</a></li>
    <li><a href="#">Episode 2</a></li>
    <li><a href="#">Episode 3</a></li>
    </ul>
    </li>
    <li><a href="#">Date A Live</a>
    <ul>
    <li><a href="#">Episode 1</a></li>
    <li><a href="#">Episode 2</a></li>
    <li><a href="#">Episode 3</a></li>
    </ul>
    </li>
    <li><a href="#">Devil Survivor2</a>
    <ul>
    <li><a href="#">Episode 1</a></li>
    <li><a href="#">Episode 2</a></li>
    <li><a href="#">Episode 3</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Contact</a>
    <ul>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Blogger</a></li>
    <li><a href="#">Google plus</a></li>
    </ul>
    </li>
    <li><a href="#">Multi sub</a>
    <ul>
    <li><a href="#">Episode 1</a>
    <ul>
    <li><a href="#">Episode 2</a>
    <ul>
    <li><a href="#">Episode 3</a></li>
    <li><a href="#">Episode 4</a></li>
    </ul>
    </li>
    <li><a href="#">Episode 5</a></li>
    </ul>
    </li>
    <li><a href="#">Episode 6</a></li>
    <li><a href="#">Episode 7</a></li>
    </ul>
    </li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Email</a></li>
    </ul></div>

*Ganti tanda pagar dengan url link,dan nama link'a

7. Setelah selesai, simpan,dan lihat hasinya.jika sudah berhasil,tahap selanjutnya adalah mengatur isi menu dan link url pada menu anda.

Setting HTML
1. Normal menu.

    Anime

    <li><a href="#">Anime</a></li&gt

2. Drop down menu.

    Download

    <li><a href="#">Download</a>
    <ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    </ul>
    </li>

3. Sub menu.

    Download

    <li><a href="#">Download</a>
    <ul>
    <li><a href="#">Naruto</a>
    <ul>
    <li><a href="#">Episode 1</a></li>
    <li><a href="#">Episode 2</a></li>
    <li><a href="#">Episode 3</a></li>
    </ul>
    </li>
    </ul>
    </li>

4. Multi Sub menu.

    Download

    <li><a href="#">Download</a>
    <ul>
    <li><a href="#">Naruto</a><ul>
    <li><a href="#">Anime</a><ul>
    <li><a href="#">Episode 2</a></li>
    <li><a href="#">Episode 3</a></li>
    </ul>
    </li>
    <li><a href="#">Episode 2</a></li>
    <li><a href="#">Episode 3</a></li>
    </ul>
    </li>
    </ul>
    </li>

Selesai dah. Dan selamat mencoba.

Magazine Blog

Cara Mengedit Template Blogger

2 Komentar untuk "Cara Mengedit Template Blogger"

Cara Mengedit Template Blogger

Share :

Previous

Next

2 Komentar untuk "Cara Mengedit Template Blogger"