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

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.

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