Hướng dẫn tạo nút chuyển đổi màu cho Blogger - Star Trường IT

DEMO ảnh hoặc trên trực tiếp blog mình luôn nhé :) 

Sau đây mình sẽ hướng dẫn các bạn cách tạo nút chuyển màu.

Bước 1 Vô Mẫu / Chỉnh sửa HTML

Bước 2 Nhấn Ctrl F tìm thẻ sau ]]></b:skin>

sau đó copy toàn bộ Code sau đây dán trước thẻ ]]></b:skin>

/* star truong color */
.qc-header-post { float:left; width:100%; }
.post-ads { float:left; margin:0 10px 10px 0; position:relative; }
@media (max-width:600px) {
.post-ads { width:100%; } .post-right { margin-left:0 !important; width:100%; float:left; }
}
.post-ads { width:100%; } .post-right { margin-left:0 !important; width:100%; float:left; }
}
.post-body img { transition:all .3s; max-width:100%; }
.post-right { margin:0 0 0 310px; padding:0 0 10px; }
.post-excerpt { margin:0; padding:10px; background-color:#ECF0F1; font-size:17px; line-height:1.5em; color:#0093da; }
#related-posts { margin:10px 0; }
#related-posts1 h4{color:#E74C3C;border-bottom:1px dashed#E74C3C;font-size:18px;margin-bottom:5px}
#related-posts1 ul li a:before{content:"\f046";font-family:'FontAwesome';padding-right:10px}
#related-posts ul li { list-style-type:none; color:#000000; font-size:20px; line-height:22px; max-height:22px; overflow:hidden; }
#related-posts ul li a { color:#FFFFFF; }
#related-posts ul li a:hover { color:#0093da; }
#related-posts h4 { color:#E74C3C; border-bottom:1px dashed #E74C3C; padding:10px 0; font-size:18px; margin-bottom:5px; }
#related-posts ul { margin-left:0; }
#related-posts .fa { margin-right:5px; }
#related-posts ul li { padding: 10px 0; float: left; width: 100%; margin-right: 0; max-height: 70px }
#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}

Bước 3 Các bạn tìm thẻ </head>
Copy đoạn code sau dán lên trước thẻ </head> 

<script src='https://googledrive.com/host/0B2HoslbwM4xFYmVWcjVRT09oVms' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<link href='https://googledrive.com/host/0B2HoslbwM4xFbk50dXh3blhMbms' media='screen' rel='alternate stylesheet' title='black' type='text/css'/>
<link href='https://googledrive.com/host/0B2HoslbwM4xFWm8xMFFiMVpvVE0' media='screen' rel='alternate stylesheet' title='turquoise' type='text/css'/>
<link href='https://googledrive.com/host/0B2HoslbwM4xFY2NnY05aNUZXVDA' media='screen' rel='alternate stylesheet' title='red' type='text/css'/>
<link href='https://googledrive.com/host/0B2HoslbwM4xFb3FCV0RuaEV1Z1E' media='screen' rel='alternate stylesheet' title='green' type='text/css'/>
<link href='https://googledrive.com/host/0B2HoslbwM4xFYVhtZVlTUjB4TkU' media='screen' rel='alternate stylesheet' title='orange' type='text/css'/>
<link href='https://googledrive.com/host/0B2HoslbwM4xFQWMtLUdxNE9qbTQ' media='screen' rel='alternate stylesheet' title='purple' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
(function($){$(document).ready(function(){$('.styleswitch').click(function(){switchStylestyle(this.getAttribute("rel"));return false});var c=readCookie('style');if(c)switchStylestyle(c)});function switchStylestyle(styleName){$('link[@rel*=style][title]').each(function(i){this.disabled=true;if(this.getAttribute('title')==styleName)this.disabled=false});createCookie('style',styleName,365)}})(jQuery);function createCookie(name,value,days){if(days){var date=new Date();date.setTime(date.getTime()+(days*24*60*60*1000));var expires="; expires="+date.toGMTString()}else var expires="";document.cookie=name+"="+value+expires+"; path=/"}function readCookie(name){var nameEQ=name+"=";var ca=document.cookie.split(';');for(var i=0;i<ca.length;i++){var c=ca[i];while(c.charAt(0)==' ')c=c.substring(1,c.length);if(c.indexOf(nameEQ)==0)return c.substring(nameEQ.length,c.length)}return null}function eraseCookie(name){createCookie(name,"",-1)}
//]]>
</script>

Bước 4 Lưu Mẫu
Bước 5 Vô phần bố cục thêm một HTML/JavaScript mới (chỗ muốn hiển thị nút chuyển màu)
Copy code dưới đây
 <h2 class='title'><i class="fa fa-paint-brush"></i>  Chuyển đỗi màu By STruong IT</h2>

<div class='widget-content'>

<div class='follow-box' draggable='false' oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJc3OQOqYtoPNtm1yVw25hHBmaFz7V20MtWcjC-_LOesr4S011afGo7AqkzsMhyphenhyphenOLL3ZkKo62iJgWHiHBGIWva_R5VAPvEyQTvl5lpP1gABgtwOZsyLieEbdjUEdv7HshCn2YR5_Ezuiu/s1600/0B2HoslbwM4xFMWZDXzhkZURJZ0U.png' usemap='#follow-box'/>

<map name='follow-box'>

<area class='styleswitch' coords='10,29,33,5' href='#' rel='style1' shape='rect' title='Blue'/>

<area class='styleswitch' coords='50,28,74,5' href='#' rel='black' shape='rect' title='Black'/>

<area class='styleswitch' coords='90,29,115,5' href='#' rel='turquoise' shape='rect' title='Turquoise'/>

<area class='styleswitch' coords='135,28,157,5' href='#' rel='red' shape='rect' title='Red'/>

<area class='styleswitch' coords='175,28,199,5' href='#' rel='green' shape='rect' title='Green'/>

<area class='styleswitch' coords='215,29,239,5' href='#' rel='purple' shape='rect' title='Purple'/>

<area class='styleswitch' coords='255,28,280,5' href='#' rel='orange' shape='rect' title='Orange'/>

</map>

</div>

</div>

<div class='clear'></div>

Bước 6 Lưu và cảm nhận thành quả :) Cảm ơn các bạn đã theo dõi bài viết.

Like & Share ủng hộ blog nhé !!!
Có thắc xin để lại cmt phía dưới.