Browse: Home / / Cara Membuat Menu Mashable Untuk Blogger
Home » » Cara Membuat Menu Mashable Untuk Blogger

Cara Membuat Menu Mashable Untuk Blogger




1. Masuk ke Blogger > Template > Edit HTML
2. Cari kode </b:skin> (Silahkan gunakan Ctrl+F untuk memudahkan)
3. Copy-Paste kode berikut di atas atau sebelum kode </b:skin>
     /* Menu Stylings */
    .w2bmenu *{margin: 0;padding: 0;}
    ul.w2bmenu {background: #36b3ff; height:41px; width:960px; margin-bottom: 0px; margin-top: 0px; }
    ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
    ul.w2bmenu li{list-style: none;float: left;position:relative;margin: 0;padding: 0;}
    ul.w2bmenu li a{margin: 0;padding: 13px 16px;text-decoration:none;font-size: 11px;
    font-family: Arial,Helvetica, Verdana;
    font-weight: normal;
    text-transform: uppercase;text-shadow: 0px 1px 1px #888;color: #fff;display: block;
    border-right: 1px solid #84d1ff; }
    ul.w2bmenu li a:hover {
    color: #fff;
    }
    ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #57c0ff;}
    ul.w2bmenu ul{position: absolute;display: none;top: 100%; }
    ul.w2bmenu li:hover > ul{display: block;}
    ul.w2bmenu ul li{float: none; min-width: 160px;background: #76cbff; text-shadow: none; color: #fff; font: normal 12px tahoma, verdana;}
    ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal; letter-spacing: 1px;}
    ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{ text-decoration: none; }
    ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}

    /* AJAX Menu Stylings */

    ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #3f3f3f;border-top: 0 none; color: #fff;}
    ul.w2bajaxmenu li:hover div.submenu {display: block;}
    ul.w2bajaxmenu ul {display: block !important;border: 0 none !important;}
    ul.w2bajaxmenu ul li{background: none !important;}
    ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #212121;}
    ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0;background: none;}
    ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;position: relative;min-height: 60px;padding: 8px 8px 8px 110px;}
    ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
    ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #c7c7c7;font-size: 0;line-height: 0; border-radius: 6px;
    opacity: 0.5;
    }
    ul.w2bajaxmenu ul.postslist li .imgCont:hover {
    opacity: 1;
    }
    ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display:}
    ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0;}
    ul.w2bajaxmenu
    .loader{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsCgTCiWvsuZ-bN-1ns4OQWCkZdtCFkf5Vw6h7XgNK7HYYPUeGCldH6-gOMiiYATYcbtoDSfro9UARP_jGlbQWeYOQfixKHv7cIQv4NUKnHjbl7FCAZynlwRGJmGgxpHX8nWv3ohwNNTra/s320/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
    ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
4. Langkah selanjutnya cari kode </head> (Silahkan gunakan Ctrl+F untuk memudahkan)
5. Copy-Paste kode berikut di atas atau sebelum kode </head> lalu Simpan Template
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
    <script src='http://snippethosted.googlecode.com/svn/ajaxbloggermenu.min.js' type='text/javascript'></script>

    <script type='text/javascript'>
    jQuery(document).ready(function($) {
                $('#w2bajaxmenu').ajaxBloggerMenu({
                });
    });
    </script>
6. Tambahkan HTML/Javascript pada blog,
    <ul id="w2bajaxmenu" class="w2bmenu">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Example 1</a>
                <ul>
                    <li><a href="Label URL1">Sample Label</a></li>
                    <li><a href="Label URL2">Label w/ Search</a></li>
                    <li><a href="Label URL3">Search Query</a></li>
                    <li><a href="Label URL4">Unknown Search</a></li>
                </ul>
    </li>
            <li>
                <a href="#">Example 2</a>
                <ul>
                    <li><a href="Label URL1">Social Media</a></li>
                    <li><a href="Label URL2">Make Money</a></li>
                    <li><a href="Label URL3">Affilliate</a></li>
                    <li><a href="Label URL4">Portfolio</a></li>
                </ul>
            </li>
            <li><a href="Label URL">Blogger</a></li>
            <li><a href="Label URL">WordPress</a></li>
        </ul>
7. Simpan dan lihat blog Anda.

 Keterangan:
Ganti tanda # dengan link URL
Ganti Label URL dengan link label Anda

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll

Christian angkouw Sobat sedang membaca artikel tentang Cara Membuat Menu Mashable Untuk Blogger. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

Diposkan oleh

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)