Tạo menu điều khiển 5 trong 1 cực đẹp với hiệu ứng Jquery

Posted by on

Menu này không đơn thuần như những mẫu menu khác chỉ đưa ra những đề xuất cho người dùng, mà nó còn được kết hợp thêm khung Subscribe, khung tìm kiếm, author box, social, và đặc biệt là hiệu ứng ẩn hiện. Bây giờ, chúng ta cùng tìm hiểu cách làm.

#Thêm Scrip

1. Đăng nhập Blogger
2. > Mẫu > Chỉnh sửa HTML
3. > ctrl + f > Tìm thẻ </head>
4. > Dán code dưới vào trên nó
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {

$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>
Nếu blog của bạn đã có đoạn màu cam trên rồi thì hãy xóa nó đi.

#Thêm CSS

1. > Tìm thẻ ]]></b:skin> 
2. > Dán code dưới vào trên thẻ vừa tìm được
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMff6dKuVPk2RZJI8GObzRJVgTIQpcf4ah07lNUdT6FEzUnsFCK3tE0X5ofARWD4nUQjA8GHgxbCpSKoa3tlWOofngm0FdDCFOk8tISQjVR4Fkz7nONF3N2WSwKkAloI9sxLqxFY393ESP/s1600/sliding-panel-tab-0.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTlqqcWZJCYhwI4POfbLktI7l3bWRiK_VzCEJud4gZLCoW8K2FIud0Y4_hgddLggjCSlbUA0tw7sGY23MZMCNeLfhZAGSHkRaybDtlMnaytoEL7pvo-jrxeaOAg0wVqLujHA4Qx9xKGLMl/s1600/sliding-panel-tab-left.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy5LbZHB6gX7oo94hvNW_uWaLUdoC0N2PXHjHKSsR83QACK79if6RqaPE0djxYWhv8C1dN_gbV3m4WaqnXSoV9NOYXLe25PVk7aQIjn2BEjwjPYz6SybNmjzhRX1LFJilDKrH8ioH39e43/s1600/sliding-panel-tab-right.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEoXupir1yud8oH6OnPJAlDw7ceHveVG-WNdi_iuIacOR2vBwAN-tx2P2U1JHr-jgHSjpNP_MepIgpyx_En0Vs15QeOdvEVUFUWtbfrLgdfheGL1EtmyQtEdO4QafSJaT_MfQbX9KDmsJx/s1600/sliding-panel-tab.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcM__VpNK8f6Gi38oaR3tXVCUbuaAtw95emr-vaK8JO6F1YcuDyg76vxJkrfYPRCKZVNe6jGo5geq55OcPmdZ7lt-VX_B6U2p3lBM5ThlWXW-3b8f2l-zBynvc741f4M6lwvmXCRCNNKq9/s1600/button-open.png) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhblbPTGv_Ab992YgQX3GHZB8P-NH2y-4kUOh8yVdgHptcQOWHNJAgGfsRAesm_Ha80DN5r63NMMjbXSwxNpTF9JrA4pIpMCdpumMj1MV51IgLn3JNgJ3u_EZDAcX0xz-zKNd4KE-MrvBl4/s1600/button-close.png) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcM__VpNK8f6Gi38oaR3tXVCUbuaAtw95emr-vaK8JO6F1YcuDyg76vxJkrfYPRCKZVNe6jGo5geq55OcPmdZ7lt-VX_B6U2p3lBM5ThlWXW-3b8f2l-zBynvc741f4M6lwvmXCRCNNKq9/s1600/button-open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhblbPTGv_Ab992YgQX3GHZB8P-NH2y-4kUOh8yVdgHptcQOWHNJAgGfsRAesm_Ha80DN5r63NMMjbXSwxNpTF9JrA4pIpMCdpumMj1MV51IgLn3JNgJ3u_EZDAcX0xz-zKNd4KE-MrvBl4/s1600/button-close.png) no-repeat left -19px;}

#slide-top-panel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 230px; 
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 18px;
color: #F2F2F2;
text-align: center;
padding: 5px 0 10px;
margin: 0;
}
#panel p {
margin: 5px 0;
padding: 0px;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #545454;
border-radius: 10px;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 18px;
}
#panel .content input:focus.field {
background: #7F7F7F;
}
#panel .content input.button-register {
display: block;
clear: both;
height: 24px;
width: 94px;
color: white;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPTMI_S7NJdDfBCsfOB6Zp2lqq3ZGbXbUBPsrlEekP5HcPilg3NQ28SJc3v9uRZH8gSfnYuYZofCs_zw9XD36zk8SFo6HI6IKhdo-IW7nFAVb6h-cag2GBnbjoIG3icx246gJprLhhyphenhyphenZM9/s1600/button-register.png) no-repeat 0 0;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px auto;
}
#sliding-panel {
width: 160px;
float: left;
}
#sliding-panel2 {
width: 160px;
float: right;
}
#sliding-panel ul, #sliding-panel2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#sliding-panel ul li a, #sliding-panel2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHnlsuXL0usnlt8LGx5ohvO5MC4rIUrslWrD99v_-Df3bdgFrRI5grszjxtR-KFYolZ7fkNyIR_Pvn0_EwAtTkpKKubzYh8wzAyDVQui32nM1aekVFXcIzgxE37Upy0gkqziFICZjksNCo/s1600/star-bullet.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#sliding-panel li, #sliding-panel2 li {
display: inline;
}
#sliding-panel a, #sliding-panel2 a{
color: #999999;
text-decoration: none;
font-size: 11px;
display: block;
padding: 3px;
width: 160px;
}
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {
color: #999999;
text-decoration: none;
}
#sliding-panel a:hover, #sliding-panel2 a:hover {
color: #FFFFFF;
}

#search-box22{
margin-top: 20px;
}

#search-box22 input[type="text"] {
float: right;
background: 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 160px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search-box22 input[type="text"]:focus {
width: 190px;
}

.about-author {
width: 100%;
text-transform: none;
margin-top: 15px;
}
.authorbox {
overflow: hidden;
padding: 0;
width: 100%;
}
.authorbox .authorinfo {
}
.authorbox .authorinfo img {
float: left;
margin: 4px 10px 4px 5px;
border-radius: 100%;
width: 20%;
background: #222;
padding: 5px;
}
.authorbox .authorinfo p {
margin: 0;
padding: 0 5px;
text-align: left;
}
.authorinfo p a {
text-decoration:none;
}
.authorbox h3 {
margin: 0;
display: inline-block;
}
h3.boxtitle {
font-size: 14px;
}
Thay chiều cao và nền cho phù hợp

#Thêm HTML

1. > Tìm thẻ <body> 
Nếu không thấy thẻ trên thì hãy tìm thẻ :
 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
2. > Dán code dưới vào trên thẻ vừa tìm được
<!-- Start sliding panel -->
<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>

<!-- first section -->
<div class='left' style='width:240px !important'>

<h4>Welcome to my blog!</h4>
<div class='about-author'>
<div class='authorbox'>
  <div class='authorinfo'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLhDM2gUgn1joHiaCq7fzlNaWT3AJkXl2BZZ1gu9c_v85_oRXHM0JlOJtO8XajFB-Q0oxAKBF75BZdAjKAH-v2BspbKBX38FGR7IGMF0pKuktyiD3XqEucHlZFkhJnri4n7_wudYB850MC/s1600/profile-pic.png'/>
<h3 class='boxtitle'>Meet the Author</h3>
<p>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti.</p>
</div>
</div>
</div>
<p align="right" style="margin-top: 10px;">Looking for something?</p>
<form method="get" action="/search" id="search-box22">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

</div>

<!-- second section -->
<div class='left' style='width:320px !important'>
<h4>Categories</h4>

<div id='sliding-panel'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>

<div id='sliding-panel2'>
<ul>
<li><a href='Link URL'>Category 1</a></li>
<li><a href='Link URL'>Category 2</a></li>
<li><a href='Link URL'>Category 3</a></li>
<li><a href='Link URL'>Category 4</a></li>
<li><a href='Link URL'>Category 5</a></li>
<li><a href='Link URL'>Category 6</a></li>
<li><a href='Link URL'>Category 7</a></li>
</ul>
</div>
</div>

<!-- third section -->
<div class='left right' align="center">

<h4>Subscribe to this blog!</h4>
<p style="padding:0px 30px;">Receive the latest posts by email. Just enter your email below if you want to subscribe!</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=Feed-Name' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Feed-Name'/>
<input name='lang' type='hidden' value='en_EN'/>
<input class='button-register' type='submit' value='Subscribe'/></form>

<div align='center' style="clear: both;">
<a href='http://www.facebook.com/username'><img title="Follow on Facebook" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrxaaMq8cbzM3DgbzR7XrAQnyQcFz5dyiVJZ_lSpjv8nAbegi9TLo3TVzKFCIFoLfoJTvOVIlOMOsxSrlGMnIlk0q6F5UF4y4eiNsSlqGEI9lwVnpDMpBF5PB-KohTvkxEBCoHZMkvjP3Z/s1600/Facebook.png' style='padding:5px;' width='32'/></a>
<a href='http://blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwwzVEpAeony5UBXLKxKmhVf4hk8MQ-Gjk_euE9SMmLFHeYfsnz23Frb83h3w9tz1BYOAdOPaGSEMlXb4EeoqxD-cVoqApGWKLkaXR_u0E1GSgrSlfDFJ8SdirHx736vcN7UIQykWp85Xj/s1600/RSS.png' style='padding:5px;' width='32'/></a> 
<a href='https://plus.google.com/username'><img title="Follow on Google" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNAGfBcbYYq4k_F1nS72si5BteVpDhmJdudR0MOUjn5FG3PKEgjihrYpSNAiRSMjj6eV-riLIyVkqUUflGu-iOoKaoOBkobEMQm1OrAuS97BkA-E6mwuG8P3imN6TRs8Pyi8hY1SVl1kGa/s1600/Google-plus.png' style='padding:5px;' width='32'/></a> 
<a href='http://twitter.com/username'><img title="Follow on Twitter" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifmtvIcFk7t8QEx8t1S05FNOlswAp1nQRME4LHbzBT8h7c-Aih3e__QOMg4zbp3v6_kBSP7dywv5gPPvKrl7pP9yAd8eIhWSn2n8Yt5esIjE0yAM_0T5a3HuDxr8xbMseWGjr4xM0Xndc5/s1600/Twitter.png' style='padding:5px;' width='32'/></a>
</div>

</div>
</div>
</div>

<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hello guest!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Open menu</a>
<a class='close' href='#' id='close' style='display: none;'>Close menu</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
Thay những đoạn màu đỏ thành các liên kết và đoạn màu cam thành những đoạn bạn muốn. Khi thay đoạn Welcome to my blog! và phần mô tả author thành những đoạn dài thì bạn nên điều chỉnh lại height: 230px;  ở phần #Thêm CSS.
3. > Save và xem kết quả.
Nguồn Heplogger
Hi! My name is Quoc Khanh. I am from Vietnam.

Comments

  1. UnknownFebruary 8, 2015 at 9:51 AM

    This comment has been removed by a blog administrator.

    ReplyDelete

Post a Comment



» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.