Membuat Navigasi Menu Dropdown Menggunakan Widget LinkList

Berikut ini cara membuat navigasi Menu dropdown di blog Blogger mengguanakan widget LinkList.

Dengan memanfaatkan Link List, kita tak perlu repot-repot masuk ke kode template (Tema > Edit HTML) untuk menyimpan link Label atau link lain di menu.

Membuat Navigasi Menu Dropdown Menggunakan Widget LinkList

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode </body>

<script>
//<![CDATA[
$(document).ready(function(){
var searchtxt = "Search";
var _0xc283=['$.1y($.1m[":"],{o:k(a,c,b){U 0===$(a).n().1j().1o(b[3])}});k V(){$(".t j:H(:o(l))").B(k(){$(e).1x("j:o(l)").18&&$(e).i("a").2q("1h").1a(\'<h K="L://M.N.O/P/h" S="0 0 C.4 C.4" 1z="W" 1O="W"><1Q 29="2k.3 X.6 11.7 1p.5 21.2 X.6 0 F.8 11.7 1H.9 C.4 F.8 " G="#1M"/></h>\');$("<D/>",{I:$(e).1T(".t j:H(:o(l))"),1W:e})})}$(".t").B(k(){1X a=$(e).i("1Y");26(a.J(\':2a("2c")\'))V(),$(e).m("2m","2p"),$(e).m("f","2s"),$(e).m("1f-1g","u-1i"),$(e).i(".v-1k-1l").Z(),$(e).i(".v-1n").m("f","r-w"),$(e).i(".1q").Z(),a.I(\'\\1r!--1s v J 1t u.Q--\\1u<a R="//u.Q">1v 1w</a>\'),$(".x").18?$(e).T(\'<g f="x"></g>\'):$(1A).T(\'<g f="1B-1C x"></g>\'),$(".r-w D j D j a").B(k(){$(e).n($(e).n().1D(/[l]/,""))}),$(".r-w").1a(\'<g f="1E"><a R="1F:1G(0)" f="y-1I"><h G="#1J" S="0 0 z.A 1K.1L" K="L://M.N.O/P/h"><Y f="1N-1" d="1P,z.10.4,3.4,0,0,1,0-4.1R.1S,p.1U-.3-.1V.p,24.p,0,1,1,12.14,1Z.20.2,24.2,0,0,1-13.22-4.23-.p-.25.16,z.10.4,3.4,0,0,1-4.16,27.A,24.28.6,17.6,0,1,0,12.14,6.8,17.19,17.19,0,0,0,15.A,24.2b"></Y></h></a><E 2d-2e="2f-8" 2g="/y" f="2h-E" 2i="2j"><s f="2l-y-s 1b" 2n="q" 1b="\'+2o+\'" 1c="n" 1d=""><s 1d="2r" f="1e" 1c="1e"/></E></g>\');2t U!1;$(e).2u({2v:"1"})});',
"|","split","||||||||||||||this|class|div|svg|find|li|function|_|attr|text|startsWith|39|||input|LinkList|raintemplates|widget|nav|container|search|57|93|each|407|ul|form|112|fill|not|html|is|xmlns|http|www|w3|org|2000|com|href|viewBox|wrapInner|return|raintemplatesmenu|512|91|path|remove|68a3|203|33||53||81||length|62|append|placeholder|type|value|submit|data|version|hasdrop|linklist|trim|item|control|expr|content|indexOf|273|clear|x3c|This|by|x3e|Blogger|Templates|next|extend|width|idlist|rain|contain|replace|searchbox|javascript|void|315|box|dddddd|58|68|888|cls|height|M1|polygon|81L14|37|nextUntil|5l|39A24|appendTo|var|h2|48|8a24||86|33l||27L5|if|0ZM15|4A17|points|contains|4Z|Raintemplates|accept|charset|utf|action|navbar|method|get|386|sb|id|name|searchtxt|listmenu1|addClass|Search|menulist|else|css|opacity",
"","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?_0xc283[4]:b(parseInt(a/e)))+(35<(a%=e)?String[_0xc283[5]](a+29):a.toString(36))};if(!_0xc283[4][_0xc283[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return _0xc283[7]};a=1}for(;a--;)c[a]&&(d=d[_0xc283[6]](new RegExp(_0xc283[8]+b(a)+_0xc283[8],_0xc283[9]),c[a]));return d}(_0xc283[0],62,156,_0xc283[3][_0xc283[2]](_0xc283[1]),0,{}));
});
//]]>
</script>

3. Simpan kode CSS berikut ini di atas kode </head>

<style>
.rain-contain.container{max-width:1040px;margin:0 auto;}
.LinkList{opacity:0;}
.menulist {width:100%;height:48px;background:#333;color:#fff;position:relative;}
.menulist h2 {display:none}
.menulist .r-nav ul li a:link, .menulist .r-nav ul li a:visited {color:#fff;text-decoration:none;font-size:15px;}
.menulist .r-nav ul li {display:inline-block;position:relative;margin:0px 20px;height:48px;line-height:48px;}
.menulist .r-nav ul li ul {position:absolute;left:-10px;min-width: 250px;background:#222;opacity:0;
z-index:-1;}
.menulist .r-nav ul li ul li {display:block;border-bottom: 1px solid #555;}
.menulist .r-nav a:hover {opacity:0.8;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;}
.menulist .r-nav ul li ul li:last-child {border:none;}

Baca Juga

• Cara Memasang Widget Recent Posts Simple Daftar Judul
• Sample Multipage Blogger, Contoh Postingan Multiple Pages
• Featured Post Blogger Custom

.menulist .r-nav ul li:hover ul {opacity:1;z-index:10;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-name: raintemplates-hang;
animation-name: raintemplates-hang;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;}
.hasdrop svg {width:13px;height:13px;position:relative;top:3px;left:8px;}
.menulist .r-nav ul li:hover svg{
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;}
.search-box svg {display:none;}
.r-nav {position: relative;width: 100%;height: 100%;}
.searchbox form, .searchbox input{position: absolute;right: 0;top: 0;bottom: 0;margin-top: auto;margin-bottom: auto;}
.searchbox input.sb-search-input.placeholder {height: 29px;border: none;padding-left: 12px;font-size: 13px;}
.searchbox .submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC0_YCkUNIXv5n9r9hqrvFYkCqmwTG7Uuthfn51tD3ceWrga3eFduYVQerkcrSTkhIsP-Tc91UdZiHf4alHOGv5euyqs9nHqxNJtfsNn7wqBhv6Z9Z-wA5TAqMQhf-tozTGE9h4vWAM4C3/s50/search.png) no-repeat;
border: none;
height: 16px;
width: 16px;
background-size: 100%;
margin-right: 10px;
font-size: 0px;
}
@-webkit-keyframes raintemplates-hang {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}
@keyframes raintemplates-hang {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(0px);transform: translateY(0px);}
100% {-webkit-transform: translateY(-2px);
transform: translateY(-2px);}}
</style>
4. Simpan template1

Tahap berikutnya: Tambahkan widget LinkList 

1. Layout > Add a Gadget
2. Pilih Link List

Jika tidak berfungsi, pastikan ada link ke kode jQuery di atas <head>

<script src=”//code.jquery.com/jquery-1.8.3.min.js”></script>

Source