Mẫu cơ bản của Blog cần lưu giữ thiết kế Template

Seo như một đòn bẫy, muốn có sức bật tốt hơn cần phải Seo. Tất nhiên bạn có thể phải làm tới làm lui nhiều lần để có được một Blogger có thiết kế tốt. Bất luận vì ly do gì, cẩn thận, chu đáo và có giá trị hữu ích cũng đều mang lại cho chúng ta một niềm vui.

Nguyên tắc trình bày:

1. Tên Blog có nghĩa là bút danh, không hề thay đổi: KhanhNguyen's Blog
2. Từ trên xuống, từ trái qua phải.
3. Chỉ lưu giữ các Widget không liên quan đến Source trong Template căn bản
4. Màu sắc hoa văn, banner không thay đổi nữa.
5. Vẫn giữ 2 cột, 3 chân và trang Body ở giữa.
6. Lúc nào cũng phải giữ trang Post màu trắng, chữ màu đen
7. Còn lại, các trình tự khác như:

.Rút gọn trang chủ, tạo lập nút lệnh Read more

• Thiết kế kiểu cách phân trang
• Thiết kế khung Comments với nền viền đen, rộng. có đủ các lệnh Add Comments, Cancel Comments.
• Sử dụng Comments không cần Comments của Google+
• Add Comments của FaceBook, sử dụng đồng hành cả Google và FaceBook
• Các nút like và Share Social nhiều ứng dụng.
• Back to top lên và xuống phù hợp
• Các phương tiện quản lý bài Post: bài đăng phổ dụng, bài đăng gần đây, bài đăng ngẫu nhiên, bài đăng có liên quan(cùng một tag), nhóm bài đăng trong mối liên kết cần tham khảo(tự tao)
• Các Comments cần tạo lập: Comments gần đây, số lượng Comments cho mỗi bài viết, độc giả có nhiều comments nhất.
• Phản ứng thể hiện như trên Blog spot
• Trang liên kết quản lý các Back line

Source Code lưu trữ lại như sau:
1. Bài đăng hiển thị 2 cột, dạng cột báo, có hình và nội dung tóm tắt, mỗi bên 5 bài = 10 bài, có phân trang từng 10bài/ trang

<!--2 Column Sitemap by kjmagic.blogspot.com-->
<style scoped="" type="text/css">
#toc-outer {
  color:black;
  font:normal 11px/14px Arial,Sans-Serif;
  height:auto;
  margin:0 auto;
  overflow:hidden;
  padding:0;
  text-align:left;
}
#loadingscript {
  padding:0px 0px;
  height:37px;
  text-indent:-9999px;
  color:transparent;
  background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp
/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAA
AEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQs
ADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwA
ABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh
+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSM
q03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAA
Q9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVE
qmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJS
MQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAA
AEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%;
}
.itemposts {
    float: left;
    height: auto;
    overflow: hidden;
    width: 47%;
    box-shadow: 1px 1px 5px #C3C3C3;
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #FFF;
    margin: 3px 5px 8px;
    padding: 0px 3px;
}
.itemposts h6 {
    border-bottom: 1px solid #CCC;
    color: #333;
    font: bold 12px Arial;
    height: 15px;
    overflow: hidden;
    text-transform: none;
    margin: 0px 0px 5px;
    padding: 2px 6px !important;
}
.itemposts h6 a{color: red;}
.itemposts h6 a:hover {
  color:#38f;
  text-decoration:none;
}
.itemposts img {
  background-color:#fff;
  border:1px solid #ccc;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  float:left;
  height:65px;
  margin:0 7px 5px 0;
  padding:3px;
  width:65px;
  z-indent:99999px;
}
.itemposts .iteminside {}
.itemposts .itemfoot {
    border-top: 1px solid #CCC;
    clear: both;
    overflow: hidden;
    padding: 4px 5px;
}
.itemposts .itemfoot a.itemrmore {
  color:#333;
  float:right;
  font-weight:bold;
  text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}
#itempager {
  clear:both;
  padding:10px 0;
}
#pagination,
#totalposts {
  color:#000;
  display:block;
  font:bold 10px Verdana,Arial,Sans-Serif;
  margin-bottom:10px;
  text-align:center;
  padding:0;
}
#pagination span, #pagination a {
    color: #FFF;
    display: inline;
    margin: 0px 1px;
    padding: 2px 5px;
    text-indent: 0px;
    background-color: #068BC9;
    background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);
    border: 1px solid #3161C2;
    text-decoration: none;
    border-radius: 10px;
}
#pagination a:hover {background-color:#333}
#pagination span.actual {background-color:black}
#pagination span.hidden {display:none}
</style>
<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "Blogspot-tips",
    loadingText    = "Loading...",
    totalPostLabel = "Tổng số bài viết:",
    jumpPageLabel  = "page",
    commentsLabel  = "comment",
    rmoreText      = "Chi tiết►",
    prevText       = "previous",
    nextText       = "next",
    siteUrl        = "http://ngdkhanh.blogspot.com/",
    postPerPage   = 10,
    numChars       = 150,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAA
A3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="http://yourjavascript.com/2812562314/kjmagic-2col-sitemap.js"></script>
<!--/2 Column Sitemap by kjmagic.blogspot.com-->

2. Bài đăng dạng trượt ngang có hình và thông tin tóm tắt.

<style type="text/css">
#slidearea {
height: 210px;
overflow: hidden;
margin: 0px 10px 0 10px;
position: relative;
width: 960px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg74tgpfe96uR1hX0oikPNXKXukXaQLTB8xOB7d3VDPD08eRt3Yvqgm5yglUWeIwtMPsropcsSjT0PJ7RvRwBJ3Kf3ODS6BfmzC78WyL2ygfyMNKpJqeiOj-ZrLwT0E3hSlkf-dGZEruFx8/
/slider.png) no-repeat;
}
#gallerycover {
overflow: hidden;
margin: 15px 30px 0 30px;
width: 980px;
}
.mygallery {
overflow: hidden;
visibility: visible;
position: relative; z-index: 2;
left: 0px;
width: 980px;
}
.mygallery ul {
margin:0;
padding:0;
position: relative;
list-style-type: none;
z-index: 1;
width: 2700px;
left: -1620px;
}
.mygallery ul li {
overflow: hidden;
float: left;
width: 170px;
height: 210px;
}
.mytext {
position: relative;
margin: 0 5px 0 5px;
width: 170px;
height: 210px;
display: inline;
float: left;
color: #C4C4C4;
}
.mytext p {
padding: 0 0;
color: #555;
font-size: 12px;
line-height: 20px;
width: 170px;
text-shadow: 1px 1px 0 #F6F6F6;
}
.mytext h2 {
padding: 5px 0;
color: black;
width: 170px;
font-size: 14px;
font-weight: bold;
}
.mytext h2 a:link, .mytext h2 a:visited {
color: black;
text-decoration: none;
outline: none;
}
.mytext h2 a:hover {color:#888;}
img.sidim {
width: 170px;
height: 100px;
}
.prevb {
float: left;
width: 20px;
height: 35px;
z-index: 200;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIj624sttDd5Kd_8JkXXmI0PLj1LnxwkorJI0hyphenhyphenjCRK8Ysa3jI65KkXWq7gxZn6I31XOz7NoVOsuRCOTTSRIEqNDzPEP_Q62Gmlx7CTheaR7QJlJQKEHXlT9sd8sMgvnnhmEj0AFm0ycvw/
/prev.png)!important;
position: absolute;
left: 5px;
bottom: 110px;
}
.nextb {
float: right;
width: 20px;
height: 35px;
z-index: 200;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHxHzIoHWN2zOm0GtihvP3DEbUyEXZB7gXheG3GCHwtC_C1KT9fjtuuem_Qmn4rtjIvY-23RATXHuOUhN90PRAaP8HGMjp9OO_b9bfQi_07gNhKTnHaEvFIdyhH-epK-6ZhyphenhyphenhduilAPMYU/
/next.png)!important;
position: absolute;
right: 5px;
bottom: 110px;
display: block;
}
</style>
<script src="http://fandung.googlecode.com/svn/trunk/js/slide-mygallery.js" type="text/javascript"></script>
<script stype="text/javascript">
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 5,
auto: 3000,
speed: 1000,
easing: "backout"
});
});
</script>
<div id="slidearea">
<div id="gallerycover">
<div class="mygallery">
<ul>
<script type="text/javascript">
var mode = "all";
var g_numposts = 30;
var g_numcontents = 15;
var g_label="B-advance";
var homepage="http://ngdkhanh.blogspot.com/";
</script>
<script src="http://fandung.googlecode.com/svn/trunk/js/feed-mygallery.js" type="text/javascript"></script>
</ul>
<div class="clear"></div>
</div>
</div>
<a class="prevb" href="http://www.google.com/imgres?imgurl=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkBEAyr2RVGzlQXeiBtyYvLNXUSBB-vsn_R81_lZMhhbD3pXYlEp1_2QKM0IS6BgZz33cNTfLL9FAjP4P8P8eQm-YVZLpCPXUKOwOlH-rHieRpdR5e5yQ4W9sxMEN3ZHGMIeoCDDiLEHU/s1600/anh%252Bdep%252Bavatar%252B1.jpg&imgrefurl=http://www.cuois2.com/2014/04/hinh-anh-dep-avatar-ngo-nghinh-de-thuong.html&h=400&w=600&tbnid=-F09CAxLGCfQOM:&docid=XGgofrsZv9Zx2M&ei=
50hPVvb3OInJmwGl9K-YBQ&tbm=isch&ved=0ahUKEwi2h9TRtJ_JAhWJ5CYKHSX6C1M4rAIQMwgkKCEwIQ"></a>
<a class="nextb" href="#"></a>
</div>

3. menu popup xổ xuống màu xanh da trời, bo góc:

Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
 #btrix_litemenu { 
 width:800px; 
 background:#166bea;  
 border-bottom: 5px solid #993300;  
 border-top: 1px solid #e14d09;  
 clear: both;  
 overflow: hidden;  
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;

border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;

 }  
 #btrix_litemenu ul {  
 float: left;  
 width: 100%;  
 }  
 #btrix_litemenu li {  
 float: left;  
 list-style-type: none;  
 }  
 #btrix_litemenu li a {  
 background:#166bea;  
 color: #fff;  
 display: block;  
 font-size: 14px;  
 padding: 5px 17px 5px 15px;  
 position: relative;  
 text-decoration: none;  
 }  
 #btrix_litemenu li a:hover {  
 background:#002660;  
 color: #fff;  
 }  
 #btrix_litemenu li li a {  
 background: none;  
 background-color: #0d56c4;  
 border: 1px solid #0d408d;  
 border-top-width: 0;  
 color: #fff;  
 font-size: 14px;  
 padding: 5px 10px;  
 position: relative;  
 text-transform: none;  
 width: 130px;  
 }  
 #btrix_litemenu li li a:hover {  
 background: none;  
 background-color: #166bea;  
 }  
 #btrix_litemenu li ul {  
 height: auto;  
 left: -9999px;  
 margin: 0 0 0 -1px;  
 position: absolute;  
 width: 160px;  
 z-index: 9999;  
 }  
 #btrix_litemenu li:hover ul {  
 left: auto;  
 }  

Go to blogger and click Layout

Click Add Gadget and select 'HTML/Javascript với source như sau

Bài đăng dạng trượt ngang có hình và thông tin tóm tắt.

<div id="btrix_litemenu">
<li><a href="http://ngdkhanh.blogspot.com/">Trang chủ</a></li>
<li><a href="#">Site map</a> 
 <ul>
<li><a href="http://ngdkhanh.blogspot.com/2015/11/site-map-my-blogspot.html">Xem dạng bảng</a></li>
<li><a href="http://ngdkhanh.blogspot.com/2015/12/site-map-dang-popup-xo-xuong-cua-toi.html">Xem dạng thẻ</a></li>
<li><a href="http://ngdkhanh.blogspot.com/2014/03/ma-html.html">Xem dạng List</a></li>
</ul>
</li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/B%C3%A0i%20vi%E1%BA%BFt%20c%E1%BB%A7a%20t%C3%B4i">Bài viết của tôi</a></li>

<li><a href="#">IT Computer NetWorking</a> 
 <ul>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Blogger%20t%E1%BB%95ng%20quan">Tổng quan Blogger</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt%20Blogger">Kỹ xão Blog</a></li>

<li><a href="http://ngdkhanh.blogspot.com/search/label/FaceBook">FaceBook</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/K%E1%BB%B9%20thu%E1%BA%ADt%20tin%20h%E1%BB%8Dc">Kỹ thuật tin học</a></li>
</ul>
</li>
<li><a href="#">Văn hóa xã hội</a> 
 <ul>
<li><a href="http://ngdkhanh.blogspot.com/search/label/v%C4%83n%20h%C3%B3a%20ngh%E1%BB%87%20thu%E1%BA%ADt">Văn hóa xã hội</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/V%E1%BA%A5n%20%C4%91%E1%BB%81%20t%C3%A2m%20linh">Vấn đề tâm linh</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/tri%E1%BA%BFt%20h%E1%BB%8Dc%20v%C3%A0%20t%C3%B4n%20gi%C3%A1o">Triết học và tôn giáo</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/l%E1%BB%8Bch%20s%E1%BB%AD">Lịch sử</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/s%E1%BB%A9c%20kh%E1%BB%8Fe">Sức khỏe</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/th%E1%BB%9Di%20s%E1%BB%B1">Thời sự</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/b%C3%AD%20%E1%BA%A9n%20trong%20t%E1%BB%B1%20nhi%C3%AAn">Bí ẩn trong tự nhiên</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/%E1%BA%A9m%20th%E1%BB%B1c">ẩm thực</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/T%C3%A2m%20l%C3%BD%20x%C3%A3%20h%E1%BB%99i">Tâm lý xã hội</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Khoa%20h%E1%BB%8Dc%20%26%20V%C5%A9%20tr%E1%BB%A5">Khoa học và vũ trụ</a></li>
<li><a href="#">Kinh tế tài chánh</a></li>
</ul>
</li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Th%E1%BB%9Di%20trang">Thời trang</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/T%C3%A2m%20l%C3%BD%20x%C3%A3%20h%E1%BB%99i">Tâm lý xã hội</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/v%C4%83n%20h%E1%BB%8Dc%20ngh
%E1%BB%87%20thu%E1%BA%ADt">Văn học nghệ thuật</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Danh%20lam%20th%E1%BA%AFng%20c%E1%BA%A3nh">Danh lam thắng cảnh</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Doanh%20nh%C3%A2n">Doanh nhân</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Th%E1%BA%BF%20gi%E1%BB%9Bi%20%C4%91%E1%BB%99ng%20v%E1%BA%ADt">Thế giới động vật</a></li>

<li><a href="#">Truyện và thơ</a> 
 <ul>
<li><a href="http://ngdkhanh.blogspot.com/search/label/B%E1%BA%A7u%20r%C6%B0%E1%BB%A3u%20t%C3%BAi%20th%C6%A1">Bầu rượu túi thơ</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Truy%E1%BB%87n%20c%E1%BB%A7a%20nhi%E1%BB%81u%20t%C3%A1c%20gi%E1%BA%A3">Truyện của nhiều tác giả</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Truy%E1%BB%87n%20c%E1%BB%95%20t%C3%ADch">Truyện cổ tích</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/B%C3%A0i%20vi%E1%BA%BFt%20s%C6%B0u%20t%E1%BA%ADp">Bài viết sưu tập</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Ph%E1%BA%ADt%20ph%C3%A1p%20ch%C6%A1n%20kinh">Phật giáo</a></li>
</ul>
</li>
</div>

 4. Multi tab có 3 khung quản lý, mới tạo được 2, hoạt động 1:

<div id="btrix_litemenu">
<li><a href="http://ngdkhanh.blogspot.com/">Trang chủ</a></li>
<li><a href="#">Site map</a> 
 <ul>
<li><a href="http://ngdkhanh.blogspot.com/2015/11/site-map-my-blogspot.html">Xem dạng bảng</a></li>
<li><a href="http://ngdkhanh.blogspot.com/2015/12/site-map-dang-popup-xo-xuong-cua-toi.html">Xem dạng thẻ</a></li>
<li><a href="http://ngdkhanh.blogspot.com/2014/03/ma-html.html">Xem dạng List</a></li>
</ul>
</li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/B%C3%A0i%20vi%E1%BA%BFt%20c%E1%BB%A7a%20t%C3%B4i">Bài viết của tôi</a></li>

<li><a href="#">IT Computer NetWorking</a> 
 <ul>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Blogger%20t%E1%BB%95ng%20quan">Tổng quan Blogger</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt%20Blogger">Kỹ xão Blog</a></li>

<li><a href="http://ngdkhanh.blogspot.com/search/label/FaceBook">FaceBook</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/K%E1%BB%B9%20thu%E1%BA%ADt%20tin%20h%E1%BB%8Dc">Kỹ thuật tin học</a></li>
</ul>
</li>
<li><a href="#">Văn hóa xã hội</a> 
 <ul>
<li><a href="http://ngdkhanh.blogspot.com/search/label/v%C4%83n%20h%C3%B3a%20ngh%E1%BB%87%20thu%E1%BA%ADt">Văn hóa xã hội</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/V%E1%BA%A5n%20%C4%91%E1%BB%81%20t%C3%A2m%20linh">Vấn đề tâm linh</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/tri%E1%BA%BFt%20h%E1%BB%8Dc%20v%C3%A0%20t%C3%B4n%20gi%C3%A1o">Triết học và tôn giáo</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/l%E1%BB%8Bch%20s%E1%BB%AD">Lịch sử</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/s%E1%BB%A9c%20kh%E1%BB%8Fe">Sức khỏe</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/th%E1%BB%9Di%20s%E1%BB%B1">Thời sự</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/b%C3%AD%20%E1%BA%A9n%20trong%20t%E1%BB%B1%20nhi%C3%AAn">Bí ẩn trong tự nhiên</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/%E1%BA%A9m%20th%E1%BB%B1c">ẩm thực</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/T%C3%A2m%20l%C3%BD%20x%C3%A3%20h%E1%BB%99i">Tâm lý xã hội</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Khoa%20h%E1%BB%8Dc%20%26%20V%C5%A9%20tr%E1%BB%A5">Khoa học và vũ trụ</a></li>
<li><a href="#">Kinh tế tài chánh</a></li>
</ul>
</li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Th%E1%BB%9Di%20trang">Thời trang</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/T%C3%A2m%20l%C3%BD%20x%C3%A3%20h%E1%BB%99i">Tâm lý xã hội</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/v%C4%83n%20h%E1%BB%8Dc%20ngh
%E1%BB%87%20thu%E1%BA%ADt">Văn học nghệ thuật</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Danh%20lam%20th%E1%BA%AFng%20c%E1%BA%A3nh">Danh lam thắng cảnh</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Doanh%20nh%C3%A2n">Doanh nhân</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Th%E1%BA%BF%20gi%E1%BB%9Bi%20%C4%91%E1%BB%99ng%20v%E1%BA%ADt">Thế giới động vật</a></li>

<li><a href="#">Truyện và thơ</a> 
 <ul>
<li><a href="http://ngdkhanh.blogspot.com/search/label/B%E1%BA%A7u%20r%C6%B0%E1%BB%A3u%20t%C3%BAi%20th%C6%A1">Bầu rượu túi thơ</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Truy%E1%BB%87n%20c%E1%BB%A7a%20nhi%E1%BB%81u%20t%C3%A1c%20gi%E1%BA%A3">Truyện của nhiều tác giả</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Truy%E1%BB%87n%20c%E1%BB%95%20t%C3%ADch">Truyện cổ tích</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/B%C3%A0i%20vi%E1%BA%BFt%20s%C6%B0u%20t%E1%BA%ADp">Bài viết sưu tập</a></li>
<li><a href="http://ngdkhanh.blogspot.com/search/label/Ph%E1%BA%ADt%20ph%C3%A1p%20ch%C6%A1n%20kinh">Phật giáo</a></li>
</ul>
</li>
</div>


<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #eee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px;
 text-decoration: none; font-family: "Arial", Serif;
font-size: 11px; font-weight: 900; color: #000000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 250px;" class="TTs"> <a>Calenda</a> <a>Random Post</a> <a>Recent Comments</a></div>
<div style="width: 250px; height: 270px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
<embed allowscriptaccess="always" flashvars="bannerWidth=230&amp;bannerHeight=100&amp;bannerSID=http://img.uu1001.cn/x3
/2011-11-10/06-54/2011-11-10_1ddc0b2b56b24e3c38dfb39a7d04f97d_0.xml&amp;bannerXML=&amp;bannerLink=http%3A%2F%2F&amp;dataSource=&amp;bid=26402587&amp;appSource=default" id="26402587" name="26402587" quality="high" src="http://img.uu1001.cn/bcv3.swf?v=20111012" type="application/x-shockwave-flash" wmode="transparent" height="100" width="230">
</embed>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWDOCOWg4e6W9MdzJs-tH7BgSZ-lTWTo08iqZSNu1BP2U00NC6nUt7hTsgmK-VC5S87rfhTWEJNpkBhyphenhyphen_tBdw7iWgWB290IqP-AgxT6XsIaGe5Us5GcH6Gk6gsvL7G7DjZla0onCYgFlpd/s1600/images+%25281%2529.jpe" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWDOCOWg4e6W9MdzJs-tH7BgSZ-lTWTo08iqZSNu1BP2U00NC6nUt7hTsgmK-VC5S87rfhTWEJNpkBhyphenhyphen_tBdw7iWgWB290IqP-AgxT6XsIaGe5Us5GcH6Gk6gsvL7G7DjZla0onCYgFlpd/s200/images+%25281%2529.jpe" width="200" /></a></div>
<br />
<br />
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>

<div id="random-posts"></div>
<script type="text/javascript">
function getRandomPosts(json) {
    var maxEntries = 10;
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
    indexPosts.sort(function() {return 0.5 - Math.random()});
    if (maxEntries > numPosts) {
        maxEntries = numPosts;
    }
    var container = document.getElementById('random-posts');
    var ul = document.createElement('ul');
    for (i = 0; i < maxEntries; ++i) {
        var entry = json.feed.entry[indexPosts[i]];
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.title = entry.title.$t;
        for (var j = 0; j < entry.link.length; ++j) {
            if (entry.link[j].rel == 'alternate') {
                a.href = entry.link[j].href;
                break;
            }
        }
        a.appendChild(document.createTextNode(entry.title.$t));
        li.appendChild(a);
        ul.appendChild(li);
    }
    container.appendChild(ul);
}
</script>
<script src="http://ngdkhanh.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>


</div>
</div>
<div class="Halamans">
<div class="Alas">
<br/>

<style type=text/css>
ul.nxmoi {
padding: 0;
list-style: none;
}
ul.nxmoi li {
margin-bottom: 10px;
border-bottom: 1px dashed #d2d2d2;
padding-bottom: 10px;
}
</style>
<script>//<![CDATA[
var sl_nhanxet = 7,
    kt_nhanxet = 100;
// Recent Comment
function nhanxetmoi(json) {
    var entry, commurl, commsum;
    document.write('<ul class="nxmoi">');
    for (var i = 0; i < sl_nhanxet; i++) {
        entry = json.feed.entry[i];
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
                commurl = entry.link[k].href;
                break;
            }
        }
        commsum = ("content" in entry) ? entry.content.$t : ("summary" in entry) ? entry.summary.$t : "";
        commsum = commsum.replace(/<.*?>/g, "");
        if (commsum.length > kt_nhanxet) commsum = commsum.substring(0, kt_nhanxet) + "...";
        document.write('<li><strong><a rel="nofollow" href="' + commurl + '">' + entry.author[0].name.$t + ':</a></strong> <span>' + commsum + '</span></li>');
    }
    document.write('</ul>');
}
//]]></script>
 <script src='http://www.kslzone.net/feeds/comments/summary?alt=json-in-script&amp;callback=nhanxetmoi'></script>

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>

5. Label quản lý youtube Liên khúc Ngọc Lan

<iframe allowfullscreen="" frameborder="1" height="120" src="//www.youtube.com/embed/gUCl0LZ4th0" width="210"></iframe>

6. Google Translate có sử dụng source đã khai báo ID:

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', multilanguagePage: true, gaTrack: true, gaId: 'UA-50780051-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

7. Bài đăng ngẫu nhiên dạng thẻ nhiều màu tự động có đánh số:

<style type="text/css">
.noop-random-posts ul li {
    list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li
+ li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child
+ li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><a href="http://ngdkhanh.blogspot.com/" style="font-size:0pt">Blogger Widgets</a>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>

 9. Tạo các nút Like and Share Social networking



Social Blogspot

<style type="text/css">
   #Share {position:fixed; top:35%; left:0%; background-color:#2AA4CF;padding:2px;z-index:10;border-bottom-right-radius:5px;border-top-right-radius:5px;}
   #Share .Sharebutton {float:left;clear:both;}
</style>
<div id='Share'>
   <div style="margin:4px;">
      <div class='Sharebutton' id='facebook'>
         <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
         <fb:like layout='box_count' show_faces='false'></fb:like>
      </div>
      <br />
      <div class='Sharebutton' id='google'>
         <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
         <g:plusone size="tall"></g:plusone>
      </div>
  <div class='Sharebutton' id='twitter'>
         <a class="twitter-share-button"  href="https://twitter.com/share" data-count="vertical">
Tweet </a>
  <script type="text/javascript" async src="//platform.twitter.com/widgets.js"></script>
      </div>
   </div>
</div>

10. Feed Back app developements:

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;

margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script style='text/javascript' src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/recentpostticker.js" ></script>
<script style='text/javascript' src='http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/recentpostswiththumbnailsv3.js'></script>
<script style='text/javascript'>
var numposts = 6;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = false;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 4000,
showItems: 5,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://ngdkhanh.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

11. Feedburner đã có ID:

<script src="http://feeds.feedburner.com/blogspot/wrTvv?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/blogspot/wrTvv"></a><br/>Powered by FeedBurner</p> </noscript>

12. Quản lý bài Post gần đây, trình bày dạng báo chí, chỉ có 5 hình và tóm tắt nội dung

<style type="text/css">   
#cotent-news {    
border:#999 solid 1px;    
width: 870px;      }    
#top-news {    
width: 440px;     
height:166px;       padding:5px;    
border:#bbb solid 2px;    
background:#fff;    
font-size:12px;    
}    
#bottom-news {    
width: 444px;      padding:5px;    
}    
#bottom-news-item {    
width: 106px;    
margin-right:5px;    
float:left;    
}    
#left-news {  
width: 200 px; 
padding:5px;    
border-left:2px dotted #ccc;    
}    
</style>    
<script language="JavaScript">    
imgr = new Array();    
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJv16CpFmxZ_t8_KMOC8PYBdISNiZA6k9s65pWy8ngvVJext362hUWOgOrVWDhvH84QUOf-7XuHNirmm1cQJtXzDuRMB3WwKdIMTbuRd-SqNO4ZDXskrDqTOIok560eWRlSxiglKuUR7GC/s1600/nothumbnail-bai-viet-kgong-anh-namkna-ngoctra.gif";    
imgico= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGjq0jHeq2DCiY7pEiUZ9YekqbyvnBhCn_yM3tPf5W7qZSAfxSbCdQZMCz5ap2H9TM6egjeiMmHnV1rhksXpWKjPJ1OKTmZSbF0r1YCHOUJwj67tP4JrNjFsbHl3v9ruU7BUPDzuXwMT_A/s1600/icom-left-news-namkna-ngoctra.gif";    
showRandomImg = true;    
topwidth = 160;     
topheight = 160;    
botheight = 100;     
botwidth = 100;    
fntsize = 12;    
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"    
acolor = "#9fc5e8";    
cmcolor = "#9fc5e8";    
topcolor = "#fff";    
aBold = true;    
text = "comments";    
showPostDate = true;    
summaryPost = 250;    
summaryFontsize = 12;    
summaryColor = "#fff";    
botnum = 4;    
numposts = 23;    
label = "Blogger";
home_page = "http://ngdkhanh.blogspot.com/";    
</script>    
<script src="http://thietkewebplus.googlecode.com/files/vne-recent-adv-all-posts.txt" type="text/javascript"></script>

13. Chương mục quản lý thủ thuật Blogger

<div class="related-post" id="related-post" style="background-color: whitesmoke; border: 4px solid rgb(192, 212, 228); box-sizing: border-box; color: #ffffff; font-family: Roboto, sans-serif; height: 375px; line-height: 14px; margin: 15px 0px; padding: 10px; width: 370;">
<h4 style="box-sizing: border-box; font-size: 20px; line-height: 1.2; margin: 0px 0px 0.5em;">
<div style="clear: both; margin: 5px;">
<span style="color: #cc0000;">Chương mục Blogger - Blogspot</span><br />
<a href="http://ngdkhanh.blogspot.com/2015/11/tan-man-cuoi-tuan-31102015.html" target="_blank"><span style="font-size: 12px;color: Black;">Blogger và các ứng dụng Social</span></a><br />
<a href="http://ngdkhanh.blogspot.com/2014/11/thiet-ke-trang-tri-co-ban-cho-blogger.html" target="_blank"><span style="font-size: 12px;color: Black;">Thiết kế cơ bản cho Blogger</span></a><br />
<a href="http://ngdkhanh.blogspot.com/2014/09/huong-dan-nhanh-lap-trinh-voi-google-go.html" target="_blank"><span style="font-size: 12px;color: Black;">Thủ thuật Css3 trong Blogger</span></a><br />
<a href="http://ngdkhanh.blogspot.com/2014/07/chuong-muc-cuoi-gio-07072014.html" target="_blank"><span style="font-size: 12px;color: Black;">Thiết kế  các Widget tiện ích</span></a><br />
<a href="http://ngdkhanh.blogspot.com/2014/07/chuong-muc-gioi-thieu-07072014.html" target="_blank"><span style="font-size: 12px;color: Black;">Thiết kế Template và kiến thức cơ bản</span></a><br />
<a href="http://ngdkhanh.blogspot.com/2014/07/chuong-muc-gioi-thieu-02072014.html" target="_blank"><span style="font-size: 12px;color: Black;">Kiến thức SEO và các kỹ năng</span></a><br />
<a href="http://ngdkhanh.blogspot.com/2014/06/chuong-muc-cuoi-gio-28062014.html" target="_blank"><span style="font-size: 12px;color: Black;">Phân trang và thu gọn bài trong Blog</span></a><br />
<a href="http://ngdkhanh.blogspot.com/2014/05/noi-niem-cuoc-song-trang-chu.html" target="_blank"><span style="font-size: 12px;color: Black;">Thiết kế quản lý bài đăng cho Blogspot</span></a><br />
<a href="http://ngdkhanh.blogspot.com/2013/11/muon-van-chu-vi-sao.html" target="_blank"><span style="font-size: 12px;color: Black;">Nhóm lệnh Comments Blogger</span></a><br />
<a href="http://ngdkhanh.blogspot.com/2013/08/multimedia-phuong-vi.html" target="_blank"><span style="font-size: 12px;color: Black;">Thiết kế menu danh mục cho Blogger</span></a><br />
<a href="http://ngdkhanh.blogspot.com/2015/12/gioi-thieu-co-ban-nhat-ve-blogspot.html" style="color: #ff7fa9;"><img class="sidim" height="89" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguNIr0HPEhF0LCgkIQ9u8NZEV0gsfA7AFYmSjpKgEG62yZU2mSm-BEvF6NQVhkDxyYh2ECSh2yOyJOmR_PITrel32Q0ZaTl3FSdc2glYgdUfYYpHKaV6fhKVIeIB7GHHGlOwsSAQknmcM/s320/Logo+blogger.png" width="320" /></a></div>
</h4>
</div>
<div expr:id="&quot;aim1&quot; + data:post.id">
&nbsp;</div>
<div style="clear: both; margin: 5px;">
&nbsp;</div>

14. Nút Search Box trên phải Blogger

<!-- Noop Google search box -->
    <div class='noop-searchbox' id='noop-searchbox'>
      <form action='/search' id='noop-searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
        <button id='sbutton' type='submit'>
          <span id='simg'/>
        </span></button>
      </form>
    </div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ZWTvsoo69DWD2SPT-1EpS1UYOQrJxeiwXvxJ9IkfPuEIUVSAMRzcj6fgilZE4x1s4VDjA9P8MjVHkCIUPIRIdRw5b7H465oJoUfi3PgttDtU0cYD9apiXjRCujIZjfuwodHmCLUO8gQ/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
<!-- Noop Google search box -->

15. Email box:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/wrTvv', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="blogspot/wrTvv" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

16. Quản lý số lượng độc giả đang theo dõi:

<style type="text/css">
.note{background:#FFFFFF url(http://goo.gl/w4a2f) repeat-x 0 0;color:#796100;width:83%;font-weight:normal;padding:13px 15px 0;margin-bottom:2.5em;border:1px solid #E1B500;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.4);box-shadow:1px 1px 2px rgba(0,0,0,.4);position:relative;left:34px}.note p{margin-bottom:1.5em}.note p:last-child{margin-bottom:0}.note ul{margin-left:8px;margin-bottom:1.5em}.note ul:last-child{margin-bottom:0}.note li{background:url(http://goo.gl/6kexs) no-repeat 0 -95px;list-style-type:none;padding-left:18px;margin-bottom:.75em}.note h5{font-size:14px;font-weight:bold;margin:0 0 .65em}.note span{background:url(http://goo.gl/6kexs) no-repeat 100% 0;width:33px;height:40px;position:absolute;left:-34px;top:9px}
</style><br /><div class="note" text-align: cemter;><h5>SỐ lượng khách đang theo dõi:<script id="_waux0z">var _wau = _wau || []; _wau.push(["classic", "zjgr1yda2hvt", "x0z"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
</h5><span></span></div>

17. Chân trang, quyền tác giả.:

<table class="reference notranslate" style="background-color: white; border-

collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #404040; 

font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; line-height: 2; margin-bottom: 1px; width: 970px;"><tbody style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box;"> <tr style="background-color: #f1f1f1; box-sizing: border-box;"><th style=

"background-color: #555555; border: 1px solid rgb(85, 85, 85); box-sizing: 

border-box; color: white; font-weight: 400; padding: 3px; vertical-align: top; 

width: 404px;">Copyright © 2014 -&nbsp;<a href="http://ngdkhanh.blogspot.com/" 

target="_blank"><span style="color: #3d85c6;">KhanhNguyen's Blog</span></a>

 - All Rights Reserved 
<br />
<div style="float: right; text-align: right;">
</div>
</th><th style="background-color: #555555; border: 1px solid rgb(85, 85, 85); 

box-sizing: border-box; color: white; font-weight: 400; padding: 3px; vertical-

align: top; width: 403px;">Design by Khanh Nguyen</th></tr>
</tbody></table>
<span style="background-color: white; color: #333333; font-family: &quot;roboto&

quot; , sans-serif; line-height: 26px;"></span><br />

18. Youtube Tây du ký

<style type="text/css">
            * html div#fl813691 {position: absolute; overflow:hidden;
            top:expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop
            +(documentElement.clientHeight-this.clientHeight)
            : document.body.scrollTop
            +(document.body.clientHeight-this.clientHeight));}
            #fl813691{font: 12px Arial, Helvetica, sans-serif; color:#666; position:fixed; _position: absolute; right:0; bottom:0; height:150px; }
            #eb951855{ width:279px; padding-right:7px; background:url(http://img98.imageshack.us/img98/9400/rightp.gif) no-repeat right top;}
            #cob263512{background:url(http://img205.imageshack.us/img205/2176/fulld.gif) no-repeat left top; height:150px; padding-left:7px;}
            #coh963846{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:277px;}
            #coh963846 a{color:#690;text-decoration:none;}
            #coc67178{float:right; padding:0; margin:0; list-style:none; overflow:hidden; height:15px;}
                        #coc67178 li{display:inline;}
                        #coc67178 li a{background-image:url(http://img205.imageshack.us/img205/9837/closebutton.gif); background-repeat:no-repeat; width:30px; height:0; padding-top:15px; overflow:hidden; float:left;}
                            #coc67178 li a.close{background-position: 0 0;}
                            #coc67178 li a.close:hover{background-position: 0 -15px;}
                            #coc67178 li a.min{background-position: -30px 0;}
                            #coc67178 li a.min:hover{background-position: -30px -15px;}
                            #coc67178 li a.max{background-position: -60px 0;}
                            #coc67178 li a.max:hover{background-position: -60px -15px;}
            #co453569{display:block; margin:0; padding:0; height:123px;  border-style:solid; border-width:1px; border-color:#111 #999 #999 #111; line-height:1.6em; overflow:hidden;}
            </style>
             <div id="fl813691" style="height: 152px;">
                <div id="eb951855">
                <div id="cob263512">
                    <div id="coh963846">
                        <ul id="coc67178">
                            <li id="pf204652hide"><a class="min" href="javascript:pf204652clickhide();" title="&#7848;n &#273;i">&#7848;n</a></li>
                            <li id="pf204652show" style="display: none;"><a class="max" href="javascript:pf204652clickshow();" title="Hi&#7879;n l&#7841;i">Xem </a></li>
                        </ul>
                    &nbsp;Phim Tân Tây Du Ký - Blog KhanhNguyen
                   </div>
                    <div id="co453569">
     <!-- code ads -->
<a target="_blank" href="https://youtu.be/3urTSZ7anHA?list=PLNKZ3ZcLd408LKnkDF1vFwvoQx-J4VABd&t=487"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRaJk_Ugw69NgwIQxSV9BViErfKIm2FkkKBTUn8K1DAT7x9MoJ-skSF_W2XHwOgETtdHX9I8mwhbUfpA5_fozsRjBNlOlTt4SIc4hs3Cz_IsPl_NkksZ9Qho03GFa5Mn0Xt6VBucvXcjS8/
00/2014+-+1.gif" height="115" title="KhanhNguyen Blog's"/></a>
<!-- code ads --></div></div></div></div>
            <script>
            pf204652bottomLayer = document.getElementById('fl813691');
            var pf204652IntervalId = 0;
            var pf204652maxHeight = 150;//Chieu cao khung quang cao
            var pf204652minHeight = 20;
            var pf204652curHeight = 0;
            function pf204652show( ){
              pf204652curHeight += 2;
              if (pf204652curHeight > pf204652maxHeight){
                clearInterval ( pf204652IntervalId );
              }
              pf204652bottomLayer.style.height = pf204652curHeight+'px';
            }
            function pf204652hide( ){
              pf204652curHeight -= 3;
              if (pf204652curHeight < pf204652minHeight){
                clearInterval ( pf204652IntervalId );
              }
              pf204652bottomLayer.style.height = pf204652curHeight+'px';
            }
            pf204652IntervalId = setInterval ( 'pf204652show()', 5 );
            function pf204652clickhide(){
                document.getElementById('pf204652hide').style.display='none';
                document.getElementById('pf204652show').style.display='inline';
                pf204652IntervalId = setInterval ( 'pf204652hide()', 5 );
            }
            function pf204652clickshow(){
                document.getElementById('pf204652hide').style.display='inline';
                document.getElementById('pf204652show').style.display='none';
                pf204652IntervalId = setInterval ( 'pf204652show()', 5 );
            }
            function pf204652clickclose(){
                document.body.style.marginBottom = '0px';
                pf204652bottomLayer.style.display = 'none';
            }
            </script>

19 Hộp thư Yahoo

<div style="width: 380; height: 103">Y!M Avatar Grabber

<br />

<script>

function grab() {

id = document.getElementById("yahoo_id").value;

document.getElementById("result").innerHTML = "<img src='http://img.msg.yahoo.com/

avatar.php?yids=" + id + "&format=png'> ";

return false;

}

</script>

<form onsubmit="return grab()">Yahoo! ID :

<input id="yahoo_id" type="text" size="20" /> <input value="Grab avatar" 

type="submit" /></form>

Y!M Avatar <div id="result"></div>

</div>

Nút Like cho facebook

<script>

  window.fbAsyncInit = function() {

    FB.init({

      appId      : '1489279351376539',

      xfbml      : true,

      version    : 'v2.5'

    });

  };

  (function(d, s, id){

     var js, fjs = d.getElementsByTagName(s)[0];

     if (d.getElementById(id)) {return;}

     js = d.createElement(s); js.id = id;

     js.src = "//connect.facebook.net/en_US/sdk.js";

     fjs.parentNode.insertBefore(js, fjs);

   }(document, 'script', 'facebook-jssdk'));

</script>

<div

  class="fb-like"

  data-share="true"

  data-width="450"

  data-show-faces="true">

</div

>
Thanh tiêu đề trên đầu Blog

<div id='mbt-stickybar'>
  <img src='hình ảnh LINK'/><a href='http://ngdkhanh.blogspot.com/'>Blog Khanh Nguyên</a>
</div>

Trên đây là những kiến trúc cơ bản của một Bloggger mà bản thân mình cần phải lưu ý gìn giữ. Phần còn lại, muốn phát triển thêm cần phải có tiền, có sự hỗ trợ khác hơn thế nữa, và phải tiếp tục tìm kiếm những nguồn thông tin hữu dụng khác.

Lưu trữ cá nhân

Read More

Tải về hình nền Wallpapers Stock full HD cho OnePlus chạy H2OS

by Thủ thuật android · 20/08/2015

Read More

Kèm biểu tượng chia sẻ bài viết qua Yahoo! Messenger vào Blogger

Trước đây bạn đã được hướng dẫn cách đưa biểu tượng hiển thị trạng thái trực tuyến của mình khi đang dùng Yahoo! Messenger vào blog, hôm nay chúng ta sẽ đề cập đến việc chèn thêm biểu tượng chia sẻ bài viết qua trình tin nhắn này.

Khi sử dụng biểu tượng, một thông điệp bao gồm tên bài viết đi kèm liên kết của nó sẽ tự động được chèn vào khung nhập nội dung của chương trình tán gẫu. Và đây là đoạn code:

<a expr:href='&quot;ymsgr:sendIM?+&amp;m=&quot; + data:post.url + &quot; &lt;== 

&quot; + data:post.title'><img class='icon-action' src='http://i240.photobucket.

com/albums/ff259/thuthuatblog/ymr.jpg' title='Gửi bài viết này cho bạn bè qua 

Yahoo! Messenger!'/></a>

Trong đó link biểu tượng được làm nổi bậc và bạn có thể thay bằng một trong những biểu tượng dưới (Với Firefox nhấn phải chuột chọn Copy Image Location hoặc Properties -> Chọn chép link ở Address(URL)):

Cách chèn vào Blogger:

Tùy theo template và vị trí mong muốn, nhìn chung bạn có thể đặt biểu tượng cạnh Label (Nhãn) của bài viết hoặc cạnh các thông tin khác như tác giả, giờ đăng bài,...

Đăng nhập Blogger, lưu lại template đang dùng, chọn Expand Widget Templates (Mở rộng tiện ích mẫu) và tìm đoạn vị trí gợi ý dưới:

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
     <!-- Nơi có thể đặt code -->
     <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span> 
    <!-- Nơi có thể đặt code -->
    <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' 

title='permanent link'><abbr class='published' expr:title='data:post.

timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> 
    <!-- Nơi có thể đặt code -->
   <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl'

 expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 

1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/>

 <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </span> 
    <!-- Nơi có thể đặt code -->
    <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' src='http://www.blogger.com/img/

icon18_email.gif'/>
          </a>
          </span>
        </b:if>
        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> 
    <!-- Nơi có thể đặt code -->
   </div>

      <div class='post-footer-line post-footer-line-2'>
       <!-- Nơi có thể đặt code -->
   <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> 
    <!-- Nơi có thể đặt code -->
  </div>
      <div class='post-footer-line post-footer-line-3'>
    <!-- Nơi có thể đặt code -->
       <span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'>

<data:post.location.name/></a>
          </b:if>
        </b:if>
      </span>
      </div>

Một cửa sổ sẽ hiện ra như thế này khi nhấn vào biểu tượng:

Có một lỗi thấy rõ ở việc hiển thị tiếng Việt tiêu đề của bài đăng trong khung nhập nội dung chat. Không biết phiên bản hiện thời Yahoo! Messenger 9.0 có khắc phục được nhược điểm này?

Nguồn huongdancachtaoblog.blogspot.com



Read More

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

Nguồn nguoiaolam.net

Có nhiều bạn hỏi cách chèn tiện ích chia sẻ addthis social sharing toolbox sao giống như giao diện Metro Simple mà HHV đang dùng. Thực tế thì HHV đã cung cấp đoạn code đó ở đây tuy nhiên trong bài viết này HHV sẽ hướng dẫn các bạn tùy biến tiện ích này đầy đủ và linh động hơn

1. Về trang web 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.

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

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…

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

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.

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

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

3. Tùy biến Addthis social sharing toolbox

Trong trường hợp bạn không 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>.

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <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.

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <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.

http://support.addthis.com/customer/portal/articles/381263-addthis-client-api#.T758EdVo1p4

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ợ.

http://www.addthis.com/services/list#.T7586tVo1p4

Đ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.

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <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à

Data hosted with ♥ by Pastebin.com - Download Raw - See Original

1. <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

http://support.addthis.com/customer/portal/articles/381237-third-party-buttons#.T75709Vo1p4

Kết luận
Addthis.com cung cấp dịch vụ rất hay. Ngoài Addthis social sharing toolbox nó còn cung cấp Follow widget và Welcome bar. Nếu bạn chịu khó đăng ký thành viên bạn có thể theo dõi các nội dung được chia sẻ và cách thức chia sẻ.
Cách thức chèn code đơn giản, tùy biến dễ dàng. Nó có cộng đồng người sử dụng lớn và quan trọng hơn là hỗ trợ rất nhiều dịch vụ.
Nếu có thắc mắc đừng ngần ngại để lại comments dưới bài viết này hoặc đến trang Support

http://blog.nguoiaolam.net/p/f.html

đặt câu hỏi. Chúc bạn thành công
Hồng Hòa Vi
Nguồn nguoiaolam.net

http://blog.nguoiaolam.net/

Read More

Bến Giang Đầu

Một mình lặng ngắm biển khơi
Thuyền neo bến nhớ một thời gọi tên
Thế mà cứ ngỡ miền quên
Dõi theo chấm nhỏ con thuyền tìm ai
Trời mây bóng nước gương soi
Sao con tim lại bồi hồi nhói đau:
Chia tay khuất bến giang  đầu
Cảnh xưa còn đó
                         người đâu
                                              nơi nào!

Thơ của Nguyen Kim

https://plus.google.com/u/0/109937215280585739154

Bạn có thể tham khảo các bài thơ trong Bầu rượu túi thơ do  Khanhnguyen' s blog sưu tập từ trên các diễn đàn mạng xã hội

Read More

Tạo trang báo lỗi 404 chuyển động với CSS3

Nguồn nguoiaolam.net

Một trong những tính năng mới cập nhật của Google là cho phép tùy biến trang báo lỗi 404. Lỗi 404 (404 error) là một trong các thông báo lỗi rất phổ biến, nhằm thông tin cho người dùng khi một địa chỉ web không được tìm thấy. Việc không tìm thấy thứ mình muốn là một điều bực mình, để tránh cho độc giả khó chịu khi nhận được một dòng thông báo 404 khô khan các  trang web thường tạo một trang báo lỗi tùy biến thật đẹp hoặc hài hước. Bài viết này Hồng Hòa Vi sẽ hướng dẫn tạo một trang thông báo lỗi đơn giản với hiệu ứng chuyển động hoàn toàn bằng CSS3.

Mời bạn xem demo trước khi bắt tay vào việc nhé

Cách làm

1. Nâng cấp lên giao diện kiểu mới, vào trang Settings/Search preferences rồi tìm Custom Page Not Found  nhấn Edit. Click để xem ảnh lớn nhé

2. Chép đoạn code dưới đây vào cửa sổ được hiện ra và nhấn Save là xong

<div class="box"><div class="cover_pan"></div></div>

<style type='text/css'>
.box{background:url(https://lh3.googleusercontent.com/--Spv9VuEKYE/T3WIVthTICI/

AAAAAAAAC3E/o1Ng-OEp5SA/s1600/rect2996.png) no-repeat 0 0;height:486px} .cover_pan{background:#fff url(https://lh4.googleusercontent.com/--KGP4XXtrTM/T3WIWNH6-bI/AAAAAAAAC3I/zaRC49pVYf8/s1600/image2993.png) repeat 1055px bottom;height:486px;margin-left:1px;overflow:hidden;position:relative;width:99.5%;z-index:-1;-moz-animation-name:pan;-moz-animation-duration:40s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-webkit-animation-name:pan;-webkit-animation-duration:40s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear} @-moz-keyframes pan{0%{background-position:1338px bottom} 100%{background-position:left bottom} } @-webkit-keyframes pan{0%{background-position:1338px bottom} 100%{background-position:left bottom} } </style>

Hướng dẫn tùy biến

Nếu không thích tùy biến thì như thế là đủ tuy nhiên nếu bạn là “vọc sĩ” và muốn chỉnh sửa gì đó thì làm theo các hướng dẫn bên dưới này. Ý tưởng ở đây là tạo 2 lớp ảnh, một lớp ảnh trên làm mặt nạ (class box) và lớp ảnh dưới làm nền chuyển động (class cover_pan).

1. Kích thước

Bạn hoàn toàn có thể tùy chỉnh kích thước của của class box và class cover_pan tùy theo kích thước ảnh và kích thước của blog bạn.

2. Ảnh

Trong đoạn code trên có 2 ảnh, một ảnh nền class box và một ảnh nền của class cover_pan. Hiện tại cả 2 ảnh này đều có kích thước 800px phù hợp với kích thước Blog Thiết Kế tuy nhiên bạn có thể đồng thời thay đổi cả 2 ảnh này.

Đối với ảnh class box yêu cầu phải là ảnh gif hoặc png có độ mờ cần thiết để làm lớp mặt nạ cover. Ảnh class cover_pan thì tùy ý bạn có thể chọn bất kỳ ảnh nào miễn sao kích thước phù hợp.

2. Tốc độ

Ở đây chúng ta cho ảnh nền chạy ngang liên tục với số vòng lặp vô tận. Tốc độ chuyển đông là 40s. Có rất nhiều thứ bạn có thể thay đổi, tuy nhiên tôi nhướng phần khám phá này cho các bạn. Hãy thử tìm hiểu một chút về CSS3 và nhờ bác Google chỉ đường nhé!

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

Hồng Hòa Vi
Nguồn nguoiaolam.net

Read More

Nút bài viết ngẫu nhiên/Random Post cho Blogspot Blogger V1

Đầu tiên các bạn vào Blog Title → Layout → Add Widget → HTML/JavaScript.

 Và copy đoạn mã code sau đây vào và Save As hay Lưu lại!

Read More