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

Giữ cố định tất cả sidebar khi trượt cho blogger/blogspot

Nếu bạn muốn blog bạn thể hiện nhiều nội dung để giúp tăng khả năng click quảng cáo hoặc giúp bài đăng mới tiếp cận người xem hơn. Nhưng khi người xem xem một bài đăng nào đó thì khi kéo để xem hết nội dung sẽ làm cho sidebar trượt theo làm lộ ra một khoảng trống khá phí.
Để giúp khắc phục lỗi này, Vanthangit.com xin hướng dẫn cho bạn chỉ với một đoạn code phía dưới:
Giữ cố định tất cả sidebar khi trượt cho blogger/blogspot
Demo Giữ cố định tất cả sidebar khi trượt cho blogger/blogspot

Slider post hiển thị bài đăng theo nhãn tại trang chủ cho blogger/blogspot

Để giúp trang của của website bạn đẹp hơn và hiển thị được nhiều nội dung hơn Vanthangit.com xin chia sẻ tiện ích Slider post hiển thị bài đăng theo nhãn tại trang chủ cho blogger/blogspot.
Tiện ích đơn giản với một vài hiệu ứng hover sẽ giúp website bạn đẹp hơn rất nhiều:

Slider post hiển thị bài đăng theo nhãn tại trang chủ cho blogger/blogspot vanthangit
Ảnh demo sau khi sử dụng slider post
Đầu tiên vào Blogger > Chủ đề > Tùy chỉnh HTML
Thêm đoạn CSS dưới lên trên ]]><

.featured-posts a{color:#fff;}
.featured-posts a:hover{color:#fff;text-decoration:underline;}
.main-post.featured-posts a{margin:0;font-size:18px}
.featured-posts .col-post{float:left;position:relative;overflow:hidden;}
.featured-posts .secondary-post{width:34.4%;margin:0;}
.featured-posts .secondary-post:nth-child(odd){margin:3px 0 0 0}
.featured-posts .main-post{width:65.2%;padding:0;margin:0 3px 0 0}
.featured-posts span{padding:8px;color:#fff;font-size:12px;font-style:normal;top:0;left:0;z-index:2;position:absolute}
.featured-posts span.lebb{background:#e74c3c;visibility:hidden;opacity:0;top:-20px;transition:all .3s}
.featured-posts .main-post:hover span.lebb,.featured-posts .secondary-post:hover span.lebb{visibility:visible;opacity:1;top:0;}
.featured-posts img{height:100%;transition:transform 0.35s ease 0s;-moz-transition:transform 0.35s ease 0s;-o-transition:transform 0.35s ease 0s}
.featured-posts .main-post img{height:350px;width:100%;object-fit:cover}
.featured-posts .secondary-post img{height:175px;object-fit:cover;width:100%}
.featured-posts .main-post:hover img,.featured-posts .secondary-post:hover img{transform:scale(1.1)}
.featured-posts header{position:absolute;bottom:0;left:0;padding:20px;width:100%;z-index:2}
.featured-posts h4{font-size:15px;line-height:1.3;}
.featured-posts header h3,.featured-posts header h4{font-weight:400}
.featured-posts span.vignette{background-color:transparent;position:absolute;overflow:hidden;margin:0;padding:0;height:100%;top:0;left:0;right:0;bottom:0;transition:background 0.3s linear,opacity 0.3s linear}
.featured-posts span.vignette:before{content:'';width:100%;height:100%;position:absolute;z-index:1;top:0;background:linear-gradient(to bottom,rgba(0,0,0,0.1) 0%,rgba(0,0,0,.7) 100%);opacity:0.5;transition:background 0.3s linear,opacity 0.3s linear}
.featured-posts .main-post span.vignette:before{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#9e06cd 100%)}
.featured-posts .secondary-post span.vignette:before{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#dc2a02 100%)}
.featured-posts .secondary-post:nth-child(odd) span.vignette:before{background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#005f87 100%)}
.featured-posts .main-post:hover span.vignette:before,.featured-posts .secondary-post:hover span.vignette:before{opacity:.9;}

Sau đó, chuyển đến tiện ích Blog1 và copy toàn bộ code phía dưới và dán vào trên nó:

<script type="text/javascript">
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderpost(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post">
<a href="'+i+'"><span class="lebb">'+l+'</span><span class="vignette"></span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title-Thin">
<a href="'+i+'" title="">'+o+"</a></h3>
</header></div>
";document.write(v)}else{var v='<div class="ripplelink secondary-post col-post" style="margin-right:0">
<span class="lebb">'+l+'</span><span class="vignette"></span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="200" width="320"></img></a><header><h4>
<a href="'+i+'">'+o+"</a></h4>
</header></div>
";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=50,numposts1=10,featured_numpost="4";
//]]>
</script>
<div class="ct-wrapper" id="feature-post-section">
<div class="featured-posts padding clearfix">
<script type="text/javaScript">
document.write("<script src=\"/feeds/posts/default/-/Tenlable?max-results="+featured_numpost+"&orderby=published&alt=json-in-script&callback=sliderpost\"><\/script>");
</script>
</div>
</div>

Tùy chỉnh:
  1. Featured_numpost: Các bạn chỉnh lại số bài muốn hiển th
  2. Nếu muốn hiển thị bài mới các bạn xóa /-/Tenlable và lưu lại
  3. Nếu các bạn muốn không hiển thị trên mobile thì thêm @media only screen and (max-width:480px){#feature-post-section{display:none}} lên trên ]]><
Tổng kết: Đây là tiện ích khá phổ biến ở các template blogspot nước ngoài, đối với các template chưa có thì đây là một cách giúp bạn có đều đó. Hy vọng sẽ bổ ích cho bạn.

Code: arlinadzgn.com

Miễn phí template thích hợp cho tin tức, truyện, đề thi

Blogspot là một nền tảng web tuyệt vời dành cho người mới tìm hiểu về web, blog, ...Nhưng đối với những người mới tìm hiểu thì template cũng góp 1 phần khá phức tạp vì nó liên quan đến nhiều thứ như code, tối ưu, ...
Để nhanh chóng thì mình xin chia sẻ template blogspot/blogger thích hợp cho các bạn làm nội dung về tin tức, truyện, đề thi ....

Template blogger Animag phiên bản Việt Hóa. 

Miễn phí template thích hợp cho tin tức, truyện, đề thi vanthangit
Phần đầu trang của template tin tức, truyện, đề thi

Giữ cố định tiện ích khi kéo trang cho blogger/blogspot

Khi một bài viết dài và nhiều hình ảnh, người xem sẽ kéo trang xem nội dung tiếp theo, nhưng theo đó nội dung bên sidebar nếu ít sẽ không hiển thị và tạo nên 1 khoảng trống. Để giải quyết vấn đề này, chúng ta sẽ dùng code phía dưới để giữ cố định tiện ích không mất đi khi kéo trang.
Khi giữ cố định sẽ giúp blog bạn thể hiện được nhiều nội dung hơn, hoặc dùng cho các banner quảng cáo sẽ dễ làm nổi bật và tăng khả năng click ....

Giữ cố định tiện ích khi kéo trang cho blogger/blogspot vanthangit

Copy và dán vào trước </body>

<script type='text/javascript'>

//<![CDATA[

(function(b){var c={topSpacing:0,bottomSpacing:0,className:"is-sticky",center:false},f=b(window),e=b(document),d=[],h=f.height(),a=function(){var j=f.scrollTop(),q=e.height(),p=q-h,l=(j>p)?p-j:0;for(var m=0;m<d.length;m++){var r=d[m],k=r.stickyWrapper.offset().top,n=k-r.topSpacing-l;if(j<=n){if(r.currentTop!==null){r.stickyElement.css("position","").css("top","").removeClass(r.className);r.currentTop=null}}else{var o=q-r.elementHeight-r.topSpacing-r.bottomSpacing-j-l;if(o<0){o=o+r.topSpacing}else{o=r.topSpacing}if(r.currentTop!=o){r.stickyElement.css("position","fixed").css("top",o).addClass(r.className);r.currentTop=o}}}},g=function(){h=f.height()};if(window.addEventListener){window.addEventListener("scroll",a,false);window.addEventListener("resize",g,false)}else{if(window.attachEvent){window.attachEvent("onscroll",a);window.attachEvent("onresize",g)}}b.fn.sticky=function(i){var j=b.extend(c,i);return this.each(function(){var l=b(this);if(j.center){var k="margin-left:auto;margin-right:auto;"}stickyId=l.attr("id");l.wrapAll('<div id="'+stickyId+'StickyWrapper" style="'+k+'"></div>').css("width",l.width());var m=l.outerHeight(),n=l.parent();n.css("width",l.outerWidth()).css("height",m).css("clear",l.css("clear"));d.push({topSpacing:j.topSpacing,bottomSpacing:j.bottomSpacing,stickyElement:l,currentTop:null,stickyWrapper:n,elementHeight:m,className:j.className})})}})(jQuery);

//]]>

</script>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;#likefbvt&quot;).sticky({topSpacing:0,bottomSpacing:420});

});

</script>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;#HTML2&quot;).sticky({topSpacing:0,bottomSpacing:420});

});

</script>

Các bạn chỉnh sửa phần bôi màu bằng tên thẻ mà bạn muốn giữ cố định ( Nếu dùng class thì thay '#' thành '.' )
Nếu gặp vấn đề hãy comment phía dưới mình sẽ giúp!


BỔ SUNG:  Không chỉ dùng để giữ cố định sidebar mà bạn có thể dùng cho nhiều thứ khác như menu, nút share, comment,nội dung nổi bật, ...

TỔNG KẾT: Với code trên bạn đã có thể giữ cố định một tiện ích bất kì, làm nội dung nổi bật không bị mất khi cuộn trang, quảng cáo tiếp cận nhiều hơn,... Hy vọng sẽ giúp ích cho bạn.

Tiện ích không thể thiếu cho người quản lí web, lập trình

Bài viết này mình sẽ giới thiệu nhanh các công cụ cần thiết cho lập trình web, sẽ rất có ích cho bạn.

Tiện ích không thể thiếu cho người quản lí web, lập trình

1. Dragdis

Mỗi ngày các bạn đều truy cập các trang web hoặc mạng xã hội sẽ bắt gặp những website, hình ảnh, bố cục ... mà các bạn thích hoặc tạo ra 1 ý tưởng nào đó .. khi đó công cụ này sẽ giúp bạn lưu lại nhưng thứ đó (mình cũng đang dùng) 

Tiện ích không thể thiếu cho người quản lí web, lập trình

Bạn cài đặt theo link này: Click

2. What the Font

Để website tạo thêm sự chuyên nghiệp, thu hút và tạo điểm nhấn cho người đọc thì font chữ cũng góp phần không nhỏ. Nếu bạn lướt 1 trang web nào đó thấy font chữ đẹp nhưng không biết thì công cụ này sẽ giúp bạn. 

Tiện ích không thể thiếu cho người quản lí web, lập trình

Bạn cài đặt theo link này: Click
Trên là 2 công cụ cơ bản nhất sẽ giúp ít bạn trong công việc, bài viết này mong sẽ giúp ít cho bạn.

SEO Machine Pro : Phần mềm tổng hợp các Tools hỗ trợ SEO từ A-Z

Check Backlink phải Ahrefs, Tìm từ khóa lại vào Keyword Research, Kiểm tra Unique Content lại phải sang CopyScape, Proxy scraper, Check Outbound Link, Authority Check …Quá nhiều thao tác cho công việc hàng ngày làm bạn bị tốn thời gian. Đừng lo hãy chuyên tâm làm SEO còn tất cả những vấn đề khác của ” thế giới thao tác kiểm tra SEO ” cứ để SEO Machine Pro lo !!!

SEO Machine Pro là một phần mềm đa chức năng dành cho những người làm trong lĩnh vực Internet Marketing, đặc biệt là SEO. Phần mềm đặc biệt giúp người dùng tìm các từ khóa tương tác tốt cho website và các đánh giá bên lề về từ khóa, phân tích đối thủ cũng như kiểm tra được tổng thể Onpage Website cho đến các vấn đề OffPage.

SEO Machine Pro là Ứng dụng All In One SEO Tool được thiết kế cho các chuyên gia SEO những người muốn giảm bớt các hoạt động hàng ngày của họ bằng cách truy cập đến nhiều dịch vụ khác nhau như kiểm tra liên kết, tìm kiếm Proxy hay đơn thuần kiểm tra Unique của Content…

SEO Machine Pro là một hộp công cụ hữu ích bao gồm nhiều mô-đun SEO dùng để tối ưu hóa công cụ tìm kiếm. Ứng dụng này cho phép bạn truy cập vào các công cụ từ bảng điều khiển chung và làm việc với nhiều tab cùng một lúc với nhiều mảng hỗ trợ SEO khác nhau.

Bạn có thể sử dụng công cụ này để trích xuất các liên kết, để kiểm tra tính hợp lệ trang web, tạo ra nhiều địa chỉ email, tìm kiếm proxy và công việc thường xuyên khác cho hoạt động SEO.

SEO Machine Pro : Một công cụ quá tuyệt vời dành cho SEOer.

SEO Machine Pro : Phần mềm tổng hợp các Tools hỗ trợ SEO từ A-Z

Những công cụ hỗ trợ SEOer trong SEO Machine Pro :

DoFollow Checker
– Keyword Competition Checker
– Link Extractor
– Link Status Checker
– Outbound Checker
– Proxy Scraper
– Proxy Checker
– Keyword Suggestion Scraper
– Url Harvester
– Authority Checker
– Ahrefs Backlink Checker
– Mozscape Backlink Checker
– Semrush Keyword Research
– Backlink Analysis
– Comment Scraper
– Comment Poster
– Spintax Generator (tool)
– Name and Email Generator (tool)
– HTML Text Viewer (tool)
– Text Editor (tool)
– Blog Pinger (add-on)
– Proxy Settings
– Proxy Log
– Activity Log

Những tính năng nổi bật của SEO Machine Pro :

SEO Machine Pro : Phần mềm tổng hợp các Tools hỗ trợ SEO từ A-Z

DOWNLOAD SEO Machine Pro Edition [ACTIVATED]

DOWNLOAD: CLICK

[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 !