Hiển thị các bài đăng có nhãn HTML. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn HTML. 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é!

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

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.