Hiển thị các bài đăng có nhãn Blogger. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogger. Hiển thị tất cả bài đăng

[New] Tạo khung theo dõi dạng popup cho blogspot, blogger

Tiếp tục chủ để Blogger, mình xin chia sẽ cho các bạn cách làm khung theo dõi blogspot ( feedburner ) dạng popup rất chuyên nghiệp.

Tiện ích này mình vừa làm xong thôi nên viết bài share cho các bạn luôn nên nếu có lỗi các bạn  comment phía dưới nhé.

Nói thêm về khung theo dõi này:


  • Khung theo dõi giúp cho nhưng đọc giả ít có thời gian online có thể cập nhật những bài viết mới của blog bạn qua Gmail. 
  • Tiện ích này làm theo dạng popup hiện khi load trang xong và có thể tắt nó đi, tiết kiệm được 1 không gian cho blog
  • Vì là popup nên sẽ giúp đọc giả dễ tiếp cận hơn
  • Theo mặc định tiện ích 1 ngày sẽ hiện 1 lần vì thế sẽ không làm cho đọc giả thấy khó chịu khi load lại trang hoặc đọc bài mới

[New] Tạo khung theo dõi dạng popup cho blogspot, blogger

[New] Tạo khung theo dõi dạng popup cho blogspot, blogger
Ảnh demo full


Giờ chúng ta bắt đầu nhé:

Đầu tiên các bạn vào chỉnh sửa HTML của Blog bạn, tìm thẻ ]]>< và copy toàn bộ code dưới chèn lên thẻ vừa tìm.

.theo-doi-qua-email {
    float: left;
    width: 100%;
    background: #bc382e;
    position: relative;
   
}.theo-doi-qua-email .left {
    width: 220px;
    float: left;
    background: #731a13;
    padding: 10px;
    position: relative;
    z-index: 99;
}.theo-doi-qua-email .left input {
       line-height: 40px;
    float: left;
    width: 90%;
    margin: 5px 0;
    padding: 0 10px;
    border: 0;
}.theo-doi-qua-email .right {
    float: left;
    position: absolute;
    padding: 20px 20px 20px 270px;
}.theo-doi-qua-email .right h3 {
    font-size: 28px;
    text-align: center;
    color: #fff;
    border-bottom: 3px dashed #731a13;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-top: 0px;
}.theo-doi-qua-email .right ul {
    padding-left: 20px;
    margin: 0;
}.theo-doi-qua-email .right ul li {
    list-style-type: circle;
    font-size: 18px;
    line-height: 26px;
    color: #fff;
}
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

#fbox-close {
    width: 100%;
    height: 100%;
}

#fbox-display {
  background: #eaeaea;
    border: 5px solid #3a5795;
    width: 700px;
    height: 170px;
    position: absolute;
    top: 33%;
    left: 33%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#fbox-button {

    z-index: 99;
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}

#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #3a5795;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}


Xong các bạn lưu lại, vào phần bốc cục Blog thêm tiện ích vị trí bất kì và copy toàn bộ code dưới vào:



<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_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 1});
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<div class='theo-doi-qua-email'>
<div class='left'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=vanthangit/PQTX' method='post' onsubmit='window.open(&#39;https://feedburner.google.com/fb/a/mailverify?uri=vanthangit/PQTX, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' type='text' value='Your Name'/>
<input name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' type='text' value='Your Email'/>
<input name='uri' type='hidden' value='vanthangit/PQTX'/>
<input name='loc' type='hidden' value='vi_VN'/>
<input class='submitbutton' type='submit' value='Nhận tin!'/>
</form>
</div>
<svg fill='#731a13' height='170' style='float: left' width='25'>
<path d='M0 0 L0 170 L25 85 Z'></path>
</svg>
<div class='right'>
<h3>Nhận tin mới qua Email</h3>
<ul>
<li>Cập nhật tin tức hoàn toàn miễn phí qua Email</li>
<li>Đảm bảo an toàn thông tin của bạn</li>
<li>Nhận quà hàng tháng - Tri ân độc giả</li>
</ul>
</div>
</div>
</div>
</div>


Được 50% rồi , giờ thì các bạn chỉ cần chỉnh sửa lại ID cho blog mình bằng những dòng bôi đỏ trên thôi.
Chúc các bạn thành công. Share nếu thấy hay nhé!

Tối ưu video Youtube chuẩn Responsive khi nhúng vào Blogger/Blogspot

Chào các bạn, hiện tại có nhiều bạn dùng nền tảng Blogger để làm web phim, nhạc ... trong đó có một số bạn nhúng video từ Youtube hoặc Google drive vào để đăng phim. Nhưng kích thước khung video mặc định là width:640px hay width: 800px vì thế chỉ hiển thị được trên một số thiết bị. Vì thế bài viết này mình sẽ hướng dẫn các bạn cách có thể hiển thị video Youtube trên mọi thiết bị.

Tối ưu video Youtube chuẩn Responsive khi nhúng vào Blogger/ Blogspot

Tối ưu video Youtube chuẩn Responsive khi nhúng vào Blogger/Blogspot- VanThangIt.Com

Bước 1. Vào Blogger truy cập vào chỉnh sửa Mẫu:
Chèn đoạn code dưới vào trước ]]></b:skin>
iframe,img,object{max-width:100%;width:100%!important}img{height:auto}
Bước 2. Giờ thì chỉ cần lưu lại mẫu vào quay lại blog của bạn đế xem.
Nhiều nguồn.Chúc các bạn thành công.

Share Template Setiva v1.6 Resposive Magazine Blogger Theme

Mẫu blog của Setiva là một mẫu blogger đẹp và hiện đại. Màu sắc sạch sẽ và tươi của nó dựa trên thiết kế blogger đáp ứng và người dùng thân thiện với blogger template. Chủ đề hoàn hảo cho các tin tức, tạp chí và các trang web cá nhân.

Share Template Setiva v1.6 Resposive Magazine Blogger Theme


Share Template Setiva v1.6 Resposive Magazine Blogger Theme

PowerFull Admin Panel

Share Template Setiva v1.6 Resposive Magazine Blogger Theme

| Download: Fshare [ 3.76 MB ] - Pass; thuthuatwindows.com |

Popup Tác Giả Ẩn Hiện Đẹp Cho Blogger/Blogspot

Hôm nay mình sẽ share cho các bạn một tiện ích cho blogger/blogspot đó là khung ẩn hiện tác giả đẹp.

Popup Tác Giả Đẹp Cho Blogger/Blogspot

Popup Tác Giả Ẩn Hiện Đẹp Cho Blogger/Blogspot

Đầu tiên các bạn cần thêm Font Awesome bằng các chèn code dưới trước </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
Nếu có rồi thì bỏ qua bước này.

Thêm CSS bằng các chèn nó trước ]]></b:skin> hoặc </style>

/* About Us */
.boxinner{z-index:99;width:100%;height:575px;position:absolute;left:50%;margin-left:-310px;top:70px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
headbanger{background:#ff675c;height:70px;width:100%;position:inherit}
#textlogo{background:rgba(0,0,0,0.1);color:#fff;line-height:70px;text-align:center;font-size:200%;position:inherit;width:68.5%;box-sizing:initial}
#left{background:#fff;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:200px;position:inherit}
#left a{color:#888;transition:initial;}#left a:hover{color:#fff;}
#left i {margin:0 10px 0 0}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;padding:15px;color:#888;}
.taber1:hover{background:#ff6733;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:#383838;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{background:#fafafa;width:62.2%;padding:20px 20px 40px 20px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}
#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:55px 0 0 0}
.scrollbarbox .innerone{height:480px;overflow:auto}
#popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:50px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(0,0,0,0.2);font-family:fontawesome}
a.popup-close:hover{color:rgba(0,0,0,0.6);}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#aaa}
.totalposts .totallabel{display:block;color:#aaa;font-weight:700}
li.infoarlina{border:0;}
li.infoarlina a{background:#ff675c;color:#fff;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}
li.infoarlina a:hover{background:#e4554b;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}

Tiếp theo thêm HTML trước thể </body>

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='contentbox'>
<headbanger><span id='textlogo'>Arlina Design</span>
<a class='popup-close' href='#closed' title='Close'><i class='fa fa-times'/></a>
</headbanger>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='Arlina Design' height='140' src='//2.bp.blogspot.com/-_ZXt_m8NzDA/Vl4U8npbBPI/AAAAAAAADXE/SVcS7M3Hs4Q/s1600/Arlina%2BDesign.png' title='Arlina Design' width='140'/><br/>
<script src='http://www.arlinadzgn.com/feeds/posts/default?alt=json-in-script&amp;callback=getposts'/><br/><br/>
Arlina Design merupakan sebuah blog pribadi tempat Saya berbagi mengenai tips seputar blogger dan template khusus blogger.<br/><br/>
Mudah-mudahan kedepannya blog ini dapat memberikan kontribusi serta informasi bermanfaat bagi Anda semua. Terima kasih.
</div></div></div>
<div id='left'>
<div class='taber1'><a href='#' target='_blank' title='Soundcloud'><i class='fa fa-soundcloud fa-fw'/> Soundcloud</a></div>
<div class='taber2'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus fa-fw'/> Google Plus</a></div>
<div class='taber3'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook fa-fw'/> Facebook</a></div>
<div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter fa-fw'/> Twitter</a> </div>
<div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen fa-fw'/> Codepen</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow-blog.g?blogID=7342017194742683056' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-users fa-fw'/> Join this blog</a></div>
</div></div></div></div></div>
Các bạn chỉnh lại thông tin phù hợp với blog mình nhé

Thêm code dưới trên thẻ </head> 

<script type='text/javascript'>
//<![CDATA[
// Total Posts
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Artikel yang di Publish</span></div>');}
//]]>
</script>

Bước cuối cùng là chèn link để hiển thị:

<li class='infoarlina'><a class='popup-link' href='#popup'>Info</a></li>
Giờ thì lưu lại và vào trang để xem. Chúc các bạn thành công.
Kham khảo: http://www.arlinadzgn.com

Bài viết theo nhãn trên trang chủ cho Blogspot

Bài viết theo nhãn trên trang chủ cho Blogspot -VanThangIt.Com

Bài viết liên quan này rất đơn giản nhưng cũng rất đẹp. Dưới là ảnh demo:

Bài viết theo nhãn trên trang chủ cho Blogspot -VanThangIt.Com


Bài viết theo nhãn trên trang chủ cho Blogspot.

Để có được chúng ta thực hiện nha các bước sau đây.
Bước 1: Tìm thẻ đóng </head> và copy toàn bô code dưới lên trước nó:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <script type='text/javascript'>
 //<![CDATA[ 
 imgr = new Array();
 imgr[0] = "http://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/no-image.png";
 function removeHtmlTag(strx, chop) {
 var s = strx.split("<");
 for (var i = 0; i < s.length; i++)
 if (s[i].indexOf(">") != -1) s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
 s = s.join("");
 s = s.substring(0, chop - 1);
 return s
 }; 
 function topnewpost(json) {
 j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0;
 img = new Array;
 if (numposts1 <= json.feed.entry.length) maxpost = numposts1;
 else maxpost = json.feed.entry.length;
 for (var i = 0; i < maxpost; i++) {
 var entry = json.feed.entry[i];
 var tag = entry.category[0].term;
 var posttitle = entry.title.$t;
 var pcm;
 var posturl;
 if (i == json.feed.entry.length) break;
 for (var k = 0; k < entry.link.length; k++)
 if (entry.link[k].rel == "alternate") {
 posturl = entry.link[k].href;
 break
 }
 for (var k = 0; k < entry.link.length; k++)
 if (entry.link[k].rel == "replies" && entry.link[k].type == "text/html") {
 pcm = entry.link[k].title.split(" ")[0];
 break
 }
 if ("content" in entry) var postcontent = entry.content.$t;
 else if ("summary" in entry) var postcontent = entry.summary.$t;
 else var postcontent = "";
 postdate = entry.published.$t;
 if (j > imgr.length - 1) j = 0;
 img[i] = imgr[j];
 s = postcontent;
 a = s.indexOf("<img");
 b = s.indexOf('src="', a);
 c = s.indexOf('"', b + 5);
 d = s.substr(b + 5, c - b - 5);
 if (a != -1 && (b != -1 && (c != -1 && d != ""))) img[i] = d;
 var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 var month2 = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 var day = postdate.split("-")[2].substring(0, 2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];
 for (var u2 = 0; u2 < month.length; u2++)
 if (parseInt(m) == month[u2]) {
 m = month2[u2];
 break
 }
 var daystr = day + " " + m + " " + y;
 var trtd = '<div class="scroll-item secondary-post col-post"><a class="hover_play_small" href="' + posturl + '"><img src="' + img[i] + '"></img></a><header><h3><a href="' + posturl + '">' + posttitle + "</a></h3></header></div>";
 document.write(trtd);
 j++
 }
 };
 //]]>
 </script>
</b:if>
Bước 2: Copy code dưới và dán vào nơi muốn hiển thị ngoài trang chủ.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:section class='cat-box scroll-box topnewpost section' id='topnewpost' showaddelement='yes'>
 <b:widget id='HTML999' locked='false' title='' type='HTML' version='1' visible='true'>
 <b:includable class='cat-box-content' id='main'>
 <div class='widget-content'>
 <script>
 document.write(&quot;&lt;script src=\&quot;/feeds/posts/default<data:content/>?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=topnewpost\&quot;&gt;&lt;\/script&gt;&quot;);
 </script>
 </div>
 </b:includable>
 </b:widget>
 </b:section>
 <div class='clear'/>
</b:if>
Bước 3: thêm tí CSS để trang trí cho tiện ích bằng cách copy code dưới và thêm trước ]]></b:skin>

#topnewpost {
 margin-bottom: 20px;
 float: left;
 width: 100%
}
.scroll-item {
 width: 32.3333333%;
 float: left;
 margin-right: 1.5%;
 position: relative;
}
.scroll-item a {
 color: #fff;
}
.scroll-item header {
 position: absolute;
 padding: 5px 10px;
 bottom: 4px;
 background: rgba(2,2,2,0.72);
 width: 100%;
}
.scroll-item h3 {
 font-size: 17px;
}
Giờ thì lưu template lại.
Giờ chúng ta vào tab bố cục sẽ xuất hiện một khung thêm tiện ích. Các bạn click vào Chỉnh sửa. Bây giờ, nếu các bạn muốn hiển thị các bài mới nhất của blog thì điền là /. Còn nếu muốn hiển thị theo Label nào đó thì điền là /-/Tên Label. 
Theo:Mocgin

Khắc phục lỗi favicon không đổi cho Blogspot/ Blogger

Favicon là một biểu tượng nhỏ đứng trước tiêu đề website, giúp đọc giả có thể biết website của bạn ở tab nào khi mở nhiều tab. Nhưng vì một số lí do như favicon không được chuyên nghiệp hoặc favicon trùng với nhiều website mà nhiều người quyết định đổi nó. 


Để đổi favicon trên Blogger thì rất đơn giản chỉ cần vào bố cục và chỉnh sửa tiện ích. Nhưng nếu hên thì favicon của bạn sẽ được hiển thị ngay nhưng nếu xui thì nó sẽ không hiển thị ngay mà cần làm những bước phía dưới để hiển thị:

Khắc phục lỗi favicon không đổi cho Blogspot/ Blogger

Khắc phục lỗi favicon không đổi cho Blogspot/ Blogger, favicon không đổi, - VanThangIt.Com

Bước 1: Trên thanh địa chỉ, gõ http://[url blog của bạn]/favicon.ico và nhấn Enter.

Bước 2: Làm mới lại trang.

Bước 3: Quay trở lại blog của bạn.

Chỉ vài bước đơn giản trên là các bạn đã khắc phục được lỗi Khắc phục lỗi favicon không đổi cho Blogspot/ Blogger. Chúc các bạn thành công

Code bắn pháo hoa theo chuột bằng HTML5 cực đẹp cho Blogspot/ Blogger

✌ Chào các bạn, dịp tết đang đến gần và mọi người đang chuẩn bị đón nó bằng cách trang trí nhà cửa, sắm đồ chơi tết ... Còn đối với mình và cũng như các bạn thì còn một việc nữa là trang trí cho Blog/ Website của mình để có thêm không khí của mùa Xuân 💙


Code bắn pháo hoa theo chuột bằng HTML5 cực đẹp cho Blogspot/ Blogger, trang trí blogspot 2017 Đinh Dậu


Không nói lòng vòng nữa, như tiêu đề thì các bạn cũng đã biết nội dung của bài viết này rồi 😂

Vào thẳng vắn đề luôn 👇

Bước 1: Vào tab Mẫu, chọn chỉnh sửa HTML và tìm đoạn </head>

Bước 2: Copy toàn bộ code dưới thêm trên thẻ mới tìm được:


<canvas height='953' id='canvas' style='cursor: crosshair;position: fixed;width: 100%;background: #222;margin-top: -25px;' width='1920'/>
<script type='text/javascript'>
//<![CDATA[
// when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
// not supported in all browsers though and sometimes needs a prefix, so we need a shim
window.requestAnimFrame = ( function() {
 return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function( callback ) {
     window.setTimeout( callback, 1000 / 60 );
    };
})();

// now we will setup our basic variables for the demo
var canvas = document.getElementById( 'canvas' ),
  ctx = canvas.getContext( '2d' ),
  // full screen dimensions
  cw = window.innerWidth,
  ch = window.innerHeight,
  // firework collection
  fireworks = [],
  // particle collection
  particles = [],
  // starting hue
  hue = 120,
  // when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
  limiterTotal = 5,
  limiterTick = 0,
  // this will time the auto launches of fireworks, one launch per 80 loop ticks
  timerTotal = 80,
  timerTick = 0,
  mousedown = false,
  // mouse x coordinate,
  mx,
  // mouse y coordinate
  my;
  
// set canvas dimensions
canvas.width = cw;
canvas.height = ch;

// now we are going to setup our function placeholders for the entire demo

// get a random number within a range
function random( min, max ) {
 return Math.random() * ( max - min ) + min;
}

// calculate the distance between two points
function calculateDistance( p1x, p1y, p2x, p2y ) {
 var xDistance = p1x - p2x,
   yDistance = p1y - p2y;
 return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}

// create firework
function Firework( sx, sy, tx, ty ) {
 // actual coordinates
 this.x = sx;
 this.y = sy;
 // starting coordinates
 this.sx = sx;
 this.sy = sy;
 // target coordinates
 this.tx = tx;
 this.ty = ty;
 // distance from starting point to target
 this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
 this.distanceTraveled = 0;
 // track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
 this.coordinates = [];
 this.coordinateCount = 3;
 // populate initial coordinate collection with the current coordinates
 while( this.coordinateCount-- ) {
  this.coordinates.push( [ this.x, this.y ] );
 }
 this.angle = Math.atan2( ty - sy, tx - sx );
 this.speed = 2;
 this.acceleration = 1.05;
 this.brightness = random( 50, 70 );
 // circle target indicator radius
 this.targetRadius = 1;
}

// update firework
Firework.prototype.update = function( index ) {
 // remove last item in coordinates array
 this.coordinates.pop();
 // add current coordinates to the start of the array
 this.coordinates.unshift( [ this.x, this.y ] );
 
 // cycle the circle target indicator radius
 if( this.targetRadius < 8 ) {
  this.targetRadius += 0.3;
 } else {
  this.targetRadius = 1;
 }
 
 // speed up the firework
 this.speed *= this.acceleration;
 
 // get the current velocities based on angle and speed
 var vx = Math.cos( this.angle ) * this.speed,
   vy = Math.sin( this.angle ) * this.speed;
 // how far will the firework have traveled with velocities applied?
 this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );
 
 // if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
 if( this.distanceTraveled >= this.distanceToTarget ) {
  createParticles( this.tx, this.ty );
  // remove the firework, use the index passed into the update function to determine which to remove
  fireworks.splice( index, 1 );
 } else {
  // target not reached, keep traveling
  this.x += vx;
  this.y += vy;
 }
}

// draw firework
Firework.prototype.draw = function() {
 ctx.beginPath();
 // move to the last tracked coordinate in the set, then draw a line to the current x and y
 ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
 ctx.lineTo( this.x, this.y );
 ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
 ctx.stroke();
 
 ctx.beginPath();
 // draw the target for this firework with a pulsing circle
 ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
 ctx.stroke();
}

// create particle
function Particle( x, y ) {
 this.x = x;
 this.y = y;
 // track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
 this.coordinates = [];
 this.coordinateCount = 5;
 while( this.coordinateCount-- ) {
  this.coordinates.push( [ this.x, this.y ] );
 }
 // set a random angle in all possible directions, in radians
 this.angle = random( 0, Math.PI * 2 );
 this.speed = random( 1, 10 );
 // friction will slow the particle down
 this.friction = 0.95;
 // gravity will be applied and pull the particle down
 this.gravity = 1;
 // set the hue to a random number +-20 of the overall hue variable
 this.hue = random( hue - 20, hue + 20 );
 this.brightness = random( 50, 80 );
 this.alpha = 1;
 // set how fast the particle fades out
 this.decay = random( 0.015, 0.03 );
}

// update particle
Particle.prototype.update = function( index ) {
 // remove last item in coordinates array
 this.coordinates.pop();
 // add current coordinates to the start of the array
 this.coordinates.unshift( [ this.x, this.y ] );
 // slow down the particle
 this.speed *= this.friction;
 // apply velocity
 this.x += Math.cos( this.angle ) * this.speed;
 this.y += Math.sin( this.angle ) * this.speed + this.gravity;
 // fade out the particle
 this.alpha -= this.decay;
 
 // remove the particle once the alpha is low enough, based on the passed in index
 if( this.alpha <= this.decay ) {
  particles.splice( index, 1 );
 }
}

// draw particle
Particle.prototype.draw = function() {
 ctx. beginPath();
 // move to the last tracked coordinates in the set, then draw a line to the current x and y
 ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
 ctx.lineTo( this.x, this.y );
 ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
 ctx.stroke();
}

// create particle group/explosion
function createParticles( x, y ) {
 // increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
 var particleCount = 30;
 while( particleCount-- ) {
  particles.push( new Particle( x, y ) );
 }
}

// main demo loop
function loop() {
 // this function will run endlessly with requestAnimationFrame
 requestAnimFrame( loop );
 
 // increase the hue to get different colored fireworks over time
 hue += 0.5;
 
 // normally, clearRect() would be used to clear the canvas
 // we want to create a trailing effect though
 // setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
 ctx.globalCompositeOperation = 'destination-out';
 // decrease the alpha property to create more prominent trails
 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 ctx.fillRect( 0, 0, cw, ch );
 // change the composite operation back to our main mode
 // lighter creates bright highlight points as the fireworks and particles overlap each other
 ctx.globalCompositeOperation = 'lighter';
 
 // loop over each firework, draw it, update it
 var i = fireworks.length;
 while( i-- ) {
  fireworks[ i ].draw();
  fireworks[ i ].update( i );
 }
 
 // loop over each particle, draw it, update it
 var i = particles.length;
 while( i-- ) {
  particles[ i ].draw();
  particles[ i ].update( i );
 }
 
 // launch fireworks automatically to random coordinates, when the mouse isn't down
 if( timerTick >= timerTotal ) {
  if( !mousedown ) {
   // start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
   fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
   timerTick = 0;
  }
 } else {
  timerTick++;
 }
 
 // limit the rate at which fireworks get launched when mouse is down
 if( limiterTick >= limiterTotal ) {
  if( mousedown ) {
   // start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
   fireworks.push( new Firework( cw / 2, ch, mx, my ) );
   limiterTick = 0;
  }
 } else {
  limiterTick++;
 }
}

// mouse event bindings
// update the mouse coordinates on mousemove
canvas.addEventListener( 'mousemove', function( e ) {
 mx = e.pageX - canvas.offsetLeft;
 my = e.pageY - canvas.offsetTop;
});

// toggle mousedown state and prevent canvas from being selected
canvas.addEventListener( 'mousedown', function( e ) {
 e.preventDefault();
 mousedown = true;
});

canvas.addEventListener( 'mouseup', function( e ) {
 e.preventDefault();
 mousedown = false;
});

// once the window loads, we are ready for some fireworks!
window.onload = loop;
//]]>
</script> 

Vậy là ta đã hoàn thành được 99% rồi 😆Giờ chỉ cần lưu mẫu lại thôi.

À, nếu bạn muốn giữ nền  blog của mình thì  xóa " background: #222 " đi nha hoặc cũng có thể chỉnh màu khác.

Thế là xong, với những bước đơn giản trên là Blog của bạn đã có không khí của mùa Xuân năm nay rồi, chúc các bạn thành công và nhớ share để giúp Blog nhé.

Menu dọc đa tầng load nhanh với html cho blogspot, blogger

Chào các bạn, vài ngày trước có bạn comment hỏi về thanh menu bên trái blog của mình và cách để làm. Vì thế hôm nay mình sẽ hướng dẫn cách làm menu như mình.

Hiện nay có rất nhiều cách tạo menu dọc, ngang cho blog nhưng đa số đều có sự tham gia của js làm ảnh hưởng 1 phần rất nhỏ đến tốc độ tải của trang. Phần nhỏ cũng không đáng kể nhưng đối với những người muốn có tốc độ load trang tuyệt đối thì chẳng thích tí nào,

Vì thế sau đây mình sẽ hướng dẫn cho các bạn cách làm menu bằng HTML và CSS mà không ảnh hưởng đến tốc độ load trang.

Menu dọc đa tầng load nhanh với html cho blogspot, blogger

Chúng ta cùng bắt đầu nhé:

Đầu tiên các bạn vào chỉnh sửa HTML cho blog của mình, tìm thể ]]>< và copy toàn bộ code vừa chọn lên trên thẻ vừa tìm:

.navbox>ul>li>ul>li:hover>ul{display:block}
.leftbar{width:15.9%;margin-left:20px;float:left}
.navbox.sidenav>ul>li{margin-bottom:20px}
.navbox.sidenav>ul>li>a,.navbox.sidenav>ul>li.active>a{font-size:17px;border-left:3px solid #ed2e2e;font-weight:bold;background:#f5f5f5;color:#ed2e2e;text-transform:uppercase}
.navbox li a{    color: #333;font-weight:500;display:block;position:relative;min-height:38px;border-bottom:1px solid #eee;line-height:38px}
.navbox.sidenav>ul>li>a>img{-moz-filter:brightness(0) invert(1);-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1);left:10px}
.navbox li a img{padding-left:10px;width:20px;height:20px;position:absolute;top:9px;left:0}
.navbox>ul>li>ul>li{position:relative}
.navbox.sidenav>ul>li>ul>li>a{    color: #333;white-space:nowrap;padding-right:13px;overflow:hidden;text-overflow:ellipsis}
.navbox li a{display:block;position:relative;padding-left:10px;min-height:38px;border-bottom:1px solid #eee;line-height:38px}
.navbox>ul>li>ul>li.hassub>a:after{content:"";position:absolute;top:15px;right:5px;width:0;height:0;border:4px solid transparent;border-left:4px solid #d8d8d8}
.navbox>ul>li>ul>li:hover>a{color:#ff4500}
.navbox>ul>li>ul>li>ul>li a:hover{color:#ff4500}
.navbox>ul>li>ul>li>ul{z-index:9;display:none;position:absolute;left:200px;top:-10px;min-width:200px;background:#fff;border:1px solid #eee;white-space:nowrap;padding:10px;border-radius:5px}

Sau đó các bạn đến nơi muốn hiển thị menu và copy toàn bộ code dưới vào:

<ul>
<li class="vanthangit  hassub">
<a href="#">
<i aria-hidden="true" class="fa fa-facebook" style="color:#3b5998;    font-size: 20px;"></i>
Facebook
</a>
<ul>
<li>
<a href="#">
Ảnh bìa Facebook
</a>
</li>
<li>
<a href="#">
Chứng minh thư
</a>
</li>
<li>
<a href="#">
Thủ thuật Facebook
</a>
</li>
<li>
<a href="#">
Icon Chat
</a>
</li>
<li>
<a href="#">
Bảo mật Facebook
</a>
</li>
<li>
<a href="/">
Tổng Hợp Rip Facebook
</a>
</li>
</ul>
</li>
</ul>

Bước cuối cùng là các bạn chỉ cần lưu lại và vào trang blog mình kiểm tra thôi.
Chúc các bạn thành công. Share nếu thấy hay.

Bạn đã trang trí phần bố cục cho Blogspot, Blogger của mình ?

Hello các bạn, cũng đã lâu Blog mình không đăng bài vì bận tối ưu cho template. Trong quá trình tối ưu và chỉnh sửa lại giao diện thì mình phát hiện trong phần bố cục của template mình rất bừa bộn =)) Vì thế mình đã khắc phục nó bằng 1 thủ thuật nho nhỏ, thủ thuật này sẽ được mình share trong bài này.

Trang trí phần bố cục cho Blogspot, Blogger ?

Thủ thuật rất đơn giản là chúng ta chỉ cần dùng 1 chút CSS mà thôi. Đặc biệt hơn là chúng ta chỉ việc thêm #layoutvà trước css của ID/Class mà chúng ta cần căn chỉnh.

Ví dụ: trong bài viết trước mình có tạo ra class là bocuc-vanthang để hiển thị tên trang web trên trang chủ. thì giờ mình chỉ việc thêm #layout và trước .bocuc-vanthang để căn chỉnh nó trong phần bố cục. Như vậy, ta sẽ được một cái mới là #layout .bocuc-vanthang.

Bây giờ chúng ta làm thử làm nhé:

#layout .bocuc-vanthang {
width: 30%;
float: left;
}
#layout .bocucbenphai-vanthang {
width: 70%;
float: right;
}

Sau khi hoàn thành chúng ta sẽ được bố cục gọn gàng như dưới. ( Ảnh chỉ là demo. Bạn phải thêm css khác tùy theo template nhé )

Trang trí phần bố cục cho Blogspot, Blogger ?

Chúc bạn thành công. Hãy share nếu thấy hay để giúp Blog nhé !

Tiện ích theo dõi với hiệu ứng đẹp cho Blogspot

Hôm nay mình có ghé thăm một vài trang web Blog khác để tìm những thủ thuật hay về cho Blog mình. Và vô tình thấy một tiện ích khá hay và đẹp đó là khung theo dõi, nên mình đã làm theo và hôm nay sẽ share cho các bạn.


Tiện ích theo dõi với hiệu ứng đẹp cho Blogspot - Văn Thắng Blog


Chúng ta cùng bắt đầu ngay nhé :v



Vào bố cục -> thêm tiện ích ( nơi bạn muốn hiễn thị ) và copy toàn bộ HTML dưới vào:



<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='lightsosmed-img'>
<img alt='tu-hoc-seo-online' class='img-responsive' height='180' src='https://lh3.googleusercontent.com/-bzhnxI3KeEY/Vr6HUcJI3iI/AAAAAAAAByw/x5345dFQqNI3_ViTugHJ4OjcKRXdZhMAgCL0B/w1024-h576-n-rw-no/C4D%2BLOGO%2BVIP0076qw.png' title='Tự học seo online' width='300'/>
<div class='aboutfloat-img'><span class='lightsosmed-float'><a href='https://www.blogger.com/follow-blog.g?blogID=5784932427227073481' rel='nofollow' target='_blank' title='Theo dõi'><i class='fa fa-user'></i> Theo dõi</a></span></div>
</div>
</div>
</div>


Sau khi copy xong các bạn tiếp tục vào Mẫu -> Chỉnh sửa HTML để thêm CSS

- Ctrl + F  tìm đoạn ]]><  và thêm toàn bộ copy dưới vào trên thẻ vừa tìm:


.lightsosmed-img{position:relative;max-height:140px;overflow:hidden}
.lightsosmed-img img {max-width:100%;width:100%;transition:all .6s;}
.lightsosmed-img:hover img{transform:scale(1.2) rotate(-10deg)}
.lightsosmed-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.lightsosmed-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.lightsosmed-float{text-align:center;display:table;width:100%;height:100%}
.lightsosmed-float a{background:#8bc34a;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border-radius:3px;box-shadow:3px 3px 3px rgba(0,0,0,0.05);transition:all .3s}
.lightsosmed-float:hover a{background:#7cb342;color:#fff;border-color:transparent;}
.lightsosmed-float a i{font-weight:normal;margin:0 5px 0 0}
.lightsosmed-wrpicon{display:block;margin:15px auto;position:relative;}
.lightsosmed-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .lightsosmed-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .lightsosmed-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .lightsosmed-icon i{font-family:fontawesome;margin:0 3px 0 0}
.lightsosmed-icon.fbl a{background:#3b5998}
.lightsosmed-icon.twitt a{background:#19bfe5}
.lightsosmed-icon.crcl a{background:#d64136}
.lightsosmed-icon.fbl a:hover,.lightsosmed-icon.twitt a:hover,.lightsosmed-icon.crcl a:hover{background:#404040}
.extender .lightsosmed-icon:hover a,.extender .lightsosmed-icon a:hover{color:#fff;}
.lightsosmed-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.lightsosmed-info p{margin:5px 0}
.lightsosmed-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.lightsosmed-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.lightsosmed-info h4:before,.lightsosmed-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.lightsosmed-info h4:before {margin-left:-50%;text-align:right;}

Sau đó các bạn lưu mẫu và thêm thành quả.
Chỉnh sửa tùy chọn:

  • Các bạn thay ID thành ID blog của bạn  "https://www.blogger.com/follow-blog.g?blogID=id blog của bạn"
  • Các bạn có thể thay đổi link ảnh nhé.
  • Chúc các bạn có một tiện ích đẹp cho trang.

Template Bmag 2.0.3 fix theme options và việt hóa

Template Bmag 2.0.3 fix theme options và việt hóa

BMAG Template là một mẫu giao diện do Sweetheme phát triển, BMAG thuộc template cao cấp Responsive với nhiều chuyên mục, giao diện mobile thân thiện. BMAG Template thích hợp nhất cho các trang tạp chí và thủ thuật. Gần đây do sự cập nhật mới của blogger nên các phiên bản 2.0.3 trở xuống sẽ bị ẩn phần Theme Options. Vì thế hôm nay mình muốn chia sẽ cho các bạn giao diện BMAG được sửa lỗi phần Theme Options và được việt hóa bởi mình, còn về phần document thì các bạn chờ bản update từ StarTuanIt.Net nhé !

Template Bmag 2.0.3 fix theme options và việt hóa

Download: Link Fshare
Thông tin: 
- Dung lượng: 1.86 MB
- Gồm: Documentation, Theme Versions, BMAG-VietHoa(*XML)
Việt Hóa bởi StarTuanIt.Net

Chèn background, ảnh nền vào button like Facebook cho Blogspot

Button like ( nút like ) Facebook là một thành phần rất phổ biến trên mỗi website. Nó được đặt ở nhiều nơi trên trang web ( trái, phải, ..) hoặc được trang trí với nhiều phong các khác nhau để tăng tỉ lệ click like cao hơn. 

Hôm nay, Văn Thắng Blog sẽ hướng dẫn cho các bạn thủ thuật trang trí button like cho facebook là chèn background, ảnh nền vào. Giúp cho Web/ blog chuyên nghiệp hơn vào tỉ lệ click sẽ cao hơn.

Chèn background, ảnh nền vào button like Facebook cho Blogspot - Văn Thắng Blog

Chúng ta cùng bắt đầu nhé:

Thêm khung nhận thông báo qua email dưới bài viết

Nếu bạn là một người hay vào Blog mình thì các bạn đã biết tuần trước mình đã chia sẻ một template khá đẹp và chuẩn Seo cho Blogspot tin tức. Nếu bạn đã xem demo trong bài đăng của template đó ở cuối bài sẽ có 1 khung theo dõi qua email khá đẹp.

Vì khá đẹp nên mình đã lấy về cho Blog Văn Thắng. Nhưng hôm nay mình sẽ hướng dẫn cho tất cả các bạn có khung theo dõi này.

Thêm khung nhận thông báo qua email dưới bài viết - Văn Thắng Blog


* Thêm CSS - Tìm ]]>< và thêm đoạn code dưới trên nó:


.subscribe-widget{background:#222;color:#fff;position:relative;overflow:hidden;border:1px solid #eee;text-align:center;margin:25px 0;padding:25px 0;padding:25px}.form-promo i{font-size:40px;margin-bottom:5px}.form-promo h3{text-transform:uppercase;margin:0}.form-promo h4{font-weight:400;font-size:17px;margin:0 0 15px}.form-promo h3{font-size:14px}input.email-field{font:normal normal 14px Prompt,sans-serif;display:inline-block;width:50%;color:#ccc;background:none!important;border:1px solid #f5f5f5!important;text-indent:20px;outline:none!important;height:50px;padding:10px 0!important}input.email-button{font:normal normal 14px Prompt,sans-serif;font-weight:500;height:50px;cursor:pointer;border:1px solid #02b95c;background:#02b95c;outline:none;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;padding:0 15px}

* Tiếp theo để hiện khung cái bạn thêm đoạn HTML dưới vào nơi bạn muốn hiện:


<div class='subscribe-widget' id='subwid'>
<div class='form-promo'>
<i class='fa fa-envelope'></i>
<h3>Nhận tin tức từ Văn Thắng Blog ?</h3>
<h4>Hãy đăng kí để nhận những tin tức mới nhất</h4>
</div>
<div class='tl-rssform'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=vanthangit/PQTX&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input class='email-field' name='email' placeholder='Nhập email của bạn tại đây ...' type='text'/>
<input name='uri' type='hidden' value='vanthangit/PQTX'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='email-button' type='submit' value='Nhận ngay'/>
</form>
</div>
<div class='form-policy'><p><span></span>Blog Chia Sẽ Thủ Thuật Blog - Facebook - Photoshop</p></div>
</div>

Các bạn chỉnh lại các thông tin tô đậm màu xanh thành thông tin của Blog mình nhé. Tùy vào mỗi template nên mình không thể đưa vị trí chính xác để hiễn thị vì thế nếu bạn có thắc mắc gì thì liên hệ với Facebook mình sẽ giúp. 

Nhớ Share là Like để giúp Blog nhé !

Thêm Box Like Facebook Cố Định Bên Phải Cho Blogspot

Như chúng ta đã biết Facebook là mạng xã hội lớn nhất thế giới. Nó cung cấp rất nhiều dịch vụ và tiện ích hay. Nút Like cũng là một trong những thành phần phổ biến và quan trọng của mạng xã hội này. Để có nhiều like các bạn phải quen  biết rộng rải và có nhiều người để ý đến mình,... Hoặc có thể sử dụng những dịch vụ tăng like trên Auto-bot.me

Nhưng nếu bạn có Website/ Blog bạn hãy có đem nút like lên để có nhiều người tiếp cận và tỉ lệ click nút like sẽ cao hơn. Vì thế hôm nay Văn Thắng Blog sẽ hướng dẫn các bạn các mang nút like lên Blogspot một các đơn giản nhất đó là " Box Like Facebook Cố Định "

Thêm Box Like Facebook Cố Định Bên Trái Cho Blogspot - Văn Thắng Blog


Chúng ta cùng bắt đầu nhé:

Có 2 cách để thêm vào đó là Thiên Tiện Ích và Chỉnh HTML 

Cách 1: Vào trang quản lí Blog của bạn > Mẫu > Chỉnh sửa HTML 

- Thêm CSS: Tìm ]]>< và thêm đoạn code phía dưới trên nó:

#rightBoxLike{position: fixed; right: 0; top: 25%; z-index: 10000}
.likeBox{background-color: rgba(150, 150, 150, 0.3);border-bottom-left-radius: 5px; border-top-left-radius: 5px;margin-bottom: 10px;padding: 10px}

- HIển Thị: Tìm </body> Thêm code dưới trước nó:


<div id='rightBoxLike'>
    <div class='likeBox'>
       <div class='fb-like' data-action='like' data-href='https://www.facebook.com/vanthangblog' data-layout='box_count' data-share='false' data-show-faces='true' data-size='small'/>
<div class='fb-share-button' data-layout='box_count' data-mobile-iframe='true' data-size='small'><a class='fb-xfbml-parse-ignore' href='https://www.facebook.com/sharer/sharer.php?u&amp;src=sdkpreparse' target='_blank'>Chia sẻ</a></div>
    </div>
</div>

Xong. Thế Là Lưu lại


Cách 2:  Vào trang quản lí Blog của bạn > Bố cục > Thêm tiện ích > HTML/JavaScrip- Copy hết Code vào  và lưu lại:



<style>#rightBoxLike{position: fixed; right: 0; top: 25%; z-index: 10000}
.likeBox{background-color: rgba(150, 150, 150, 0.3);border-bottom-left-radius: 5px; border-top-left-radius: 5px;margin-bottom: 10px;padding: 10px}
    <div class='likeBox'>
       <div class='fb-like' data-action='like' data-href='https://www.facebook.com/vanthangblog' data-layout='box_count' data-share='false' data-show-faces='true' data-size='small'/>
<div class='fb-share-button' data-layout='box_count' data-mobile-iframe='true' data-size='small'><a class='fb-xfbml-parse-ignore' href='https://www.facebook.com/sharer/sharer.php?u&amp;src=sdkpreparse' target='_blank'>Chia sẻ</a></div>
    </div>
</div>

Chú ý: Cách bạn thay đoạn màu xanh trên thành link Facebook của bạn
Hãy Like và Share nếu thấy bài viết hay !

HTML làm đẹp và nén CSS dành cho Blogspot/Blogger

CSS là một phần không thể thiếu của website. Css giúp cho website bạn dễ nhìn hơn nếu trang trí hợp lí, giao diện đẹp hơn,... thôi để bài sau mình sẽ giới thiệu về CSS là gì. Còn giờ mình sẽ giới thiệu một công cụ nén  và làm đẹp CSS cho blog giúp load nhanh hơn.

Chúng ta bước đầu thực hiện nhé: ^^

Bước 1: Đăng nhập vào Blogger
Bước 2: Chuyển sang tag Trang
Bước 3: Thêm trang mới và chuyển qua HTML
Bước 4: Copy toàn bộ code dưới vào

<article>
<div id="cssminifier">
<style scoped="" type="text/css">
#sidebar-wrapper{display:none}
#cssminifier{background:#00DAB3;position:relative;display:block;clear:both;border-radius:2px;padding:5px}
#cssminifier textarea{width:95%;height:300px;margin:0 auto;display:block;background-color:#fff;padding:5px;font:normal 13px 'Courier New',Monospace;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.05);border-radius:2px 2px 0 0;resize:none}
textarea:focus{background-color:#FFF;color:#303030}
#cssminifier .box{margin:10px auto 10px;color:rgba(255,2255,255,.6)}
#cssminifier .box p{margin:0 0 2px}
#cssminifier button{cursor:pointer}
#cssminifier .col{width:48%;margin:0 auto 30px}
#cssminifier .left{float:left;margin-left:1%}
#cssminifier .right{float:right;margin-right:1%}
#cssminifier .button-group{background:#333;text-align:center;padding:5px 5px 5px 5px;margin:0;border-radius:0 0 2px 2px}
#cssminifier button,#cssminifier button[disabled]:active{background:rgba(255,255,255,0.2);text-align:center;color:#fefefe;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:4px;margin:0 5px;border:0;transition:all .1s}
#cssminifier button:hover,#cssminifier button:active{background:#f1f1f1;color:#333}
#cssminifier button[disabled],#cssminifier button[disabled]:active{background:#fff}
#cssminifier .opt1,#cssminifier .opt2,#cssminifier .opt3,#cssminifier .opt4,#cssminifier .opt5{display:inline-block;margin:0 0 0 10px;vertical-align:middle;border:none;outline:none}
#cssminifier br{display:none}
</style>
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Dán CSS của bạn vào đây. Sau đó nhấn chọn các chức năng. Nấn Nén css để hoàn tất... Chúc bạn thành công !" spellcheck="false"></textarea>
<br />
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" />
<label for="stripAllComment">Bỏ các ghi chú</label>
<input class="opt2" id="superCompact" type="checkbox" />
<label for="superCompact">Siêu nén</label>
<input class="opt3" id="betterIndentation" type="checkbox" />
<label for="betterIndentation">Giữ phần thụt đầu dòng</label>
<input checked="" class="opt4" id="keepLastComma" type="checkbox" />
<label for="keepLastComma">Xóa bỏ phần xuống dòng</label>
</div>
<button onclick="compressCSS(&quot;cssField&quot;);">Nén css</button>
<button onclick="clearField(&quot;cssField&quot;);">Xóa tất cả</button>
<button onclick="selectAll(&quot;cssField&quot;);">Chọn tất cả</button>
</div>
<div class="clear">
</div>
<script type="text/javascript">
function get(e){return document.getElementById(e)}function highlightCode(e){if(hc.checked){var a=e.innerHTML;a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/\'(.*?)\'/g,"<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g,"<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g,"$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g,"{<span class='pr'>")}),a=a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g,function(e){return e.replace(/'(.*?)'/g,"<span class='vl'>'$1'</span>").replace(/"(.*?)"/g,"<span class='vl'>\"$1\"</span>")}),a=a.replace(/\{([\s\S]+?)\}/g,function(e){return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g,"<span class='pn'>$1</span>").replace(/\!important/gi,"<span class='im'>!important</span>")}),a=a.replace(/\/\*([\w\W]+?)\*\//gm,"<span class='cm'>/*$1*/</span>"),e.innerHTML="<code>"+a+"</code>",hr.style.display="block",rt.style.display="block"}else hr.style.display="none",rt.style.display="none"}function compressCSS(e){var a=get(e),c=/@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,n=a.value,t=n.length;n=sa.checked||sc.checked?n.replace(/\/\*[\w\W]*?\*\//gm,""):n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm,"\n$2\n"),n=n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g,"$2"),n=sc.checked?n:n.replace(/\}(?!\})/g,"}\n"),n=bi.checked?n.replace(c,function(e){return e.replace(/\n+/g,"\n  ")}):n.replace(c,function(e){return e.replace(/\n+/g,"")}),n=bi.checked&&!sc.checked?n.replace(/\}\}/g,"}\n}"):n,n=bi.checked&&!sc.checked?n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g,"@$1$2{\n  "):n,n=cm.checked?n.replace(/;\}/g,"}"):n.replace(/\}/g,";}").replace(/;+\}/g,";}").replace(/\};\}/g,"}}"),n=n.replace(/\:0(px|em|pt)/gi,":0"),n=n.replace(/ 0(px|em|pt)/gi," 0"),n=n.replace(/\s+\!important/gi,"!important"),n=n.replace(/(^\n+|\n+$)/,""),a.value=n,hr.innerHTML="/* "+(t-n.length)+" of "+t+" unused characters has been removed. */\n"+n.replace(/</g,"&lt;").replace(/>/g,"&gt;"),highlightCode(hr)}function clearField(e){var a=get(e);a.value="",a.focus()}function selectAll(e){get(e).focus(),get(e).select()}var hc=get("highlightCode"),sa=get("stripAllComment"),sc=get("superCompact"),cm=get("keepLastComma"),bi=get("betterIndentation"),bs=get("breakSelector"),tt=get("toTab"),to=get("tabOpt").getElementsByTagName("input"),sb=get("spaceBetween"),ip=get("inlineSingleProp"),rs=get("removeLastSemicolon"),il=get("inlineLayout"),si=get("singleBreak"),hr=get("highlightedResult"),rt=document.getElementsByTagName("h2")[1];
</script>
</div>
</article>

Bước cuối cùng là lưu lại trang vào vào blog bạn xem kết quả. Đừng quên like, share và ghé thăm trang thường xem nhé ! ^^ Chúc các bạn thành công.

Code HTML Photoshop online cho Blogspot/Blogger

Code HTML Photoshop online cho Blogspot/Blogger

Dạo này Văn Thắng Blog đã đỗi template để cải thiện tốc độ load và 1 số vấn đề khác. Mình đã xem lại một vài thứ thì thấy có một số cái hay mà các bạn mới dùng cũng hay hõi mình là trang Photoshop online.


Hướng dẫn tạo khung tác giả/ Author cho Blogspot

Khung tác giả là 1 ô thông tin ngắn giới thiệu về tác giả, website blog đó. Mỗi template blogspot thường đều có sẵn khung này, nhưng cũng có 1 số blogspot không có. Vì vậy hôm nay mục đích viết bài này là sẽ hướng dẫn làm khung thông tin cho các template không có sẵn.


Xem demo trước nhé: 


Hướng dẫn tạo khung tác giả/ Author cho Blogspot

Bây giờ thì bắt đầu làm :D 

Bước 1: Chèn code dưới vào dưới ]]><


.author-box {
  background:#F8F8F8;
  margin-top:8px;
  overflow:hidden;
  border:1px solid #eee;
  border-bottom:3px solid #37B8EB;
  box-shadow:0 1px 3px 0 #B5B5B5;
}

.avatar-author {
  float:left;
  margin-right:3px;
  border:1px solid #FFF;
  padding:5px;
}

.info-author {
  width:100%;
}

.info-author h2 {
  font-size:18px;
  margin:0 !important;
  color:#333;
}

.author-social {
  margin-top:5px;
}

.author-social a {
  opacity:.7;
  margin-left:2px;
}

.author-social a:hover {
  opacity:1;
}

.author-social a img {
  width:25px;
}

Bước 2: Chèn đoạn HTML dưới ở nơi muốn hiễn thị


<div class='author-box' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<img class='avatar-author' height='100' src='http://www.upsieutoc.com/images/2016/08/06/13724104_10208355869508175_60606223156817640_o.jpg' width='100'/>
<div class='info-author' itemprop='description'>
<h2><i aria-hidden='true' class='fa fa-user'></i> Tác giả: <a href='https://www.facebook.com/' target='_blank'><span itemprop='name'> Tên quản trị viên <i aria-hidden='true' class='fa fa-check-circle'></i></span></a></h2>
<p>Chào mừng bạn đã đến với Blog của tôi. Website chia sẻ Thủ Thuật - Phần Mềm - Ảnh Đẹp - PSD tổng hợp, ... được cập nhật liên tục. Mong được mọi người quan tâm.</p>
</div>
<div class='author-social'>
<a href='https://www.vanthangit.tk' target='_blank' title='Website'><img alt='' src='https://lh5.googleusercontent.com/-bTOvDNpc0Dc/VLTozXJQURI/AAAAAAAAAq0/bGzWE4TNUx0/s32-no/author_site.png'/></a>
<a href='http://twitter.com/' target='_blank' title='Twitter'><img alt='' src='https://lh3.googleusercontent.com/-MI9V5yoYGkg/VLToz5h-b3I/AAAAAAAAAq4/o-axGVMet5E/s32-no/author_twitter.png'/></a>
<a href='http://facebook.com/vanthangblog' target='_blank' title='Facebook'><img alt='' src='https://lh4.googleusercontent.com/-z_Icq6321-Q/VLToxhma_pI/AAAAAAAAAqU/JzgC9MNsKqg/s32-no/author_facebook.png'/></a>
<a href='https://plus.google.com/' title='Google Plus'><img alt='' src='http://www.upsieutoc.com/images/2016/05/14/Untitled-35f472.png' target='_blank'/></a>
<a href='https://www.youtube.com' target='_blank' title='Youtube'><img alt='' src='https://lh5.googleusercontent.com/-b4Li72ENuZc/VLTo0XsqZeI/AAAAAAAAAq8/9cyjb-ud72U/s32-no/author_youtube.png'/></a>
<script src='https://apis.google.com/js/platform.js'>
  {lang: 'vi'}
</script>
<div class='g-plusone' data-annotation='inline' data-width='300'></div>
</div>
</div>

Bước 3:Chỉnh sửa lại thông tin, Lưu mẫu lại và vào trang xem.

Hiệu ứng hover ảnh cho Blogger - Blogspot

Hiệu ứng hover là 1 hiệu ứng rất thông dụng, được sử dụng nhiều ở các website chia sẻ, cung cấp hình ảnh. Nó giúp cho website bạn trong sinh động hơn rất nhiều, giúp cho người đọc hứng thú, giúp cho việc trình bài ảnh của bạn dễ dàng hơn, thu hút được sự chú ý của khách hàng.
DEMO: ( Phần ảnh bìa facebook mới bên sidebar )
hieu ung hover anh



Đẹp không nào :v .. Mình sẽ hướng dẫn các bạn làm 1 hiệu ứng trong đây nhé :D
Bắt đầu:
 Vào trang quản lí Blog >> Mẫu >> Chĩnh sửa HTML >> Tìm đến dòng ]]>< (dùng ctrl + f để tìm)
Sau khi tìm các bạn copy toàn bộ css dưới lên trên ]]><

Thế là xong phần thiết kế. Bây giờ chúng ta chọn chỗ hiễn thị:
Vào trang quản lí Blog >> Bố cục >> Thêm tiện ích >> HTML/Javascript >> Copy toàn bộ code dưới vào

Sau khi copy các bạn chĩnh lại link trong code trên phù hợp với Blog của mình nhé
Để thay các Icon các bạn vào đây: Nhấp vào đây
Xong hết tất cả các bạn lưu lại nhé :D
Chúc các bạn thực hiện thành công :v