Hiển thị các bài đăng có nhãn Thủ Thuật Blogger. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Thủ Thuật Blogger. Hiển thị tất cả bài đăng

Thứ Hai, 16 tháng 2, 2015

Hiệu ứng chữ 3D

Chia sẻ với các bạn thủ thuật chữ 3D. Chắc rằng sau khi thực hiện sẽ blog của các bạn sẽ trở nên đẹp và lạ mắt hơn đấy. Hiệu ứng này có tác dụng là khi bạn trỏ chuột vào chữ hay tiêu đề bài viết thì sẽ được chuyển thành chữ 3D. Các bạn có thể áp dụng thủ thuật này cho tất cả chữ, nơi mà bạn muốn hiển thị trong Blog của bạn.



Vào chỉnh sửa HTML và thêm vào trước thẻ đóng ]]></b:skin> đoạn CSS bên dưới:
[code type="CSS"]
#text3D {
font-family: 'Myriad Pro', Helvetica, Arial sans-serif;
font-size: 8em;
width: 100%;
text-align: center;
margin: 120px 0;
}

#text3D a {
text-decoration: none;
font-weight: bold;
color: #C0FF3E;
text-shadow: 0 2px 0 #721e1e, 0px 2px 5px rgba(0,0,0,0.5);
position: relative;
-webkit-transition: all 0.1s ease-in;
}

#text3D a:hover {
text-shadow: 0 2px 0 #d84f4f, 0 4px 0 #d54646, 0 6px 0 #ce3333, 0 8px 0 #b92e2e, 0 10px 0 #912525, 0 12px 0 #721e1e, 0px 12px 10px rgba(0,0,0,0.5);
top: -12px;
}[/code]

Khi sử dụng thì dùng đoạn code dưới đây nhé:
[code type="HTML"]
[/code]
Khi bạn thực hiện thành công sẽ được kết quả như sau :

Thứ Tư, 3 tháng 12, 2014

Trang Trí Blog nhân Dịp Giáng Sinh

Không khí giáng sinh đang tràn ngập khắp đường phố , mọi nhà đều đang trang trí cho nhà cửa , đường phố đẹp lung linh với đủ loại màu sắc .Còn ngôi nhà Blog của bạn đã trang hoàng gì chưa? Thủ thuật nhỏ sau đây sẽ giúp bạn trang trí ngôi nhà ảo của bạn thật đẹp với hiệu ứng tuyết rơi và cây thông Noel . Chúc các bạn một mùa giáng sinh an lành  và ngập tràn hồng ân của Thiên Chúa.



HƯỚNG DẪN :Các bạn nhấn Ctrl + F rồi tìm kiếm với từ khóa  : </body>, sau đó chọn một trong những đoạn code dưới đây và dán  trên thẻ </body> là xong.
1.Hình nền cây thông và chuông ở hai bên Blog

<style type='text/css'>html{height:auto!important}</style><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm2PG7GQXQtvEIyesvFy8E3xa-lKLhX-8XjjMCBrHcYn1pOlFkqnhUF0qKacT2LBmIPdxqvyMbg6n4IB0OyQFHPWksu77XEwpdtC1QSNO0tmmwpVCg7eh34gwkUK65W918Rfc0qFEAMPU/s150/top-left.png' style='position:fixed;z-index:9999;top:0;left:0'/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrCkJr-14QPLi2G4OFeIgbOp3RzLXBbTQire4lyfjgLqS1iYtvn_UQvtEsNTBzYRern0uFdV8Ox0Z1pSgo_p0APHXeq83was1F3pyc7hUrU0rzcYijZ-iueHEQjqZ9aLFQP4CTtbNMOkE/s150/top-right.png' style='position:fixed;z-index:9999;top:0;right:0'/>

2.To bông tuyết màu xanh rơi



<script type='text/javascript'>
//<![CDATA[
var SNOW_Picture="http://3.bp.blogspot.com/-YFWWvMkicLI/UrRmxFseoLI/AAAAAAAABEI/lxsGIUsIFxk/s1600/snow.png";var SNOW_no=56;var SNOW_browser_IE_NS=(document.body.clientHeight)?1:0;var SNOW_browser_MOZ=(self.innerWidth)?1:0;var SNOW_browser_IE7=(document.documentElement.clientHeight)?1:0;var SNOW_Time;var SNOW_dx,SNOW_xp,SNOW_yp;var SNOW_am,SNOW_stx,SNOW_sty;var i,SNOW_Browser_Width,SNOW_Browser_Height;if(SNOW_browser_IE_NS){SNOW_Browser_Width=document.body.clientWidth;SNOW_Browser_Height=document.body.clientHeight;}else{if(SNOW_browser_MOZ){SNOW_Browser_Width=self.innerWidth-20;SNOW_Browser_Height=self.innerHeight;}else{if(SNOW_browser_IE7){SNOW_Browser_Width=document.documentElement.clientWidth;SNOW_Browser_Height=document.documentElement.clientHeight;}}}SNOW_dx=new Array();SNOW_xp=new Array();SNOW_yp=new Array();SNOW_am=new Array();SNOW_stx=new Array();SNOW_sty=new Array();for(i=0;i<SNOW_no;++i){SNOW_dx[i]=0;SNOW_xp[i]=Math.random()*(SNOW_Browser_Width-50);SNOW_yp[i]=Math.random()*SNOW_Browser_Height;SNOW_am[i]=Math.random()*20;SNOW_stx[i]=0.02+Math.random()/10;SNOW_sty[i]=0.7+Math.random();if(i==0){document.write('<\div id="SNOW_flake'+i+'" style="position: fixed; z-index: '+i+'; visibility: visible; top: 15px; left: 15px;"><img src="'+SNOW_Picture+'" border="0"></div>');}else{document.write('<\div id="SNOW_flake'+i+'" style="position: fixed; z-index: '+i+'; visibility: visible; top: 15px; left: 15px;"><img src="'+SNOW_Picture+'" border="0"></div>');}}function SNOW_Weather(){for(i=0;i<SNOW_no;++i){SNOW_yp[i]+=SNOW_sty[i];if(SNOW_yp[i]>SNOW_Browser_Height-50){SNOW_xp[i]=Math.random()*(SNOW_Browser_Width-SNOW_am[i]-30);SNOW_yp[i]=0;SNOW_stx[i]=0.02+Math.random()/10;SNOW_sty[i]=0.7+Math.random();}SNOW_dx[i]+=SNOW_stx[i];document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i]+SNOW_am[i]*Math.sin(SNOW_dx[i])+"px";}SNOW_Time=setTimeout("SNOW_Weather()",20);}SNOW_Weather();
//]]>
</script>
  • Các bạn có thể thay đổi đoạn code màu vàng thành hình mà các bạn muốn hiển thị thay cho bông tuyết màu xanh mà mình đặt trong bài viết này.
  • Thay đổi chữ số trong đoạn code màu xanh để tăng giảm số lượng bông tuyết rơi.
2.Tạo hiệu ứng bông tuyết rơi bằng CSS3 Snow Animation
<style>.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0;height:100%} .snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite} .snow.foreground{background-image:url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");-webkit-animation-duration:15s;animation-duration:10s} .snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s} .snow.middleground{background-image:url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);-webkit-animation-duration:20s;animation-duration:15s} .snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s} .snow.background{background-image:url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);-webkit-animation-duration:25s;animation-duration:20s} .snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s} @-webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}} @keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}</style> <div class='snow-container'> <div class='snow foreground'></div> <div class='snow foreground layered'></div> <div class='snow middleground'></div> <div class='snow middleground layered'></div> <div class='snow background'></div> <div class='snow background layered'></div> </div>
Chúc các bạn thành công

Thứ Tư, 26 tháng 11, 2014

Tạo hộp thoại thông báo với CSS

Như các bạn đã biết, trong một bài viết dài, ngoài nội dung chính của bài viết. Ta còn thường phải đưa những thông tin ngoài lề liên quan đến bài viết, hay những nhận xét cá nhân vào trong bài. Lúc này ta sẽ cần đến những hộp thoại để thu hút thị giác của người đọc. Trong bài viết này mình sẽ sử dụng  CSS  để tạo nên những hộp thoại đó, các bạn có thể tùy chỉnh theo ý thích  .Các hộp thoại trong bài viết hay sử dụng có dạng như sau :
Hộp thoại thông tin,Hộp cảnh báo,Hộp thoại thông báo kết quả, hộp báo lỗi:
Trong bắt mắt lắm phải không nào. Được rồi ta sẽ bắt tay vào hành động. Ta dễ nhận thấy các hộp thoại trên đều có layout chung sẽ như sau:
Với mỗi hộp khác nhau, chỉ cần thay đổi biểu tượng, màu nền, và màu chữ. Toàn bộ Style trên được gói gọn như sau:
.info, .success, .warning, .error {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('https://lh4.googleusercontent.com/-W0Jc899-mXo/VHaNZwTys_I/AAAAAAAACQE/yVhGCkHM8rA/w140-h140-p/1.info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('https://lh6.googleusercontent.com/-muYXZ57kGkk/VHaNZpi1h2I/AAAAAAAACPw/pdVNaUR5yeU/w140-h140-p/3.ketqua.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('https://lh3.googleusercontent.com/-Jkc0a9PlGnY/VHaNZ8GBpEI/AAAAAAAACPs/NLewR4QSBF0/w140-h140-p/2.canh%2Bbao.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('https://lh4.googleusercontent.com/-jxEIbtUZxu4/VHaNayhmrGI/AAAAAAAACQU/4uzEv4YNqE4/w140-h140-p/4.loi.png');
}
Các bạn có thể tùy chỉnh màu nền và hình ảnh theo ý thích.
Thêm đoạn CSS trên vào style css trên trang web của bạn. Để sử dụng, ta có thể dùng thẻ <div> với class tương ứng:
<div class="info">Nội dung hộp thoại</div>
<div class="success">Nội dung hộp thoại</div>
<div class="warning">Nội dung hộp thoại</div>
<div class="error">Nội dung hộp thoại</div>
Chúc các bạn thành công 

Popular Labels

Trong widget Label thì việc hiển thị nhãn theo tần suất vốn có sẵn. Thủ thuật này sẽ giới hạn số lượng nhãn được đưa ra và gọi với cái tên Popular Labels, có nghĩa chỉ một vài nhãn có nhiều bài viết nhất được hiển thị trên widget. Trước khi bắt tay thực hiện hãy chắc chắn bạn đã có widget Label trên blog.
widget label

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

.Label ul{margin:0!important;padding:0!important;list-style-type:none!important} .Label ul li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 0 10px!important} .Label ul li a{display:block;position:relative;margin:10px 0!important;background:#17b38f;padding:10px 0 10px 20px!important;font-size:14px;line-height:20px;color:#fff!important;text-decoration:none} .Label ul li a:hover{color:#fff!important;text-decoration:none} .Label ul li a:hover:after{background:#ff4e47} .Label ul li a:before{content:'';position:absolute;top:0;left:-10px;width:0;height:0;border-top:20px solid transparent;border-right:10px solid #17b38f;border-bottom:20px solid transparent} .Label ul li a:after{content:'';position: absolute;top:17px;left:0;border-radius:50%;background:#fff;width:6px;height:6px} .Label ul li span{float:right;margin-right:-10px;background:#ff4e47;width:30px;height:20px;font-size:10px;color:#fff;text-align:center}
Bước 2: Tìm trong template đoạn mã dưới đây: 
<b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li> </b:loop>
Thay thế thành: 
<b:loop index='i' values='data:labels' var='label'> <b:if cond='data:i &lt; 5'> <li><a expr:href='data:label.url' rel='tag'><data:label.name/><b:if cond='data:showFreqNumbers'><span><data:label.count/></span></b:if></a></li> </b:if> </b:loop>
Bước 3: Quay trở lại Bố cục và chọn Chỉnh sửa widget Label. Tích chọn các thông số như hình dưới:

label setup

Thay 5 bằng số nhãn bạn muốn hiển thị.

Thứ Ba, 7 tháng 10, 2014

Thread Comment đẹp cho blogspot v1

Kết quả hình ảnh cho Thread Comment đẹp cho blogspot
Tôi hân hạnh giới thiệu đến các bạn một mẫu Thread Comment Blogger mới đẹp của blog Duy-pham. Hy vọng với style này khung nhận xét của bạn trở nên trực quan hơn khi có sự phân biệt rõ ràng giữa nhận xét reply và nhận xét được reply. Nhận xét của tác giả bài viết được gắn thêm ribbon để phân biệt với các nhận xét khác.
  • Nào bắt tay thực hiện thôi.
  • Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#comments{overflow:hidden} #comments h4{display:inline;padding:10px;line-height:40px} #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative} #comments h4,.comments .continue a{background:#d80556} #comments h4,.comments .user a,.comments .continue a{font-size:16px} #comments h4,.comments .continue a{font-weight:normal;color:#fff} #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0} #comments .avatar-image-container img{border:0} .comment-thread{color:#111} .comment-thread a{color:#777} .comment-thread ol{margin:0 0 20px} .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556} .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px} .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px} .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px} .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em} .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxECHJQQNyAmfoVCSphEppAjFamQuhKwqAAxUDU6D__GfJULATMPfFpeKgsScQOL-81v8KqudtSuWyshsvBrmhXu_iKFxElCgFzDfyVJ_Twi74Xq-rOwZaJbAL4KAVmZODaCJJo1X8XBw/);width:36px;height:36px} .comments .comments-content .inline-thread{padding:0 0 0 20px} .comments .comments-content .comment-replies{margin-top:0} .comments .comment-content{padding:5px 0;line-height:1.4em} .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent} .comments .comment-thread.inline-thread .comment{width:auto} .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px} .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0} .comments .comment-thread.inline-thread .comment-block{margin-left:48px} .comments .comment-thread.inline-thread .user a{font-size:13px} .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px} .comments .continue{border-top:0;width:100%} .comments .continue a{padding:10px 0;text-align:center} .comment .continue{display:none} #comment-editor{width:103%!important} .comment-form{width:100%;max-width:100%};
  • Bạn có thể thay đổi màu  #d80556   thành màu bạn muốn hiển thị .
Lưu ý:
  • Trước hết blog của bạn phải cài đặt threaded comments rồi đã thì mới sử dụng thủ thuật này.
  • Nếu đã cài đặt rồi thì xoá các đoạn Css  có dạng #comments... trên blog của bạn để tránh lỗi và thay thế bằng đoạn css bên trên.
  • Nếu chưa cài đặt hãy làm theo hướng dẫn bên dưới sau đó thêm đoạn css bên trên vào blog và lưu lại.
1.Vào blogger > Mẫu > Chỉnh sửa HTML
2.CTR+F Tìm đoạn code sau :

<b:include data='post' name='comments'/>
3.Thay toàn bộ đoạn code tìm được bằng code bên dưới ( có 4 lần thay hoặc nhiều hơn tùy templete )
<b:include data='post' name='threaded_comments'/>


Style Duy-Pham Blog 

Thứ Bảy, 21 tháng 6, 2014

Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng

Thủ thuật sau đây sẽ giúp các bạn chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng.Trước khi đi vào thủ thuật, mình xin lưu ý là thủ thuật này chỉ sử dụng thích hợp cho các bài viết trong blog có 1 nhãn, vì ở đây mình sự dụng việc nhận diện nhãn, khi đúng nhãn đã mặc định thì sẽ hiển thị 1 ảnh tương ứng. Nếu 1 bài viết có nhiều nhãn thì việc hiển thị ảnh này sẽ ko được hợp lý (sẽ xuất hiện nhiều ảnh cùng 1 lúc).

Demo

☼ Các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Chèn đoạn code CSS này vào trước dòng code ]]></b:skin>
.post-icon img {height:20px; /*có thể tùy chỉnh lại chiều cao này (hoặc xóa nó đi) tùy theo kích thước của ảnh bạn muốn hiển thị */float:left;margin-right:8px;}

5. Tiếp tục tìm đến đoạn code này :
<b:if cond='data:post.title'><h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></h3></b:if>
6. Thêm đoạn code được đánh dấu highlight như bên dưới:
<b:if cond='data:post.title'><h3 class='post-title entry-title'><div class='post-icon'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;Label 1&quot;'><img src='Link ảnh 1'/></b:if><b:if cond='data:label.name == &quot;Label 2&quot;'><img src='Link ảnh 2'/></b:if></b:loop></b:if></div><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></h3></b:if>
- Thay tên nhãn và link ảnh icon cho thích hợp.
- Nếu có nhiều nhãn thì các bạn cứ thêm đoạn code tương tự như bên dưới vào trước dòng </b:loop> :
<b:if cond='data:label.name == &quot;Label 3&quot;'><img src='Link ảnh 3'/></b:if>
<b:if cond='data:label.name == &quot;Label 4&quot;'><img src='Link ảnh 4'/></b:if>

7. Save template.
Chúc các bạn thành công.
[FD's BlOg] 

Thứ Năm, 13 tháng 3, 2014

Tạo CSS widget label cloud đẹp

Một tiện ích khá hay nhằm làm đẹp cho widget label cloud blogspot với CSS full color cho những bạn có sở thích làm đẹp template của mình.



Tạo CSS widget label cloud đẹp cho blogspot

Cách tạo làm đẹp cho widget label cloud củng khá đơn giản, thường thì mỗi bạn có cách CSS khác nhau cho template của mình, và ở bài viết này củng vậy mình sẻ hướng dẫn cho các bạn mới bắt đầu  làm blogspot CSS cho widget label cloud.
Bước 1: Đăng nhập vào tài khoản Blogger.com
Bước 2: Chọn Bố cục
Bước 3: Thêm tiện ích chọn Nhãn(Label) và bấm Lưu
Tạo CSS widget label cloud đẹp cho blogspot
Bước 4: Chọn Mẫu >> Chỉnh sửa HTML >> Ctrl+F tìm thẻ ]]></b:skin> và thêm đoạn CSS bên dưới trước nó

CSS widget label cloud blogspot

/*widget label cloud*/
.cloud-label-widget-content {text-align: left;}
.label-size {background: #5498C9;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F53477;}
.label-size:nth-child(2) {background: #89C237;}
.label-size:nth-child(3) {background: #44CCF2;}
.label-size:nth-child(4) {background: #01ACE2;}
.label-size:nth-child(5) {background: #94368E;}
.label-size:nth-child(6) {background: #A51A5D;}
.label-size:nth-child(7) {background: #555;}
.label-size:nth-child(8) {background: #f2a261;}
.label-size:nth-child(9) {background: #00ff80;}
.label-size:nth-child(10) {background: #b8870b;}
.label-size:nth-child(11) {background: #99cc33;}
.label-size:nth-child(12) {background: #ffff00;}
.label-size:nth-child(13) {background: #40dece;}
.label-size:nth-child(14) {background: #ff6347;}
.label-size:nth-child(15) {background: #f0e68d;}
.label-size:nth-child(16) {background: #7fffd2;}
.label-size:nth-child(17) {background: #7a68ed;}
.label-size:nth-child(18) {background: #ff1491;}
.label-size:nth-child(19) {background: #698c23;}
.label-size:nth-child(20) {background: #00ff00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}
Bước 5: Lưu lại và xem kết quả
Chúc bạn bạn thành công !

Thứ Hai, 30 tháng 12, 2013

Cách chèn tiện ích chia sẻ Addthis vào blog, website

Khi bạn đã có 1 website or blog nào đó và có những bài viết hay, muốn chia sẽ cho những người khác cùng biết đến thì Addthis là 1 tiện ích tuyệt vời dành cho bạn.
Nó có thể chia sẻ các link, bài viết,.like page.fb,google+,zingme,..v.v.thực hiện chỉ với 1 code đơn giản. rất tiện lơi. Hiện nay nó được rất nhiều website, blog sử dụng. Hôm nay mình sẽ giới thiệu cách sử dụng về tiện ích này.

Website: https://addthis.com/

1. Giới thiệu sơ về addthis.com 

Cách đây ít lâu trang Addthis.com vừa mới thay đổi giao diện mới đồng thời cũng bắt đầu mở rộng các tiện ích ngoài social sharing toolbox được hướng dẫn trong bài viết này còn có follow widget và welcome bar.
[​IMG]

Addthis là một dịch vụ rất nổi tiếng tự nhận là nền tảng chia sẻ lớn nhất thế giới. Addthis cung cấp một bộ công cụ chia sẻ (social sharing tools), follow widget và welcome. Addthis giúp các tăng lượng truy cập các trang web bằng sự kết nối thông qua các dịch vụ xã hội như Facebook, Twitter, Pinterest, Google+…. Đối với các thành viên đăng ký Addthis cung cấp công cụ để theo dõi và phân tích nhằm giúp định hướng nội dung và phương thức chia sẻ.

2. Hướng dẫn cách chèn code mặc định: ( trọng tâm)

Cách chèn code rất cơ bản bạn vào phần trang Social Sharing Toolbox chỉ cần 3 bước là có thể lấy được code chèn vào bất kỳ trang blog/website nào.
Bước 1: Chọn nền tảng: bạn sử dụng platform nào thì chọn platform ấy, addthis hỗ trợ Blogger, Wordpress, Tumblr, TypePad, Posterous, Joomla, Drupal, Magento…


[​IMG]

Bước 2: Chọn style, bạn có thể chọn button (một nút nhấn) hoặc toolbox tập hợp nhiều nút nhấn của các dịch vụ. Đây sẽ là phần chúng ta tùy chỉnh và tạo nên bản sắc của riêng mình. Ở đây ta lấy ví dụ là sử dụng tools box


[​IMG]

Bước 3: Copy đoạn code và chèn code vào bất cứ vị trí nào bạn thích trong blog/website. Thông thường đoạn code có dạng như sau.


<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <a class="addthis_counter addthis_pill_style"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fbe76dc0e946530"></script> <!-- AddThis Button END –>



[​IMG]

3. Tùy biến Addthis social sharing toolbox: ( nâng cao)

Trong trường hợp bạn muốn tùy chỉnh sâu hơn Addthis social sharing toolbox thì làm theo hướng dẫn dưới đây.
1. Tối ưu hóa tốc độ trang

Bạn chỉ cần đặt một đoạn code JS cho toàn bộ trang cho nên HHV đề nghị bạn nên cắt riêng đoạn code js bên dưới và chèn nó vào ngay bên trên thẻ </body>.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fbe76dc0e946530"></script>
2. Tùy chỉnh hình ảnh riêng cho button

Phần code bên dưới ưng với mỗi dịch vụ mạng xã hội hoặc chia sẻ được hiển trị trong toolbox.


<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
Trong đó
  • addthis_button_facebook_like chỉ định dịch vụ chia sẻ
  • fb:like:layout="button_count" chỉ định style của nút chia sẻ (có thể có hoặc không)
Để tìm hiểu thêm về code này bạn cần tìm hiểu API của Addthis. LINK vào đây
Nếu bạn muốn hiển thị những dịch vụ ưa thích của mình thì cần biết đoạn code chỉ định dịch vụ chia sẻ. Theo link sau để tham khảo các dịch vụ mà Addthis hỗ trợ. LInk vào đây. Điều thú vị là Addthis hỗ trợ cả ZingMe với mã chỉ định là zingme. Trong toolbox đoạn code sẽ như sau.


<a class="addthis_button_zingme"></a>
Tuy nhiên bạn còn muốn thay đổi ảnh mặc định của addthis thành một hình ảnh nào khác của riêng bạn. Cũng dễ thôi, đoạn code đó là:
<a class="addthis_button_zingme"><img alt='Share to ZingMe' border='0' src=”imglink”/></a>
Bạn thay imglink bằng đường link của bức ảnh.

Đối với một số dịch vụ mạng xã hội nổi tiếng như Facebook, Pinterest, Google+… Addthis có rất nhiều tùy chọn khác nhau. Đến link sau để tham khảo và chọn thứ bạn thích. link vào đây.
Chúc các bạn thành công với thủ thuật này

Thứ Bảy, 12 tháng 10, 2013

Tạo nhiều chuyên mục cho bài viết theo nhãn

Theo yêu cầu của 1 số bạn nhờ mình hướng dẫn cách đăng bài theo từng chuyên mục với nhãn riêng biệt .Hôm nay mình sẽ hướng dẫn cho các bạn cách thiết kế giao diện trang chủ của bạn theo phong cách báo chí (magazine). Bài viết này được tác giả Võ Quốc An viết khá lâu rồi và có nhiều bạn làm theo nhưng vẫn chưa thực hiện được.Nên mình sẽ hướng dẫn cụ thể hơn và có tùy chỉnh lại css nên tiện ích trông bắt mắt hơn.Blog của bạn sẽ nhìn chuyên nghiệp với các mục bài viết mới nhất và bài viết hiển thị theo nhãn (label) mà bạn muốn hiển thị.






1. Chèn đoạn css sau phía trên thẻ ]]></b:skin>

/*Chinhtrucblog.blogspot.com Magazine with 2 box */
.boxhome{width:680px}.boxhome ul {margin:0; padding:0}
.box1, .box2{box-shadow:0 1px 3px 0 rgba(0, 0, 0, 1);}
.box1{border-top: 0px solid #D0D0D0; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #ECEDE8;border-left: 0px solid #D0D0D0;border-radius:2px;}
.box2, .box3{border-top: 1px solid #DBDBDB; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #DBDBDB;border-left: 0px solid #D0D0D0;border-radius:0 15px;}
.box1{margin-bottom:1px;overflow:hidden;}
.box1-left{width:300px; float:left; height:370px;border-right: #ABABAB  1px dashed;  padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px;  height:230px; width:270px}
.box1-right{height:60px; width:300px; float:right; padding: 10px; line-height:20px;border-bottom: #ABABAB 1px dashed; }
.box2-right:hover, .box1-right:hover {background:#c2361c;}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left; height:49px; width:72px; margin-right:10px}
.box2{margin-top:15px; overflow:hidden}
.box2-left{width:330px; float:left; height:170px; padding:10px; border-right:#ABABAB  1px dashed; }
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px;  height:100px; width:160px;float:left}
.box2-right{height:50px; width:285px; float:right;  border-bottom:#ABABAB  1px dashed; padding:5px; line-height:15px;}
.box2-right img {float:left; height:37px; width:48px; margin-right:5px}
.box1-left-info, .box2-left-info{ text-align:justify;}
.box1-googlesearch{width:650px;float:left}
.menu{overflow: hidden; width: 100%; border-bottom:1px solid #c2361c; background:#eee;}
.menu li{float: left; list-style: none;}
.menu a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu li:first-child a{padding-left: 15px; background:#007ABE; color:#eee}
.menu li:first-child a::after{border-left-color: #007ABE;color:#FFFFFF}
.menu li:first-child a:hover{background:#c2361c; color:#fff}
.menu li:first-child a:hover::after { border-left-color: #c2361c;}
.menu a:hover{background: #c2361c;}
.menu a::after, .menu a::before{content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu a::after{z-index: 2; border-left-color: #eee;}
.menu a::before{border-left-color: #888; right: -1.1em; z-index: 1; }
.menu a:hover::after{ border-left-color: #c2361c;}

- Các bạn thay đổi kích thước ở những ô mình bôi màu vàng. Nếu độ rộng blog của bạn khác bạn sẽ phải chỉnh lại toàn bộ code để cho phù hợp nha. 

2- Thêm đoạn mã bên dưới vào trước thẻ </head>



<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
/*<![CDATA[*/
//https://chinhtrucblog.blogspot.com/2013/10/tao-nhieu-chuyen-muc-cho-bai-viet-theo.html- Home box v1.0[
imgr=["https://lh3.googleusercontent.com/-IBkOgk0LW6c/TqulPrgd6RI/AAAAAAAAAmg/VHnAiJCR4jc/s800/no_img.jpg"];aBold=showRandomImg=!0;summaryPost=70;summaryTitle=25;numposts=7;
function box1(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;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[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box1-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><h2><a href="'+
h+'">'+l+'</a></h2><div class="box1-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box1-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",document.write(e));j++}document.write("")}
function box2(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;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[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box2-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+
h+'">'+l+'</a><div class="box2-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box2-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",
document.write(e));j++}document.write("")};
    //]]>
</script>
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;
summary_img = 160;
img_thumb_height = 85;
img_thumb_width = 124;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('l m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3 b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0 j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9" K="\'+L+\'9" /></k>\';e=M}3 f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{}))
//]]>
</script>
<style type='text/css'>
#blog1{display:none}
</style>
</b:if> 
3. Tìm với từ khóa Blog1 tìm đoạn code tương tự như sau: (những đoạn màu đỏ có thể khác nhau tùy blog)
<b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/></b:section>

Chèn đoạn code sau phía trên đoạn code vừa tìm được.


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='boxhome'>

<div class='box1'>
<script src='/feeds/posts/default?max-results=7&amp;orderby=published&amp;alt=json-in-script&amp;callback=box1'/>
<div style='clear:both;'/>
</div>
<div class='box2'>
<ul class='menu'>
<li><a href='#'>Blogger Template</a></li>
<li><a href='#'>Magazine Template</a></li>
<li><a href='#'>Shopping Template</a></li>
<li><a href='#'>Movie Tempalte</a></li>
</ul>
<script src='feeds/posts/default/-/Label 1?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>
<div class='box2'>
<ul class='menu'>
<li><a href='#'>Thủ Thuật Blog</a></li>
<li><a href='#'>Giải Trí</a></li>
<li><a href='#'>Ebook</a></li>
<li><a href='#'>Nhạc Trẻ</a></li>
</ul>
<script src='/feeds/posts/default/-/Label 2?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>
<div class='box2'>
<ul class='menu'>
<li><a href='#'>Game</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Ghost Win 7</a></li>
</ul>
<script src='/feeds/posts/default/-/Label 3?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>
</div>
</b:if>
  • Thay Label 1, Label 2,Label 3 thành tên nhãn mà bạn muốn hiển thị.
  • Lưu ý là tên nhãn phải chính xác cả dấu cách và các chữ in hoa hoặc in thường nếu sử dụng trong tên nhãn. 
  • max-results=5 là số bài hiển thị ở cột bên trái của phần nhãn. 
  • max-results=7 là số bài hiển thị ở cột bên phải mục bài viết mới nhất. 
  • Trong đoạn code trên mình tạo 1 box lớn (hiển thị các bài viết mới nhất) và 2 box con (2 chuyên mục). 
  • Để tạo thêm chuyên mục bạn tạo thêm các mục box2 là được. 
Update : #1 Đã sửa lỗi không hiện thị bài viết.
Xem thêm bản cập nhật :  Tạo chuyên mục cho bài viết theo nhãn v2
Chúc các bạn thành công với thủ thuật này.