Test template

<h3 class="post-title entry-title">Tạo nút in bài viết đẹp cho blogspot </h3><div class="post-header"><span style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1Ju5ypWIMukLlmG_IJbDE49dLp3H7z7lWFdQZ83MnU-60d07EABulbJfkIlBxEiNSI5gxlZjts-MjAEmmgin9mvPcPkMPbA0TQHsETLBrVJc7Fdh1iHRaLnZR0NjfMtOz7vtdzskx0X3/h120/user-namkna-blogspot.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; font-size: 11px; padding-left: 25px;">Nam Tạ</span> | <span style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUo6XOkHrQ-Lgzk2ugxx4MUTgDQhEtcd3CoGYUJF4IqfwMwIIoBoki2HyYyJ6M83OJDkZpm1YCcmghqeLRJJagSnV0UBp03fqQ1gLMZ_KuOG6Z_NlBVzLzbvKzghT2UbWcpNS5Pa-t/s1600/time-post-clock-namkna-blogspot-com-ngoctra.png); background-position: 0% 0%; background-repeat: no-repeat no-repeat; font-size: 11px; padding-left: 25px;">26-03-2012</span> |  <span class="comment-home"> <a class="comment-link" href="http://namkna.blogspot.com/2012/03/print-page-for-blogspot.html#comment-form"> nhận xét</a> </span> </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHOwW12Uz-mxi5J81ObJb-VEOYEaZ0LJ-EOLlHFwoh9M0TS3nK-gg50k0O4UIGtl-0sbKXbOO173MXIMrod4abXan6HG5ffDci8RLC1304R3Q_yiT2Ma8D94K5tyrJ8ghkhKo7v2dk-ybr/s1600/tao-nut-print-trang-in-cho-blogspot-namkna-blogspot-ngoctra.png" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Các tạo nuets in bài viết cho blogspot - by: http://namkna.blogspot.com/" border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHOwW12Uz-mxi5J81ObJb-VEOYEaZ0LJ-EOLlHFwoh9M0TS3nK-gg50k0O4UIGtl-0sbKXbOO173MXIMrod4abXan6HG5ffDci8RLC1304R3Q_yiT2Ma8D94K5tyrJ8ghkhKo7v2dk-ybr/s200/tao-nut-print-trang-in-cho-blogspot-namkna-blogspot-ngoctra.png" title="Các tạo nuets in bài viết cho blogspot - by: http://namkna.blogspot.com/" width="200" /></a></div><div style="font-family: Arial,Helvetica,sans-serif; text-align: justify;"><span style="font-size: x-small;"><span style="font-weight: bold;">Hôm nay  namkna sẽ giới thiệu đến các bạn  một thủ thuật mà các trang web ứng  dụng khá nhiều và rất hữu ích cho  người dùng trên blog/web. Đó là thêm  tính năng in bài (Print) trên  blog/web. Với tiện ích này người đọc có  thể in bài trên blog của bạn một  cách nhanh chóng. </span></span></div><a href="http://www.blogger.com/post-edit.g?blogID=8216660058671519400&postID=7188144283019343060" name="more"></a><br />
<div style="font-family: Arial,Helvetica,sans-serif; text-align: justify;"><span style="font-size: x-small;"><span style="color: #000099; font-weight: bold;"><span style="color: blue;">Namkna sẽ giới thiệu cho các bạn 2 Style để các bạn có thể lựac họn.</span></span></span></div><div style="font-family: Arial,Helvetica,sans-serif; text-align: justify;"><span style="font-size: x-small;"><b style="color: red;">Style 1:</b> Style tạo hộp thoại print dạng Popup với giao diện đẹp.<span style="font-weight: bold;"></span></span></div><br />
<div style="font-family: Arial,Helvetica,sans-serif; text-align: center;"><span style="font-size: x-small;"><span style="border: 0px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b style="color: purple;"><a class="button" href="http://demo-namkna.blogspot.com/2012/03/tao-trang-in-chuyen-nghiep-nhieu-tuy.html" rel="nofollow" style="background-color: #006666; border-color: rgb(221, 221, 221); border-radius: 4px 4px 4px 4px; border-style: solid; border-width: 1px; box-shadow: 0px 0px 1px rgb(249, 249, 249) inset, 1px 1px 1px rgb(223, 223, 223); color: #357798; cursor: pointer; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 1.2; margin: 0px; padding: 6px 12px; text-decoration: none; text-shadow: 0px 1px 0px rgb(255, 255, 255); vertical-align: baseline;" target="_blank"><span style="color: purple;"><span style="color: white;">Demo for Post</span></span></a></b></span></span></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjINqUT2Tobggfb_PnqcFSFofOR4wgLrUg5IrgrY_ZvvkikSgaxpbmG8W_fQpBKIRmTemOerkO_8wxYDlxnAkdpTUy_6DPLvUAt9wiP685x5acHiceYC_lV5Kla_oCEz7eEWoYYjrbo-3jl/s1600/tao-nut-print-trang-in-cho-blogspot-namkna-blogspot-ngoctra-1.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Các tạo nuets in bài viết cho blogspot - by: http://namkna.blogspot.com/" border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjINqUT2Tobggfb_PnqcFSFofOR4wgLrUg5IrgrY_ZvvkikSgaxpbmG8W_fQpBKIRmTemOerkO_8wxYDlxnAkdpTUy_6DPLvUAt9wiP685x5acHiceYC_lV5Kla_oCEz7eEWoYYjrbo-3jl/s400/tao-nut-print-trang-in-cho-blogspot-namkna-blogspot-ngoctra-1.png" title="Các tạo nuets in bài viết cho blogspot - by: http://namkna.blogspot.com/" width="400" /></a></div><div style="font-family: Arial,Helvetica,sans-serif; text-align: justify;"><span style="font-size: x-small;"><span style="color: #000099; font-weight: bold;">» Bắt đầu thủ thuật</span><br />
<br />
1. Đăng nhập vào tài khoản <span style="font-weight: bold;">Blogger</span><br />
2. Vào phần <span style="font-weight: bold;">thiết kế </span>(Design)<br />
3. Chọn chỉnh sửa <span style="font-weight: bold;">HTML </span>(Edit HTML)<br />
4. Chọn <span style="font-weight: bold;">mở rộng mẫu tiện ích</span> (Expand Widget Templates)<br />
5. Tìm đến dòng code sau (Ctrl F)</span></div><pre><div class='post-header-line-1'/></pre><div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: x-small;">6. Thêm code bên dưới vào ngay sau code vừa tìm được</span></div><pre><b:if cond='data:blog.pageType == "item"'><script src='http://cdn.printfriendly.com/printfriendly.js' type='text/javascript'/><span style='float:right;background: url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwfNEQ5kHi0JusdgJZ6SeL7qKgbWUsIENXeKJkkSVwqjpXxIxW28m2Me4sqa-npUeTuOTx6_xLD3r9woui3_sY60rxZj_E-cJzdEB7vS_hA3pLdU0piO_jdjzxYId1UUEARGbHTZpvMbwP/" rel="nofollow" target="_blank">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50gotnuFJR7-wK3g8xn1oJqk6kS4qkAfJPDZ2rkzLSWCQIOFgcT2GGukGVvPl_5FOKI0uamHytRoiOGP3KzeAW4P1qXN3GRH1i5VP26jHSepti6syP8Gc0mosOVPLJ_bWdZIJ-pXa-Efk/s1600/print-this-namkna-ngoctra.png</a>) left no-repeat; padding-left: 25px;'><a class='printfriendly' href='#' onclick='window.print(); return false;' title='<b style="color: #93c47d;">In bài viết này</b>'><span style="color: red; font-weight: bold;">In bài này</span></a></span></b:if></pre><div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: x-small;">7. Cuối cùng save template lại là xong</span></div><div style="font-family: Arial,Helvetica,sans-serif;"></div><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><b style="color: red;">Style 2:</b> Style tạo hộp thoại print dạng Popup với giao cổ điển..</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknP-vX9SjpOEQnihOhVUdiEMzDqRr7DgI53p1CJJ6Up0-SEdCv2lLA5T3P0CmdzuicrA-IV4faT_iAmAvIarXTFSn7zvAPkB-Z09NCYei2y_gV-I9yVRmJlCZ4ODJLt8AawFMcJKktUiX/s1600/tao-nut-print-trang-in-cho-blogspot-namkna-blogspot-ngoctra-2.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Các tạo nuets in bài viết cho blogspot - by: http://namkna.blogspot.com/" border="0" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknP-vX9SjpOEQnihOhVUdiEMzDqRr7DgI53p1CJJ6Up0-SEdCv2lLA5T3P0CmdzuicrA-IV4faT_iAmAvIarXTFSn7zvAPkB-Z09NCYei2y_gV-I9yVRmJlCZ4ODJLt8AawFMcJKktUiX/s400/tao-nut-print-trang-in-cho-blogspot-namkna-blogspot-ngoctra-2.png" title="Các tạo nuets in bài viết cho blogspot - by: http://namkna.blogspot.com/" width="400" /></a></div><span style="font-family: Arial, Helvetica, sans-serif;"> </span><br />
<div style="text-align: justify;"><span style="font-size: x-small;"><span style="color: #cc0000; font-family: Arial, Helvetica, sans-serif; font-weight: bold;">☼ Cách thực hiện</span><br style="font-family: Arial,Helvetica,sans-serif;" /><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial, Helvetica, sans-serif;">1. Đăng nhập tài khoản </span><span style="font-family: Arial, Helvetica, sans-serif; font-weight: bold;">Blogger</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial, Helvetica, sans-serif;">2. Vào thiết kế và chọn chỉnh sửa </span><span style="font-family: Arial, Helvetica, sans-serif; font-weight: bold;">HTML</span><span style="font-family: Arial, Helvetica, sans-serif;">, nhấn (</span><span style="font-family: Arial, Helvetica, sans-serif; font-style: italic;">Mở rộng mẫu tiện ích</span><span style="font-family: Arial, Helvetica, sans-serif;">)</span><br style="font-family: Arial,Helvetica,sans-serif;" /><span style="font-family: Arial, Helvetica, sans-serif;">3. Chèn code bên dưới vào sau thẻ </span></span><span style="color: red;"><span style="font-size: x-small;"><span style="font-family: Arial, Helvetica, sans-serif;"><head> </span></span></span></div><pre><style media='print' type='text/css'>
<span style="color: #38761d;">#linkbar-wrapper, #comments, #header-wrapper, .widget-content, #lower-wrapper, #header, #sidebar-wrapper,.sidebar, .comment-form,.post-footer,#blog-pager,.post-feeds,#backlinks-container,#navbar-section,.lowerbar-wrapper, #backbutton</span> {display:none !important;}
#content-wrapper,#main-wrapper,#main {font-size:12px;float:none !important;overflow:visible !important;width:auto !important;}
#main a{color:#0000ff;text-decoration:none;}
</style></pre><div style="font-family: Arial,Helvetica,sans-serif; text-align: justify;"><b>- Trong đó: </b>Phần code <b style="color: #38761d;">màu xanh</b>  chính là  phần sẽ không xuất hiện trong bài in, nếu bạn muốn ẩn phần nào  trên blog  khi in thì bạn hãy tìm lệnh tương ứng và thêm vào vị trí như  trên. Mỗi  lệnh cách nhau bởi dấu phẩy (,).</div><div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: x-small;">4. Tìm đến dòng code sau (Ctrl F)</span></div><pre><div class='post-header-line-1'/></pre><div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: x-small;">5.Thêm đoạn code bên dưới vào sau nó.</span></div><pre><b:if cond='data:blog.pageType == &quot;item&quot;'>
<span style='float:right;background: url(<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwfNEQ5kHi0JusdgJZ6SeL7qKgbWUsIENXeKJkkSVwqjpXxIxW28m2Me4sqa-npUeTuOTx6_xLD3r9woui3_sY60rxZj_E-cJzdEB7vS_hA3pLdU0piO_jdjzxYId1UUEARGbHTZpvMbwP/" rel="nofollow" target="_blank">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj50gotnuFJR7-wK3g8xn1oJqk6kS4qkAfJPDZ2rkzLSWCQIOFgcT2GGukGVvPl_5FOKI0uamHytRoiOGP3KzeAW4P1qXN3GRH1i5VP26jHSepti6syP8Gc0mosOVPLJ_bWdZIJ-pXa-Efk/s1600/print-this-namkna-ngoctra.png</a>) left no-repeat; padding-left: 25px;'><a href='javascript:window.print()'><span style="color: #000099; font-weight: bold;">In bài này</span></a></span>
</b:if></pre><div style="font-family: Arial,Helvetica,sans-serif; text-align: justify;">6. Lưu Template lại.</div><blockquote class="tr_bq"><div style="font-family: Arial,Helvetica,sans-serif; text-align: justify;">- Bên trên mình đặt code sau lệnh:</div><pre><div class='post-header-line-1'/></pre><div style="font-family: Arial,Helvetica,sans-serif; text-align: justify;">Tức là đặt ngay bên dưới tiêu đề bài viết. Nếu bạn nào muốn đặt nút Print cuối bài viết thì đặt sau đoạn code sau:</div><pre><data:post.body/></pre></blockquote><div style="font-family: Arial,Helvetica,sans-serif;"><b>Chúc thành công!</b><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaTbGt9bV-4d5eqQ2rEuPvsr2AwN-Nn__dN5wnEEo6hbTjzscCgEnhb32Fk0ac2tK91cwf_kmcZVg-5IXMNd5sGNBl1yA2Z9Z2xFFXGrF_eEqdcORK8yvHqp8WsdV4Cr8FYM4qnMBoiDQ/s1600/print-this.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaTbGt9bV-4d5eqQ2rEuPvsr2AwN-Nn__dN5wnEEo6hbTjzscCgEnhb32Fk0ac2tK91cwf_kmcZVg-5IXMNd5sGNBl1yA2Z9Z2xFFXGrF_eEqdcORK8yvHqp8WsdV4Cr8FYM4qnMBoiDQ/s1600/print-this.png" /></a></div></div>

Tạo nút in bài viết đẹp cho blogspot Nam Tạ | 26-03-2012 | nhận xét Hôm nay namkna sẽ giới thiệu đến các bạn một thủ thuật mà các t...

Username: Password :

<div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">Đầu tiên, bạn chèn đoạn code bên dưới sau ngay thẻ <b><body></b> hoặc trước thẻ <b><div id='outer-wrapper'></b>.</span></div><div style="background-color: #f4f4f4; border-color: gray; border-style: solid; border-width: 1px; cursor: text; font-family: Arial,Helvetica,sans-serif; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding: 4px; width: 97.5%;"><pre style="background-color: #f4f4f4; border-style: none; color: black; line-height: 12pt; margin: 0em; overflow: visible; padding: 0px; width: 100%;"><span style="font-size: small;"><span class="Apple-style-span" style="background-color: white; line-height: 20px;"><i style="color: blue;"><span style="line-height: 22px; text-align: justify;"><b:section id='menu' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML91' locked='false' title='Menu' type='HTML'/>
</b:section></span></i></span></span></pre></div><div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">Tiếp theo bạn chèn code màu xanh bên dưới vào phía trên thẻ <b></b:skin> </b></span><span style="font-size: small;">trong phần <b>"Chỉnh sửa HTML"</b></span><span style="font-size: small;"> có check vào <b>"Mở rộng Mẫu tiện ích"</b></span><span style="font-size: small;">.</span></div><div style="background-color: #f4f4f4; border-color: gray; border-style: solid; border-width: 1px; cursor: text; font-family: Arial,Helvetica,sans-serif; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding: 4px; width: 97.5%;"><div class="widget Blog" id="Blog1"><div class="blog-posts hfeed"><div class="date-outer"><div class="date-posts"><div class="post-outer"><div class="post hentry"><div class="post-body entry-content" id="post-body-6017074019417960082"><div dir="ltr" style="text-align: left;"><div style="text-align: justify;"><span style="font-size: small;"><a href="http://www.blogger.com/post-create.g?blogID=8216660058671519400" name="more"></a></span></div><div style="text-align: justify;"><pre style="color: blue;"><span style="font-size: small;"><i> #menu h2 {display:none}

.menu,.menu h3,.menu a,.menu ul,.menu li {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 vertical-align: baseline;
}

:focus { outline: 0 }

.menu ul,.menu li {
 font-size:14px; 
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left; }

.menu h3 {
 font-family:Arial, Helvetica, sans-serif;
 font-weight:600;
 font-size:14px;
 line-height:21px;
 margin-top:7px;
 margin-bottom:14px;
 padding-bottom:7px;
 text-shadow: 1px 1px 1px #FFFFFF;
 border-bottom:1px solid #888888; }

.menu {
 list-style:none;
 width:900px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px; 
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 background: #830701;
 border: 1px solid #a40802;
 border-top: 1px solid #fd190f; 
 background: -moz-linear-gradient(top, #d70b02, #830701);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d70b02), to(#830701)); }

.menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none; 
 -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px; }

.menu li:hover {
 z-index:2;
 background:#F4F4F4;
 border:1px solid #aaaaaa;
 padding: 4px 9px 4px 9px; 
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); 
 -moz-border-radius: 5px 5px 0px 0px;
        -webkit-border-radius: 5px 5px 0px 0px;
        -khtml-border-radius: 5px 5px 0px 0px;
        border-radius: 5px 5px 0px 0px; }

.menu li.no_drop:hover {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px; }

.menu li a {
 color: #FFFFFF;
 outline:0;
 text-decoration:none;
 display:block;
 text-shadow: 1px 1px 1px #000; }

.menu li:hover a { color:#161616; text-shadow: none; }

.menu li .drop {
 padding-right:21px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tF7QLoFxOdZtQ1kp6DKTDbmWLYnqo9bVvQ4V6aokpvAM-qmEAKSWhI2T-m9hjrjnNxPlgX0Uy6eCbCEE-IfRNqDUxx6Llxh4VoXdYnHExCvKGyCxL4AMtFOUoXflso5VFS4iROzPfpg/) no-repeat right 8px; }

.menu li:hover .drop {
 padding-right:21px;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tF7QLoFxOdZtQ1kp6DKTDbmWLYnqo9bVvQ4V6aokpvAM-qmEAKSWhI2T-m9hjrjnNxPlgX0Uy6eCbCEE-IfRNqDUxx6Llxh4VoXdYnHExCvKGyCxL4AMtFOUoXflso5VFS4iROzPfpg/) no-repeat right 7px; }

.menu li:hover div a { color:#a40802; }
.menu li:hover div a:hover { color:#fd190f; }
.menu li ul li a:hover { color:#fd190f; }

.dropdown_1column,.dropdown_2columns {
 margin:4px auto;
 position:absolute;
 background:#F4F4F4;
 border:1px solid #aaaaaa;
 border-top:none;
 padding:10px 5px 10px 5px; 
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); }

.dropdown_1column,.dropdown_2columns {
 left:-999em; 
 text-align:left;
 -moz-border-radius: 0px 5px 5px 5px;
        -webkit-border-radius: 0px 5px 5px 5px;
        -khtml-border-radius: 0px 5px 5px 5px;
        border-radius: 0px 5px 5px 5px; }

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}

.menu li:hover .dropdown_1column,.menu li:hover .dropdown_2columns{left:-1px;top:auto}

.col_1,.col_2 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px; }

.col_1 {width:130px;}
.col_2 {width:270px;}

.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }

.menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px; }

.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }</i></span></pre></div></div></div></div></div></div></div></div></div></div><div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;"><span class="Apple-style-span" style="background-color: white; line-height: 20px;"><span class="Apple-style-span" style="color: #333333; line-height: 22px; text-align: justify;">Đoạn mã trên sẽ tạo một tiện ích </span><b style="color: #333333; line-height: 22px; text-align: justify;">Javascript/HTML</b><span class="Apple-style-span" style="color: #333333; line-height: 22px; text-align: justify;"> mới trên blog của bạn, hãy quay lại</span><b style="color: #333333; line-height: 22px; text-align: justify;"> "Phần tử trang</b><span class="Apple-style-span" style="color: #333333; line-height: 22px; text-align: justify;">" rồi tiếp tục chèn vào tiện ích này :</span></span></span></div><div style="background-color: #f4f4f4; border-color: gray; border-style: solid; border-width: 1px; cursor: text; font-family: Arial,Helvetica,sans-serif; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding: 4px; width: 97.5%;"><pre style="background-color: #f4f4f4; border-style: none; color: black; line-height: 12pt; margin: 0em; overflow: visible; padding: 0px; width: 100%;"><span style="font-size: small;"><i><span class="Apple-style-span" style="background-color: white;"><span style="color: blue;"><ul class="menu"></span>
<span style="color: blue;">< li class="no_drop"><a href="#">Home</a></li></span>
<span style="color: blue;">< li><a href="#" class="drop">1 Column</a></span>
<span style="color: blue;">< div class="dropdown_1column"></span>
<span style="color: blue;">< div class="col_1"></span>
<span style="color: blue;">< ul></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">FreelanceSwitch</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">Creattica</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">WorkAwesome</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">Mac Apps</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">Web Apps</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">NetTuts</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">Design</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">Logo</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">Flash</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">Illustration</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">More...</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< /ul></span>
<span style="color: blue;">< /div></div></li></span>

<span style="color: blue;">< li><a href="#" class="drop">2 columns</a></span>
<span style="color: blue;">< div class="dropdown_2columns"></span>

<span style="color: blue;">< div class="col_1"></span>
<span style="color: blue;">< h3>Some Links</h3></span>
<span style="color: blue;">< ul></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">ThemeForest</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">GraphicRiver</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">ActiveDen</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< /ul></span>
<span style="color: blue;">< /div></span>

<span style="color: blue;">< div class="col_1"></span>
<span style="color: blue;">< h3>Useful Links</h3></span>
<span style="color: blue;">< ul></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">NetTuts</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">VectorTuts</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">PsdTuts</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< /ul></span>
<span style="color: blue;">< /div></span>

<span style="color: blue;">< div class="col_1"></span>
<span style="color: blue;">< h3>Other Stuff</h3></span>
<span style="color: blue;">< ul></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">FreelanceSwitch</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">Creattica</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">WorkAwesome</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< /ul></span>
<span style="color: blue;">< /div></span>

<span style="color: blue;">< div class="col_1"></span>
<span style="color: blue;">< h3>Misc</h3></span>
<span style="color: blue;">< ul></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">Design</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">Logo</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< li><a href="#"></span><span style="color: #cc0000;">Flash</span><span style="color: blue;"></a></li></span>
<span style="color: blue;">< /ul></span>
<span style="color: blue;">< /div></div></li></ul></span></span></i></span></pre></div><div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">Muốn chỉnh sửa lại màu cho menu thì ta vào đoạn code mà ta vừa chèn vào phía trên thẻ  trong phần "Chỉnh sửa HTML" :</span></div><div style="background-color: #f4f4f4; border-color: gray; border-style: solid; border-width: 1px; cursor: text; font-family: Arial,Helvetica,sans-serif; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding: 4px; width: 97.5%;"><pre style="background-color: #f4f4f4; border-style: none; color: black; line-height: 12pt; margin: 0em; overflow: visible; padding: 0px; width: 100%;"><span style="font-size: small;"><i style="color: blue;">.menu {
list-style:none;
width:900px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px; 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #830701;                  (Màu nền của menu)
border: 1px solid #a40802;           (Màu của đường viền phía dưới menu)
border-top: 1px solid #fd190f;       (Màu của đường viền phía trên menu)
background: -moz-linear-gradient(top, #d70b02, #830701);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d70b02), to(#830701)); }</i></span></pre></div><div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">Bạn thay màu from(#d70b02), to(#830701)thành các màu mà bạn thích. </span></div><div style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">Bài viết được lấy từ <a href="http://www.thuvien.khunglong.info/">http://www.thuvien.khunglong.info</a>. Tuy nhiên, do bài viết bên trang của thuvien.khunglong hơi khó hiểu nên mình đã viết lại hoàn chỉnh và dễ hiểu và dễ thực hiện hơn nhiều.</span></div>

Đầu tiên, bạn chèn đoạn code bên dưới sau ngay thẻ <body> hoặc trước thẻ <div id='outer-wrapper'> . <b:section id=&#...