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
<!--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-->
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.
4. Multi tab có 3 khung quản lý, mới tạo được 2, hoạt động 1:
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>
 |
| 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
13. Chương mục quản lý thủ thuật Blogger
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 == "") {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>
<!-- Noop Google search box -->
1
5. 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 - <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: "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="Ẩn đi">Ẩn</a></li>
<li id="pf204652show" style="display: none;"><a class="max" href="javascript:pf204652clickshow();" title="Hiện lại">Xem </a></li>
</ul>
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>
<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
