DxHdesign

Beautiful Related Posts - Part 2

noreply@blogger.com (DxH) — Sun, 10 Mar 2013 06:50:00 +0000

Tiếp tục chủ đề về làm đẹp tiện ích Bài viết liên quan - Related post, mình giới thiệu một mẫu đang được mình sử dụng khá bắt mắt và đẹp. Các bạn có thể xem Demo ngay tại trang blog của mình.

Bắt đầu thủ thuật.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#related-posts h3{color:#fff;font:20px Arial;text-shadow:1px 1px 1px #000}
.related-post .post-thumbnail{z-index:1;position:relative;width:104px;height:72px;display:block;background:#2e3032;border:1px solid #111;margin:0 7px 0 3px;padding:4px}
.related-post{float:left;position:relative;margin:10px 0 20px}

Bước 2: Tìm đến thẻ đóng </head> và thêm vào ngay trước nó đoạn mã.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
//<![CDATA[
(function(a){a.tooltipsy=function(c,b){this.options=b;this.$el=a(c);this.title=this.$el.attr("title")||"";this.$el.attr("title","");this.random=parseInt(Math.random()*10000);this.ready=false;this.shown=false;this.width=0;this.height=0;this.delaytimer=null;this.$el.data("tooltipsy",this);this.init()};a.tooltipsy.prototype.init=function(){var b=this;b.settings=a.extend({},b.defaults,b.options);b.settings.delay=parseInt(b.settings.delay);if(typeof b.settings.content==="function"){b.readify()}if(b.settings.showEvent===b.settings.hideEvent&&b.settings.showEvent==="click"){b.$el.toggle(function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}if(b.settings.delay>0){b.delaytimer=window.setTimeout(function(){b.show(c)},b.settings.delay)}else{b.show(c)}},function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}window.clearTimeout(b.delaytimer);b.delaytimer=null;b.hide(c)})}else{b.$el.bind(b.settings.showEvent,function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}if(b.settings.delay>0){b.delaytimer=window.setTimeout(function(){b.show(c)},b.settings.delay)}else{b.show(c)}}).bind(b.settings.hideEvent,function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}window.clearTimeout(b.delaytimer);b.delaytimer=null;b.hide(c)})}};a.tooltipsy.prototype.show=function(f){var d=this;if(d.ready===false){d.readify()}if(d.shown===false){if((function(h){var g=0,e;for(e in h){if(h.hasOwnProperty(e)){g++}}return g})(d.settings.css)>0){d.$tip.css(d.settings.css)}d.width=d.$tipsy.outerWidth();d.height=d.$tipsy.outerHeight()}if(d.settings.alignTo==="cursor"&&f){var c=[f.pageX+d.settings.offset[0],f.pageY+d.settings.offset[1]];if(c[0]+d.width>a(window).width()){var b={top:c[1]+"px",right:c[0]+"px",left:"auto"}}else{var b={top:c[1]+"px",left:c[0]+"px",right:"auto"}}}else{var c=[(function(e){if(d.settings.offset[0]<0){return e.left-Math.abs(d.settings.offset[0])-d.width}else{if(d.settings.offset[0]===0){return e.left-((d.width-d.$el.outerWidth())/2)}else{return e.left+d.$el.outerWidth()+d.settings.offset[0]}}})(d.offset(d.$el[0])),(function(e){if(d.settings.offset[1]<0){return e.top-Math.abs(d.settings.offset[1])-d.height}else{if(d.settings.offset[1]===0){return e.top-((d.height-d.$el.outerHeight())/2)}else{return e.top+d.$el.outerHeight()+d.settings.offset[1]}}})(d.offset(d.$el[0]))]}d.$tipsy.css({top:c[1]+"px",left:c[0]+"px"});d.settings.show(f,d.$tipsy.stop(true,true))};a.tooltipsy.prototype.hide=function(c){var b=this;if(b.ready===false){return}if(c&&c.relatedTarget===b.$tip[0]){b.$tip.bind("mouseleave",function(d){if(d.relatedTarget===b.$el[0]){return}b.settings.hide(d,b.$tipsy.stop(true,true))});return}b.settings.hide(c,b.$tipsy.stop(true,true))};a.tooltipsy.prototype.readify=function(){this.ready=true;this.$tipsy=a('<div id="tooltipsy'+this.random+'" style="position:absolute;z-index:2147483647;display:none">
').appendTo("body");this.$tip=a('<div class="'+this.settings.className+'">
').appendTo(this.$tipsy);this.$tip.data("rootel",this.$el);var c=this.$el;var b=this.$tip;this.$tip.html(this.settings.content!=""?(typeof this.settings.content=="string"?this.settings.content:this.settings.content(c,b)):this.title)};a.tooltipsy.prototype.offset=function(c){var b=ot=0;if(c.offsetParent){do{if(c.tagName!="BODY"){b+=c.offsetLeft-c.scrollLeft;ot+=c.offsetTop-c.scrollTop}}while(c=c.offsetParent)}return{left:b,top:ot}};a.tooltipsy.prototype.destroy=function(){this.$tipsy.remove();a.removeData(this.$el,"tooltipsy")};a.tooltipsy.prototype.defaults={alignTo:"element",offset:[0,-1],content:"",show:function(c,b){b.fadeIn(100)},hide:function(c,b){b.fadeOut(100)},css:{},className:"tooltipsy",delay:100,showEvent:"mouseenter",hideEvent:"mouseleave"};a.fn.tooltipsy=function(b){return this.each(function(){new a.tooltipsy(this,b)})}})(jQuery);
//]]>
</script>

Lưu ý: Nếu trong template của bạn đã có file jQuery rồi thì không cần thêm nữa.

Bước 3: Bạn tìm đến đoạn mã

<div class='post-footer-line post-footer-line-3'>

Và dán ngay sau nó đoạn code sau:

<div id='related-posts'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>You may also like:</h3>';rn='<h3>No Related posts available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0yhbocpoPONKG4-pQk3tgNBsjls1vxEueD_BRRPWJNJHQ8QVChX9Ul2Fd2SsxUGpG6pj25aPfeQCqMmPWFSTay10hts_oDOkpYK00xyEEGQZjdW2V7yzI968fEXA_YCrsi5-E8hHKd3Y/s0/noimage.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><a class="hastip" href="'+urls[c]+'" title="'+titles[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>

Lưu ý:
- Tùy thuộc vào bố cục template của bạn mà vị trí để dán đoạn code trên cũng khác nhau.

Bước 4: Tìm đến thẻ đóng </body> và thêm vào ngay trước nó đoạn mã.

<script type='text/javascript'>
//<![CDATA[
$(".hastip").tooltipsy({offset:[1,0],show:function(e,t){t.css({left:parseInt(t[0].style.left.replace(/[a-z]/g,""))+50+"px",opacity:"0.0",display:"block"}).animate({left:parseInt(t[0].style.left.replace(/[a-z]/g,""))-50+"px",opacity:"1.0"},300)},hide:function(e,t){t.slideUp(100)},css:{"max-width":"120px","font":"bold 12px Arial","line-height":"18px","padding":"10px","color":"#fff","background":"#000";"box-shadow":"0 0 3px rgba(0,0,0,0.7)"}})
//]]>
</script>

Ok save lại template của bạn. Thủ thuật đã hoàn thành!

Simple Scroll to Top

noreply@blogger.com (DxH) — Sun, 10 Mar 2013 06:03:00 +0000

Hôm nay có ít thời gian rảnh mình chia sẻ một thủ thuật nhỏ mà hầu hết mọi người đều sử dụng đó là tạo nút Back to Top. Thủ thuật không mới và cũng không có gì đặc biệt nhưng đây là mẫu mình thấy đơn giản và dễ sử dụng nhất, hơn thế nữa không hề sử dụng hình ảnh chèn ngoài tất cả đều sử dụng css nên rất tối ưu cho blog của bạn. Các bạn có thể xem Demo ngay tại trang blog của mình.

Thực hiện: Tìm đến thẻ đóng </body> và thêm vào ngay trước nó đoạn mã.

<style type='text/css'>
#bttop{position:fixed;bottom:30px;right:30px;cursor:pointer;display:none;z-index:9999}
#top-arrow{display:block;width:41px;height:40px;background:#111;border:1px solid #000;border-radius:50%;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}
#top-arrow::after{content:"";width:0;height:0;position:absolute;top:0;right:13px;border-color:transparent transparent #f1f1f1;border-style:solid;border-width:13px 8px}
#top-arrow:hover{background:#bc1dd3;border:1px solid #9600ac}
</style>
<div id='bttop'><a href='javascript:void(0);' id='top-arrow' onclick='jQuery('html, body').animate({scrollTop:0}, 'slow');' title='Back-to-Top'/></div>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

Ok thủ thuật đã hoàn thành!

Coll Popular Posts

noreply@blogger.com (DxH) — Sun, 03 Mar 2013 09:54:00 +0000

Cuối tuần rảnh rang mình định thiết kế một template mới mang đậm nét metro của win 8 nhưng hơi lười nên đăng bài cho mọi người. Tiện ích Bài đăng phổ biến - Popular posts luôn là sự lựa chọn hàng đầu trong top tiện ích trang bị cho trang blog và hôm nay mình giới thiệu một style mới đẹp, đơn giản và rất phong cách.

Các bạn có thể xem Demo ngay tại trang blog của mình, đây là tiện ích mới nhất được mình nghiên cứu và làm đẹp. Code cho tiện ích này được mình tham khảo từ template Simplex PhoneMag với một số tinh chỉnh cho phù hợp và gọn nhẹ. So với Cool Popular Posts của Duy Pham style mới này đã có một vài cải tiến đáng giá và dễ sử dụng hơn, có thể kể đến như:

» Đánh số thứ tự cho bài đăng là tự động - bạn không phải vất vả code tay đánh số thủ công.

» Có trình cờ lê chỉnh sửa tiện ích ngay tại giao diện blog với quyền Admin - bạn không cần vào phần Bố cục để chỉnh sửa tiện ích.

» Thêm hiệu ứng tooltip đẹp mắt cho đoạn trích dẫn bài đăng.

» Và quan trọng nhất chính là thiết kế rất gọn gàng và bắt mắt.

Chúng ta cùng bắt đầu thủ thuật.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.dxhpopular{position:relative;float:left;height:76px;width:115px;margin:0 7px 10px}
.dxhpopular a{text-decoration:none}
.dxhpopular .ablock{display:block;position:absolute}
.dxhpopular .number{background:rgba(188,29,211,.8);color:#fff;display:block;font-size:13px;position:absolute;left:0;height:14px;width:12px;z-index:3;padding:1px 2px 4px 6px}
.dxhpopular img{height:85px;width:115px;position:absolute;z-index:1}
.dxhpopular .text{background:rgba(0,0,0,.9);color:#fff;float:left;font-size:12px;height:34px;line-height:15px;overflow:hidden;position:absolute;bottom:0;text-decoration:none;vertical-align:middle;width:105px;z-index:3;padding:3px 5px 0}
.dxhpopular:hover > .text{background:rgba(188,29,211,.8)}

Bước 2: Tìm đến thẻ đóng </head> và thêm vào ngay trước nó đoạn mã.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
//<![CDATA[
(function(a){a.tooltipsy=function(c,b){this.options=b;this.$el=a(c);this.title=this.$el.attr("title")||"";this.$el.attr("title","");this.random=parseInt(Math.random()*10000);this.ready=false;this.shown=false;this.width=0;this.height=0;this.delaytimer=null;this.$el.data("tooltipsy",this);this.init()};a.tooltipsy.prototype.init=function(){var b=this;b.settings=a.extend({},b.defaults,b.options);b.settings.delay=parseInt(b.settings.delay);if(typeof b.settings.content==="function"){b.readify()}if(b.settings.showEvent===b.settings.hideEvent&&b.settings.showEvent==="click"){b.$el.toggle(function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}if(b.settings.delay>0){b.delaytimer=window.setTimeout(function(){b.show(c)},b.settings.delay)}else{b.show(c)}},function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}window.clearTimeout(b.delaytimer);b.delaytimer=null;b.hide(c)})}else{b.$el.bind(b.settings.showEvent,function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}if(b.settings.delay>0){b.delaytimer=window.setTimeout(function(){b.show(c)},b.settings.delay)}else{b.show(c)}}).bind(b.settings.hideEvent,function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}window.clearTimeout(b.delaytimer);b.delaytimer=null;b.hide(c)})}};a.tooltipsy.prototype.show=function(f){var d=this;if(d.ready===false){d.readify()}if(d.shown===false){if((function(h){var g=0,e;for(e in h){if(h.hasOwnProperty(e)){g++}}return g})(d.settings.css)>0){d.$tip.css(d.settings.css)}d.width=d.$tipsy.outerWidth();d.height=d.$tipsy.outerHeight()}if(d.settings.alignTo==="cursor"&&f){var c=[f.pageX+d.settings.offset[0],f.pageY+d.settings.offset[1]];if(c[0]+d.width>a(window).width()){var b={top:c[1]+"px",right:c[0]+"px",left:"auto"}}else{var b={top:c[1]+"px",left:c[0]+"px",right:"auto"}}}else{var c=[(function(e){if(d.settings.offset[0]<0){return e.left-Math.abs(d.settings.offset[0])-d.width}else{if(d.settings.offset[0]===0){return e.left-((d.width-d.$el.outerWidth())/2)}else{return e.left+d.$el.outerWidth()+d.settings.offset[0]}}})(d.offset(d.$el[0])),(function(e){if(d.settings.offset[1]<0){return e.top-Math.abs(d.settings.offset[1])-d.height}else{if(d.settings.offset[1]===0){return e.top-((d.height-d.$el.outerHeight())/2)}else{return e.top+d.$el.outerHeight()+d.settings.offset[1]}}})(d.offset(d.$el[0]))]}d.$tipsy.css({top:c[1]+"px",left:c[0]+"px"});d.settings.show(f,d.$tipsy.stop(true,true))};a.tooltipsy.prototype.hide=function(c){var b=this;if(b.ready===false){return}if(c&&c.relatedTarget===b.$tip[0]){b.$tip.bind("mouseleave",function(d){if(d.relatedTarget===b.$el[0]){return}b.settings.hide(d,b.$tipsy.stop(true,true))});return}b.settings.hide(c,b.$tipsy.stop(true,true))};a.tooltipsy.prototype.readify=function(){this.ready=true;this.$tipsy=a('<div id="tooltipsy'+this.random+'" style="position:absolute;z-index:2147483647;display:none">
').appendTo("body");this.$tip=a('<div class="'+this.settings.className+'">
').appendTo(this.$tipsy);this.$tip.data("rootel",this.$el);var c=this.$el;var b=this.$tip;this.$tip.html(this.settings.content!=""?(typeof this.settings.content=="string"?this.settings.content:this.settings.content(c,b)):this.title)};a.tooltipsy.prototype.offset=function(c){var b=ot=0;if(c.offsetParent){do{if(c.tagName!="BODY"){b+=c.offsetLeft-c.scrollLeft;ot+=c.offsetTop-c.scrollTop}}while(c=c.offsetParent)}return{left:b,top:ot}};a.tooltipsy.prototype.destroy=function(){this.$tipsy.remove();a.removeData(this.$el,"tooltipsy")};a.tooltipsy.prototype.defaults={alignTo:"element",offset:[0,-1],content:"",show:function(c,b){b.fadeIn(100)},hide:function(c,b){b.fadeOut(100)},css:{},className:"tooltipsy",delay:100,showEvent:"mouseenter",hideEvent:"mouseleave"};a.fn.tooltipsy=function(b){return this.each(function(){new a.tooltipsy(this,b)})}})(jQuery);
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$("#PopularPosts1 li.dxhpopular").each(function(e){e=e+1;text='<a class="number">'+e+"</a>";$(this).prepend(text)})})
//]]>
</script>

Lưu ý: Nếu trong template của bạn đã có file jQuery rồi thì không cần thêm nữa.

Bước 3: Trong chế độ Không mở rộng mẫu tiện ích tìm đến đoạn code (Hãy chắc rằng bạn đã thêm tiện ích Bài đăng phổ biến - Popular posts trong template của mình)

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

Và thay thế nó bằng

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>        
<b:loop values='data:posts' var='post'>
<li class='dxhpopular'>
<img expr:src='data:post.thumbnail'/>
<a class='ablock' expr:href='data:post.href'/>
<a class='text table-cell hastip1' expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
<div class='clearfix'/>
</li>
</b:loop>
</ul>
<br/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Bước 4: Tìm đến thẻ đóng </body> và thêm vào ngay trước nó đoạn mã.

<script type='text/javascript'>
//<![CDATA[
$(".hastip1").tooltipsy({offset:[0,1],show:function(e,t){t.css({left:parseInt(t[0].style.left.replace(/[a-z]/g,""))-50+"px",opacity:"0.0",display:"block"}).animate({left:parseInt(t[0].style.left.replace(/[a-z]/g,""))+50+"px",opacity:"1.0"},300)},hide:function(e,t){t.slideUp(100)},css:{"max-width":"200px","font-weight":"400","font":"bold 12px Arial","line-height":"18px","padding":"10px","color":"#fff","background":"#000";"box-shadow":"0 0 3px rgba(0,0,0,0.7)"}})
//]]>
</script>

Ok save lại template của bạn. Thủ thuật đã hoàn thành!

Wellcom DxHdesign!

noreply@blogger.com (DxH) — Fri, 01 Mar 2013 20:51:00 +0000

Chào tất cả mọi người! Vậy là mình cũng đã đến với Blogspot được 2 tháng rồi. Với mục đích cá nhân ban đầu là chia sẻ những cuốn ebook hay mình đã lập ra một blog đơn giản với tên miền dxhbook.blogspot.com và bắt đầu tìm tòi về thiết kế giao diện cho blog của mình. Thật bất ngờ mình bị lôi cuốn ngay khi tiếp cận với những dòng code tưởng chừng khô khan nhưng chính từ đó giúp chúng ta có được một trang blog tuyệt vời.

Chắc hẳn đối với ai cũng vậy tiếp cận một lĩnh vực mới luôn gặp rất nhiều khó khăn khi khởi đầu, mình cũng vậy. Từ những khó khăn ban đầu mình đã tiếp cận từng chút từng chút một, hỏng thì làm lại, không biết thì search gúc gồ :D. Và đến thời điển hiện tại mình đã nắm được hầu hết từng thành phần và cách để thiết kế một trang blog theo gu thẩm mỹ riêng của mình. Với sự chuẩn bị đó mình quyết định đổi chủ đề chính viết blog của mình và đó là Chia sẻ template cho blogspot do chính bản thân thiết kế và những thủ thuật mình đã áp dụng cho những template này.

Để phù hợp hơn với chủ đề mới mình quyết định đổi sang dùng tên miền dxhdesign.blogspot.com và một giao diện hoàn toàn mới rất thân thiện và trực quan cho bạn đọc.

Giới thiệu tổng quan về giao diện mới có thể kể như:
»» Logo mới - từ một phút ngẫu hứng và một chút kinh nghiệm sẵn có về PTS mình đã thiết kế được một logo khá ưng ý với gu của bản thân (cũng đẹp đấy chứ các bạn nhỉ!). Sologan của mình "Sáng tạo là không giới hạn - Unlimited Creativity" hãy từ những điều tưởng chừng đơn giản nhất tạo ra sự cuốn hút và cá tính riêng của mình.
»» Trang chủ là nơi mình trưng bày các mẫu template mới nhất do bản thân thiết kế.
Trang nhãn Template là nơi lưu trữ đầy đủ các mẫu template.
Trang nhãn Blog là nơi lưu trữ bài viết về các thủ thuật blogger, blogspot mình đã áp dụng vào template bản thân thiết kế.
»» Menu điều hướng rất gọn gàng - tạo tính thẩm mỹ cao.
»» Và còn rất nhiều tiện ích khác đang chờ bạn khám phá.

Để thiết kế cho giao diện mới mình đã tham khảo một số nguồn như:
»» Giải quyết vấn đề hiển thị giao diện bài đăng khác nhau cho mỗi nhãn mình đã tham khảo từ template Simplex Portfolio (tất nhiên mình đã cải tiến và code lại gần như toàn bộ chứ không "đạo văn")
»» Style và tông màu mình tham khảo từ WordPress Theme Photolux - Photography Portfolio.

Và mình sẽ sử dụng cố dịnh giao diện mới này cho blog của mình. Mong các bạn thông cảm về sự bất tiện trước đây khi mình thay đổi giao diện thường xuyên gây khó theo dõi (thực ra do mình lười tạo blog demo thử code, vọc đều lấy blog chính làm).

Kết: Mong rằng DxHdesign sẽ nhận được nhiều sự ủng hộ từ mọi người và hẹn gặp lại trong vài ngày tới đây với những sản phẩm mới của mình. Thân!

DxHflow

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 19:53:00 +0000

Descriptions:	DxHflow a great template of refined design. Beauty comes from the simplicity, you can use the template for the purpose of sharing photos or other purposes. SEO optimization for assigning H1 tags for post titles and static page title. And there are a lot of tweaking surprise is waiting for you to discover. Enjoy!
Author:	DxH
Designer:	DxH
Instructions:	How to install a Blogger template
Features:	DxHflow is a free blog template with type: 2 Column, Color aqua, Fixed Width, Right Sidebar, Navigation Menu, Tab Widget Siderbar, Multi Level Thread Comments, Beautifull Popular Posts, Emoticon Awesome, Related Pots Impression, 3 Columns Footer, Page Navigation Widget and more...
License:	Creative Commons Attribution 3.0

Demo Download

Configure Logo Header

Search for:

<div class='left' id='logo'>
<a href='/' title='DxHflow'><img alt='DxHflow' height='44' src='https://lh5.googleusercontent.com/-oxhK3Ecxj34/USpO4uZYFXI/AAAAAAAACVQ/lhzBzXatDl8/s0/logo.png' style='margin-top:13px' width='191'/></a>
</div>

Replace With Your Logo

Configure Ribbon Attached As Label For Post

You can find out more

Configure Dropdown Menu

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:

<nav id='colorNav'>
<ul>
<li class='aqua icon-home'><a href='#'>Lorem 1</a></li>
<li class='aqua icon-blogger'>
<a href='#'>Lorem 2</a>
<ul>
<li><a href='#'>Lorem 2.1</a></li>
<li><a href='#'>Lorem 2.2</a></li>
<li><a href='#'>Lorem 2.3</a></li>
<li><a href='#'>Lorem 2.4</a></li>
</ul>
</li>
<li class='aqua icon-book'>
<a href='#'>Lorem 3</a>
<ul>
<li><a href='#'>Lorem 3.1</a></li>
<li><a href='#'>Lorem 3.2</a></li>
</ul>
</li>
</ul>
</nav>

Just replace "#" with your menu item URL.

Configure Subscribe Form

Search for:

<div id='FollowByEmail1'>
<span class='arrow'/>
<form action='http://feedburner.google.com/fb/a/mailverify' class='right' id='newsletter' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=dxhbook","popupwindow","scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input class='text' name='email' onblur='if(this.value==""){this.value=this.defaultValue}' onfocus='if(this.value==this.defaultValue){this.value=""}' type='text' value='Email address...'/>
<input class='submit' type='submit' value='Subscribe'/>
<input name='uri' type='hidden' value='dxhbook'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>

Replace "dxhbook" with email to register your feedburner.

Configure Author Box

You can find out more

Configure Recent Comments

Added 1 widget HTML/Javascript in where you want to display Recent Comments. Edit Text and paste the following code into the Content section and click SAVE.

<style type="text/css"> 
ul.latest_recent_comments{list-style:none;margin:0;padding:0}
#HTML2{padding:5px 10px 3px}
#HTML2 h2{margin-bottom:8px}
.latest_recent_comments li{position: relative;background:none !important;margin:4px 0 0 !important;padding:0 2px 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none}
.latest_recent_comments li a{float:right;width:180px;font:12px Arial;color:#fff;background:#999;margin-top:9px;padding:11px 7px 5px}
.latest_recent_comments li a:hover{background:#bb1717}
.latest_recent_comments li .avatarImage{float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{width:34px;height:34px}
.latest_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block}
.latest_recent_comments li span{position: absolute;left:42px;top:-3px;padding:3px 3px 1px;color:#fff;background:#555;display:block;font:12px Arial}
.latest_recent_comments span{display:none}
</style>

<script type='text/javascript'>
function latest_recent_comments(e){var t;t='<ul class="latest_recent_comments">';for(var n=0;n<numComments;n++){var r,i,s,o;if(n==e.feed.entry.length)break;t+="<li>";var u=e.feed.entry[n];for(var a=0;a<u.link.length;a++){if(u.link[a].rel=="alternate"){r=u.link[a].href}}for(var f=0;f<u.author.length;f++){i=u.author[f].name.$t;s=u.author[f].gd$image.src}if(s.indexOf("/s1600/")!=-1){s=s.replace("/s1600/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s220/")!=-1){s=s.replace("/s220/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s512-c/")!=-1&&s.indexOf("http:")!=0){s="http:"+s.replace("/s512-c/","/s"+avatarSize+"-c/")}else if(s.indexOf("blogblog.com/img/b16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6p-tRntlv59qI3GL61pVM1r3jnVdQ0qZ7ky2X44Rjbeo3R7E2IYRbmA9WIKWN0zTRfPhSYqnSBpz3q6LDce-z60h0_l1ZYgXKhq_89934Nadn2YGe7XLrQDoQSlAdIlOltuNye5msxqG5/"+avatarSize+"/md_blogger_logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3mei7m95ItFSgqK5DztMD30_zP9TZgKb_qOjuzGYGMkNVe-5Mlxrb0e7ZktWgQnq3-_drfFX_t_-NQqjLk0KuxgEmoaBjJk06vxLyEoiZvAH_nDGgKPe481oxH2rWnlFo_Wn1Z974pFrG/"+avatarSize+"/md_openid_logo.png"}else if(s.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){s=defaultAvatar+"&s="+avatarSize}else{s=defaultAvatar}}else{s=s}if(showAvatar==true){if(roundAvatar==true){o="avatarRound"}else{o=""}t+='<div class="avatarImage '+o+'"><img class="'+o+'" src="'+s+'" alt="'+i+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'}t+="<span>"+i+"</span>";var l=u.content.$t;var c=l.replace(/(<([^>]+)>)/ig,"");if(c!=""&&c.length>characters){c=c.substring(0,characters);c+="…"}else{c=c}t+='<a href="'+r+'">'+c+"</a>";t+="</li>"}t+="";document.write(t)}var numComments=numComments||8,avatarSize=avatarSize||34,characters=characters||24,defaultAvatar=defaultAvatar||"https://lh5.googleusercontent.com/-5YeC_6-32nw/UPb7SL-uGXI/AAAAAAAABWE/QJRpUV7G9bc/s80/personal.png",showAvatar="undefined"===typeof showAvatar?!0:showAvatar,roundAvatar="undefined"===typeof roundAvatar?!0:roundAvatar,hideCaquaits="undefined"===typeof hideCaquaits?!1:roundAvatar
</script>

<script type="text/javascript" src="http://dxhflow.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=8"></script>

- Replace http://dxhflow.blogspot.com with your blog address.
- I installed the display up to 8 recent comments, be sure to customize parameters to suit your blog.

Configure Page Navigation Widget

Search for:

var postperpage=6; // Number of posts in each page
var numshowpage=3; // Number of buttons will display

DxHtuts

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 14:50:00 +0000

Descriptions:	DxHtuts my first Template - Simple and Beautiful. You can find a lot of high-end features template the sample and it is really great. This template is used for many purposes to your blog. SEO optimization for assigning H1 tags for post titles and static page title. And there are a lot of tweaking surprise is waiting for you to discover. Enjoy!
Author:	DxH
Designer:	tutsplus
Instructions:	How to install a Blogger template
Features:	DxHtuts is a free blog template with type: 2 Column, Color Blue, Fixed Width, Right Sidebar, Navigation Menu, Multi Level Thread Comments, Beautifull Popular Posts, Emoticon Awesome, Related Pots Impression, 3 Columns Footer, Page Navigation Widget and more...
License:	Creative Commons Attribution 3.0

Demo Download

Configure Logo Header

Search for:

<div class='left' id='logo'>
<a class='hastip2' href='http://dxhdesign.blogspot.com' title='Welcome to my blog!'><img alt='DxHtuts' class='left' height='60' src='https://lh4.googleusercontent.com/-fUSrzKuo0l4/USkVfektZ6I/AAAAAAAACS4/cqsscSQO0Ys/s0/logo.png' width='219'/></a>
</div>

Replace With Your Logo

Configure Dropdown Menu

Login to blogger dashboard --> layout --> Edit HTML. Now scroll down to where you see the codes below:

<ul id='navnyaa'>
<li><a href='#'>Lorem 1</a>
<ul class='sub-menux'>
<li><a href='#'>Lorem 1.1</a></li>
<li><a href='#'>Lorem 1.1</a></li>
</ul>
</li>
<li><a href='#'>Lorem 2</a>
<ul class='sub-menux'>
<li><a href='#'>Lorem 2.1</a></li>
<li><a href='#'>Lorem 2.2</a></li>
<li><a href='#'>Lorem 2.3</a></li>
<li><a href='#'>Lorem 2.4</a></li>
<li><a href='#'>Lorem 2.5</a></li>
</ul>
</li>
<li><a href='#'>Lorem 3</a></li>
</ul>
</div>

Just replace "#" with your menu item URL.

Configure Subscribe Form

Search for:

<div id='FollowByEmail1'>
<span class='arrow'/>
<form action='http://feedburner.google.com/fb/a/mailverify' class='right' id='newsletter' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=dxhbook","popupwindow","scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input class='text' name='email' onblur='if(this.value==""){this.value=this.defaultValue}' onfocus='if(this.value==this.defaultValue){this.value=""}' type='text' value='Email address...'/>
<input class='submit' type='submit' value='Subscribe'/>
<input name='uri' type='hidden' value='dxhbook'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
</div>

Replace "dxhbook" with email to register your feedburner.

Configure Author Box

You can find out more

Configure Recent Comments

You can find out more

Configure Page Navigation Widget

Search for:

var pageCount=8; // Number of posts in each page
var displayPageNum=3; // Number of buttons will display

Style Label Widget

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 14:46:00 +0000

Hôm nay với đề tài về làm đẹp tiện ích nhãn bài đăng, mình sẽ giới thiệu đến bạn một style khá đẹp, gọn gàng và bắt mắt. Style này được chia sẻ ở trang premium-stuff-guru và được mình đơn giản hóa rất nhiều về code css với tiêu chí đơn giản nhưng vẫn đẹp.

Demo

Bắt đầu thủ thuật.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.tags{zoom:1}
.tags:before,.tags:after{content:"";display:table}
.tags:after{clear:both}
.tags li{position:relative;float:left;margin:0 12px 8px 0}
.tags li:active{margin-top:1px;margin-bottom:7px}
.tags li:after{content:'';z-index:3;position:absolute;top:10px;right:-2px;width:5px;height:6px;opacity:.95;background:#da9c9c;border-radius:3px 0 0 3px}
.tags a,.tags span{display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tags a{height:26px;font-size:13px;color:#000;border-radius:5px 0 0 5px;background:#efece9;border:1px solid #fafafa;-webkit-box-shadow:0 0 3px rgba(0,0,0,.4);-moz-box-shadow:0 0 3px rgba(0,0,0,.4);box-shadow:0 0 3px rgba(0,0,0,.4);padding:3px 8px}
.tags a:hover span{max-width:40px;padding:0 7px 0 6px}
.tags span{position:absolute;top:0;left:100%;z-index:2;overflow:hidden;max-width:0;height:26px;line-height:23px;opacity:.95;color:#fff;text-shadow:0 -1px rgba(0,0,0,0.3);border:1px solid;border-radius:0 4px 4px 0;background:#da9c9c;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;border-color:#da9c9c;padding:0 0 0 2px}

Hãy chỉnh sửa màu sắc phù hợp với bạn.

Bước 2: Thêm tiện ích danh sách nhãn bài đăng (nếu template của bạn đã có tiện ích này thì bỏ qua) và tìm kiếm đoạn code sau trong template của bạn (trong chế độ Mở rộng Mẫu Tiện ích).

<div expr:class='"widget-content " + data:display + "-label-widget-content"'>

Một khi tìm thấy đoạn mã này chỉ cần nhìn xuống 2 dòng bạn có thể thấy <ul> và sửa thành <ul class='tags'>

Bước 3: Tiếp tục tìm kiếm đoạn mã (đầu tiên)

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

và sửa thành

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/><span class='label-count' dir='ltr'>(<data:label.count/>)</span></a>

Thủ thuật hoàn thành! Lưu lại template và tận hưởng.

Ribbon Attched As Label For Posts

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 14:46:00 +0000

Chào bạn! Đã bao giờ khi xem lại trang blog của mình và bạn muốn có thêm điều gì đó tạo nên sự khác biệt mà chỉ riêng blog bạn có? Nếu câu trả lời là có thì hôm nay khi đến với bài viết này bạn đã tìm đúng nơi rồi đấy!!!

Thủ thuật mình giới thiệu đến bạn chính là gán hình ảnh theo nhãn cho bài đăng - được mình áp dụng trong mẫu template DxHflow. Rất thú vị phải không nào?

Demo

Bắt đầu thủ thuật.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.post{position:relative}
.Label1{background-image:url(https://lh5.googleusercontent.com/-gSR29G-nDD8/USpWctBUm5I/AAAAAAAACVY/-n7lobIn_6M/s92/dxh.png);display:block;width:92px;height:43px;line-height:72px;text-indent:-9999px;position:absolute;top:15px;left:15px;z-index:9999!important}
.Label2{background-image:url(https://lh3.googleusercontent.com/-fgLnCgFeMQI/USpWcup-TnI/AAAAAAAACVc/hMk_qQl-3GQ/s92/lorem.png);display:block;width:92px;height:43px;line-height:72px;text-indent:-9999px;position:absolute;top:15px;left:15px;z-index:9999!important}
.Label3{background-image:url(https://lh5.googleusercontent.com/-tuJd647nJoE/USpWcpqcDgI/AAAAAAAACVg/o9_08M9x3Ic/s92/test.png);display:block;width:92px;height:43px;line-height:72px;text-indent:-9999px;position:absolute;top:15px;left:15px;z-index:9999!important}

Hãy thay ảnh phù hợp cho bạn. Và chú ý chỗ mình để chữ màu xanh - đây là giá trị xác định vị trí cho hình ảnh của bạn xuất hiện ở đâu trên bài đăng.

Với 4 góc thân của bài đăng ta sẽ có 4 cặp vị trí lần lượt là top-left | top-right | bottom-left | bottom-right
Ở trong đoạn code mẫu ở mình sử dụng cặp vị trí top-left. Hình ảnh sẽ được hiển thị ở góc bên trái trên cùng của thân bài đăng. Và với mỗi trường top - bottom - left - right ta có thêm giá trị xác định, trong ví dụ là 15px.

Quy ước:
- Khi mang dấu "+" ảnh sẽ lùi vào trong phần thân của bài đăng.
- Khi mang dấu "-" ảnh sẽ tràn ra khỏi phần thân của bài đăng.
Với điểm 0 chính là trùng với viền của thân bài đăng.
==>> Để hiểu sâu hơn về vị trí tương đối giữa các thành phần hãy tìm hiểu thêm về hàm position mà trong bài này sử dụng position:relative và position:absolute.

Hãy chọn vị trí bạn muốn hình ảnh xuất hiện dựa theo ví dụ và chọn giá trị thích hợp.

Với việc xác đinh vị trí tuyệt đối giữa ảnh của nhãn và đường bao ngoài của bài đăng ta hoàn toàn có thể áp dụng thủ thuật cho cả những blog sử dụng template có 2 chế độ xem là List và Grid.

Bước 2: Tìm đến thẻ <body> và thêm vào ngay sau nó đoạn code

<script type='text/javascript'>
function lebel_logo(etiqueta) {
labelnes = new Array();
labelnes[1] = "<div class='Label1'/>"
labelnes[2] = "<div class='Label2'/>"
labelnes[3] = "<div class='Label3'/>"

if (etiqueta == "Nhãn 1")
{document.write(labelnes[1]);}
if (etiqueta == "Nhãn 2")
{document.write(labelnes[2]);}
if (etiqueta == "Nhãn 3")
{document.write(labelnes[3]);}
}
</script>

Trong đó Nhãn 1, Nhãn 2, Nhãn 3 chính là tên nhãn bạn muốn hiển thị (Mở rộng nếu bạn muốn có n Nhãn muốn được gán hình ảnh thì hãy thêm với cú pháp hoàn toàn tương tự vào đoạn code trên)

Bước 3: Trong chế độ Mở rộng Mẫu Tiện ích tìm đến đoạn mã (đầu tiên)

<div class='post-footer'>

Và thêm vào ngay trên nó đoạn code

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:loop values='data:post.labels' var='label'>
<script type='text/javascript'>lebel_logo("<data:label.name/>");</script>
</b:loop>
</b:if></b:if>

Ok save lại template của bạn. Thủ thuật đã hoàn thành!

Note: Một số lỗi có thể mắc phải.
Hỏi: Mình làm theo đúng như trong hướng dẫn và cho hình ảnh sâu xuống góc của bài đăng nhưng khi đến viền của bài đăng thì hình ảnh bị khuất?
Đáp: Trong code CSS của template bạn đang dùng hãy tìm đến #outer-wrapper , #main-wrapper , .post , ... Hoặc tương tự những thành phần bao ngoài phần bài đăng của bạn và xóa đi thuộc tính overflow:hidden

Coming Soon!

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 14:45:00 +0000

Beautiful Author Box

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 14:45:00 +0000

Khung thông tin tác giả - Author box là một phần không thể thiếu giúp đọc giả hiểu hơn về người viết bài, và đi liền với nhu cầu đó là việc làm đẹp khung thông tin tác giả này. Đây là mẫu mình sử dụng trong template DxHtuts rất đẹp và ấn tượng! Bạn có thể thấy style này đơn thuần chỉ sử dụng CSS - tối ưu cho tốc độ load blog.

Demo

Nào chúng ta cùng bắt đầu!

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.author{position:relative;padding:20px 0;border-top:1px solid #fff;border-bottom:1px solid #bbb}
.exlefttop{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-right:9px solid #42718b;font-size:0;line-height:0;position:absolute;top:11px;left:-10px;z-index:4}
.exleftbottom{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-right:9px solid #42718b;font-size:0;line-height:0;position:absolute;top:113px;left:-10px;z-index:4}
.exrighttop{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-left:9px solid #064888;font-size:0;line-height:0;position:absolute;top:11px;right:-10px;z-index:4}
.exrightbottom{width:0;height:0;border-bottom:9px solid transparent;border-top:9px solid transparent;border-left:9px solid #064888;font-size:0;line-height:0;position:absolute;top:113px;right:-10px;z-index:4}
#dxh-reb{width:692px;height:100px;margin:0;padding:0;background:#5390ad;border-top:1px solid #42718b;border-bottom:1px solid #42718b;position:relative;top:0;left:-10px;z-index:5}
.author-box{padding:22px 20px;line-height:18px;font-family:Arial;font-size:15px;color:#fff}
.author-box a{color:#fff600}
.author-box a:hover{color:#590000}
.author-avatar{height:50px;width:50px;float:left;margin:4px 10px 15px 0}
.author-inf{padding:5px}
.author-inf a{padding:2px 5px;display:inline;border-radius:3px;margin:5px;color:#fff600}
.author-inf a:hover{background:#00a6dd;color:#fff;box-shadow:0 1px rgba(255,255,255,.2) inset}
.plus{float:right;padding-right:20px;margin-top:-5px}

Thay đổi chiều rộng cho phù hợp với blog của bạn.

Bước 2: Tìm đến <div class='post-footer-line post-footer-line-3'> và thêm sau nó đoạn mã (lưu ý vị trí này có thể tùy chỉnh cho hợp lý)

<b:if cond='data:blog.pageType == "item"'>
<div style='clear: both;'/>
<div class='author'>
<div class='exlefttop'/><div class='exleftbottom'/><div class='exrighttop'/><div class='exrightbottom'/>
<div id='dxh-reb'>
<div class='author-box'>
<div class='author-avatar'><img height='50' src='https://lh4.googleusercontent.com/-b1d8xv7WnYg/UPT0D2ZggTI/AAAAAAAABSA/Uw9MGWlfxNU/s50/1406_MOR_symbol_rare.png' width='50'/></div>
<a href='http://www.blogger.com/profile/10018747006607564818' target='_blank'><b>DxH</b></a>: Một người ham mê tìm tòi, sở thích lớn nhất là đọc sách. Mong muốn chia sẻ niềm đam mê của mình đến mọi người.<br/>
<div class='author-inf'>
Liên hệ: <a href='http://dxhdesign.blogspot.com/' target='_blank'><b>DxH blog</b></a>
<div class='plus'><g:plusone/></div>
</div></div>
</div>
</div>
</b:if>

- Thay ảnh đại diện và chỉnh kích thước ảnh cho riêng bạn
- Thay 10018747006607564818 bằng ID của bạn sẽ có được khi bạn vào phần Hồ sơ cá nhân.

Ok thủ thuật đã hoàn thành.

Rất đơn giản để có một khung tác giả đẹp cho mình phải không nào. Nếu gặp vướng mắc trong khi thực hiện thủ thuật, bạn hãy để lại nhận xét cuối bài này nhé.

Note:

Sau khi thực hiện xong thủ thuật mà khung tác giả của bạn không tràn ra được ngoài khung bao của bài đăng (bị khuất mất) hãy tìm đến #outer-wrapper , #main-wrapper , .post , ... Hoặc tương tự những thành phần bao ngoài phần bài đăng của bạn và xóa đi thuộc tính overflow:hidden

Beautiful Recent Comments

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 13:54:00 +0000

Đầu tiên mình xin gửi lời cảm ơn đến Atiqur Rahman đã chia sẻ code cho tiện ích này tại mybloggerblog. Dựa trên đó mình đã có một số cải tiến, đáng chú ý là thay vì click vào tên người nhận xét để đến bài đăng mình đã đổi thành click vào trích dẫn của nhận xét để đến bài đăng. Đây là style mình sử dụng trong mẫu template DxHtuts rất ấn tượng và thẩm mỹ.

Demo

Thực hiện: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Recent Comments. Hiệu chỉnh Tiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.

<style type="text/css"> 
ul.latest_recent_comments{list-style:none;margin:0;padding:0}
.latest_recent_comments li{position: relative;background:none !important;margin:7px 0 3px !important;padding:0 2px 5px 0 !important;display:block;clear:both;overflow:hidden;list-style:none}
.latest_recent_comments li a{float:right;width:285px;font:12px Arial;color:#888 !important;background:#111;margin-top:9px;padding:11px 7px 5px;border:1px solid #000;border-right:3px solid #5390ad}
.latest_recent_comments li a:hover{color:#fff !important}
.latest_recent_comments li .avatarImage{float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{width:34px;height:34px}
.latest_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block}
.latest_recent_comments li span{position: absolute;left:42px;top:-3px;padding:3px 3px 1px;color:#8f887c;background:#333;display:block;font:12px Arial}
.latest_recent_comments span{display:none}
</style>

<script type='text/javascript'>
function latest_recent_comments(e){var t;t='<ul class="latest_recent_comments">';for(var n=0;n<numComments;n++){var r,i,s,o;if(n==e.feed.entry.length)break;t+="<li>";var u=e.feed.entry[n];for(var a=0;a<u.link.length;a++){if(u.link[a].rel=="alternate"){r=u.link[a].href}}for(var f=0;f<u.author.length;f++){i=u.author[f].name.$t;s=u.author[f].gd$image.src}if(s.indexOf("/s1600/")!=-1){s=s.replace("/s1600/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s220/")!=-1){s=s.replace("/s220/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s512-c/")!=-1&&s.indexOf("http:")!=0){s="http:"+s.replace("/s512-c/","/s"+avatarSize+"-c/")}else if(s.indexOf("blogblog.com/img/b16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6p-tRntlv59qI3GL61pVM1r3jnVdQ0qZ7ky2X44Rjbeo3R7E2IYRbmA9WIKWN0zTRfPhSYqnSBpz3q6LDce-z60h0_l1ZYgXKhq_89934Nadn2YGe7XLrQDoQSlAdIlOltuNye5msxqG5/"+avatarSize+"/md_blogger_logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3mei7m95ItFSgqK5DztMD30_zP9TZgKb_qOjuzGYGMkNVe-5Mlxrb0e7ZktWgQnq3-_drfFX_t_-NQqjLk0KuxgEmoaBjJk06vxLyEoiZvAH_nDGgKPe481oxH2rWnlFo_Wn1Z974pFrG/"+avatarSize+"/md_openid_logo.png"}else if(s.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){s=defaultAvatar+"&s="+avatarSize}else{s=defaultAvatar}}else{s=s}if(showAvatar==true){if(roundAvatar==true){o="avatarRound"}else{o=""}t+='<div class="avatarImage '+o+'"><img class="'+o+'" src="'+s+'" alt="'+i+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'}t+="<span>"+i+"</span>";var l=u.content.$t;var c=l.replace(/(<([^>]+)>)/ig,"");if(c!=""&&c.length>characters){c=c.substring(0,characters);c+="…"}else{c=c}t+='<a href="'+r+'">'+c+"</a>";t+="</li>"}t+="";document.write(t)}var numComments=numComments||5,avatarSize=avatarSize||34,characters=characters||43,defaultAvatar=defaultAvatar||"https://lh5.googleusercontent.com/-5YeC_6-32nw/UPb7SL-uGXI/AAAAAAAABWE/QJRpUV7G9bc/s80/personal.png",showAvatar="undefined"===typeof showAvatar?!0:showAvatar,roundAvatar="undefined"===typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"===typeof hideCredits?!1:roundAvatar
</script>

<script type="text/javascript" src="http://dxhdesign.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>

Lưu ý:
- Thay http://dxhdesign.blogspot.com bằng địa chỉ blog của bạn.
- Trong thủ thuật mình cài đặt hiển thị tối đa 5 comments gần đây, bạn hãy tùy chỉnh lại thông số này cho phù hợp với blog của mình.

Ok thủ thuật đã hoàn thành!

Beautiful Related Posts - Part 1

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 09:42:00 +0000

Xin chào bạn! Hôm nay chúng ta đến với một tiện ích đó là Bài viết liên quan - Related post. Mẫu này do mình sưu tầm nên không tìm lại được tác giả. Được mình sử dụng trong mẫu template DxHflow.

Nào chúng ta cùng bước vào thực hiện nhé.

Demo

Bước 1: Bạn vào phần Chỉnh sửa HTML (click Mở rộng Mẫu Tiện ích) tìm đến ]]></b:skin> trong template và dán ngay trên nó đoạn mã sau:

#related{width:100%}
.related-posts{font:bold 13px Arial;text-align:center;list-style:none;text-transform:none;margin:0 0 20px;padding-left:9px}
.related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px 0 6px;padding:2px 0}
*html ul.rp#related-posts li{margin:0 13px}
.related-posts li a{border:1px solid #bbb;background:#fff;display:block;height:90pxwidth:90px;;position:relative;color:#fff;text-decoration:none;padding:4px 4px 1px 4px}
.related-posts li .overlay{height:84px;width:84px;line-height:16px;position:absolute;z-index:10;padding:6px 3px 0 3px}
.related-posts li a:hover .overlay{background:rgba(0,0,0,.7);display:block!important}
.related-posts li img{bottom:0;padding:0!important}
.related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

Bước 2: Bạn tìm đến đoạn mã

<div class='post-footer-line post-footer-line-3'>

Và dán ngay sau nó đoạn code sau:

<div class='clearfix' id='related'>
<div class='related-posts'>
<script type='text/javascript'>
var defaultnoimage="https://lh6.googleusercontent.com/-bcJY_dGtfrg/UPKa5JYfQsI/AAAAAAAABGw/cEdD_zscID4/s0/no-image.jpg";
var maxresults=6;
</script>
<script src='http://dxhbook.googlecode.com/files/related-post.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=20"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>               
</div>
</div>

Lưu ý:
- Tùy thuộc vào bố cục template của bạn mà vị trí để dán đoạn code trên cũng khác nhau.
- Nếu bạn muốn chỉnh sửa kích thước của ảnh thu nhỏ cho phù hợp hơn với blog của mình thì nhất thiết cần chỉnh đồng bộ cả trong đoạn mã css ở bước 1 và trong file javascrip ở bước 2.

Ok save lại template và tận hưởng!

Coming Soon!

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 07:21:00 +0000

Coming Soon!

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 07:20:00 +0000

Coming Soon!

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 07:20:00 +0000

Coming Soon!

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 07:20:00 +0000

Coming Soon!

noreply@blogger.com (DxH) — Sun, 24 Feb 2013 07:19:00 +0000

Hide/Show Blogger Widgets

noreply@blogger.com (DxH) — Fri, 22 Feb 2013 14:47:00 +0000

Đối với blog có nhiều chủ đề thì việc sử dụng nhiều Widget (Tiện ích) là điều không tránh khỏi. Do vậy làm thế nào để các Wiget tiện ích đó hiển thị đúng nơi, đúng chỗ là điều mà các Blogger phải tính toán và cân nhắc rất kỹ. Việc bố trí các Widget trong Template một cách hợp lý sẽ làm nổi bật nội dung cần truyền tải, logic và hài hòa với bố cục Blog.

Bước 1: Vào Bố cục → Nhấp vào Chỉnh sửa trên Widget cần xử lý.

- Một cửa sổ Popup bật lên, bạn nhìn vào phía trên góc phải (gần thanh tiêu đề) sẽ thấy dòng có dạng tương tự sau: …null&widgetId=HTML1 (trong trường hợp này là widget HTML1, đối với widget khác sẽ có ID khác)

Bước 2: Khi xác định được ID của widget, bạn vào Chỉnh sửa HTML (chọn Mở rộng Mẫu Tiện ích) để tìm widget đó trong Template (nhấn Ctrl+F rồi gõ vào ID của widget ở trường hợp này là HTML1) Khi đó bạn sẽ thấy đoạn code tương tự như sau:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Bước 3: Như vậy, ta đã xác định được ID cũng như vị trí và nội dung của Widget. Bây giờ mình sẽ thêm lệnh ẩn hoặc hiện Widget ở 2 vị trí là:

» Vị trí 1: Sau thẻ mở <b:includable id='main'> Phần này bạn thay dổi theo các mã mình cung cấp bên dưới.

» Vị trí 2: Thêm lệnh </b:if> vào trước thẻ đóng như sau </b:includable> phần này dung chung cho tất cả các thủ thật bên dưới.
- Khi đó bạn có đoạn code mới dạng như sau:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
Vị trí 1

<b:if cond='data:title != ""'&gt
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/&gt
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

=>> Đến đây bạn thay chữ "Vị trí 1" thành các đoạn code tương ứng bên dưới:

1. Chỉ hiển thị Widget ngoài trang chủ