| Thông tin | |
|---|---|
| Tiêu đề | Tạo menu dọc ẩn hiện cực đẹp cho blogspot |
| Chuyên mục | Blogger, Thủ Thuật, Thủ Thuật Blogspot |
| Định dạng | File PDF |
| Ngày đăng | 20 tháng 5 |
| Lượt xem | |
| Lượt thích | |
Chào các bạn hôm nay mình sẽ chia sẻ đến các bạn cách Tạo menu dọc ẩn hiện cực đẹp cho blogspot.
Chúc các bạn thành công.
Nếu bạn không làm được hoặc gặp lỗi gì thì comment bên dưới bài này mình sẽ hỗ trợ nhé.
DEMO
Cách thực hiện
Bước 1: Các bạn vào Chủ đề > Chỉnh sửa tìm đến thẻ ]]></b:skin> rồi dán đoạn code sau lên trước thẻ này:.logo{}Bước 2: Thêm đoạn code sau bên dưới thẻ <body>
.settings{height:73px;float:left;background:url(http://s3.postimg.org/bqfooag4z/startific.jpg);background-repeat:no-repeat;width:250px;margin:0;text-align:center;font-size:20px;font-family:'Strait',sans-serif}
.scrollbar{height:90%;width:100%;overflow-y:hidden;overflow-x:hidden}
.scrollbar:hover{height:90%;width:100%;overflow-y:scroll;overflow-x:hidden}
#style-1::-webkit-scrollbar-track{border-radius:2px}
#style-1::-webkit-scrollbar{width:5px;background-color:#F7F7F7}
#style-1::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#BFBFBF}
.fa-lg{font-size:1em}
.fa{position:relative;display:table-cell;width:40px;height:36px;text-align:center;top:12px;font-size:20px}
.main-menu:hover,nav.main-menu.expanded{width:250px;overflow:hidden;opacity:1}
.main-menu{background:#F7F7F7;position:absolute;top:0;bottom:0;height:100%;left:0;width:40px;overflow:hidden;-webkit-transition:width .2s linear;transition:width .2s linear;-webkit-transform:translateZ(0) scale(1,1);box-shadow:1px 0 15px rgba(0,0,0,0.07);opacity:1}
.main-menu>ul{margin:7px 0}
.main-menu li{position:relative;display:block;width:250px}
.main-menu li>a{position:relative;width:255px;display:table;border-collapse:collapse;border-spacing:0;color:#8a8a8a;font-size:13px;text-decoration:none;-webkit-transform:translateZ(0) scale(1,1);-webkit-transition:all .14s linear;transition:all .14s linear;font-family:'Strait',sans-serif;border-top:1px solid #f2f2f2;text-shadow:1px 1px 1px #fff}
.main-menu .nav-icon{position:relative;display:table-cell;width:55px;height:36px;text-align:center;vertical-align:middle;font-size:18px}
.main-menu .nav-text{position:relative;display:table-cell;vertical-align:middle;width:190px;font-family:'Titillium Web',sans-serif}
.main-menu .share{}
.main-menu .fb-like{left:180px;position:absolute;top:15px}
.main-menu>ul.logout{position:absolute;left:0;bottom:0}
.no-touch .scrollable.hover{overflow-y:hidden}
.no-touch .scrollable.hover:hover{overflow-y:auto;overflow:visible}
.settings:hover,settings:focus{background:url(http://s17.postimg.org/74cl7s05b/logo_hover.jpg);-webkit-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;-moz-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;-o-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0}
.settings:active,settings:focus{background:url(http://s3.postimg.org/bqfooag4z/startific.jpg);-webkit-transition:all 0.1s ease-in-out,width 0,height 0,top 0,left 0;-moz-transition:all 0.1s ease-in-out,width 0,height 0,top 0,left 0;-o-transition:all 0.1s ease-in-out,width 0,height 0,top 0,left 0;transition:all 0.1s ease-in-out,width 0,height 0,top 0,left 0}
a:hover,a:focus{text-decoration:none;border-left:0 solid #F7F7F7}
nav{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
nav ul,nav li{outline:0;margin:0;padding:0;text-transform:uppercase}
.darkerli{background-color:#ededed;text-transform:capitalize}
.darkerlishadow{background-color:#ededed;text-transform:capitalize;-webkit-box-shadow:inset 0 5px 5px -4px rgba(50,50,50,0.55);-moz-box-shadow:inset 0 5px 5px -4px rgba(50,50,50,0.55);box-shadow:inset 0 5px 5px -4px rgba(50,50,50,0.55)}
.darkerlishadowdown{background-color:#ededed;text-transform:capitalize;-webkit-box-shadow:inset 0 -4px 5px -4px rgba(50,50,50,0.55);-moz-box-shadow:inset 0 -4px 5px -4px rgba(50,50,50,0.55);box-shadow:inset 0 -4px 5px -4px rgba(50,50,50,0.55)}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a{color:#fff;background-color:#00bbbb;text-shadow:0 0 0}
.area{float:left;background:#e2e2e2;width:100%;height:100%}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:300;src:local('Titillium WebLight'),local('TitilliumWeb-Light'),url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff')}
<nav class="main-menu">Bước 3: Thêm đoạn code sau bên trên thẻ </head>
<div>
<a class="logo" href="#">
</a>
</div>
<div class="settings">
</div>
<div class="scrollbar" id="style-1">
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i>
<span class="nav-text">Login</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-envelope-o fa-lg"></i>
<span class="nav-text">Contact</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-heart-o fa-lg"></i>
<span class="share">
</span></a><span class="share"><div class="addthis_default_style addthis_32x32_style">
<a href="#"></a>
<div style="margin-left: 56px; position: absolute; top: 3px;">
<a href="#"></a><a href="#"></a><a class="share-popup" href="http://www.facebook.com/sharer/sharer.php?u=" target="_blank"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" height="30px" width="30px" /></a>
<a class="share-popup" href="http://twitter.com/share" target="_blank"><img height="30px" src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Twitter_alt.png" width="30px" /></a>
<a class="share-popup" href="https://plusone.google.com/_/+1/confirm?hl=en&url=_URL_&title=_TITLE_" target="_blank"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/google-plus-icon.png" height="30px" width="30px" /></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a" type="text/javascript"></script>
</div>
</span>
<span class="twitter"></span>
<span class="google"></span>
<span class="fb-like">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fstartific&width&layout=button&action=like&show_faces=false&share=false&height=35" style="border: none; height: 35px; overflow: hidden;"></iframe>
</span>
<span class="nav-text">
</span>
</li>
<li class="darkerlishadow">
<a href="#">
<i class="fa fa-clock-o fa-lg"></i>
<span class="nav-text">News</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-desktop fa-lg"></i>
<span class="nav-text">Technology</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-plane fa-lg"></i>
<span class="nav-text">Travel</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-shopping-cart"></i>
<span class="nav-text">Shopping</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-microphone fa-lg"></i>
<span class="nav-text">FilmMusic</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-flask fa-lg"></i>
<span class="nav-text">Web Tools</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-picture-o fa-lg"></i>
<span class="nav-text">Art Design</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-align-left fa-lg"></i>
<span class="nav-text">Magazines
</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-gamepad fa-lg"></i>
<span class="nav-text">Games</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-glass fa-lg"></i>
<span class="nav-text">Life Style
</span>
</a>
</li>
<li class="darkerlishadowdown">
<a href="#">
<i class="fa fa-rocket fa-lg"></i>
<span class="nav-text">Fun</span>
</a>
</li>
</ul>
<li>
<a href="#">
<i class="fa fa-question-circle fa-lg"></i>
<span class="nav-text">Help</span>
</a>
</li>
<ul class="logout">
<li>
<a href="#">
<i class="fa fa-lightbulb-o fa-lg"></i>
<span class="nav-text">
BLOG
</span>
</a>
</li>
</ul>
</div>
</nav>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>Cuối cùng bạn lưu lại và tận hưởng thành quả nhé. Các bạn có thể tùy chỉnh lại cho phù hợp với Blog của mình nhé.
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:300' rel='stylesheet' type='text/css'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
Chúc các bạn thành công.
Nếu bạn không làm được hoặc gặp lỗi gì thì comment bên dưới bài này mình sẽ hỗ trợ nhé.
Tạo menu dọc ẩn hiện cực đẹp cho blogspot là một trong những bài viết về chủ đề Thủ Thuật Blogspot . Ngoài ra chúng tôi còn rất nhiều bài biết khác về chủ đề này nữa. Hãy tìm thêm cho mình những tài liệu khác nữa để nâng cao kiến thức nhé!
Bình Luận Gần Đây