One of Blogger’s weaknesses is poor customization. Every time you want to edit something you have to enter ‘HTML editing’ section to find the line code in the matrix of scripts.
It is really inconvenient, especially for the people has no programming knowledge.
Blogger has been developing many widgets. They are great alternatives for complex scripts
So in this article, I will guide you how to use a “LinkList” widget to make the dropdown Navigation Menu.
Below are some steps to help you install this widget to your website.
Step 1: Add Scripts below before </body> tag in your template.
<script>
//<![CDATA[
$(document).ready(function(){
//this widget was built by Raintemplates.com
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>
Step 2: Add stylesheet below before </head> template.
<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;
}
.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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsY_GNqhOIfJwbp63l_LZ7TXqSdRCrVQhCPwioNGQ-V4OyQFNQM1ZZzXwTiG5SkOMZz-9crOEAlNf1bdl8aXgh2yT9KcrK5wFEEneGWQBccsuMF1DRhqYF96EmPETAZ_N1oi736W4k8GWv/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>
Step 3: Add LinkList widget.
Since you complete two steps above, please follow this step to add LinkList widget as Navigation Menu.
From Your Blogger Dashboard -> Layout
Choose the position on your website to add the new LinkList widget. Because of the navigation always top so I recommend you to choose this position for the best performance.
(1. click “Add a Gadget“)
(2. Choose Link List)
(3. Configure like this photo. Click to zoom)
That is done. Now your website has a great drop-down navigation menu with the search bar. This navigation menu is configured default with Black color so if you need to change color, feel free add stylesheet to customize it.
Something, the widget won’t run as expected, please check:
- The code you copied is exact or not.
- If not, add script after <head> tag: <script src=”//code.jquery.com/jquery-1.8.3.min.js”></script>
If you do not know how to custom it with color and font, feel free leave a comment here or give a ticket in Support page.
I hope you will enjoy with this widget.
Reblog https://raintemplates.com/2017/10/09/using-linklist-widget-to-create-the-awesome-dropdown-navigation-menu-for-your-blogger-blog/
Posts
