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:

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

<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. Bài đăng dạng trượt ngang có hình và thông tin tóm tắt.

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

Css3+Thin+Style+Navigation+Bar+for+Blogger

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.

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&bannerHeight=100&bannerSID=http://img.uu1001.cn/x3
/2011-11-10/06-54/2011-11-10_1ddc0b2b56b24e3c38dfb39a7d04f97d_0.xml&bannerXML=&bannerLink=http%3A%2F%2F&dataSource=&bid=26402587&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&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ố:

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

Social Blogspot

<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

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=""aim1" + data:post.id">
 </div>
<div style="clear: both; margin: 5px;">
 </div>

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

<div class='noop-searchbox' id='noop-searchbox'>
      <form action='/search' id='noop-searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' 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>

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>

&nbsp;- 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ý

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

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..

Share:

Kết bạn cùng KhanhNguyen's blog

Thứ Sáu, 18 tháng 12, 2015

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

Được viết bởi Khánh Nguyễn

0 Comments:

Đăng nhận xét

Thống kê Blogspot

Nhãn

Lưu trữ Blog

Bài có thể xem

Mời tham gia CLB