Code Tạo Menu Ngang Đóng Mở Tuyệt Đẹp Cho Blogspot

Code Tạo Menu Ngang Đóng Mở Tuyệt Đẹp Cho Blogspot

Hello anh em, lâu lắm rồi chưa có bài nào liên quan đến Thủ Thuật Blogspot nhỉ và hôm nay mình sẽ giới thiệu và hướng dẫn anh em Code Tạo Menu Ngang Đóng Mở Tuyệt Đẹp cho blogspot nhé !!
CÁC BƯỚC THỰC HIỆN :
Bước 1 : Chèn đoạn code sau vào nơi muốn hiện
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> <div id="wrapper"> <div id="toolbar"> <div class="button"></div> <ul class="icons"> <li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li> <li><i class="fa fa-user fa-2x" aria-hidden="true"></i></li> <li><i class="fa fa-star fa-2x" aria-hidden="true"></i></li> <li><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></li> <li><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></li> </ul> </div> </div> </div> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>

Bước 2 : Chèn đoạn code sau vào trước thẻ ]]></b:skin>
#wrapper { text-align:center; font-family: 'Lato', sans-serif; text-transform:uppercase; } #toolbar { width:100%; max-width:670px; min-width:550px; margin: 70px auto; } .button { width:70px; height:70px; border-radius:50%; background-color:#3AB09E; color:#ffffff; text-align:center; font-size:3.5em; position:relative; left:50%; margin-left:-35px; z-index:1; } .button,.icons{ -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44); transition: all 1s cubic-bezier(.87,-.41,.19,1.44); } .button:after { content:"+"; } .button.active { -webkit-transform: rotate(45deg); transform: rotate(45deg); left:60px; } .icons { width:0%; overflow:hidden; height:36px; list-style:none; padding:16px 10px 10px 50px; background-color:#ffffff; box-shadow: 1px 1px 1px 1px #DCDCDC; margin:-68px 0 0 45%; border-radius: 2em; } .icons.open { width:80%; margin:-68px 0 0 5%; overflow:hidden; } .icons li { display: none; width:10%; color:#3AB09E; } .icons.open li { width:16%; display: inline-block; }

Bước 3: Chèn đoạn JS sau vào
$( ".button" ).click(function() {
$(this).toggleClass( "active" );
$(".icons").toggleClass( "open" );
});
Share Code Hộp Thông Tin Admin Đẹp Cho Blogspot

Share Code Hộp Thông Tin Admin Đẹp Cho Blogspot

Hi anh em, lâu lắm chưa viết bài về bài thủ thuật blogspot rồi nhỉ và hôm nay mình sẽ giới thiệu cho anh em Code Hộp Thông Tin Admin Đẹp Cho Blogspot được mình lấy bên Hồng Hải , mong anh em thích !!
CÁC BƯỚC THỰC HIỆN :
Bước 1 : Chèn đoạn CSS dưới đây dán trước thẻ ]]></b:skin>
/* CSS Widget Info About Us */
.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#222;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#e74c3c}
kepala{background:#de9b31;height:50px;width:100%;position:inherit}
#textlogo{background:#f0a734;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:58.4%;box-sizing:initial;font-family:sans-serif;}
#left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit;font-family: sans-serif}
#left a{color:#bdc3c7;text-decoration: none;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;}
.taber1:hover{background:#52537d;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#1abc9c;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal;font-size:13px}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{display:none;}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:relative;top:5px;border-radius:50px;float:right;right:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}
a.popup-close:hover{color:#fff}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999}
.totalposts .totallabel{font-weight: 500;font-size: 16px;display:block;text-transform:uppercase;color:#52537d}
li.infoindzign{border:0;float:right;list-style:none;font-family: 'Roboto Condensed';}
li.infoindzign a{background:#52537d;color:#fff;display:block;margin: -5px 20px -16px 9px;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-family:'Roboto Condensed';transition:background-color .3s;    text-decoration: none;}
li.infoindzign a:hover{background:#2a2a2a;color:#fff}
i.infoindzign a:hover{background:#e67e22;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}
    #left {    display: none;}
#aboutus{width:100%}
}
.textgg{    top: 50px;

    padding: 10px;
    color: #444;
    text-align: left;
    position: inherit;
    float: left;
    line-height: normal;
    font-size: 17px;
    font-family: sans-serif}
Bước 2 : Chèn đoạn HTML sau vào chỗ nào bạn muốn hiện
<li class='infoindzign'>
<a class='popup-link' href='#popup'>Thông Tin Về Admin Blog</a></li>
<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'></div>
<div class='circle'></div>
<div class='circle'></div>
<div class='contentbox'>
<kepala><span id='textlogo'>Tuổi Trẻ IT</span>
<a class='popup-close' href='#closed' title='Close'>&#215;</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='Tuổi Trẻ IT' src='//3.bp.blogspot.com/-jrxkYbBQAYs/VidR2h2eDeI/AAAAAAAALJ8/Vg7CzLW0oYo/s1600/indzign.jpg' title='Tuổi Trẻ IT'/><br/>
<script src='/feeds/posts/default?alt=json-in-script&callback=getposts'></script>
<div class='textgg'>
Mình là người thành lập, đồng thời cũng là quản lý và biên tập viên chính của Blog này. Mình bắt đầu tham gia Blogger (Blogspot) vào năm 2016.<br/><br/>
Tuổi Trẻ IT là Blog được thành lập năm 2016 trên nền tảng Blogspot của Google với mục đích cá nhân là chia sẻ thủ thuật blogger/blogspot, thủ thuật máy tính, template blogspot,... và nhiều tiện ích khác. Ban đầu nội dung cũng khá sơ sài và không có nhiều chủ đề, được sự ủng hộ cũng như yêu thích của nhiều người nên Hồng Hải BLog đã mở rộng nội dung sang nhiều phần hơn nữa, ví dụ như thủ thuật, template Blogspot, thủ thuật, phần mềm Windows, thủ thuật facebook, youtube, photoshop và các tiện ích linh tinh... <br/><br/>
Năm sau mình đã là học sinh cuối cấp, vì vậy có thể mình sẽ không toàn tâm toàn ý mà tiếp tục phát triển cái Blog này được nữa. Vì thế hiện tại mình đang tuyển Cộng Tác Viên viết bài cho Blog của mình, nếu quan tâm, bạn hãy xem chi tiết về quyền lợi cũng như một số thứ khác tại đây. 
Đây là Blog tâm huyết duy nhất mình thành lập và gầy dựng lên, với 'tham vọng' trở thành 1 blog lớn trên các diễn đàn, mạng xã hội. Hy vọng các bạn sẽ ủng hộ thật nhiều, để mình có động lực mà mang đến những bài viết hay và hữu ích hơn nữa! 
Cảm ơn, <br/><br/>
Admin - Hồng Hải.
  </div>
</div></div></div>
<div id='left'>
<div class='taber1'><a href='/' rel='nofollow' target='_blank' title='Tuổi Trẻ IT'>Tuổi Trẻ IT</a></div>
<div class='taber2'><a href='https://plus.google.com/+H%E1%BB%93ngH%E1%BA%A3i001' rel='nofollow' target='_blank' title='Follow Us On Google+'>Google+</a></div>
<div class='taber3'><a href='https://www.facebook.com/NguyenDucNamDz' rel='nofollow' target='_blank' title='Follow Us On Facebook'>Facebook</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow.g?blogID=7734893201852337172' rel='nofollow' target='_blank' title='Join this blog'>Theo dõi blog</a></div>
</div></div></div></div></div>
<!-- Icon Mở Menu -->
<a class='toggleMenu ripple' title='Mở menu'><i class='fa fa-align-left'></i></a>
TỔNG KẾT :
Chúc các bạn thành công và luôn ủng hộ Blog Tuổi Trẻ IT nhé 
Tạo Box Like Fanpage Facebook Khi Vào Blog

Tạo Box Like Fanpage Facebook Khi Vào Blog

Hello anh em, lâu rồi cũng chưa ra bài về thủ thuật blog nên hôm nay mình sẽ chia sẻ cho anh em code Box Like Fanpage Facebook khi vào blog nhé !
DEMO
CÁC BƯỚC THỰC HIỆN : 
BƯỚC 1 : Vào Blog -> Bố Cục
BƯỚC 2 : Thêm Tiện Ích -> Chọn HTML/JAVASCRIPT
BƯỚC 3 : Dán Code Sau Vô
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#JasperRoberts {
background:white;
width:420px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#Blogduykhanh {
float:right;
cursor:pointer;
background:url(http://1.bp.blogspot.com/-BQ6jAqUL02c/VfUrhyXMACI/AAAAAAAAOlI/nPchfv0xdwE/s1600/blogduykhanhfacebookpopup.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(10000).fadeIn('medium');
$('#Blogduykhanh, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='JasperRoberts'>
<div id='Blogduykhanh'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/Hùng-Blogger-167996720514843&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin: -27px 8px -18px 9px; width: 402px; height: 230px;'></iframe><center>
<span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a style="color:#a8a8a8;font-size:8px;"http://www.hungblogger.com">Hùng Blogger</a> - <a style="color:#a8a8a8;font-size:8px;" href="https://www.facebook.com/Hùng-Blogger-167996720514843">Fanpage</a></span></center>
</div>
</div>
Trong mặc định ở đoạn code trên popup sẽ tự bật lên sau 10 giây tải trang. Nếu bạn muốn thay đổi nó bạn có thể tìm trong đoạn code trên.delay(10000)Và sửa nó theo ý mình. Đơn vị tính là mili giây, ví dụ bạn muốn đặt thời gian là 30 giây thì có thể sửa thành.delay(30000)
Thay link fanpage facebook sau thành link fanpage facebook của bạn
https://www.facebook.com/Hùng-Blogger-167996720514843
Tổng kết :
Chỉ cần một vài bước thì các bạn đã có Box Like Fanpage Facebook tuyệt đẹp khi vào blog rồi ! Chúc Các Bạn Thành Công 

Share Nút Sáng - Tối & Hẹp - Rộng Cho Blogspot Đẹp

Share Nút Sáng - Tối & Hẹp - Rộng Cho Blogspot Đẹp

Hello anh em, hôm nay mình giới thiệu cho anh em 2 nút Sáng - Tối & Hẹp - Rộng nhé

DEMO + CÁCH LÀM :

DEMO


Cách bước thực hiện :
Bước 1 : Chèn đoạn CSS dưới đây dán trước thẻ ]]></b:skin>
/*========== Dark Skin ==========*/
body.dark-skin{background-image:url(https://i.imgur.com/K9LcLAi.jpg);color:#fff}
body.dark-skin body.boxed-layout{box-shadow:none!important}
body.dark-skin #main-wrapper{background:#1c1c1c}
body.dark-skin .post-outer{background:#1c1c1c;border-bottom:1px solid #555}
body.dark-skin #sidebar-wrapper .widget-content{background:#1c1c1c}
body.dark-skin #outer-wrapper{background:#111111}
body.dark-skin .item .post-title,body.dark-skin .index .post-title a{color:#fff}
body.dark-skin .post-readmore a{color:#888}
body.dark-skin .PopularPosts li a{color:#fff}
body.dark-skin #PopularPosts1 .widget-content ul li a{color:#fff}
body.dark-skin #PopularPosts2 ul li .item-title a:hover, .PopularPosts ul li a:hover{color:#fff}
body.dark-skin #PopularPosts1 li:nth-child(2n+2){background:#2c2c2c}
body.dark-skin .sidebar .widget-title{background:#333}
body.dark-skin #sidebar .widget h2{color:#eee}
body.dark-skin .ty-share-post{border:0;box-shadow:none}
body.dark-skin #related-postsst ul li a,body.dark-skin,body.dark-skin a.bhome{color:#fff}
body.dark-skin span.option-name,body.dark-skin span.option-name-2{color:#222}
body.dark-skin #blog-pager-newer-link a,body.dark-skin #blog-pager-older-link a,body.dark-skin a.home-link{color:#fff}
body.dark-skin #blog-pager-newer-link a:hover,body.dark-skin #blog-pager-older-link a:hover,body.dark-skin a.home-link:hover{color:#fff}
body.dark-skin .post-meta a,body.dark-skin .post-meta span,body.dark-skin .post-meta i{color:#888!important}
body.dark-skin .item .post-body{color:#777}
body.dark-skin #related-posts h5{background:#333;color:#eee;border-bottom:2px solid #444}
body.dark-skin #related-posts a{background:#222}
body.dark-skin .content_author{background:#222}
body.dark-skin .dot_author_right{border-right:10px solid #222}
body.dark-skin p.author_title{color:#fff}
body.dark-skin p.description{color:#eee}
body.dark-skin .comments h4,body.dark-skin .facebook-comment h4{background:#333;color:#eee}
body.dark-skin .comments{background:#272727}
body.dark-skin .comment_inner{background:#222}
body.dark-skin .comment_child .comment_wrap,body.dark-skin .comment_reply_form{border-left:1px solid #444}
body.dark-skin #comment-rule{background:#222;color:#eee}
body.dark-skin #comment-rule p:after{border-color:#222 transparent transparent}
body.dark-skin .comments iframe{background:#111}
body.dark-skin .brakt-buy-now{color:#777}
body.boxed-layout{max-width:1200px!important;margin:auto;box-shadow:0 0 10px #aaa!important}
Bước 2 : Tìm thẻ <body> và thay bằng đoạn code dưới 
<body class='index'>                                                  <style>
#open-switcher{display:block;color:#333;background:#fff;border:1px solid #ddd;position:absolute;top:-1px;left:-50px;border-radius:10px 0 0 10px;cursor:pointer;font-size:25px;text-align:center;line-height:50px;color:#fff;z-index:999999999999}
span.close-switcher,span.cog{color:#444;padding:14px;overflow:hidden}
#brakt-switcher{position:fixed;width:225px!important;display:block!important;top:100px;right:0;display:block;background:#fff;border:1px solid #ddd;z-index:999999999999;border-radius:0 0 0 10px;box-shadow:0 0 25px rgba(0,0,0,0.2);transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}
#brakt-switcher h2{font-size:20px;text-align:center;line-height:33px;margin-bottom:20px;display:none}
#brakt-switcher h2 .fa{margin-right:5px}
#brakt-switcher h3{color:#333;font-size:14px;text-align:center;line-height:20px;padding-top:10px;margin-bottom:10px;font-family:'Open Sans'}
.brakt-switcher-mood .fa{margin-right:5px}
.brakt-switcher-mood{display:block;font-family:'Open Sans'}
.brakt-switcher-mood ul{display:block;padding:0;padding-top:10px;overflow:hidden;text-align:center;border-bottom:1px solid #eee}
.brakt-switcher-mood ul li{display:inline-block;padding:0!important;width:41%;height:29px;line-height:29px;float:left;margin:0 10px;margin-bottom:10px;overflow:hidden}
.brakt-switcher-mood ul li span{padding:2px;width:100%;display:block;background:#eee;cursor:pointer;border-radius:1px;transition:all .2s ease;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease}
.brakt-switcher-mood ul li span:hover{background:#000;color:#fff}
.brakt-switcher-color{text-align:center;display:none}
.brakt-switcher-color span{height:35px;width:35px;border-radius:50%;line-height:0;cursor:pointer;display:inline-block;background-color:#eee;border:3px solid #fff}
.active-color{box-shadow:0 0 5px #aaa}
span.active-list{color:#fff;background:#0575E6;background:#3b5998!important}
.active-fimg{color:#fff;background:#0575E6;background:#3b5998!important}
span.grid.active-list{background:#e9bc30;color:#fff}
span.normal.active-list{background:#e9bc30;color:#fff}
@media screen and (max-width: 640px) {
#brakt-switcher{position:fixed;width:225px!important;display:block!important;top:70px}
}
.switch{background-color:#d6d6d6;border-radius:25px;color:#fff;cursor:pointer;display:block;font-size:14px;height:26px;position:relative;width:60px;margin:auto;text-align:center;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.switch.checked{background-color:#76d21d}
.switch input[type="checkbox"]{cursor:pointer;height:10px;left:12px;position:absolute;top:6px;-webkit-transition:left .05s ease-in-out;-moz-transition:left .05s ease-in-out;-o-transition:left .05s ease-in-out;-ms-transition:left .05s ease-in-out;transition:left .05s ease-in-out;width:10px}
.switch.checked input[type="checkbox"]{left:38px}
.switch input::before{background:#fff;border:1px solid #fff;border-radius:50%;content:'';position:absolute;top:-6px;left:-10px;width:20px;height:20px}
.switch .icon-ok,.switch .icon-remove{line-height:28px;text-shadow:0 -2px 0 rgba(0,0,0,0.2);margin:0 9px}
.switch .icon-ok{float:left}
.switch .icon-remove{float:right}
.swich-mood{overflow:auto}
.sw-1{width:50%;float:left;text-align:center;margin:auto;padding:6px 0}
.border-r{border-right:1px solid #eee}
body.item.fimg .post-body img:first-child{display:none}
.switch.checked span.b-active{float:right}
span.b-active{background:#fff;border-radius:50%;width:20px;height:20px;display:inline-block;float:left;margin:3px 5px}
span.option-name,span.option-name-2{color:#222}
</style>
<div id='brakt-switcher'>
<div id='open-switcher'><span class='zer cog' style='display:none;'><i class='fa fa-cog fa-spin'></i></span><span class='zer close-switcher'><i aria-hidden='true' class='fa fa-times'></i></span></div>
<h2><i aria-hidden='true' class='fa fa-user-circle'></i><br/>Customize</h2>
<div class='brakt-switcher-mood'>
<div class='swich-mood'>
<div class='sw-1 border-r'>
<span class='option-name'><i aria-hidden='true' class='fa fa-sun-o'></i>Light Skin</span><span class='option-name' style='display:none;'><i aria-hidden='true' class='fa fa-moon-o'></i>Dark Skin</span>
<label class='switch light-mood'>
<span class='b-active'></span>
</label>
</div>
<div class='sw-1'>
<span class='option-name-2'><i aria-hidden='true' class='fa fa-arrows-h'></i>Wide</span><span class='option-name-2' style='display:none;'><i aria-hidden='true' class='fa fa-stop'></i>Boxed</span>
<label class='switch b-boxed'>
<span class='b-active'></span>
</label>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[ 
$(function() {

  $('.switch light-mood').change(function(){
    $(this).toggleClass('checked');
  });

});
$( ".close-switcher" ).click( function() {
 $( "#brakt-switcher" ).css( "right", "-225px" ),
 $( this ).addClass( "open-s" );
});
$( ".cog" ).click( function() {
 $( "#brakt-switcher" ).css( "right", "0px" )
});
$( "#open-switcher" ).click( function() {
  $( ".zer" ).toggle();
});
$( ".dark-mood" ).click(function() {
  $( "body" ).addClass( "dark-skin" );
  $( "body" ).addClass( "checked" );
});


$( ".light-mood" ).click(function() {
  $( "body" ).toggleClass( "dark-skin" );
  $( ".light-mood" ).toggleClass( "checked" );
  $( ".option-name" ).toggle();
});

$( ".b-boxed" ).click(function() {
  $( "body" ).toggleClass( "boxed-layout" );
  $( ".b-boxed" ).toggleClass( "checked" );
  $( ".option-name-2" ).toggle();
});
      //]]>
    </script>

Tổng kết :

Vậy là mình đã hướng dẫn ae làm 2 Nút Sáng - Tối & Hẹp - Rộng rồi !

view-source:blogsechiathuthuat.com

Tạo Chuyên Mục Nhãn Bằng CSS Cho Blogspot Đẹp

Tạo Chuyên Mục Nhãn Bằng CSS Cho Blogspot Đẹp


Xin chào tất cả các bạn, hôm nay mình sẽ hướng dẫn các bạn làm một chuyên mục hot bằng nhãn nhìn cực đẹp cho blogger/blogspot nhé.

HƯỚNG DẪN CÁCH LÀM :

Bước 1 : Vào Bố Cục -> Chọn Nơi Bạn Muốn Hiện Nhãn -> Thêm Tiện Ích Nhãn
Bước 2 : Chèn đoạn code sau đây trước ]]></b:skin>
/* Nhãn TTIT */
.cloud-label-widget-content {display: inline-block;text-align: left;}.cloud-label-widget-content .label-size {display: inline-block;float: left;font-size: 16px;line-height: normal;margin: 0 5px 5px 0;opacity: 1}.cloud-label-widget-content .label-size a {background: #f3f6f9 none repeat scroll 0 0;color: #212121;float: left;border: 3px double #eee;font-weight: 400;line-height: 100%;margin: 0;padding: 7px 8px;text-transform: capitalize;transition: all .6s;letter-spacing: 1.5px;font-family: Montserrat;}.cloud-label-widget-content .label-size a:before {color: #00bcd4;font-family: 'FontAwesome';content: "\f00c";padding: 0 10px 0 0;font-size: 16px;}.cloud-label-widget-content .label-size a:hover,.cloud-label-widget-content .label-size a:active {color: #00bcd4 !important;}.cloud-label-widget-content .label-size .label-count {display:none;}.list-label-widget-content li {display: block;padding: 8px 0;border-bottom: 1px solid #ececec;position: relative}.list-label-widget-content li a:before {content: '\f00c';position: absolute;left: 0;top: 10px;font-size: 16px;color: #00bcd4;font-family:fontawesome;}.lowerbar .list-label-widget-content li a {color:#010101;}.lowerbar .list-label-widget-content li {border-bottom: 1px solid rgba(0,0,0,.1);border-top: 0;}.lowerbar .list-label-widget-content li:last-child {}.list-label-widget-content li a {color: #282828;font-size: 14px;padding-left: 20px;font-weight: 400;text-transform: capitalize;font-family: Montserrat;letter-spacing: 1.5px;}.list-label-widget-content li span:last-child {color: #f6b2ca;font-size: 12px;font-weight: 700;position: absolute;top: 9px;right: 0}

Bước 3 : Lưu lại và xem

Tổng kết

Chúc các bạn thành công.
      Cách Tăng Traffic Cho Blog/Website Với Jingling

      Cách Tăng Traffic Cho Blog/Website Với Jingling

      Như các bạn đã biết hiện nay có rất nhiều ứng dụng tăng traffic như là 10KHITSHitsleapOKHits,... Nhưng những trang đó đều bắt chúng ta phải mua gói tăng traffic mà nếu chúng ta chơi miễn phí thì lượng traffic thu về rất ít! 
      Do đó hôm nay mình xin giới thiệu cho mọi người 1 phần mền tăng traffic khá là nổi tiếng đó là Jingling!
      Jingling là gì ?
        • Là một phần mềm trao đổi traffic rất mạnh được rất ngiều người sử dụng để boot traffic cho Blog/Website cũng như kiếm tiền từ các trang ăn lượt xem PTP, CPM.
        ƯU ĐIỂM : 
          • Không cần phải đăng ký tài khoản, chỉ việc tải về và sử dụng.
          • Lựa chọn nguồn traffic, tạo ref, tạo site chứa pop-up 20%, thiết lập khung giờ để trao đổi traffic,...
          • Nhiều người sử dụng
          • Không bị treo phần mềm.
          NHƯỢC ĐIỂM :
          • Sử dụng nhiều có thể làm hỏng máy tính, laptop của bạn do trong Jingling có chứa các tệp ngầm, sử dụng 100% CPU
          • Ít thông dụng trên VPS
          Để sử dụng phần mềm, đầu tiên các bạn tải phần mềm Tại Đây !
          Sau đó giải nén và mở phần mềm lên.
          Như trên hình các bạn có thể thấy để thêm Link cần tăng traffic chúng ta nhấn vào ô số 3ô số 1 là tổng số link được thêm, ô số 2 là tùy chọn cài đặt!
          OK chỉ cần bạn làm theo mình là có thể tạo một nguồn traffic mạnh mẽ cho Blog/Website của bạn rồi đó!
          Chúc các bạn thành công!
          Share Template Chuyển Hướng Cho Blogspot

          Share Template Chuyển Hướng Cho Blogspot

          Hello anh em ! Cũng được 3 ngày mình chưa viết bài rồi nhỉ , vậy nên hôm nay mình sẽ bù cho anh em bằng template chuyển hướng nhé 
          DEMO :
          CODE : 
          <?xml version="1.0" encoding="UTF-8" ?>
          <!DOCTYPE html>
          <HTML>
          &lt;head&gt;
          &lt;style&gt;&lt;!--/*<b:skin><![CDATA[
          */]]></b:skin>
          <style type='text/css'>
          #contain{position:absolute;z-index:9;top:32%;left:0;right:0;margin:auto;color:#3498db;}
          #contain h1{text-align:center;font-weight:600;font-size:4em;text-transform:uppercase;}
          #contain p{text-align:center;font-size:3em;font-weight:600}
          #contain p.smallest{color:#3498db;font-size:14px}
          #contain a{color:#3498db;font-weight:600}#contain span{font-weight:600}
          #contain a:hover{color:#3498db;text-decoration:line-through}
          #contain p.smallest a{color:#3498db;font-weight:200}
          #contain p.smallest a:hover{text-decoration:line-through}
          </style>
          <script type='text/javascript'>
            var count = 3; // Timer
            var redirect = &quot;http://www.tuoitreit.xyz&quot;; // Target URL
            function countDown() {
              var timer = document.getElementById(&quot;timer&quot;); // Timer ID
              if (count &gt; 0) {
                count--;
                timer.innerHTML = &quot;Bạn sẽ được chuyển tới Tuổi Trẻ IT trong &quot; + count + &quot; giây nữa.&quot;; // Timer Message
                setTimeout(&quot;countDown()&quot;, 1000);
              } else {
                window.location.href = redirect; }}
          </script>
          <script type='text/javascript'>
          if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;);
          </script>
           &lt;/head&gt;&lt;!--<head/>--&gt;
           <body>
          <div id='contain'>
          <h1>Xin lỗi các bạn, trang này không còn tồn tại </h1>
          <p id='timer'>
          <script type='text/javascript'>
          countDown();
          </script>
          </p>
          </div>
          <b:section class='tuoitreit' id='tuoitreit' preferred='no'/>
          &lt;!--</body>--&gt;&lt;/body&gt;
          </HTML>
           - Sửa http://www.tuoitreit.xyz thành link bạn muốn chuyển hướng
          - Sửa 3 thành thời gian bạn muốn chuyển hướng
          - Sửa Tuổi Trẻ IT thành tên blog của bạn

          TỔNG KẾT

          - Vậy mình đã cho anh em template chuyển hướng rồi nhé
          - Link tải cho anh em nào lười : Tại Đây

          Hướng Dẫn Làm Giao Diện Tìm Kiếm - Sitelinks

          Hướng Dẫn Làm Giao Diện Tìm Kiếm - Sitelinks

          Hello anh em, vấn đề SEO bây giờ rất quan trọng cho 1 web/blog và đi kèm với việc seo thì chúng ta phải có một giao diện tìm kiếm và mình sẽ Hướng Dẫn Làm Giao Diện Tìm Kiếm - Sitelinks

          SITELINKS LÀ GÌ ?
          Sitelink – Liên kết trang web là một thuật ngữ dùng để chỉ những liên kết được hiển thị bên dưới một số kết quả tìm kiếm của Google. Những liên kết này thường được sử dụng với chức năng làm gia tăng khả năng điều hướng người dùng trên website và phần nào giúp quảng cáo và nâng cao độ uy tín của website và những nội dung có trên website đến với người dùng.
          Ví dụ:
          – 1: Các kết quả tìm kiếm chính
          – 2: Liên kết trang web

          LÀM THẾ NÀO ĐỂ CÓ SITELINKS ?

          - Cách 1 :

          • Các bạn vào blog của bạn chọn Chủ đề -> Chỉnh sửa
          • Coppy đoạn code dưới đây dấn sau thẻ <head>

          <script type="application/ld+json">
          {
          "@context": "http://schema.org",
          "@type": "WebSite",
          "url": "http://www.tuoitreit.xyz",
          "potentialAction": {
          "@type": "SearchAction",
          "target": "http://www.tuoitreit.xyz/search?q={search_term_string}",
          "query-input": "required name=search_term_string"
          }
          }
          </script>
          - Cách 2 :
          • Tạo một trang web với một hệ thống phân cấp rõ ràng, tạo thuận lợi tốt nhất cho các crawler có thể thu thập thông tin trên site.
          • Cung cấp một sitemap cho người dùng cùng các liên kết trỏ đến những phần quan trọng trên site.
          • Tạo những nội dung thực sự hữu ích  và chất lượng, cùng thông tin phong phú
          • Sử dụng văn bản thay cho việc dùng hình ảnh để biểu thị các liên kết
          • Đảm bảo thẻ tiêu đề cùng các alt text có tính mô tả tốt và chính xác, không trùng lặp.
          • Kiểm tra các liên kết gãy trên trang
          • Sử dụng các anchor text và alt text giàu thông tin và có liên quan cho các liên kết nội bộ trên trang
          • Bao gồm các trang quan trọng nhất trên site trong menu chính
          • Sử dụng Breadcrumbs và đánh dấu chúng bằng Schema.org
          TỔNG KẾT 

          Vậy mình đã hướng dẫn các bạn làm sitelink rồi nhé :) mong các bạn ủng hộ blog