Share Template Blogspot IDN THEME

Sau gần 2 tháng ngừng hoạt động blog, mình đã trở lại với các bạn rồi đây. Hôm nay mình chia sẻ cho các bạn template IDN THEME ( giống 98%) cực kì chuyên nghiệp, thích hợp cho các blog chia sẻ giao diện.

Mã nguồn:	Blogspot
Thiết kế:	Arlina
Responsive:	True
Hướng dẫn:	Đầy đủ
Ưu điểm:	Template gọn nhẹ, chuẩn seo.
Giá bán	FREE

DemoTải Về

Thêm code đếm ngược ngày tết vào trang blogspot

Chào các bạn, theo yêu cầu của một số bạn. Thì hôm nay mình sẽ chia sẻ đến các bạn một code cho phép đếm ngược đến ngày Tết 2020, mình đặt title là dành cho blog, nhưng vẫn dùng được cho các thể loại web khác nhé, code bởi Nhok Dũng Blog, mình đem về viết lại CSS. Bên dưới là Hướng dẫn và Code.

Chào các bạn, theo yêu cầu của một số bạn. Thì hôm nay mình sẽ chia sẻ đến các bạn một code cho phép đếm ngược đến ngày Tết Kỷ Hợi 2019, mình đặt title là dành cho blog, nhưng vẫn dùng được cho các thể loại web khác nhé, code bởi Mạnh Tuấn J2TeaM, mình đem về viết lại CSS. Bên dưới là Hướng dẫn và Code

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

Bạn tiến hành vào Dashboard blog của bạn --> Bố cục --> Thêm tiện ích --> HTML/Javascript --> Trong ô Nội dung các bạn chèn đoạn code phía dưới vào trong nóvà nhấn Lưu để hoàn thành lưu code vào blog.

<!-- Countdown --> <style> /* Countdown */ #countdown{float:left;width:100%;height:130px;box-sizing:border-box;margin-top:30px} #timer{padding-top:0} #timer div{width:65px;height:65px;line-height:45px;z-index:199;background:transparent;box-shadow:0 0 0 4px rgb(78, 50, 136);border-radius:50%;text-align:center;font-size:20px;font-weight:700;color:#fff;display:inline-block;float:left;margin:0 9px;color:rgb(78, 50, 136)} #timer div:nth-child(1),{margin-left:0} #timer div:last-child{margin-right:0} #timer h2{color:#222} h2.title-countdown{font-size:23.5px!important;font-weight:700;text-transform:uppercase;margin-bottom:20px;font-family:'Utm Avo',sans-serif;border-bottom:2px solid #222} #timer span{color:rgb(78, 50, 136);margin-bottom:20px;font-size:12px;display:block;transform:translate(0,-52%)} #days,#hours,#minutes{color:#fb5182} .title-countdown strong{color:#4e3288} @media screen and (max-width: 440px) { #timer div{width:50px!important;height:50px!important;line-height:35px!important;font-size:15px!important} #timer span{font-size:8px;transform:translate(0,-52%)!important} .title-countdown span{font-size:18px!important} } </style> <br /> <div id="countdown"> <div id="timer"> <h2 class="title-countdown" style="text-align: left;"> Đếm ngược ngày đến <strong>Tết 2020</strong></h2> <div id="days"> </div> <div id="hours"> </div> <div id="minutes"> </div> <div id="seconds"> </div> </div> </div> <script type="text/javascript"> //<![CDATA[ // Countdown tet // Countdown tet let timeout = null; function makeTimer() { // Edit Here //---- let endTime = new Date("'02/03/2020 23:59:59 GMT+0700 (SE Asia Standard Time)"); ---- let endTime = new Date("'02/05/2020 23:59:59 GMT+0700 (SE Asia Standard Time)"); endTime = (Date.parse(endTime) / 1000); let now = new Date(); now = (Date.parse(now) / 1000); let timeLeft = endTime - now, days = Math.floor(timeLeft / 86400), hours = Math.floor((timeLeft - (days * 86400)) / 3600), minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60), seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60))); if (hours === 0 && minutes === 0 && seconds === 0) { clearTimeout(timeout); } else { if (hours < "10") { hours = "0" + hours; } if (minutes < "10") { minutes = "0" + minutes; } if (seconds < "10") { seconds = "0" + seconds; } $("#days").html(days + "Ngày"); $("#hours").html(hours + "Giờ"); $("#minutes").html(minutes + "Phút"); $("#seconds").html(seconds + "Giây"); timeout = setTimeout(makeTimer, 1000); } } makeTimer(); //]]> </script> <!-- End coutdown -->

Chúc Các Bạn Thành Công!!! :)

Share tạo nút chuyển đổi giao diện dark light mode có lưu cookie cho blogspot

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách tạo nút chuyển đổi giao diện chế độ sáng / tối cho blogspot.

Hướng Dẫn Cách Làm:
Bước 1: Thêm đoạn code này vào menu của blog bạn:

<!-- Dark --> <div class='settings'> <ul> <li class='settings-sub-parent' tab-index='0'> <div class='settings-menu'> <a class='dark-mode-btn' href='#dark-mode'> <i class='fa fa-cog'/> </a></div> <ul class='settings-sub-menu'> <div class='setting-arrow'> </div> <li> <span class='setting-label'>Giao diện tối</span> <div id='change-theme-btn'> <input id='change-theme-btn' name='' type='checkbox' value=''/> <div class='toggle'> <label for='toggle-change-theme'><i/> </label> </div> </div> </li> </ul> </li> </ul> </div> <!-- End Dark -->

Bước 2: Tìm thẻ </body> và thêm đoạn js này lên trên nó:
<script type='text/javascript'> //<![CDATA[ // Dark mode document.getElementById('change-theme-btn').addEventListener('click', function () { var darkThemeEnabled = document.body.classList.toggle('mode-dark'); localStorage.setItem('dark-theme-enabled', darkThemeEnabled); }); jQuery(document).ready(function ($) { $(function () { $("a.dark-mode-btn").click(function (e) { e.preventDefault(); }); }); }); //]]> </script>

Bước 3: Thêm đoạn css này lên thẻ ]]></b:skin>

/* Setting */ .settings{display:inline-block;position:relative} .settings .settings-menu{display:block;cursor:pointer} .settings-sub-menu{background:#fff;padding:10px;border:1px solid #e3e3e3;-webkit-box-shadow:0 13px 40pxrgba(0,0,0,.15);box-shadow:0 13px 40px rgba(0,0,0,.15);border-radius:6px} #icon-settings{height:14px!important;width:14px!important;fill:#690;transform:translate(0,10%)} .setting-label{font-size:16px;color:#2a2a2a;margin-right:50px;font-weight:600} .settings{float:right;z-index:2} .settings-sub-parent .settings-sub-menu{width:200px!important;right:2px!important} ul.settings-sub-menu{padding:15px!important} div#change-theme-btn{display:inline-block} input[type=checkbox]{display:none} .toggle{position:absolute;margin:auto;width:41px;height:25px;top:18px;right:10px} .toggle label,.toggle i{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;background:#fff} .toggle label{width:42px;height:24px;border-radius:35px;border:2px solid #e5e5e5;-webkit-transition:all .3sease;-o-transition:all .3s ease;transition:all .3s ease;cursor:pointer} .toggle i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:40px;-webkit-box-shadow:02px 5px rgba(0,0,0,.4);box-shadow:0 2px 5px rgba(0,0,0,.4);background:#fff;-webkit-transition:all .3s cubic-bezier(.275,-.45,.725,1.45);-o-transition:all .3s cubic-bezier(.275,-.45,.725,1.45);transition:all .3s cubic-bezier(.275,-.45,.725,1.45)} input[type=checkbox]:active+.toggle i{width:35px} .mode-dark input[type=checkbox]:active+.toggle label,.mode-dark input[type=checkbox]+.toggle label{border:12pxsolid #4cd964} .mode-dark input[type=checkbox]+.toggle i{left:21px} .mode-dark input[type=checkbox]:active+.toggle label{border:16px solid #e5e5e5} .mode-dark input[type=checkbox]:active+.toggle i{left:14px} .mode-dark .setting-label{color:#e2e2e2} .mode-dark .setting-arrow:after{background:#2e2d2d} .mode-dark .settings-sub-menu{background:#2b2b2b;border:1px solid #2b2b2b} .mode-dark #wpcomm .wc-comment-date a{color:#999} @media only screen and (max-width:767px) { .mode-dark .standard-post-special_wrapper{background:#1c1c1c} } .settings-sub-menu{visibility:hidden;opacity:0;position:absolute;top:100%;width:100%;z-index:-1;-webkit-transition:all 0.3s ease-in-out 0s,visibility 0s linear 0.3s,z-index 0s linear 0.01s;-o-transition:all 0.3sease-in-out 0s,visibility 0s linear 0.3s,z-index 0s linear 0.01s;transition:all 0.3s ease-in-out 0s,visibility 0s linear 0.3s,z-index 0s linear 0.01s}.settings-sub-parent:focus .settings-sub-menu,.settings-sub-parent:hover .settings-sub-menu{visibility:visible;opacity:1;z-index:1;-webkit-transform:translateY(10%);-ms-transform:translateY(10%);transform:translateY(10%);-webkit-transition-delay:0s,0s,0.3s;-o-transition-delay:0s,0s,0.3s;transition-delay:0s,0s,0.3s}.setting-arrow{top:-13px;-webkit-box-shadow:-1px -1px 1px -1pxrgba(0,0,0,0.6);box-shadow:-1px -1px 1px -1px rgba(0,0,0,0.6);-webkit-transform:rotate(45deg) translate(6px,6px);-ms-transform:rotate(45deg) translate(6px,6px);transform:rotate(45deg) translate(6px,6px);right:9px;position:absolute;-webkit-transition:all 0.3s ease-in-out 0s;-o-transition:all 0.3s ease-in-out 0s;transition:all 0.3s ease-in-out 0s}.setting-arrow::after{content:'';display:block;width:11px;height:11px;background:#fff;-webkit-transition:all 0.3s ease-in-out 0s;-o-transition:all 0.3s ease-in-out 0s;transition:all 0.3s ease-in-out 0s} ul.settings-sub-menu li{float:inherit!important;position:initial!important} /* Dark */ body.mode-dark{background-color:#1c1c1c!important;color:#888!important} .mode-dark .code-muon-chuyen-mau a,.mode-dark #code-muon-chuyen-mau a{color:#fff!important} .mode-dark .code-muon-chuyen-nen,.mode-dark #code-muon-chuyen-nen{background:#333!important} /* End Dark */

Bước 4: Thêm đoạn js này lên <body>

<script type="text/javascript"> //<![CDATA[ JSON.parse(localStorage.getItem("dark-theme-enabled"))&&document.body.classList.add("mode-dark"); //]]> </script>

Demo
Chúc Các Bạn  Thành Công!!

Share Template Blogspot Chia Sẻ Nhạc Imuzik

Mã nguồn:	Blogspot
Thiết kế:	Bẽo Hoa Vinh
Responsive:	True
Hướng dẫn:	Đầy đủ
Phiên Bản:	5.0
Ưu điểm:	Template gọn nhẹ, chuẩn seo, load tốt.
Giá bán	FREE

Cách Upload Nhạc Bằng Youtube Video:
- Bạn vào viết lyric, upload image như bao bài khác, sau đó tìm một chỗ nào đó đặt code này vô
[m]https://www.youtube.com/watch?v=5WN19l18Eo8[/m]
Thay link youtube nha :)) chèn chỗ nào thì nó cũng hiển thị đúng chỗ thôi, đừng lo.
Upload Nhạc Dạng Audio Box:
- Bạn vào trang này upload file .mp3 lên :) : https://www58.zippyshare.com
- Upload xong bạn tạo một bài viết mới rồi chèn code này vào :
[m]https://www58.zippyshare.com/v/svm4aW8N/file.html[/m]
Thay link phía trên thành link file nhạc mà bạn vừa up.
Tải Về

Share Template Blogspot Google Plus Version

Mã nguồn:	Blogspot
Thiết kế:	Siin+
Responsive:	True
Hướng dẫn:	Đầy đủ
Ưu điểm:	Template gọn nhẹ, chuẩn seo, load tốt.
Giá bán	FREE

Tải Về

Share Template Blogspot Tiến Đức V5.0

Template dạng lưới là một từ khóa tìm kiếm khá nhiều trong thời gian gần đây. Hôm nay tôi sẽ chia sẻ cho các bạn một con template lưới 2 cột được tùy biến và tải trang khá ổn

Mã nguồn:	Blogspot
Thiết kế:	Tiến Đức Blog
Responsive:	True
Hướng dẫn:	Đầy đủ
Phiên Bản:	5.0
Ưu điểm:	Template gọn nhẹ, chuẩn seo, load tốt.
Giá bán	FREE

Tải Về

Share Template Instagram Cho Blogspot

Ngày nay, với sự phát triển của cộng nghệ cùng với sự phát triển năng lực lập trình, code, design của các blogger thì ngày càng có nhiều giao diện đẹp được ra mắt với nền tảng Blogspot, nền tảng web được nhiều blogger sử dụng.
Hiểu được nhu cầu thiết yếu của người dùng.Hôm nay chúng tôi sẽ đem đến cho các bạn mẫu giao diện instagram-Tuyệt tác giao diện mạng xã hội cho blogger

Mã nguồn:	Blogspot
Thiết kế:	Tập Đoàn Instagram
Responsive:	True
Hướng dẫn:	Đầy đủ
Ưu điểm:	Template gọn nhẹ, chuẩn seo, load tốt.
Giá bán	FREE

Tải Về

Share Template Blogspot Thủ Thuật Hay V1.0

Mã nguồn:	Blogspot
Thiết kế:	Hồng Hải
Responsive:	True
Hướng dẫn:	Đầy đủ
Ưu điểm:	Template gọn nhẹ, chuẩn seo, load tốt.
Giá bán	FREE

DemoTải Về

Share Template Blogspot Twitter V4.5

Hôm nay chia sẽ template Twitter cực đẹp của Phú Cường Blogger được đăng bán khá lâu nhưng bây giờ đã miễn phí rồi nhé nên mình chia sẽ cho mọi người dùng luôn

Mã nguồn:	Blogspot
Thiết kế:	Nguyễn Phú Cường
Responsive:	True
Hướng dẫn:	Đầy đủ
Ưu điểm:	Template gọn nhẹ, chuẩn seo, load tốt.
Giá bán	FREE

Tải Về