Tạo dropmenu xổ dọc một cấp đẹp cho blogspot

Dropmenu là một dạng menu chuyên nghiệp được rất nhiều người sử dụng cho website/blog cũng để tăng thêm tính chuyên nghiệp cho trang. Dropmenu thường được dùng đối với những trang web có nhiều chuyên mục mẹ và chuyên mục con, không chỉ những trang web tin tức hay bán hàng mà ngay cả những blog cá nhân cũng được sử dụng khá phổ biến. Dropmenu cũng rất đa dạng về phong cách và kiểu phân cấp cho chuyên mục.    

Ảnh minh hoạ

Bài viết này mình sẽ hướng dẫn các bạn tạo một menu xổ xuống (drop menu) giống trang remixhaydj.blogspot.com

Sau đây là các bước thực hiện:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ]]></b:skin>:

/* cat-menu by traidatmui.com & đoàntrịnh.vn */
#kjmenu{border-bottom:4px solid #e93302;background:#eee;height:30px;padding:0 0}.nav{font-size:12px;z-index:99;float:left;padding:0;list-style:none;line-height:30px;height:30px}.nav a{position:relative;display:block;z-index:90;text-decoration:none;color:#111}.nav li{float:left;margin:0 0 0 0}.nav li a{background:url(https://lh6.googleusercontent.com/-uxk1vSYyFSQ/UqsGmq5UOsI/AAAAAAAACRc/0jjaHqKfjJ0/s12/gngngn.gif) no-repeat right center;font:bold 12px tahoma;padding:0;text-decoration:none;line-height:30px}.nav li.last a{background:none}.nav li a span{padding:5px 9px 4px;color:#000;font-weight:bold}.nav li.current-cat a,.nav li.current-cat a,.nav li:hover a,.nav li a:hover{background:none;margin-bottom:0;text-decoration:none;color:#FFF}.nav li:hover span,.nav li a:hover span{color:#eee;font-weight:bold}.nav li.home a{margin:0 8px 0 0;background:#e93302;text-align:center}.nav li.home a span{color:#fff}.nav li.news:hover,.nav li.news:hover ul{background-color:#444}.nav li.nosub:hover,.nav li.nosub:hover ul{background-color:#e93302}.nav li.news:hover ul li.first{border-top:0}.nav li.news:hover ul li.last{border-bottom:none}.nav li ul{list-style:none;position:absolute;left:-999em;width:228px;margin:0 1px 0 0;z-index:999999;padding:6px 0 0 0}.nav .last ul{background:#fff;position:absolute;width:228px;margin:0 1px;z-index:999}.nav li ul li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5oEYC5cOe0oeAsBvWM3i7_130oHfi-Ofzk7gxDXsWBl2lJZIZ-nSwDP-sryDrZv0bUFZrN78IN851yOrVj5lTmbzadqXzx8mOuuQC61Lt1NCA-nR0yUq6a8mW07Rn5PC8vnxkrGIzJ0/s10/bullet.png) no-repeat 8px center;width:195px;clear:both;padding:7px 10px 7px 23px;border-top:1px dashed #333;margin-left:0}.nav li ul li a{line-height:1.3;padding:0;color:#eee !important;font-size:12px;text-transform:none;background:none}.nav li:hover ul li a{background:none;font-weight:bold}.nav li ul li:hover{border-top:1px dashed #e13203;background:#e93302 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5oEYC5cOe0oeAsBvWM3i7_130oHfi-Ofzk7gxDXsWBl2lJZIZ-nSwDP-sryDrZv0bUFZrN78IN851yOrVj5lTmbzadqXzx8mOuuQC61Lt1NCA-nR0yUq6a8mW07Rn5PC8vnxkrGIzJ0/s10/bullet.png) no-repeat 8px center}.nav li:hover,.nav li.hover{position:static}.nav li:hover ul ul,.nav li:hover ul ul ul,.nav li:hover ul ul ul ul{left:-999999}.nav li:hover ul,.nav li li:hover ul,.nav li li li:hover ul,.nav li li li li:hover ul{left:auto}.subMenu{background:#f4f5f7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdpFOwuUaBAO4_6wMwI7wjiVGe6lVlFbLZlYmavvQDg3opCv4pvX3-t3ZkZ09w6KpJSBVPwfmQJJ3bRM5Y6pNpN0vPwoikxlltm4pS_-6OgqZmctlNQqS1aH8ZwzWfHNmcb2xg7WUW9Nc/s27/bfgfgfg.gif) repeat-x 0 -2px;height:25px;padding:0;margin-bottom:7px}

Bước 2: Tìm đến vị trí muốn đặt menu và dán đoạn code bên dưới vào:

<!-- cat-menu by traidatmui.com & đoàntrịnh.vn -->
<div id='kjmenu'>
<ul class='nav'>
<li class='home iconhome'><a href='/'><span>Home</span></a></li>
<li class='news'><a href='#'><span>Dịch vụ</span></a>

<ul class='children'> 
<li class='first'><a href="#">Thiết kế Blogspot</a></li>
<li><a href="#">Tên miền - Domain</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Giới thiệu sản phẩm</a></li>
<li><a href="#">Free templates</a></li>
<li class='last'><a href="#">Free templates</a></li>

</ul>

</li>

<li class='news'><a href='#'><span>Blogspot Tips</span></a>
<ul class='children'> 
<li class='first'><a href="#">Blogger nâng cao</a></li>
<li><a href="#">Blogger cơ bản</a></li>
<li><a href="#">Thủ thuật SEO</a></li>
<li><a href="#">Tiện ích</a></li>
<li><a href="#">Domain&Hosting</a></li>
<li class='last'><a href="#">Free templates</a></li>

</ul>
</li>

<li class='news'><a href='#'><span>Thủ thuật PC</span></a>
<ul class='children'> 
<li class='first'><a href="#">Máy tính</a></li>
<li><a href="#">Photoshop</a></li>
<li class='last'><a href="#">Internet</a></li>

</ul>
</li>

<li class='news'><a href='#'><span>Cuộc sống</span></a>
<ul class='children'> 
<li class='first'><a href="#">Kinh nghiệm</a></li>
<li><a href="#">Bài học</a></li>
<li><a href="#">Ý nghĩa</a></li>
<li><a href="#">Danh ngôn</a></li>
<li><a href="#">Bí mật</a></li>
<li class='last'><a href="#">Cung hoàng đạo</a></li>

</ul>
</li>

<li class='news'><a href='#'><span>Kiến thức</span></a>
<ul class='children'> 
<li class='first'><a href="#">Marketing</a></li>
<li><a href="#">Chứng khoán</a></li>
<li><a href="#">Kiến thức IT</a></li>
<li><a href="#">Kỹ năng mềm</a></li>
<li class='last'><a href="#">Tiếng anh</a></li>

</ul>
</li>
<li class='news'><a href='#'><span>Download</span></a>
<ul class='children'> 
<li class='first'><a href="#">Phần mềm</a></li>
<li><a href="#">Ebooks</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Gói hình ảnh</a></li>
<li class='last'><a rel="nofollow" href="#">Toolbar Firefox</a></li>

</ul>
</li>
</ul>
<div class='clear'/>
</div></div>
<!-- end cat-menu --> 

Nếu muốn thêm một chuyên mục các bạn chỉ cần chèn vào trước phần màu xanh đoạn code sau:

<li class='news'><a href='#'><span>Chuyên mục</span></a>
<ul class='children'> 
<li class='first'><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li class='last'><a href="#">Menu 5</a></li>
</ul>
</li>

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

Đọc tiếp »

Tự Động Tóm Tắt Bài Viết Có Ảnh Thumbnail Không Dùng Javascript

Đây là thủ thuật tự động tóm tắt bài viết ở trang chủ có ảnh thumbnail và có ảnh thay thế khi bài viết không có ảnh,không sử dụng javascript nên tối ưu cho tốc độ load của blog.
Thủ thuật này là của DuyPham mình đã xài nên lưu trữ tại đây để khi nào không xài nữa còn biết lối tháo gỡ và ai thích thì lấy dùng :D

Các bước thực hiện:
Bước 1: Thêm class post-thumbnail để hiển thị hình ảnh.
Thêm đoạn mã dưới đây vào bên trên thẻ ]]></b:skin>
.post-thumbnail{float:left;margin-right:20px;border:1px solid #005595;border-radius:5px; background:#D2ECF5;width:72px;height:72px;padding:3px}
Trong đó đoạn bôi xanh mình thêm vào cho ảnh thumbnail thêm đẹp.
Bước 2. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh:
Thay thế <data:post.body/> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSjJgU67-9WvGWzsexNQna4A2f3ONJnz6AyiqOjTIKj3ipNYJVZjzbp-Qz-0RKsEnBeJz0U4_N7SVP2yGqOlO1_dRgIIEFBAg7EK0e4G0x_ynREm6UQCel38hbdcaboJpt-DCU87McnYSl/' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Lưu ý: Để có ảnh thumbnail thì ảnh cần up thẳng lên blog hay ảnh up lên picasa rồi dẫn link về bài viết.
Nguồn DuyPham

Đọc tiếp »

10 Nguyên Nhân Khiến Bài Viết Kém Thu Hút!

 

1. Bạn không đăng bài đủ thường xuyên.
Tần suất là những gì phân biệt những người đàn ông giữa các chàng trai… hoặc những người phụ nữ trưởng thành với các cô gái trẻ. Bạn không thể xây dựng lưu lượng truy cập vữ

Đọc tiếp »