Bài viết này sẽ hướng dẫn các bạn tạo cho mình Menu blogspot chuyên nghiệp. Như các bạn đã biết việc tạo Menu cho blogspot có rất nhiều cách thường là sử dụng chỉnh sửa trong code là chính. Đối với những bạn lập trình viên hoặc những bạn có kinh nghiệm về Blogger thì không có gì là khó nhưng đối với các bạn mới bước tìm hiểu về blogger cũng như thiết kế web thì không hề dễ dàng tý nào. Bây giờ chúng ta bắt đầu việc tạo Menu này nhé, thực hiện theo các bước bên dưới đây.
Bước 1: Vào chủ đề - Chỉnh sửa HTML . Copy đoạn code bên dưới vào trước thẻ </body>
<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>
Bước 2: Thêm CSS cho nó đẹp hơn ( Mặc định màu nên Menu là màu đen )
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbtwUAyx3MVQUAzHk85JzaWrDQHkl5VVjUxs3Ku0BhiNZmksyG2r0FLbF6oWhnDBgiBETxs7c2IiaQIcCBCmuEtlVQxG59iSmvsL8KIZNhHClCWZ9WeH54ttGEh_ua9FGHWjbhO_0H2yWh/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>
Tiếp theo vào trong Bố cục thêm tiện ích - Link List ( Danh sách liên kết)
Phần tiêu đề bạn ghi đầy đủ tên như trong hình nhé.
Cách thêm Menu bạn làm như sau:
New Site Name : Tên menu chính ví dụ tôi đặt là " Trang chủ" sau đó add link
Tương tự bạn tạo thêm các nội dung khác: Ví dụ là là " Giới thiệu". 2 tên này sẽ nằm ngang theo thứ tự khi bạn tạo xong.
Tạo menu con (Sub menu) : ví dụ tôi muốn tạo 1 menu con có tên "Thư ngõ " nằm trong menu "Giới thiệu" . Cách tạo vẫn như cách 1 nhưng ta thêm dấu _ đằng trước nó ví dụ (_Giới thiệu ). Tương tự cho các menu con bên trong.
Bước 3: Thêm thư viện cho Menu
Copy đoạn code bên dưới vào sau thẻ <head>
<script src=”//code.jquery.com/jquery-1.8.3.min.js”></script>
Lưu ý: Nếu trong template của bạn đã có thư viện này thì vui lòng bỏ qua bước này.
Chúc các bạn thành công. Bạn có thể comments bên dưới để được hỗ trợ
Xem demo tại đây: http://navigationdropdown.blogspot.com
Thanks ! https://raintemplates.com
Không có nhận xét nào:
Đăng nhận xét