Membuat menu dropdown

Membuat menu dropdown

Menu multi dropdown seperti ini pasti sangat di butuhkan jika sebuah blog memang mempunyai banyak kategori yang terkait atau bisa juga untuk meringkas artikle yang terkait yang di masukan ke menubar tersebut. jika anda ingin menerapkan menubar ini di blog anda,silahkan ikuti tutorialnya.

Cara Membuat Menu Bar Multi Dropdown.

1. Buka akun blogger anda.
2. Pilih menu template > klik Edit Html
3. Lalu letakan kode css di bawah ini tepat di atas kode ]]></b:skin> atau</style>

nav {
    display: block;
    margin-top: 100px;
    background: #374147;
}

.menu {
    display: block;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #9ca3da;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #9ca3da;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: #9ca3da;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }

    a.homer {
        background: #374147;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
        margin-top: 100px;
    }

    nav {
        margin: 0;
        background: none;
    }

    .menu li {
        display: block;
        margin: 0;
    }

    .menu li a {
        background: #fff;
        color: #797979;
    }

    .menu li a:hover,.menu li:hover>a {
        background: #9ca3da;
        color: #fff;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

    .menu ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover {
        transform: initial;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}

4. Selanjutnya letakan kode html di bawah ini tepat di bawah kode </header>

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a> 
<ul class="menu">
<li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a></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> 
</ul>
</li>
<li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li>
<li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</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>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li> 
</ul>
</li>
<li><a href="#">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>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li> 
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
<li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
<ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</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>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li> 
</ul>
</li>
<li><a href="#">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>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li> 
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
<li><a href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
</ul>
</nav> 
<

5. Langkah terakhir simpan kode di bawah ini tepat di atas kode</body>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){ 
var touch = $('#resp-menu');
var menu = $('.menu');

$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});

$(window).resize(function(){
var w = $(window).width();
if(w > 767 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});

});
//]]>
</script>

6. Jika sudah, silahkan klik pertinjau terlebih dahulu,kalo sudah ok, save template anda

0

ARTIKEL TERBARU

Saturday, June 2, 2018

Artikel Terbaru

IKLAN ANDA

Cara membuat fanspage FB

Cara membuat fanspage FB

Untuk membuat code script fanspage facebook sebelumnya anda harus mempunyai halaman facebook terlebih dahalu. Apabila sudah membuat halaman facebook ikuti langkah – langkah membuat kode scriptnya dibawah ini.

Cara Membuat Code Script Fanspage Facebook

Langkah pertama, anda harus login terlebih dahulu pada akun Facebook yang anda miliki.

Kemudian kunjungi situs Developer Facebook untuk membuat kode scriptnya. Klik link ini https://developers.facebook.com/docs/plugins/page-plugin/.

Lakukan pengisian mulai dari url halaman facebook, ukuran widget, warna, dll.

Petunjuk pengisian :

Facebook Page URL : Tulis dengan url halaman facebook anda, misalnya seperti http://www.facebook.com/3inetworksindonesia/
Width : Tulis dengan ukuran lebar widget yang anda inginkan.
Height : Tulis dengan ukuran tinggi widget yang anda inginkan.
Tabs : Bisa anda tulis dengan timeline, messenger, atau ivent.
Show Friend's Faces : Checklist untuk menampilkan wajah para pengguna facebook yang telah like halaman anda.
Use Small Header : Checklist untuk menampilkan header dengan ukuran kecil.
Hide Cover Photo : Checklist untuk menyembunyikan cover foto.

Apabila semua data telah terisi secara lengkap, kemudian klik “Get Code”. Maka code fanspage  facebook anda akan tampil. Code script siap anda copy dan siap untuk anda pasang pada blog kesayangan anda. 

Cara Memasang Widget Fanspage Facebook Di Blog

1. Langkah pertama, anda harus login terlebih dahulu pada akun blogger anda.

2. Masuk pada menu Tata Letak/ layout, kemudian klik 

3. Tambahkan Widget/Gadget.

4. Pilih widget HTML/JavaScript,

lalu pastekan semua code script fanspage facebook yang telah anda buat. 

Klik simpan untuk mendapatkan hasilnya

0

ARTIKEL TERBARU

Artikel Terbaru

IKLAN ANDA

Mempercantik Blog

Mempercantik Blog

Mempercantik blog atau membuat suatu blog atau website dengan tampilan sederhana tanpa menggannggu kualitas seo blog atau website dan menarik yang beda dari yang lain merupakan keinginan, tujuan, prioritas, dambaan bagi para blogger.

Blog yang menarik harus memperhatikan kinerja SEO blog juga karena tujuan kita membuat blog menarik dan mempercantiknya juga bertujuan agar kualitas seo dan serp blog bisa meningkat dan banyak pengunjung atau visitor tentunya.

Dalam urusan di atas tidak ada kata mustahil untuk para senior atau mastah mempercantik blog mereka dalam tujuan seo dan pemikatan pengunjung agar datang berkunjung kembali ke blog mereka di kemudian hari.

Aspek tampilan blog merupakan salah satu langkah menuju suatu kata yaitu blog bisa menarik di mata pemilik dan pengunjung yaitu untuk pertama berupa tampilan blog terlebih dahulu, tampilan yang menarik dan enak di pandang.

Banyak platform untuk pembuatan blog dan website, baik gratis dan berbayar ( Hosting dan Domain Premium) contohnya blog dari Blogger(Blogspot) dan berbayar Wordpress.org

Aspek Kecantikan Blog atau Website

Setidak nya ada tiga aspek yang anda harus perhatikan untuk seorang blogger pemula untuk membuat blog atau website yang kalian kelola bisa menarik dan cantik.

Theme

Theme/template/tema ( Mobile Friendly, Seo Friendly, Responsive , dan bisa anda download secara gratis dan berbayar (premium)

Widget (Tata letak, pewarnaan, Kelengkapatan, kecepatan akses widget, uuran, gambar, dan lain-lain)

Domain ( Top Level Domain atau TLD ) Domain TLD bisa di dapat dengan membeli (Harga super murah (Promo) dan harga normal atau di berikan secara gatis oleh penyedia layanan domain.

Template Merubah atau menggonta-ganti template secara berkala atau keseringan merupakan hal mutlak bagi seorang blogger pemula atau newbie karena mereka masih plin-plan.

Banyak sekali desainer template indonesia yang didalam template hasil mendesainnya sudah terdapat tata letak peletakan widget sehingga anda tinggal mengikuti saran tersebut.

Wigdet

• Popular Post
• Recent Post
• About Us
• About Me
• TOS
• Disclaimer
• Related Post
• Label
• Arsip Blog
• Sitemap
• Contact
• Privacy

Domain

Berikut langkah yang perlu di perhatikan dalam pemilihan domain untuk blog kesayangan anda jika anda masih menggunakan domain gratis dari penyedia platform blog.

Order Domain di penyedia layanan pembelian domain yang sudah teruji kualitasnya

Pilih domain yang mudah diingat dan simpel tapi berkelas

Hindari penggunaan nama domain yang alay

Untuk pemilihan nama domain, survei dahulu juga d anjurkan

Keyword on Domain bisa di jadikan alternatif

Tidak hanya kualitas artikel saja yang diperhatikan akan tetapi hal di atas juga menjadi prioritas kedua bagi seorang blogger.

0

ARTIKEL TERBARU

Artikel Terbaru

IKLAN ANDA

Memasang Widget pada blog

Memasang Widget pada blog

1. Login ke Blogger dahulu
2. Pilih Tata Letak atau Layout
3. Pilih posisi yang akan ditempatkan oleh widget, misalnya anda ingin menampilkannya di sidebar maka pilih gadget yang berada di samping layar. Kalau mau pasang di tengah pilih gadget yang berada di tengah.

4. Setelah itu klik "Tambahkan Gadget", maka akan terbuka , setelah itu silahkan pilih widget yang ingin dipasangkan di blog Anda. Saya ambil contoh gadget pengikut google+ baru yang akan saya pasangkan ke blog.

5. Klik tanda ' + '  , dan akan masuk menu tampilan sementara yang dapat disetting sesuai dengan warna blog.

Kemudian "Simpan" .

0

ARTIKEL TERBARU

Artikel Terbaru

IKLAN ANDA

Memasang gambar header

Memasang gambar header

Memasang gambar pada header blog sangatlah mudah , berikut langkah langkahnya :

Yang harus kita persiapkan adalah : File / Gambar dengan Type JPG, JPEG, PNG, GIF dengan ukuran sesuai tampilan Template Blog (Widget Headernya).

1. Bukalah Akun Blogger Anda
2. Masuklah ke Elemen Tata Letak atau Layout
3. Pilih / Klik Widget Header

4. Klik Pilih File (lihat gambar di bawah lingkaran warna merah) lalu masukkanlah File Gambar yang telah anda sediakan tadi.

5. Bila koneksi Anda cepat, maka File Gambar akan langsung masuk. Bila koneksi lambat ya sabar-sabar saja dulu sampai gambar tampil seperti di bawah ini.

6. Apabila File Gambar Anda sudah masuk / tampil seperti gambar di atas, maka jangan lupa untuk Centang Selain Judul dan Keterangan

7. Lalu Simpan Widget dengan mengklik tanda Simpan

8. Selesai dan lihat hasilnya.

0

ARTIKEL TERBARU

Artikel Terbaru

IKLAN ANDA