Tạo Blog dễ như ăn phở

Nay, bá tánh coi chuyện viết blog cá nhân như một nhu cầu, với người này thì viết blog để nói ra những gì chất chứa chưa hay không có dịp, không có điều kiện để nói, còn với người khác thì viết blog để thố lộ những gì không phải là thầm kín.

Đa số bà con xem blog là nơi để chứng tỏ cái tôi (le Moi). Blog, thật sự đã gần trở thành nhu cầu cá nhân, tui bết có quá trời người muốn có 1 trang Blog cá nhân, để hưởng ứng, thằng tui đã lượm lặt và hệ thống lại một cách làm Blog đơn giản và thiết thực nhất, ngõ hầu thỏa mãn được nhu cầu của mọi người : tự mình làm một trang Blog của mình, trang blog có giao diện gần giống trang web.

Vậy, giờ mình bắt đầu nhé.

PHUONGNGUGIA CHỌN LỌC TỪ NHIỀU NGUỒN TRÊN MẠNG, SAU ĐÓ HỆ THỐNG LẠI CHO DỄ LÀM MỘT TRANG BLOG TRỞ THÀNH DỄ NHƯ ĂN MỘT TÔ PHỞ.

Phát triển Blog từ mẫu manima có sẵn của Google Bolgerspot ;

PHẦN 1 : Khởi tạo blogspot gồm 2 bước :
1/- Tạo hộp thư Gmail : Vô Gmail Email from Google và làm theo hướng dẫn.
2/- Tạo blog : Vô Bloger.com rồi theo hướng dẫn là OK. (nhớ là lựa mẫu Manima)
--------------------------
PHẦN 2 : Thêm cột cho blog:

- Một giao diện với ba cột : (vì khi post lên My blog, thằng tui nhận thấy có một vài thẻ không tương thích cho việc thực hiện bài này. Bởi vậy, tui đã buộc phải thay thế ký hiệu < và > bằng ký hiệu (( và )), khi thực hiện, mọi người hãy thay lại cho đúng nhé.

Xin hãy xóa toàn bộ code cũ và coppy và pass đoạn cốt này vô:

((?xml version="1.0" encoding="UTF-8" ?))
((!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"))
((html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'))
  ((head))
((script src='http://www.dynamicdrive.com/dynamicindex5/rainbow.js'))
((/script))
    ((b:include data='blog' name='all-head-content'/))
    ((title>    ((b:skin))((![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Minima
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
   ====================
   ((Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#000000"))
   ((Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#CAF99B"))
   ((Variable name="linkcolor" description="Link Color"
             type="color" default="#58a" value="#ffcc66"))
   ((Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#666" value="#ffff66"))
   ((Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#999" value="#ffffff"))
   ((Variable name="titlecolor" description="Post Title Color"
             type="color" default="#c60" value="#80FF00"))
   ((Variable name="bordercolor" description="Border Color"
             type="color" default="#ccc" value="#ffff66"))
   ((Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#999" value="#99C9FF"))
   ((Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#666" value="#ffffff"))
   ((Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#999" value="#ffff66"))
   ((Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 130% Times, serif"))
   ((Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 55% Georgia, Times, serif"))
   ((Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="italic bold 176% Verdana, sans-serif">
   ((Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"))
   ((Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 29% Arial, sans-serif"))
   ((Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left"))
   ((Variable name="endSide" description="Side where text ends in blog language"
             type="automatic" default="right" value="right"))
*/

/* Use this with templates/template-twocol.html */

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
  }

/* Header
-----------------------------------------------
 */

#header-wrapper {
  width:750px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header { 
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 750px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

#main-wrapper {
  width: 400px;
    margin-left: 20px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 150px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}


/* Headings
----------------------------------------------- */

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}


/* Posts
-----------------------------------------------
 */
h2.date-header {
  margin:1.5em 0 .5em;
  }

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}

.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}

.post-body blockquote {
  line-height:1.3em;  
}

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
}

.comment-link {
  margin-$startSide:.6em;
  }
.post img {
  padding:4px;
  }
.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }

/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0 0 .75em;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }

#blog-pager-newer-link {
  float: $startSide;
 }
 
#blog-pager-older-link {
  float: $endSide;
 }

#blog-pager { 
  text-align: center;
 }

.feed-links {
  clear: both;
  line-height: 2.5em;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar { 
  color: $sidebartextcolor;
  line-height: 1.5em;
 }

.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}
.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }

.sidebar .widget, .main .widget { 
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

.main .Blog { 
  border-bottom-width: 0;
}


/* Profile 
----------------------------------------------- */
.profile-img { 
  float: $startSide;
  margin-top: 0;
  margin-$endSide: 5px;
  margin-bottom: 5px;
  margin-$startSide: 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}

.profile-data {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.6em;
}

.profile-datablock { 
  margin:.5em 0 .5em;
}

.profile-textblock { 
  margin: 0.5em 0;
  line-height: 1.6em;
}

.profile-link { 
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer {
  width:750px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}
]]))((/b:skin))

((style))((b:if cond='data:blog.pageType == "item"'> span.fullpost {display:inline;}((b:else/))span.fullpost {display:none;} ((/b:if>  ((/head))
((script src='http://www.dynamicdrive.com/dynamicindex5/rainbow.js'))
((/script))

  ((body))
  ((div id='outer-wrapper'))((div id='wrap2'))

    ((!-- skip links for text browsers --))
    ((span id='skiplinks' style='display:none;'))
      ((a href='#main'))skip to main ((/a)) |
      ((a href='#sidebar'))skip to sidebar((/a))
    ((/span))

    ((div id='header-wrapper'))
      ((b:section class='header' id='header' maxwidgets='1' showaddelement='no'))
((b:widget id='Header1' locked='true' title='tên của bạn (Tiêu đề)' type='Header'/))
((/b:section))
    ((/div))
 
    ((div id='content-wrapper'))

      ((div id='crosscol-wrapper' style='text-align:center'))
        ((b:section class='crosscol' id='crosscol' showaddelement='no'/))
      ((/div))

((div id='newsidebar-wrapper'))
((b:section class='sidebar' id='newsidebar' preferred='yes'))
((b:widget id='HTML3' locked='false' title='' type='HTML'/))
((b:widget id='HTML6' locked='false' title='người đang online' type='HTML'/))
((b:widget id='Image2' locked='false' title='' type='Image'/))
((b:widget id='Gadget1' locked='false' title='Currency Converter' type='Gadget'/))
((b:widget id='Gadget2' locked='false' title='Free Sport Wallpapers' type='Gadget'/))
((/b:section))
((/div))

      ((div id='main-wrapper'>
        ((b:section class='main' id='main' showaddelement='no'))
((b:widget id='HTML5' locked='false' title='' type='HTML'/))
((b:widget id='HTML7' locked='false' title='' type='HTML'/))
((b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/))
((b:widget id='HTML8' locked='false' title='' type='HTML'/))
((/b:section))
      ((/div))

      ((div id='sidebar-wrapper'))
        ((b:section class='sidebar' id='sidebar' preferred='yes'))
((b:widget id='HTML4' locked='false' title='' type='HTML'/))
((b:widget id='HTML2' locked='false' title='' type='HTML'/))
((b:widget id='HTML1' locked='false' title='My house' type='HTML'/))
((b:widget id='BlogArchive1' locked='false' title='Lưu trữ Blog' type='BlogArchive'/))
((/b:section))
      ((/div))

      ((!-- spacer for skins that want sidebar and main to be the same height--))
      ((div class='clear')) ((/div))

    ((/div)) ((!-- end content-wrapper --))

    ((div id='footer-wrapper'))
      ((b:section class='footer' id='footer'/))
    ((/div))

  ((/div))((/div)) ((!-- end outer-wrapper --))
((/body))
((/html))

- Lưu ý - Hướng dẫn bá tánh đổi ký tự cho lẹ:
1/- Coppy đoạn code rồi pass vô 1 file word mới mở ra.
2/- Tô đen ký tự (( trong file mới pass vô.
3/- Nhấn Ctrl + H thì sẽ hiện ra Bảng Find and Replace
                Ở khung Find What ta thấy ký tự ((
                Ở khung Replace What thì ta nhập ký tự < vô khung.
4/- Bấm nút Replate All để đổi toàn bộ ký tự của đoạn code.
5/- Làm tương tự với ký tự ))
6/- Coppy toàn bộ rồi pass vô phần HTML của trang Blog rồi bấm lưu mẫu là OK.
------------------------------------------------------------------------------------

PHẦN 3 : (phuongngugia đề nghị tới đây hãy tạm ngưng công việc với blog để đăng ký tên miền co.cc)

Tên miền .CO.CC

Hãy nhập từ khóa : tên miền co.cc vô trang trình duyệt và gõ Enter, trang kế tiếp của trình duyệt
Sau khi khai báo, đến phần setup thì cài đặt từng phần như sau :

Trong khung Domaint ttblog.co.cc có 3 phần cài đặt

1/- cài đặt 1 : Manage DNS
Hãy coopy hai hàng chữ dưới và pass vô Name sever 1 và Name sever 2 như dưới đây
Name sever 1 : ns1.everydns.net
Name sever 2 : ns2.everydns.net
Rồi bấm OK

2/- cài đặt 2 : Zone records
Ở khung Host : ta nhập www.tencuaban.co.cc
Ở khung TTL: ta chọn 1H
Ở khung Type : ta chọn CNAME
Ở khung Value : ta nhập hàng chữ ghs.google.com
Rồi bấm OK

3/- Cài đặt 3 : URL Fowardrng (hãy nhập địa chỉ blog của mình)
Ở khung Redirec To : http:// tencuaban.blogspot.com
Ở khung Page Title : (nếu là nhật ký thì để) Nhật ký
Ở khung Frame : chọn Path Fowarding Dipsplay real address
Rồi bấm OK
-----------------------------------------------------------------------------------

Tới đây có thể yên tâm thực hiện tiếp blog

Sau khi yên tâm với tên miền quốc tế vừa đăng ký. Hãy tìm hiểu thật kỹ các Tiện ích để thực hiện Blog của mình, nhớ là hãy tìm hiểu thật kỹ. Sua khi thử và xóa một vài lần là ta đã nắm được về cơ bản, tôi cũng từng như vậy.

Hãy chú ý tới tiện ích Labels, trong mỗi bài viết hay sưu tầm của mình, xin hãy nhớ đặt tên NHÃN cho Labels, việc này rất quan trọng vì nó mới đáp ứng được việc dùng menu cho Blog.
Đến đây là Blog đã hoàn tất phần cơ bản và vô phần kế.

CÁC ỨNG DỤNG CHO BLOB

Hãy coppy và pass vo JavaScrift :

Chữ chạy :
((marquee bgcolor="blue"))Kính chào quý khách((/marquee))

Kết quà, ta có hàng chữ chạy như sau :
Kính chào quý khách
---------------------------------------------------

Chèn Yahoo ID :
Mẫu của phuongngugia đang dùng:

((table border="1" align="center" cellpadding="0" cellspacing="1" width="150"))
((tbody))((tr))
((td class="menu_left1" height="20" width="100%"))((div align="center"))MỸ “Eden”((/div))((/td))((/tr))
((tr))((td bgcolor="#cc0000"))((a href="ymsgr:sendim?comy1807"))((br/))((img border="0" alt="edenmy.blogspot.com" src="http://opi.yahoo.com/online?u=comy1807&m=g&t=2"/))((br/))((/a))((/td))((/tr))((/tbody))((/table))

Kết quà, ta có khung như dưới, xin hãy thay URL (địa chỉ Blog) và Nickname của bạn vô phần của Mỹ "Eden" nhé.

MỸ “Eden”

---------------------------------------------------

MÃ MÀU : vài màu làm mẫu nhé
#3D81EE xanh dương
#cc0000 đỏ
#ffff66 vàng
#80FF00 xanh lá mạ
#FF6FCF hồng
#000000 đen
#41627e : xanh xám
#ffffff : màu trắng
#CAF99B Màu xanh lạt
#a9501b Màu nâu hơi đậm
#ffffcc màu vàng lợt

Và còn có trang mã màu đầy đủ, xin hãy bấm vô đây để lấy mã.
----------------------------------------------------

Chèn Bản đồ trực tuyến:

code là :

((iframe src="http://wikimapia.org/s/#lat=10.7715649&lon=106.7019653&z=18&l=0&m=a&v=2" width="250" height="250" frameborder="0"))((/iframe))

Hãy chèn vào Java cripz… bản đồ trực tuyến VIKIMAPIA để chỉ nhà mình hay gì tùy thích…
-------------------------------------------------------

Code nhạc nền cho blog (Chèn trong một khung java cố định )

((embed showdisplay="0" showstatusbar="1" showcontrols="1" loop="true" autostart="1" type="application/x-mplayer2" src="http://www3.tuoitre.com.vn/media/PlayList.aspx?Album=8" space="0" align="middle" height="1" width="1"))((/embed))

-----
Có thể đổi các số từ Album= 8 - 12
--------------------------------------------------------

Hiệu ứng giọt nước cho nền bài viết : (Chèn trên đầu bài viết)

((div style="height: 10px;"))((span ))((embed src="http://www41.websamba.com/huykyvn/imge/giotnuoc.swf" type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="none" width="570" height="250"))((/embed))((/span))((/div))

---------------------------------------------------------

Tạo liên kết màu bảy sắc cầu vồng trong Google Blogger

Vào phần Chỉnh Sửa HTML chọn Mở Rộng Mẫu Tiện Ích , tìm đến phần ((head)) và dán đoạn code dưới đây ngay phía dưới nó
((script src="http://www.dynamicdrive.com/dynamicindex5/rainbow.js"))((/script))
----------------------
Nếu muốn hình ở blog khi tải lên không có đường viền :

- Hãy vào Trình bày > Chỉnh Sửa HTML > Mở Rộng Mẫu Tiện Ích
Tìm đến dòng này
.post img {
và tìm xóa những phần có từ border trong phần
.post img {
cụ thể là xóa bỏ dòng : border:1px solid $bordercolor;
}
--------------------------------------------------------

Đưa thêm tìm kiếm google vào trên blog :

Để đưa công cụ tìm kiếm của google vào blog có thể dùng đoạn mã sau. Cần thay đổi phuongngugia.blogspot.com thành địa chỉ blog của mình. Nếu check (chọn) vào nút My Blog thì có nghĩa là chỉ tìm kiếm trong blog này còn không thì nó sẽ tìm kiếm trên toàn bộ internet :

((form action="http://www.google.com/custom")) 
((input type="text" name="q" size="20" /)) 
((input type="submit" value="Search" /)) 
((div)) 
((input type="radio" name="sitesearch" value="" /)) Web 
((input type="radio" name="sitesearch" 
value="phuongngugia.blogspot.com" checked="checked" /)) phuongngugia.Blog 
((/div)) 
((/form))

SẼ hiển thị là :

Web
value="phuongngugia.blogspot.com" checked="checked" /> phuongngugia.Blog

--------------------------------------------------------------

Tạo icon Email thật kool

Text
Chắc hẳn các bạn cũng biết đoạn code trên chính là mã dùng để email tới một người nào đó , nhưng nếu chỉ để Text thế cho đoạn mã, ví dụ : Gửi email tới tôi v.v. thì ít bắt mắt . Chính vì thế mà ta cần chèn một hình ảnh nào đó để làm sinh động thêm cho mã Email bằng đoạn code sau
((a href="mailto:địa chỉ email"))((img src="URL hình ảnh"))((/a))
Vấn đề là phải tìm một hình đại diện hoặc icon vừa đúng mục đích mà vừa đẹp , vậy các bạn đã tìm thấy một hình nào chưa , nếu chưa thì các bạn hãy vào http://services.nexodyne.com/email/index.php và tạo cho mình các icon email thiệt đẹp nhé .
---------------------------------------------------------

Thanh Menu dọc của phuongngugia

  




  
  

   PHƯƠNG “Ngũ Gia”
  
  

  






















  
   

   Trang chủ
          

   Tản mạn
      

   Hồi ức
     

   Ngẫu hứng
       

   Lượm lặt
    

--------------------------------------------------------

Số lượt người đã xem

free hit counters

Code là :

((!-- Start of SimpleHitCounter Code --)) 
((div align="center"))((a href="http://www.simplehitcounter.com" target="_blank"))((img border="0" width="83" alt="free hit counters" src="http://simplehitcounter.com/hit.asp?uid=38358&f=16777215&b=0" height="18"/))((/a))((br/))((a href="http://www.simplehitcounter.com" target="_blank"))((font size="-3"))free hit counters((/font))((/a))((/div)) 
((!-- End of SimpleHitCounter Code --))

-----------------------------------------------------

Số người đang xem

Code là :

((div style="width: 180px; text-align: center;")) ((embed allowscriptaccess="none" align="middle" type="application/x-shockwave-flash" height="60" src="http://web2.modmyprofile.com/flash/usersonline/uo.swf?myid=289387&mycolor=003399" bgcolor="#ffffff" width="180" wmode="transparent")) ((/embed))((/div))((br/))

Tất nhiên là còn cách khác nhưng để khi nào bạn rành rồi sẽ tự tìm hiểu sau nhé.
---------------------------------------------------

MENU NẰM NGANG GIỐNG NHƯ CÁC TRANG WEB KHÁC (coppy vô 1 JavaScrift rồi đưa nó lên trên nằm ngang trên cùng, ngay dưới Tiêu đề của Your Blog)

((div style="border-right: gray 1px solid; padding-right: 4px; padding-left: 4px; font-size: 8pt; border-top: gray 1px solid; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, 'Courier New', courier, monospace; background-color: #f4f4f4"))
  ((pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">((!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"))
(html xml:lang="en") 
(head)
(title)Dropdown Menu(/title)
((meta http-equiv="Content-Language" content="en-gb" /))
((meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /))
((style type="text/css"))
a {
   text-decoration: none;
}

a:link {
   color: #080;
}

a:visited {
   color: #790;
}

a:active {
   color: red;
}

a:hover {
   text-decoration: underline;
}

.divlink a {
display: block;
width: 160px;
background: url(images/navbg.gif) repeat;
}

.divlink a:hover {
background: url(images/navhoover.gif) repeat;
}

ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

#nav a {
   font-weight: bold;
   color: #336699;
}

#nav a {
   text-decoration: none;
}

#nav li li a {
   display: block;
   font-weight: normal;
   color: #336699;
   padding: 0.2em 10px;
}

#nav li li a:hover {
   width: 138px;
             background: url(images/navhoover.gif) repeat;

}

li {
   float: left;
   position: relative;
   width: 10em;
   text-align: center;
   cursor: default;
   background-color: white;
   border: 1px solid #336699;

}

li#first {
   border-left-width: 1em;
}

li#last {
   border-right-width: 1em;
}

li ul {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   font-weight: normal;
   background-color: #fff;
   border-right: solid 1px #666666;
             border-left: solid 1px #666666;
             border-bottom: solid 1px #666666;
}

li>ul {
   top: auto;
   left: auto;
}

li li {
   display: block;
   float: none;
   background-color: transparent;
   border: 0;
}

li:hover ul, li.over ul {
   display: block;
}

((/style))

((script type="text/javascript"))

loadTopMenu = function() 
{   
if (document.all&&document.getElementById) 
{      
  menunavParent = document.getElementById("nav");   
   
   for (x=0; x < menunavParent.childNodes.length; x++) 
     {      
        menunode = menunavParent.childNodes[x];
         
           if (menunode.nodeName=="LI") 
             {         
              menunode.onmouseover=function() 
                {            
                this.className+=" over";         
                }         
                menunode.onmouseout=function() 
                {            
                  this.className=this.className.replace(" over", "");
     }
           }
        }
     }
}
window.onload=loadTopMenu;

((/script))
((/head))

((body))
((div))
((ul id="nav"))

   ((li id="first"))
      ((div class="divlink"))((a href="URL trang Blog của bạn"))Link Name((/a))((/div))
      ((ul))
         ((li))((a href=""))Link Name((/a))((/li))
         ((li))((a href=""))Link Name((/a))((/li))
         ((li))((a href=""))Link Name((/a))((/li))
         ((li))((a href=""))Link Name((/a))((/li))
         ((li))((a href=""))Link Name((/a))((/li))
         ((li))((a href=""))Link Name((/a))((/li))
         ((li))((a href=""))Link Name((/a))((/li))
    ((/ul))
   ((/li))
((li))
((li id="last"))
((/ul))
((/div))
((/body))
((/html))
((/pre))
((/div))

Muốn bao nhiêu link name thì chỉ việc coppy và pass là OK

---------------

Menu dọc

onclick="window.location.href='http://phuongngugia.blogspot.com/'" class="nav2sub">TRANG NHÀ

onclick="window.location.href='http://phuongngugia.blogspot.com/search/label/H%E1%BB%93i%20%E1%BB%A9c'" class="nav2sub">Hồi ức






onclick="window.location.href='http://phuongngugia.blogspot.com/search/label/L%C6%B0%E1%BB%A3m%20l%E1%BA%B7t'" class="nav2sub">Lượm lặt

onclick="window.location.href='http://phuongngugia.blogspot.com/search/label/Ng%E1%BA%ABu%20h%E1%BB%A9ng'" class="nav2sub">Ngẫu hứng


onclick="window.location.href='http://phuongngugia.blogspot.com/search/label/T%E1%BA%A3n%20m%E1%BA%A1n'" class="nav2sub">Tản mạn

-------------
(còn tiếp)

Bài cùng chủ đề :
- Tạo trang Blog có Template 4 cột
- Cách lấy Link của toàn bộ một Labels Print