jasa View all

NEWS View all

Tips Kopi isi kontent blogger pasti mudah

 Tujuan postingan saya adalah memberi tahu Blogger baru bahwa penyebab semua postingan anda dapat dicuri dan di publish oleh blog lain adal

Youtube merupakan rajanya tempat berbagi video. Fasilitas yang di

Bagi seorang blogger, tols yang bermanfaat tentu saja harus dimaksim

LATEST NEWS

Tips Kopi isi kontent blogger pasti mudah

DOWNLOADER DI APLIKASI ANDROID DENGAN TUBEMATE YOUTUBE

Cara Bikin Formulir Online dengan Google Forms

Cara Menempatkan Google Map di Postingan Blog

Cara Menjadikan Blog Responsive Template Default Blogger

Cara Blogspot Sudah Bisa Menggunakan Protokol HTTPS

Cara Bikin Privacy Policy dan Cara Pasangnya di Blog

OPINI View all

Tips HTML Logo Bank 2

a/n TokoOnlineNo. 123-456-789 <p style="text-align: center;"></span> <span style="color: #000000;"><a href="http://www.klikbc

Tips Daftar BBM Resmi Hadir untuk PC, Begini Cara Pakainya!

22087 Mungkin ini adalah salah satu momen yang ditunggu-tunggu oleh banyak orang, menggunakan BBM melalui PC. Sehingga k

jasa View all

Tips Kopi isi kontent blogger pasti mudah

 Tujuan postingan saya adalah memberi tahu Blogger baru bahwa penyebab semua postingan anda dapat dicuri dan di publish oleh blog lain adal

FEATURE View all

Tips Memasang Widget Tombol Join This Site Tanpa Javascript lewat Widget

Cara Memasang Widget Tombol Join This Site Tanpa Javascript - Hi sobat blogger, pasti sudah kenal dengan widget Join This Site, yap!

Tipe mengganti judul blog dengan gambar/logo

     Yo... disini saya akan meng-share cara mengganti judul blog dengan gambar/logo

Tips Daftar BBM Resmi Hadir untuk PC, Begini Cara Pakainya!

22087 Mungkin ini adalah salah satu momen yang ditunggu-tunggu oleh ba

Tips Memasang Kolom Komentar Facebook di Blog Model Tab

Inilah Cara Cepat Memasang Kolom Komentar Facebook dan Blog Model Tab - Membuat Blog semanari

TIPS View all

Tips Memasang Widget Tombol Join This Site Tanpa Javascript lewat Widget

Cara Memasang Widget Tombol Join This Site Tanpa Javascript - Hi sobat blogger, pasti sudah kenal dengan widget Join This Site, yap!

a

a

Tipe Membuat Menu Horizontal Animasi di Blog

Seperti janji saya pada postingan sebelumnya, saya akan melanjutkan cara memodifikasi menu navigasi horisontal. Saat ini saya memang lagi seneng mengutak-atik template untuk memodifikasi menu horisontal yang ada di blog saya. Tampilan blog yang menarik dan dinamis akan membuat pengunjung lebih betah. Di samping itu kita punya kepuasan sendiri, dari tampilan blog sederhana menjadi tampilan yang kita inginkan. Kali ini saya akan berbagi mengenai cara membuat menu horisontal animasi, silahkan anda menuju kesini untuk melihat contohnya (menu navigasi baris kedua).


Saya tidak akan berpanjang lebar karena sudah ngantuk banget nih, langsung saja perhatikan langkah-langkahnya di bawah ini :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>:

    .animatedtabs{
    border-bottom: 1px solid gray;
    overflow: hidden;
    width: 100%;
    font-size: 14px; /*font of menu text*/
    }
    .animatedtabs ul{
    list-style-type: none;
    margin: 0;
    margin-left: 10px; /*offset of first tab relative to page left edge*/
    padding: 0;
    }
    .animatedtabs li{
    float: left;
    margin: 0;
    padding: 0;
    }
    .animatedtabs a{
    float: left;
    position: relative;
    top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqVs8TB5mpdw9Hv9BYtTJz02gJV-jp_9f2Z00XY9fxxhK5mmcOQwKl5J4HxkPP0JG3FopWb15aj0CgyfMQ7NugQSP86kgDI-hkuTU1xkR215DK8nh6tVCKLJxqHJzKLf6CjwgvTys_s-w/s320/tab-blue-left.gif) no-repeat left top;
    margin: 0;
    margin-right: 3px; /*Spacing between each tab*/
    padding: 0 0 0 9px;
    text-decoration: none;
    }
    .animatedtabs a span{
    float: left;
    position: relative;
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj61T4fwYZSe30akphzmqFISMoGdOj2g_urDGnVyJdU6LU0a8w8faltkWPI5bA_iuL3ljHVFN0L2kXEkp5Yfrafjb6lFc-Ehpnk2xQI17FuWggRwX7nZ0_2Xy54J_hgeHFrddGkXQX0eAU/s320/tab-blue-right.gif) no-repeat right top;
    padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
    font-weight: bold;
    color: black;
    }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .animatedtabs a span {float:none;}
    /* End IE5-Mac hack */
    .animatedtabs .selected a{
    background-position: 0 -125px;
    top: 0;
    }
    .animatedtabs .selected a span{
    background-position: 100% -125px;
    color: black;
    padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
    top: 0;
    }
    .animatedtabs a:hover{
    background-position: 0% -125px;
    top: 0;
    }
    .animatedtabs a:hover span{
    background-position: 100% -125px;
    padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
    top: 0;
    }

  4. Tambahkan kode HTML berikut diatas atau dibawah <div id='header-wrapper'> atau bisa juga anda tambahkan pada bagian elemen halaman sebagai widget
    <div class='animatedtabs'>
    <ul>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com' title='Home'><span>Home</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'><span>Tutorial Blog</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'><span>SEO</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'><span>Wordpress</span></a></li>
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'><span>Affiliate</span></a></li> 
    <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'><span>Hosting</span></a></li>
    </ul>
    </div>
  5. Simpan template dan lihat hasilnya.
Itu dulu ya teman, maaf kalau tulisannya ada yang salah karena udah ngantuk banget nih. selamat malam dan semoga mimpi indah

Related News
Comments
0 Comments

Tidak ada komentar:

Leave a Reply