Artikel Terbaru

Cara Membuat Kotak Admin Di Blog

Flamboyan68  - Ada banyak cara yang bisa kita lakukan dalam memperindah blog seperti halnya sebuah rumah, diperindah, dipercantik sehingga membuat penghuni dan tamu yang datang bisa berlama-lama dan betah untuk tinggal. Lho kok ngelantur hehehe....postingan kali ini saya akan share tentang " Cara Membuat kotak Admin Di Blog " buat sobat nubie semua. Sobat-sobat semua bisa mengikuti cara dan langkah di bawah ini bila berkenan dan berniat untuk memasangnya di blog sobat, yu ikutin saya......
  • Seperti biasa Masuk / Login Ke Blogger sobat
  • Klik  Template  >> Edit HTML  ( tapi sebelumnya sobat backup dulu template nya dengan unduh template lengkap untuk jaga-jaga apabila terjadi kegagalan dalam edit html nya )
  • Klik  Edit HTML 
  • Kemudian cari kode ]]></b:skin> untuk mempermudah pencarian kode pakailah Ctrl + F
  • Apabila sudah menemukan kode tadi, copy kan kode di bawah ini dan letakan tepat diatas kode ]]></b:skin>

 .admin-text{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-text .kontainer{padding:5px;}
.admin-text h4{
background:#3D3D3D;
border:none;
border-bottom:1px solid #FFFFFF;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-text h4 a{color:##FFFFFF;}
.admin-text img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #FFFFFF;
padding:2px;
background:#3D3D3D;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
 




  • Kemudian cari lahi kode <div class='post-footer'> untuk mempermudah pencarian kode pakailah Ctrl + F sobat pasti akan menemukan lebih dari 1 kode tersebut.
  • Apabila sudah menemukan kode tadi, copy kan kode di bawah ini dan letakan tepat diatas kode <div class='post-footer'>



<!-- Box Admin -->
<b:if cond='data:blog.pageType == "item"'>
<div class='admin-text'>
<h4>
Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~Anda sedang membaca Artikel tentang</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1VuaETKpmY7HKQApyA-zvZAqTuluhCAmahhllt1SCN4JKRAzfzt09VXhIfxvawnxEN7PdOuWKTLy0VWCoNSFfHwXPep72L6girOhKyAOO9WMkiBUTklQ8olnGbT7Tek196yR3_HugNY/s1600/IMG00266-20120908-1639.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> Pada Tanggal <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan Saran dapat Anda sampaikan melalui kotak komentar. Dilarang Mengcopy Artikel Tanpa sepenge tahuan Admin atau Tidak menyertakan Link Sumber Dimana Artikel Berasal. Jika, Melanggar, Link Akan Di laporkan dan Akan Di hapus.
<div class='backlink'>
<textarea  onclick='this.focus();this.select();' readonly='readonly' style='height:18px;' title='Press CTRL+C to copy'><a expr:href='data:post.url' target='_blank'><data:post.title/></a></textarea>
</div>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://your-belajarblog.blogspot.com/2013/01/cara-membuat-kotak-admin-di-blogger.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Box Admin -->
  • Terakhir Save / Simpan Template sobat
  • Selesai
  • Untuk melihat hasil sobat klik sembarang salah satu artikel blog sobat, untuk melihat munculnya kotak admin di bawah postingan.
Demikian postingan ini saya akhiri semoga bermanfaat, selamat mencoba dan sampai jumpa...


sumber: http://your-belajarblog.blogspot.com/2013/01/cara-membuat-kotak-admin-di-blogger.html

Kotak Komentar Bergaya Warna Dengan CSS3 Di Blog

Screenshot Gaya Warna CSS3


Flamboyan68 - Pada saat sobat membaca artikel di sebuah blog, sobat semua pasti akan akan menjumpai yang namanya kotak komentar yang disediakan khusus bagi pembaca atau pengunjung untuk meninggalkan komentar sebagai respons terhadap artikel tersebut. Komentar blog salah satu bagian penting dari blog,  pengunjung bisa menyuarakan opininya pada postingan artikel di blog. Manfaat komentar blog bagi blogger ibaratnya darah bagi sebuah blog hehehe..pilosofis banget.  Dengan mendorong pembaca blog untuk meninggalkan komentar serta memberikan respons yang cepat terhadap komentar yang ditinggalkan oleh pembaca sobat sehingga mereka merasa dihargai. Ibaratnya anda tidak suka ketika diabaikan apabila anda menyapa seseorang, maka jangan mengabaikan pembaca blog anda ketika mereka menyapa anda melalui sebuah komentar.

Maka untuk postingan kali ini saya akan berbagi dengan sobat semua tentang memperindah kotak komentar dengan gaya warna komentar blogger. Gaya Warna Komentar Blogger ini menggunakan kode-kode CSS3 untuk bisa menghiasinya dengan warna yang cukup beragam, dan terdapat 3 warna. Fitur yang terdapat pada komentar ini adalah terdapat nomor komentar yang diterbitkan, 3 Gaya warna sebagai penghias komentar, dan Pita Pemilik blog yang muncul jika sobat semua berkomentar terletak di atas kanan.

Apabila sobat semua tertarik bisa mengikuti cara dan langkah di bawah ini :

* Masuk ke akun Dashboard Blogger sobat.
* Kemudian klik menu Template  >> seperti biasa backup dulu template sobat guna menghindari kegagalan  pasang.
* Lalu klik >> Edit HTML.
* Dan sobat cari kode ]]></b:skin> untuk mempermudah pencarian gunakan CTRL+F.
* Setelah ketemu kode tadi, masuk Kode dibawah ini tepat diatas kode ]]></b:skin> :
1. Kotak komentar bergaya warna biru :
Masukan Kode Berikut ini:

/*Start Blogger Threaded Comments Stylish Colors*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsCntPfDf0wE-bAKYGcwzYMsBJl66uy1bY2UhoSwF7vhZNzFMgwkvojjWRoSL4vw2phC4IOd_JAij1Zyd_o-ERYs3Yn3PzK4M_KjK7C4oRmCYWcwuSqYiog5_O1ElSGgl0eJZOAwH1m58/h120/pita+berwarna+biru.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*End Blogger Threaded Comments Stylish Colors*/


2. Kotak komentar bergaya warna merah muda :
Masukan Kode Berikut ini:

/*Start Blogger Threaded Comments Stylish Colors*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDsgSzm9Tu8QqLRfWX1e2Ed-v1SLVBYHRqrET6KzoZxQsWRhY5Ad_INBhahA8m4F0wYW0hxEPIbV2ny_ZjTelSvQ69Pgb_X7yaebg_RADi4L9-MJY0DoAbLBjryFR6auQn8o0iCniH9-M8/h120/pita+berwarna+merah+muda.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*End Blogger Threaded Comments Stylish Colors*/

3. Kotak komentar bergaya warna merah muda :
Masukan Kode Berikut ini:

#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#56d805}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5d5nbv5c2n5Gkqd1BBipppPZu4gKMMiualsbmdEnm8JL0miFB00wLrpp8sT4gbJ_GsSRCGU3lXEj2s16IuUw-d1cPRbPQBz2kqARv6puiqBSzMSckykweaeshrZpLIrsQyAhDiT8Jy5vT/h120/pita+berwarna+hijau.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

* Terakhir Simpan / Save Template. Lebih bagusnya sobat Pratinjau dulu sebelum di simpan/save.
Selamat mencoba dan semoga bermanfaat....

http://your-belajarblog.blogspot.com/2013/06/cara-menambahkan-gaya-warna-dengan-css3.html 

Cara Membuat Satu Kolom Diatas Footer Pada Blog



Flamboyan68 - Apa kabar sobat? kabar baik pastinya postingan ini masih lanjutan dari cara membuat 2 kolom footer di blog pada dasarnya sama yang membedakan hanya pada banyaknya kolom/ruang widget. Widget ini bisa di samakan dengan cara membuat satu kolom dibawah header dan penerapannya cukup mudah. Sobat blogger yang memasang iklan di blognya pastinya memerlukan widget ini untuk memasang iklan ukuran 726x90 atau untuk memasang widget lainnya.

Untuk pemasangan kode harap diperhatikan dimana setiap template mempunyai kode css yang berbeda, saran saya silahkan sobat sesuaikan kode blog template dengan kode yang akan di pasang berikut ini, dengan harapan pemasangannya dapat berjalan dengan sempurna, perfect!! he...he..ck..ck..


Untuk pemasangannya sobat bisa mengikuti cara dan langkah di bawah ini:
  • Login ke akun blogger sobat
  • Klik template > edit html ( backup terlebih dahulu template sobat )
  • Kemudian sobat cari kode ]]></b:skin> gunakan ctrl + F untuk mempermudah pencarian
  • Apabila sudah ketemu sobat copy kode di bawah ini dan paste tepat diatas kode ]]></b:skin>
    #oneupperfooter{margin:10px 0;padding:2px;width:100%;} 
  • Lalu sobat cari kembali kode  <div id='footer'> 
  • Bila sudah ketemu copy kode di bawah ini dan paste tepat dibawah <div id='footer'>
         <b:section class='footer' id='oneupperfooter' preferred='yes'/>
  • Simpan template
Untuk melihat hasil sobat kembali ke halaman tata letak dan lakukan refresh / reload untuk melihat kolom baru. Dan hasilnya akan terlihat seperti gambar di bawah ini :

Satu kolom di atas footer

Demikian sobat selamat mencoba dan semoga bermanfaat..
Happy blogging...........

Cara Membuat Menu dan Sub Menu Dropdown di Blog

Cara Membuat Menu dan Sub Menu Dropdown di Blog




Flamboyan68 - Menu dropdown pada umumnya berisikan link untuk bisa akses ke suatu halaman tertentu. Menu dropdown memiliki sub menu yang tampilannya  memanjang ke bawah makanya menu ini di sebut  menu dropdown. 

Fitur menu dropdown ini menggunakan sedikit tambahan pada bagian style CSS, menggunakan efek melengkung pada sisi kiri kanan ujungnya  dan tidak membentuk siku.  Cara pemasangannya mudah  dan sobat bisa mengikuti cara dan langkah di bawah ini.
  • Login ke akun blogger sobat
  • Lalu klik template > edit html
  • Kemudian sobat cari kode ]]></b:skin> gunakan CTRL+F untuk memudahkan pencarian
  • Setelah ketemu copy kode dibawah ini dan paste tepat di atas kode ]]></b:skin>
    #DropdownMenu {
        background:#ff6803;
    border-radius:6px;
        width: 880px;
        height: 35px;
        font-size: 12px;
        font-family: Arial, Tahoma, Verdana;
        color:#FFFFFF;
        font-weight: bold;
        margin-bottom: 30px;
        padding: 2px;
    
    
    } 
    #Dropdownbox {
        width: 875px;
    border-radius:6px;
        float: left;
        margin: 0;
        padding: 0;
    }
    
    #strike { 
    border-radius:6px;
        margin: 0;
        padding: 0;
    }
    #strike ul {
    border-radius:6px;
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #strike li {
    border-radius:6px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #strike li a, #strike li a:link, #strike li a:visited {
    border-radius:6px;
        color:#FFFFFF;
        display: block;
        font-size: 16px;
        font-family: Georgia, Times New Roman;
        font-weight: normal;
        margin: 0;
        padding: 9px 15px 8px;
    }
    #strike li a:hover, #strike li a:active {
    border-radius:6px;
        background:#FFFFFF;
        color:#ff6803;
        margin: 0;
        padding: 9px 15px 8px;
        text-decoration: none;
    }
    #strike li li a, #strike li li a:link, #strike li li a:visited {
    border-radius:6px;
          background:#ff6803;
        width: 150px;
        color:#FFFFFF;
        font-size: 14px;
        font-family: Georgia, Times New Roman;
        font-weight: normal;
        float: none;
        margin: 0;
        padding: 7px 10px;
        border-bottom: 1px solid #FFF;
        border-left: 1px solid #FFF;
        border-right: 1px solid #FFF;
    }
    #strike li li a:hover, #strike li li a:active {
    border-radius:6px;
         background:#FFFFFF;
        color:#ff6803;
        padding: 7px 10px;
    }
    #strike li {
    border-radius:6px;
        float: left;
        padding: 0;
    }
    #strike li ul {
    border-radius:6px;
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 170px;
        margin: 0;
        padding: 0;
    }
    #strike li ul a {
    border-radius:6px;
        width: 140px;
    }
    #strike li ul ul {
    border-radius:6px;
        margin: -32px 0 0 171px;
    }
    #strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
    border-radius:6px;
        left: -999em;
    }
    #strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
    border-radius:6px;
        left: auto;
    }
    #strike li:hover, #strike li.sfhover {
    border-radius:6px;
        position: static;
    }

    • Kode warna merah #ff6803 dan putih itu adalah kode warna background silahkan ganti sesuai keinginan sobat. Kode #FFFFFF  adalah kode untuk warna tulisan di menu. Silahkan anda ganti bila memang diperlukan. Untuk menentukan kode warna silahkan sobat cari disini Kode Warna/Hex Code
    • Simpan template
    Langkah selanjutnya yaitu ;
    • Selanjutnya sobat menuju ke menu blogger klik Tata Letak
    • Klik Tambah Gadget > Pilih Html/Javascript
    • Copy kode script di bawah ini dan paste di kolom html/javascript

    
    
     
    <div id="DropdownMenu">
           <div id="Dropdownbox">
          <ul id="strike">
            <li><a href="#">Menu1</a></li>
            <li>
              <a href="#">Menu2</a>
              <ul>
                <li>
                  <a href="#">Sub Menu 2</a>
                  <ul>
                    <li><a href="#">Sub Sub Menu 2</a></li>
                    <li><a href="#">Sub Sub Menu 2</a></li>
                    <li><a href="#">Sub Sub Menu 2</a></li>
                  </ul>
                </li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
                <li><a href="#">Sub Menu 5</a></li>
                <li><a href="#">Sub Menu 6</a></li>
              </ul>
            </li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
          </ul>
        </div>
      </div>

    • Silahkan sobat ganti tulisan Menu1, Menu 2 dan seterusnya dengan nama menu yang sobat inginkan dan tanda pagar "#" ini adalah alamat link dari menu yang sobat buat. 
    • Langkah terakhir simpan.

    Selamat mencoba dan semoga bermanfaat.
    source


    Cara Mudah Membuat Menu Bar Dropdown Di Blog

    Cara Mudah Membuat Menu Bar Dropdown Di Blog


    Flamboyan68 - Para blogger dalam setiap aktivitas blogging pastinya selalu menyempatkan diri untuk mengevaluasi perfomance/tampilan template blognya. Apa yang kurang atau yang harus di tambah  perfomance blog dengan harapan supaya para visitor betah untuk berlama-lama dan lebih penting lagi adalah memberikan kemudahan kepada visitor untuk mengeksplore semua artikel blog kita. Salah satunya adalah tampilan menu bar dengan style dropdown yang merupakan salah satu opsi baik apabila sobat menginginkan tampilan semua halaman blog di lihat dengan mudah oleh visitor.

    Dan pada kesempatan jumat pagi yang cerah ini saya akan berbagi artikel dengan sobat blogger tentang Cara Mudah Membuat Menu Bar Dropdown Di Blog. Di bawah ini ada cara dan langkah yang bisa sobat ikuti apabila sobat akan bereksperimen, silahkan sobat simak dan harapan saya semoga bermanfaat :

    ( + ) Login ke akun blogger sobat.
    ( + ) Klik template  >  edit HTML (cat : terlebih dahulu backup templat sobat).
    ( + ) Kemudian sobat cari kode ]]></b:skin> gunakan Ctrl + F untuk mempermudah pencarian.
    ( + ) Silahkan copy kode script di bawah ini dan paste/letakan tepat di atas kode ]]></b:skin>

    #menubar{
    border-bottom:4px solid #ff0000;
    width:1025px;
    height:32px;
    background:#000000;
    float:center;
    margin-bottom:3px;
    }
    #menubar ul{
    float:left;
    margin:0;
    padding:0;
    }
    #menubar li{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    }
    #menubar li a, #menubar li a:link{
    float:left;
    padding:8px 12px;
    color:#fff;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
    }
    #menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
    background: #ff0000;
    color: #fff;
    text-decoration:none;
    }
    #menubar li li a, #menubar li li a:link, #menubar li li a:visited{
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    text-decoration:none;
    width: 150px;
    padding: 0px 10px;
    line-height:30px;
    }
    #menubar li li a:hover, #menubar li li a:active {
    background: #000000;
    color: #ffffff;
    }
    #menubar li ul{
    z-index:9999;
    position:absolute;
    left:-999em;
    height:auto;
    width:170px;
    margin-top:32px;
    border:1px solid ##ff0000;
    }
    #menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
    left:auto
    }
    #menubar li:hover, #menubar li.sfhover{
    position:static
    }       
    6. Selanjutnya sobat cari kode <div id="content-wrapper"> 
    7. Copy kode script di bawah ini dan paste/letakan di atas kode <div id="content-wrapper">
    <div id='menubar'>
    <ul>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='http://flamboyan68.blogspot.com/2013/05/sitemap_10.html'>Sitemap</a></li>
    <li><a href='http://flamboyan68.blogspot.com/2013/05/blog.html'>Tutorial Blog</a>
    <ul>
    <li><a href='http://flamboyan68.blogspot.com/2013/06/seo-friendly.html'>SEO</a></li>
    <li><a href='http://flamboyan68.blogspot.com/2013/05/artikel-computer.html'>Computer</a></li>
    <li><a href='http://flamboyan68.blogspot.com/2013/05/health.html'>Health</a></li>
    </ul></li>
    </ul>
    </div>
    8. Simpan Template.

    Ket :
    • Silahkan sobat sesuaikan kode warna garis pada bawah menu bar #ff0000, lebar menu bar: 1025px, warna latar/background menu bar #000000.
    • Sobat ganti tulisan warna biru yaitu nama menu bar sesuai dengan selera sobat.
    • Ganti link warna merah dengan link sobat.
    • selebihnya silahkan sobat modifikasi sendiri sesuai selera
    Demikian ulasan saya mengenai Cara Mudah Membuat Menu Bar Dropdown Di Blog, selamaat mencoba dan semoga bermanfaat.
    happy blogging.............................
    Blog flamboyan68.blogspot.com
    Apabila anda ingin mendapatkan artikel terbaru dari blog flamboyan68 lewat pesan email gratis. Silahkan tulis alamat email anda di kotak yang tersedia bawah ini


    Supported by Blogaul

    Sobat Blogger