Hướng dẫn tạo nút chuyển đổi màu cho Blogger - Kul Mai Văn

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/AVvXsEjamok1QdLDEHdHR2p75nFdf-47aL461fvp80AxUF4PHcaTH-tjngcc8FTfoWMOgSHjeC55zMZS6j1y61bvfj-h7JB-SZSpmYwc1Y7fwV98Iun3sK1zWN8YbFaDmU0Qu4i4RCqAhyphenhyphenvYqnq1/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.

 Bài viết trong Kul Mai Văn được bảo vệ bởi DMCA. Khi sao chép bài viết xin ghi nguồn và link dẫn về bài viết gốc.