Tin Công nghệ, Mạng máy tính, Điện Thoại, iPhone, Thủ thuật Bloger: Thủ Thuật Blogger

Showing posts with label Thủ Thuật Blogger. Show all posts

4/13/14

Tạo nút Back to Top

11:09 PM Blogger, Navigation, Thủ Thuật Blogger, Tips No comments

B1:

Chèn đoạn code sau phía trên </body> trong template:

<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<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>

B2: Lưu template và tận hưởng thành quả

Cách tạo RSS cho Blog

10:25 PM Blogger, rss, SEO Blogger, Thủ Thuật Blogger No comments

Khi bạn muốn tạo Blog 1 cách hoàn chỉnh, thì Blog của bạn không thể thiếu những thành phần quan trọng như công cụ tìm kiếm, RSS, hay thành phần đếm số lượt người truy cập blog...

Sau đây tôi muốn trình bày cách thêm RSS cho blog của mình:
1. Cách 1: Đối với Blogger:
Đầu tiên các bạn copy đoạn mã sau vào vị trí trong Blog của bạn muốn đặt logo RSS

Thay các chữ Tên Blog của bạn bằng địa chỉ Blog của các bạn, thay dòng mô tả http://vnbtips.blogspot.com/ bằng các dòng bất kì theo ý thích. Vậy là xong.

2. Cách 2:

Bình thường, nếu không đăng ký FeedBurner và thay đổi Post Feed Redirect URL trong Site Feed (Settings -> Site Feed) liên kết đến Feed cho các bài đăng của blog sẽ có dạng: http://tencuaban.blogspot.com/feeds/posts/default. Từ chương trình đọc feed trên web hay các chương trình trên Windows người dùng có thể đọc một phần hoặc tất cả nội dung của một bài đăng dựa theo chế độ cài đặt của bạn tại Allow Blog Feeds.

Theo hướng dẫn của Blogger link đến Feed cho từng nhãn của bạn sẽ là:

http://tencuaban.blogspot.com/feeds/posts/default/-/labelname

Nhớ phải có dấu "-". Và như vậy có thể dùng link này kết hợp với một hình ảnh, bạn hoàn toàn có một một biểu tượng feed cho từng label.

Cách thực hiện:

- Đăng nhập Blogger và hãy bảo đảm bạn trên blog của bạn có ít nhất một tiện ích label được sử dụng.

- Tiếp theo vào Template -> Edit HTML, nhớ bấm Expand Widget Templates và tìm id='Label1' (hoặc id='Label2' nếu bạn sử dụng đến nhãn thứ 2 )( Có thể dùng Ctrl + F để tìm). Bạn lưu ý đoạn mã sẽ như thế này:

Photo Sharing and Video Hosting at Photobucket

Nào bây giờ hãy chép đoạn code:

Trong đó Link đến biểu tượng Feed bạn có thể lựa chọn từ một trong các hình sau:

(Đưa chuột phải lên hình bạn chọn và click Properties để lấy link)

và dán theo một trong hai cách: phía dưới thẻ

(hoặc phía dưới thẻ

) để biểu tượng xuất hiện trước (hoặc sau tên của nhãn).

Chúc các bạn thành công!

Chèn quảng cáo Google Adsense...vào bài viết trong Blogger

8:46 AM Blogger, javascript, Post, Thủ Thuật Blogger, Tips No comments

Bài viết sau đây sẽ hướng dẫn các bạn thủ thuật blogger cách chèn mã quảng cáo của Google Adsense vào Blogger, cách này cũng áp dụng với một số quảng cáo khác như: Adnet.vn, Bidvertiser...để các bạn có thể thiết kế website chuyên nghiệp. Với thủ thuật này thì sẽ giúp bạn SEO website được tốt hơn vì được ưu ái từ Google.

<script type="text/javascript"><!-- google_ad_client = "pub-2130301322121363";

/* 250x250, Được tạo ra 20/03/2011 */

google_ad_slot = "4280005562";

google_ad_width = 300;

google_ad_height = 250; //-->

</script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

1. Chèn trực tiếp vào tiện ích HLMT/ JavaScript

Vào Quản trị - Bố cục - Thêm tiện ích - chọn HTML/JaveScrip và dán đoạn mã quảng cáo Adsense vào.

Cách này đơn giản, dễ quản lý nhưng không thay đổi được kích thước và không hiện thị được trong bài đăng

2. Chèn vào Template của Blog

Đây là cách được nhiều blogger sử dụng vì quảng cáo sẽ hiện thị trong bài đăng, có thể thay đổi được kích thước và hiển thị được ở nhiều vị trí tối ưu trên blog. Trước khi chèn mã Adsense vào Blog bạn phải chuyển đổi (converter) Google Adsense Converter.

Sau khi chuyển đổi bạn nhận được một mã mới, sử dụng mã này mới có thể chèn vào Template

a/ Chèn trên đầu và dưới tiêu đề bài đăng nhưng dưới tiêu đề blog.

Vào Mẫu (Design) - Chỉnh sửa HTML (Edit HTML) - Chọn Mở rộng tiện ích mẫu (Expand Widget Templates).
- Tìm đoạn code sau:

<div class='post-header-line-1'/>

- CHèn ngay vào dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads'> Mã Adsense đã chuyển đổi </p> </b:if>

b/ Chèn vào dưới cuối mỗi bài đăng.

- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:

<div class='post-body entry-content'> <p><data:post.body/></p> <div style='clear: both;'/> </div>

- Chèn vào ngay dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads'> Mã Adsense đã chuyển đổi </p> </b:if>

c/ Hiện quảng cáo bên trái mỗi bài đăng.

- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:

<div class='post-header-line-1'/>

- Chèn vào ngay dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads' style='float:left'> Mã Adsense đã chuyển đổi </p> </b:if>

d/ Hiện quảng cáo bên phải mỗi bài đăng.

- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:
<div class='post-header-line-1'/>

- Chèn vào ngay dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads' style='float:right'> Mã Adsense đã chuyển đổi </p> </b:if>

Thủ thuật tạo Slide bằng JQuery ở trang chủ cho Blogger

8:40 AM Blogger, Page, Post, Slide, Thủ Thuật Blogger, Tips No comments

Slide - Thủ thuật Slide JQuery bài viết ở trang chủ cho Blogger

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chèn code bên dưới vào sau thẻ <head>

<script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/Jquery.min.1.5.1.js"></script>
<script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/Jquery.min.1.3.js"></script>
<script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/script.js"></script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.main-slider{width:414px;  /*độ rộng của phần bên trái*/
height:300px; /*chiều cao của phần bên trái*/
border-right:#ccc solid 1px;}
.lof-slidecontent { width:710px;  /*độ rộng của cả tiện ích*/
height:300px; /*chiều cao của cả tiện ích*/
background:#eee;position:relative; overflow:hidden; border:#ccc solid 3px;}
.preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.preload
 div{ height:100%;width:100%; background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89i-kspLLDJ1OuLBT42BNzygFZ7uYma9n-5PFC4Y8pYQkuz0vCcXxZHO7GNx17woSfZodTixa6fe9tLmNHRxt81srOd_1q7uFri37cwCvi-saMv5CVBoMHzVHl-RPhtsqTkIqFKKCht9p/s1600/load-indicator-namkna-blogspot-com.gif)
 no-repeat scroll 50% 50%;}
.sliders-wrapper{position:relative; height:100%; z-index:3px; overflow:hidden; }
ul.sliders-wrap-inner{overflow:hidden;
 background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89i-kspLLDJ1OuLBT42BNzygFZ7uYma9n-5PFC4Y8pYQkuz0vCcXxZHO7GNx17woSfZodTixa6fe9tLmNHRxt81srOd_1q7uFri37cwCvi-saMv5CVBoMHzVHl-RPhtsqTkIqFKKCht9p/s1600/load-indicator-namkna-blogspot-com.gif)
 no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; 
overflow:hidden;}
ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;}
ul.sliders-wrap-inner li img{ padding:0px;
width:414px; /*độ rộng của ảnh bên trái*/
height:300px; /*chiều cao của ảnh bên trái*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:400px; /*độ rộng của phần mô tả hay phần tóm tắt nội dung*/
background:#000;
height:100px; /*chiều cao của phần mô tả hay phần tóm tắt nội dung*/
padding:0px 8px 5px 8px;
color:#fff;
opacity:0.8;
line-height:1.5em;
}
ul.navigator-wrap-inner h2,.slider-description h2{background:none; }
.slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;}
.slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff}
.navigator-content {position:absolute;right:0;top:0px;z-index:9;height:300px;color:#FFF
}
ul.navigator-wrap-inner h2{line-height:1.3em;padding:0 0 0 8px;font-size:14px;margin-left:85px;color:#fff;}
.navigator-wrapper{ z-index:10;
height:180px; /*chiều cao của list bài viết bên phải*/
width:310px;  /*độ rộng của list bài viết bên phải*/
overflow:hidden;
color:#FFF;
}
ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
ul.navigator-wrap-inner
 li{ cursor:hand;  cursor:pointer; list-style:none; padding:0; 
margin:0px; overflow:hidden; display:block; text-align:center;}
ul.navigator-wrap-inner
  
li.active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjNaAmfJ_sobKphhgO1HG-42ilkuIYMSTPJto0rvNWNX1PetpzDPx3-ALEf6KDituzZpGeVWCkJ4Ds705-UAEVlXFL9mEEk91s-P3TriyKKpZnv7MU-rXb846A1Hd40a4w6BppPJXDsfV7/s1600/arrow-bg-namkna-ngoctra.png)
 no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner
 li.active 
div{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYigbKdkPHfQo9NDvXVGzqkxZdl0DWdUNavhhoj8af2WG3WShj3YPXGOB-79n2STRwZ4CPay4ovORJPUv4X5bfTxVcarKFFP4lNUxLUmiT4d0i6b0VDXUTstUx3TaWwSDaQXbTiEJUibJe/s1600/grad-bg-namkna-ngoctra.gif);
color:#FFF;}
ul.navigator-wrap-inner  li >  div{
background:#333;
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.navigator-wrap-inner img{
height:75px;  /*chiều cao của ảnh thumb ở list bài viết bên phải*/
width:75px;   /*độ rộng của ảnh thumb ở list bài viết bên phải*/
margin:8px 8px 8px 0px;
float:left;
padding:2px;
border:#C5C5C5 solid 1px;
}
.button-next,
.button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.button-next {
right:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQawE5v38gma7Bv7HcpctwkD9q0KtcOlWjyV3B2OZpmEAgJVhonIs3mxDbOoFF9VoiXid-E7xVTnyquC-SeWe2Xt2OGmOFJvcduUWDi-fYlAz25h8K2XCWpMMEQuJZ38IWz1FURVUG6neu/s1600/next-namkna-ngoctra.png)
 no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho59kcfs96xLEXiwpKDJpJTIXnKoZ_P1zIBcnzhU7zv9KN5kgrMWfpd0pWzqjeks5viujIquJt4lp_re8o0A0QWQ-OTqLP4SDr58M2Q8_KGUoPFkcsPkIfJQYL84QkZbNG3POcGkWCwnee/s1600/previous-namkna-ngoctra.png)
 no-repeat left center;
}
.button-control {
background:#333;
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
}
.button-control span { display:block;  width:100%; height:100%;}
.action-start span  {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBEX778vM8k26dz0Im1F8wRhLNLhXtH1HsvC_HiPHc4QRF0JEzzK50V_WYOxNIViqaUdIBifG1c0Hr0qKLKvGBvzeOZmLUO36zicgLeAj9yzK96GywFBOxAWgrxojoHg_Z-B-PIAsmaSVh/s1600/play-namkna-blogspot-ngoctra.png)
 no-repeat center center;
}
.action-stop span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz40gzUB4psAENZda8l7N-kday9U2yuPl9qX0kyvP22E_K_7TCp3fDJGWeU30sYXHXZTiXWbKdTM2RXHAz0Pq3-HkGNZdWxostbeWB9Yhg1tNgajVZSwhUhFSBZBNIwb9R9CAh9HBZPdro/s1600/pause-namkna-ngotra.png)
 no-repeat center center;
}

6. Save template lại

7- Về Bố cục (Lay out) => Thêm 1 HTML/Javascript và thêm vào code bên dưới.

<script type="text/javascript">
$(document).ready( function(){ 
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeOutBounce',
duration:1200,
auto:true,
mainWidth:414, 
mainHeight:300,
navigatorHeight : 100,
navigatorWidth : 310,
maxItemDisplay:3,
buttons:buttons});  
});
summaryposts = 30;
numposts = 15;
label = "Blogspot-tips";
home_page = "http://vnbtips.blogspot.com/"; 
</script>

<div id="jslidernews" class="lof-slidecontent">
<script src="http://thietkewebplus.googlecode.com/files/jqslidernews.js" type="text/javascript">
</script></div>

easeOutBounce, là tên của hiệu ứng bạn có thể chọn kiểu trình diễn khác bằng cách thay (easeOutBounce) thành một trong các tên sau: easeInOutExpo,easeInOutQuad.
mainWidth:414, Là độ rộng của phần trình diễn bên trái
mainHeight:300, Là chiều cao của phần trình diễn bên trái
navigatorHeight : 100, Là chiều cao của list bài viết bên phải
navigatorWidth : 310, Là độ rộng của list bài viết bên phải
summaryposts = 30; là số ký tự của nội dung phần mô tả
numposts = 15; là số bài viết hiển thị
label = "Blogspot-tips"; thay Blogspot-tips thành tên nhãn muốn hiển thị tronmg blog của bạn nếu bạn chọn hiển thị cho một nhãn cụ thể.
home_page = "http://vnbtips.blogspot.com/"; thay thành địa chỉ blog của bạn
Ở trên mình cho tiện ích hiển thị tất cả bài viết trên blog không theo từng nhãn riêng nên bạn không cần quan tâm đến phần (label = "Blogspot-tips";), phần đó mình thêm phụ để bạn nào muốn hiển thị theo nhãn thì sẽ phải quan tâm đến biến này. Để hiển thị theo từng nhãn riêng biệt thì bạn cần thay file JS bên dưới
http://thietkewebplus.googlecode.com/files/jqslidernews_2.js
thành file JS sau
http://thietkewebplus.googlecode.com/files/jqslidernews_label.js

8. Cuối cùng bạn save tiện ích lại là xong

Tiện ích share hình trái tim cho blogspot

10:12 AM Blogger, share, Thủ Thuật Blogger, Tips No comments

Demo ảnh

1. Tìm dòng </head> rồi Coppy và Paste đoạn mã dưới đây bên trên </head> vừa tìm được.

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

2. Tìm dòng <body> và thêm bên trên nó đoạn mã dưới đây:

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script>

3. Lưu template lại và kiểm tra kết quả.

Chia Post footer thành nhiều cột cho blogspot

9:01 AM Blogger, Footer, Thủ Thuật Blogger, Tips No comments

Hình ảnh minh họa của thủ thuật

Bắt đầu:

1. Đăng nhập blog

2. Vào Bố cục(layout)

3. Vào chỉnh sửa code HTML (edit code HTML)

4. Chọn "mở rộng mẫu tiện ích" (expand widget template)

5. Chèn đọan code màu đỏ vào như bên dưới:

<div id='main-wrapper'>
<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>

<div id='main-footer-content'>
<div id='main2' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col1' preferred='yes' style='float:left;'/>
</div>
<div id='main3' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

</div>

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>

...
...
...

</b:section>
</div>

- Chú ý : bạn hãy điều chỉnh code màu xanh (là độ rộng của các cột) theo đúng kích thước của main post, ví dụ main post của bạn rộng 600px, thì mỗi cột sẽ là300px, có thể nhỏ hơn (do có thể main post của bạn được căn lề). Và nếu bạn muốn chia thành 3 cột thì thêm một đọa code như bên dưới trước dòng

<div style='clear:both;'/> , và chiều rộng mỗi cột bạn đổi lại là 200px.

<div id='main4' style='width: 240px; float: left; margin:0; text-align: left;'>
<b:section class='main-footer-column' id='main-col3' preferred='yes' style='float:left;'/>
</div>

- Về chiều rộng của các cột bạn không nhất thiết phải chỉnh bằng nhau, tùy theo thiết kế của bạn, bạn có thể tùy chỉnh chúng khác nhau, và phải đảm bảo là tổng chiều rộng phải nhỏ hơn độ rộng của main post.
- Ngòai ra để tạo giao diện các cột, bạn có thể thêm các đoạn code CSS cho nó.

6. Save template lại và kiểm tra kết quả.

Trang trí phần Tag (nhãn) đẹp cho Blogger

8:49 AM Blogger, Label, Thủ Thuật Blogger, Tips No comments

Tìm dòng ]]></b:skin> thêm vào trước nó đoạn mã CSS sau :

.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;}

All in One SEO Pack PRO dành cho blogger 2014

5:52 PM Blogger, SEO Blogger, Thủ Thuật Blogger, Tips No comments

1. Đăng nhập vào blogger -> Template -> Edit HTML và tìm đến thẻ <head> xóa các thẻ Meta tags nằm sau nó bao gồm cả
<b:include data=’blog’ name=’all-head-content’/>
<title><data:blog.title/></title>
2. Sau đó copy đoạn code dưới đây vào sau thẻ <head> và chỉnh sửa lại các phần chữ màu xanh, đỏ mình đã tô bên dưới và lưu lại.

Phần chữ màu xanh là phần keyword hiển thị ở trang chủ các bạn thay thế keyword cho phù hợp với website của mình. Thay thế liên kết màu đỏ để đặt author của Google plus của bạn lên và màu xanh lá cây là keyword hiển thị trong bài viết.
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:include data='blog' name='all-head-content'/>


<link href='https://plus.google.com/u/0/117106414769270210232' rel='author'/>

Mặc Định Kích Thước Ảnh Bài Đăng Lên Blogspot

5:43 PM Blogger, Post, Thủ Thuật Blogger, Tips No comments

1. Đăng nhập vào blog
2. Chọn Mẫu
3. Chọn Chỉnh sửa HTML
4. Để cố định hình ảnh hiển thị trong blogger, với hình ảnh to hơn giá trị MAX thì sẽ tự động điều chỉnh về giá trị MAX, nếu ảnh nhỏ hơn giá trị min thì sẽ tự điều chỉnh về kích thước min, bạn đặt trước ]]></b:skin> đoạn mã sau:
.post img { max-width:500px; min-width:200px; padding : 10px; clear: both; }
- Điều chỉnh lại max-with và min-with cho phù hợp với phần bài đăng của bạn nha.

5. Nếu bạn muốn tất cả các hình ảnh hiển thị trong phần bài viết có kích thước cố định là 500 x 400 thì bạn chỉ cần thay thế đoạn code đã hướng dẫn ở trên bằng:
.post img { width:500px; height:400px; padding:10px; }

- Giờ đây các hình ảnh hiển thị trên Blog của bạn có kích thước cố định là chiều rộng 500PX và chiều cao 400PX.

Lưu ý: Nếu hình ảnh hiển thị không như ý hoặc không chính xác thì bạn tìm tag .post img trong Blogger >> Mẫu (Template) >> Chỉnh sửa HTML và chỉnh sửa chúng.

Cách Hiển Thị Bài Viết Mặc Định Ở Trang Chủ Blogger

5:40 PM Blogger, Post, Thủ Thuật Blogger No comments

Một số tùy chỉnh để bạn không muốn blog của mình mặc định hiển thị bài đăng mới nhất ra ngoài trang chủ.

Vậy làm thế nào để thực hiện được cách ẩn bài viết mới nhất ngoài trang chủ blogspot. Thủ thuật dưới đây sẽ hướng dẫn các bạn che đi bài viết mới nhé

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot !

Trước tiên thực hiện bạn phải xác định id của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1".Với một số blog có thể khác. Các bạn xác định theo các bước bên dưới:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed): => Tìm đoạn code sau :

<b:widget id="Blog1" locked="true" title="Bài đăng trên Blog" type="Blog">
Sau đó ta vào: Mẫu (template)chỉnh sửa HTML (Edit HTML) và dán code ngay bên dưới sau thẻ </b:skin>

<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {
display:none;
visibility:hidden;
}
</b:if>
</style>

Chú ý phần chữ màu đỏ phải giống nhau .

Style Thread Comment tuyệt đẹp cho Blogger

5:18 PM Blogger, Comment, Thủ Thuật Blogger No comments

Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin>
d80556 la f màu chủ đạo của Thread Comment
bạn có thể thay đổi nó theo ý muố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/AVvXsEiinvCgKQHZ5yn0U9eA_pTZxREhb-Ya01xOoEtlqsRUX7Ly0P6GQ9JzNpqhUz6zCGFVs8kSRJEdvYY4jtQum8epkXNd5G-5d0yv8cNvzrxFOZ6BpUKeqZYRBB-1x_QCNWCFKyeFPH894xA/);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-e
ditor{width:103%!important} .comment-form{width:100%;max-width:100%}

Tổng hợp cách chèn emoticons cho blogspot

5:10 PM Blogger, Comment, Emoticons, Thủ Thuật Blogger, Tips No comments

1. Chèn Emoticons dạng Kolobok Smileys

Trước khi bắt tay vào thực hiện các bước dưới đây, bạn phải gỡ bỏ hệ thống nhận xét phân cấp (threaded comments) khỏi blog thì các biểu tượng cảm xúc mới thể hiện được.

Bước 1: Dashboard → Template → Edit HTML → Proceed → Expand Widget Template.

Bước 2: Sử dụng tổ hợp phím Ctrl+F để tìm đến khóa </body> và chèn ngay phía trên nó đoạn mã sau đây:

<script src='http://shareallworld.googlecode.com/files/kolobok-smileys.js' type='text/javascript'/><noscript><a href='http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>Chèn emoticons</span></a></noscript> 

Bước 3: Tìm đến đoạn mã <b:loop values='data:post.comments' var='comment'> và chèn ngay trên nó khóa <div id='smileys'>.
Kéo chuột xuống dưới, tìm đến từ khóa </b:loop> (là khóa đóng cho đoạn mã <b:loop values='data:post.comments' var='comment'> ở trên). Ngay sau nó, chèn từ khóa</div> (là khóa đóng cho đoạn <div id='smileys'> mới chèn vào ở trên).

Bước 4: Tìm đoạn code <data:blogTeamBlogMessage/> (bạn có thể tìm thấy 4 đoạn mã như vậy, chọn đoạn thứ 2). Ngay dưới đoạn mã tìm được, bạn chèn đoạn mã sau đây:
<script type='text/javascript'> //<![CDATA[ function moreSmilies() { document.getElementById('smiley-more').style.display = 'inline'; document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Ẩn Emoticons /<a href="http://helplogger.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Chèn Emoticons</div></a></span>'; } function lessSmilies() { document.getElementById('smiley-more').style.display = 'none'; document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Hiện Emoticons</div></a>'; } //]]> </script> <div class='emoticons'> <span id='smiley-more' style='display: none;'> <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/>:) <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/sad3.gif'/>:( <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/laugh.gif'/>:)) <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cray-1.gif'/>:(( <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/rofl-1.gif'/>=)) <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/suicide-1.gif'/>=D> <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/biggrin2.gif'/>:D <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/blum.gif'/>:P <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/shok.gif'/>:-O <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/eusa_think.gif'/>:-? <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/unsure.gif'/>:-SS <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/flowers1-1.gif'/>:-f <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/doh-1.gif'/>d( <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/air_kiss3.gif'/>:-* <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/threaten-1.gif'/>b-( <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/help2.gif'/>h-( <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/good-1.gif'/>g-) <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/beee-1.gif'/>5-p <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/yahoo2-1.gif'/>y-) <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/crazy3-1.gif'/>c-) <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/spiteful.gif'/>s-) <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/drinks-1.gif'/>d-) <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cheer-1.gif'/>w-) <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/hi-1.gif'/>:-h <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/give_heart-1.gif'/>:X </span> <span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Hiện Emoticons <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/></div></a></span> </div>

Bước 5: Tìm đoạn mã ]]></b:skin> và chèn ngay trước nó đoạn mã sau đây:
.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:580px;} .emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}

Bạn có thể thay đổi số 580 để điều chỉnh độ rộng khung chứa các emoticons.

Bước 6: Lưu lại và thưởng thức thành quả của bạn.

2. Chèn Yahoo smiley cho Threaded comments của blogger

Bước 1: Dashboard → Template → Edit HTML → Proceed → Expand Widget Template.

Bước 2: Tìm đoạn mã ]]></b:skin> và chèn ngay trước nó đoạn mã sau đây:
 .ysmiley { background: none repeat scroll 0 0 #EFF5FB !important; font-size: medium !important; padding: 10px !important; text-align: left !important; font-weight:bold !important; font-size:11px !important; margin-top:-35px; } img.bhacksmly { height: auto !important; vertical-align: middle !important; width: auto !important; border:0px !important; } 

Bước 3: Tìm đến đoạn mã dưới đây:
<b:if cond='data:post.allowNewComments'> <b:include data='post' name='threaded-comment-form'/>

và chèn vào giữa 2 dòng mã đó đoạn mã sau đây:
 <div class='ysmiley'> <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :( <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/ <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-* <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =(( <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X( <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7 <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :(( <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :)) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :| <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =)) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =; <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)] <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X( <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7 <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-| <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$ <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-( <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-} <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:| <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~ <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/> <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7 <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):) <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!! <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/ <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd <img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^ <img alt='' class='bhacksmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar! </div> 

Bước 4: Tìm đền khóa </body> và chèn ngay trên đó đoạn mã sau:
 <script src='http://shareallworld.googlecode.com/files/ysmiley_fixed.js' type='text/javascript'/> 

Bước 5: Lưu lại và thưởng thức thành quả của bạn.

3. Chèn 3D smiley động cho Threaded comments

c .
Bước 1: Dashboard → Template → Edit HTML → Proceed → Expand Widget Template.

Bước 2: Tìm đến khóa </body> và ngay trên nó, chèn đoạn mã dưới đây vào:

Bước 1: Dashboard → Template → Edit HTML → Proceed → Expand Widget Template.
Bước 2: Tìm từ khóa </body> và chèn đoạn mã dưới đây ngay trên nó:

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ var emoRange = "#comments p, div.emoWrap", putEmoAbove = "iframe#comment-editor", emoMessage = "Click vào biểu tượng sau đó copy xuống form comment"; //]]> </script> <script type='text/javascript'> //<![CDATA[ // Emoticon bar before comment-form $(function() { $(putEmoAbove) .before('<div style="text-align:center" class="emoWrap"> :) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer (sm) (fu) (ku) (bg) (lol)<br/><b><a href="javascript:openup_parseHTML()" rel="nofollow" title="Mã hóa code trước khi đưa vào bình luận"><span class="text_style">Mã hóa code đưa vào comments</span></a></b></div>'); var emo = function(emo, imgRep, emoKey) { $(emoRange) .each(function() { $(this) .html($(this) .html() .replace(/<br>:/g, "<br> :") .replace(/<br>;/g, "<br> ;") .replace(/<br>=/g, "<br> =") .replace(/<br>\^/g, "<br> ^") .replace(emo, " <img style='max-height:24px' src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />")); }); }; emo(/\s:\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs5EKQMAwaRvK7Gw9aM7RF145r9vKKiwl6hH-PjTadv1w-RStfPdeJjjY4PIjJoEyi_Y3PlBsNDXJNYkXRtoqZIOIX_IyOeZv_tSZvRL9lFhp_uSLfposNfp3xrtbvQqP0j0700KJ1WRI/s36/03.gif", ":))"); emo(/\s;$\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxSF39twGSq3v5jUU78tlDgm_oUpCcjC4bBshZ_PrdwN8OTMrX2rKM0yRj7_VvZObSv7Fk1_f9NTQ-mOqEzqcCC5CWfzoxDcR6XW5qlzUVqEJvoOCKQVJdmc9AKTNSgzQK70b7ET0SRk/s47/06.gif", ";(("); emo(/\s:$+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/01.gif", ":)"); emo(/\s:-\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/02.gif", ":-)"); emo(/\s=\)\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/03a.gif", "=))"); emo(/\s;$+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/04.gif", ";("); emo(/\s;-\(+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/05.gif", ";-("); emo(/\s:d/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/7.gif", ":d"); emo(/\s:-d/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/8.gif", ":-d"); emo(/\s@-$+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/09.gif", "@-)"); emo(/\s:p/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/10.gif", ":p"); emo(/\s:o/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/11.gif", ":o"); emo(/\s:>\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/12.gif", ":>)"); emo(/\s$o$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/13.gif", "(o)"); emo(/\s\[-$+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/14.gif", "[-("); emo(/\s:-\?/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/15.gif", ":-?"); emo(/\s\(p$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/16.gif", "(p)"); emo(/\s:-s/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/17.gif", ":-s"); emo(/\s$m$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/18.gif", "(m)"); emo(/\s8-\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/19.gif", "8-)"); emo(/\s:-t/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/20.gif", ":-t"); emo(/\s:-b/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/21.gif", ":-b"); emo(/\sb-$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/22.gif", "b-("); emo(/\s:-#/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/23.gif", ":-#"); emo(/\s=p~/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/24.gif", "=p~"); emo(/\s\$-$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/25.gif", "$-)"); emo(/\s$b$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/26.gif", "(b)"); emo(/\s$f$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/27.gif'", "(f)"); emo(/\sx-\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/28.gif", "x-)"); emo(/\s$k$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/29.gif", "(k)"); emo(/\s$h$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/30.gif", "(h)"); emo(/\s$c$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/31.gif", "(c)"); emo(/\scheer/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/32.gif", "cheer"); emo(/\s$s\m$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/green29.gif", "(sm)"); emo(/\s$f\u$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby15.gif", "(fu)"); emo(/\s$k\u$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby18.gif", "(ku)"); emo(/\s$b\g$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby21.gif", "(bg)"); emo(/\s$l\o\l$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/yahoo_24.gif", "(lol)"); // Show alert one times! $('div.emoWrap') .one("click", function() { if (emoMessage) { alert(emoMessage); } }); // Click to show the code! $('.emo') .css('cursor', 'pointer') .live("click", function(e) { $('.emoKey') .remove(); $(this) .after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />'); $('.emoKey') .trigger("select"); e.stopPropagation(); }); $('.emoKey') .live("click", function() { $(this) .focus() .select(); }); }); //]]> </script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $('.separator a').attr({'class':'fancy','data-fancybox-group':'gallery'}); $('.fancy') .fancybox({padding: 5, openEffect : 'elastic', openSpeed : 400, closeEffect : 'elastic', closeSpeed : 400, closeClick : true, helpers : {overlay : null}}); }); //]]> </script> </b:if> <b:if cond='data:blog.pageType == "static_page"'> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { $('.separator a').attr({'class':'fancy','data-fancybox-group':'gallery'}); $('.fancy') .fancybox({padding: 5, openEffect : 'elastic', openSpeed : 400, closeEffect : 'elastic', closeSpeed : 400, closeClick : true, helpers : {overlay : null}}); }); //]]> </script> <script type='text/javascript'> //<![CDATA[ var emoRange = "#comments p, div.emoWrap", putEmoAbove = "iframe#comment-editor", emoMessage = "Chọn mặt cười sau đó copy xuống form comment"; //]]> </script> <script type='text/javascript'> //<![CDATA[ // Emoticon bar before comment-form $(function() { $(putEmoAbove) .before('<div style="text-align:center" class="emoWrap"> :) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer (sm) (fu) (ku) (bg) (lol) <br/><b><a href="javascript:openup_parseHTML()" rel="nofollow" title="Mã hóa code trước khi đưa vào bình luận"><span class="text_style">Mã hóa code đưa vào comments</span></a></b></div>'); var emo = function(emo, imgRep, emoKey) { $(emoRange) .each(function() { $(this) .html($(this) .html() .replace(/<br>:/g, "<br> :") .replace(/<br>;/g, "<br> ;") .replace(/<br>=/g, "<br> =") .replace(/<br>\^/g, "<br> ^") .replace(emo, " <img style='max-height:24px' src='" + imgRep + "' class='emo delayLoad' alt='" + emoKey + "' />")); }); }; emo(/\s:\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs5EKQMAwaRvK7Gw9aM7RF145r9vKKiwl6hH-PjTadv1w-RStfPdeJjjY4PIjJoEyi_Y3PlBsNDXJNYkXRtoqZIOIX_IyOeZv_tSZvRL9lFhp_uSLfposNfp3xrtbvQqP0j0700KJ1WRI/s36/03.gif", ":))"); emo(/\s;$\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxSF39twGSq3v5jUU78tlDgm_oUpCcjC4bBshZ_PrdwN8OTMrX2rKM0yRj7_VvZObSv7Fk1_f9NTQ-mOqEzqcCC5CWfzoxDcR6XW5qlzUVqEJvoOCKQVJdmc9AKTNSgzQK70b7ET0SRk/s47/06.gif", ";(("); emo(/\s:$+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/01.gif", ":)"); emo(/\s:-\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/02.gif", ":-)"); emo(/\s=\)\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/03a.gif", "=))"); emo(/\s;$+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/04.gif", ";("); emo(/\s;-\(+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/05.gif", ";-("); emo(/\s:d/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/7.gif", ":d"); emo(/\s:-d/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/8.gif", ":-d"); emo(/\s@-$+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/09.gif", "@-)"); emo(/\s:p/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/10.gif", ":p"); emo(/\s:o/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/11.gif", ":o"); emo(/\s:>\)+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/12.gif", ":>)"); emo(/\s$o$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/13.gif", "(o)"); emo(/\s\[-$+/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/14.gif", "[-("); emo(/\s:-\?/g, "https://huyco-troll.googlecode.com/svn/trunk/smile/15.gif", ":-?"); emo(/\s\(p$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/16.gif", "(p)"); emo(/\s:-s/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/17.gif", ":-s"); emo(/\s$m$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/18.gif", "(m)"); emo(/\s8-\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/19.gif", "8-)"); emo(/\s:-t/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/20.gif", ":-t"); emo(/\s:-b/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/21.gif", ":-b"); emo(/\sb-$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/22.gif", "b-("); emo(/\s:-#/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/23.gif", ":-#"); emo(/\s=p~/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/24.gif", "=p~"); emo(/\s\$-$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/25.gif", "$-)"); emo(/\s$b$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/26.gif", "(b)"); emo(/\s$f$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/27.gif'", "(f)"); emo(/\sx-\)+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/28.gif", "x-)"); emo(/\s$k$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/29.gif", "(k)"); emo(/\s$h$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/30.gif", "(h)"); emo(/\s$c$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/31.gif", "(c)"); emo(/\scheer/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/32.gif", "cheer"); emo(/\s$sm$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/green29.gif", "(sm)"); emo(/\s$f\u$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby15.gif", "(fu)"); emo(/\s$k\u$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby18.gif", "(ku)"); emo(/\s$b\g$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/soldier_baby21.gif", "(bg)"); emo(/\s$l\o\l$+/ig, "https://huyco-troll.googlecode.com/svn/trunk/smile/yahoo_24.gif", "(lol)"); // Show alert one times! $('div.emoWrap') .one("click", function() { if (emoMessage) { alert(emoMessage); } }); // Click to show the code! $('.emo') .css('cursor', 'pointer') .live("click", function(e) { $('.emoKey') .remove(); $(this) .after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />'); $('.emoKey') .trigger("select"); e.stopPropagation(); }); $('.emoKey') .live("click", function() { $(this) .focus() .select(); }); }); //]]> </script> </b:if> <div class='cleared'/> <script type='text/javascript'> function openup_parseHTML() { window.open("http://ma-hoa-trollvl.blogspot.com/", "followblog", "height=700, width=630, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no" ); } </script>

Lưu ý: nếu emoticons không xuất hiện, có thể là do template của bạn thiếu jQuery. Khi đó bạn chèn đoạn mã dưới đây ngay trên thẻ </head>:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
Bước 3: Lưu lại là xong

4/13/14

Tạo nút Back to Top

4/8/14

Cách tạo RSS cho Blog

4/4/14

Chèn quảng cáo Google Adsense...vào bài viết trong Blogger

Thủ thuật tạo Slide bằng JQuery ở trang chủ cho Blogger

4/2/14

Tiện ích share hình trái tim cho blogspot

Chia Post footer thành nhiều cột cho blogspot

Trang trí phần Tag (nhãn) đẹp cho Blogger

3/11/14

All in One SEO Pack PRO dành cho blogger 2014

Mặc Định Kích Thước Ảnh Bài Đăng Lên Blogspot

Cách Hiển Thị Bài Viết Mặc Định Ở Trang Chủ Blogger

Style Thread Comment tuyệt đẹp cho Blogger

Tổng hợp cách chèn emoticons cho blogspot

Labels

Blog Archive

Contact

Text link

Total Pageviews

4/13/14

4/8/14

4/4/14

4/2/14

3/11/14

Social Profiles

Labels

Blog Archive

Contact

Text link

Total Pageviews