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