Hướng Dẫn Tạo Nút Chuyển Đổi Màu Cho Blogger

DEMO Ảnh Phía Dưới 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)

<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/AVvXsEj-Gx6WXOZVbWupO3XRySmv8_DjTFtHeaQCAPBEPGW0f3xIks9YaELfBi3KNlsGgRUB2N7v7Q1z89pn7BInaYoTu0ztw-7fjMHoKwugOKs2e5I5pMnNQzd9psk23BkWptJ6mNRKbYAkaiqh/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 Lại Và Nhận Thành Quả