Tạo trình Menu thả xuống đơn giản

Có bao giờ bạn thấy Menu như hình dưới? Với Menu này bạn chỉ cần click chọn vào trình đơn thả xuống để chọn. Bạn hãy thử click vào để thử.

  - Blog Tutorial -    Start to blogging   Blog setting   Backup template   backup widget    

Tên của nó thường gọi là Trình đơn Menu thả xuống.

Để tạo trình đơn này bạn có thể thực hiện bởi mã sau:



<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected> Tiêu đề do bạn ghi! </option>

<option value=" Đường link thể hiện tại đây "> Đoạn văn bản thể hiện </option> </select></form>


Ví dụ với các mã như sau:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option>- Blog Tutorial - </option>
<!-- change the links with your own -->
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/strart-to-blogging.html">Start to blogging</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-settings-your-blog.html">Blog setting</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/11/how-to-backup-template.html">Backup template</option>
<option value="http://rohman-freeblogtemplate.blogspot.com/2007/12/how-to-backup-your-widgets_19.html">backup widget</option>

</select></form>

Bạn sẽ được kết quả: 

  - Blog Tutorial -     Start to blogging    Blog setting   Backup template   backup widget    

Bây giờ bạn có thể tạo cho blog của mình 1 trình đơn Menu như trên, các bước thực hiện rất đơn giản. 
Trước tiên, bạn làm các bước sau : 

1. Đăng nhập vàoLogin to blogger
2. Sau khi đăng nhập, bạn vào Bảng điều khiển (dasboard page) , click chọn Bố cục (Layout).
3. Click chọn vào tab Phần tử trang (Page Element). Xem hình minh hoạ. Ở đây tôi minh hoạ cho các bạn bằng bẳng tiếng anh.

4. Click chọn vào Thêm tiện ích (Add a Page element).
5. Sau khi hiện ra cửa sổ popup window , click chọn Thêm tiện ích (add to blog) HTML/JavaScript. Như hình minh hoạ sau :

6. Bạn Copy và dán code bên dưới vào :
7. Click chọn 
8. Hoàn thành và bạn hãy xem lại thành quả của mình.

Ok, bạn đã có 1 dropdown menu cho blog của mình. Nếu bạn vẫn lúng túng với các bước trên bạn hãy đăng nhập vào blog của bạn và thêm widget một cách tự động: 

  - Blog Tutorial -     Start to blogging   Blog setting   Backup template   backup widget     

Click nút sau để tự động thêm vào Blog của bạn.

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

Read more »

Tạo trang chủ cho blog

Trang chủ blog (Home Page) là trang đầu tiên khách hàng truy cập trực tiếp vào weblog của bạn nếu được thiết kế và bố trí các thành phần đẹp, hấp dẫn, độc đáo và thuận tiện sẽ thu hút khách hàng truy cập không chỉ một lần mà sẽ thường xuyên truy cập trở lại để tìm kiếm thông tin mà bạn xuất bản và trong tương lai có thể trở thành người đọc trung thành, khách hàng tiềm năng của  bạn.

Ngược lại, cho dù nội dung và sản phẩm mà bạn cung cấp là rất hữu ích nhưng trang chủ mà bạn thiết kế không làm nổi bật được điều đó, không có khả năng thu hút sự chú ý của khách truy cập, thì weblog của bạn sẽ dần mất đi giá trị thực của nó.

Vậy một trang chủ như thế nào sẽ được coi là hấp dẫn và có khả năng "bắt mắt" khách truy cập . Dưới đây là một số gợi ý để bạn tạo cho mình một “Trang chủ” đáp ứng được các yêu cầu trên.

1. Thu hút sự quan tâm của khách truy cập bằng chủ đề chính

Về bản chất “Trang chủ” là trang chào mừng, bộ mặt của blog chứa đựng các thông tin, các công cụ giúp khách truy cập dễ dàng truy cập các thông tin cần thiết.

Rất nhiều trang web đã để lãng phí những khoảng không giá trị trên trang chủ với những câu khẩu hiệu chào mừng như: "Welcome to …XYZ!" hay những bài giới thiệu dài dòng. Tất cả những trang chủ được thiết kế với như vậy thường không thu hút được sự chú ý của khách truy cập.

Trang chủ của bạn là trang đinh hướng, truyền tải nội dung blog của bạn mang đến cho khách truy cập. Ngay từ khi lập blog bạn đã xác định rõ ràng nội dung, hình ảnh mà blog bạn sẽ cung cấp do vậy hãy thu hút sự quan tâm của khách truy cập, blogosphere bằng nội dung chính, chủ đề chính mà bạn đã xây dựng, đừng cố nhồi nhét đủ các chủ đề vào đó.

2. Cung cấp các thông tin ngắn gọn và đơn giản

Mục đích truy cập Internet của khách là nhanh chóng có được những thông tin mà họ quan tâm. Do vậy  hãy tạo thuận lợi cho khách truy cập bằng việc thiết kế một trang chủ thật đơn giản và ngắn gọn

Liệt kê, giới thiệu các chủ đề, danh mục bằng cách đánh dấu theo từng khoản mục rõ ràng bằng cách sử dụng mầu, thẻ header tag hay các thanh công cụ để phân định, bạn có thể sử dụng những kỹ thuật, kỹ xảo làm nổi bật những khoản mục quan trọng.

Xây dựng những đoạn thông tin ngắn: Hãy xây dựng những đoạn text ngắn và làm nổi bật những nội dung chính quan trọng của từng bài viết. Với những kỹ thuật thiết kế trên cùng với sự kết hợp các đường link kết nối, khách truy cập sẽ có được đầy đủ những thông tin mà weblog của bạn cung cấp một cách thuận tiện và nhanh nhất.

Ai đó đã vì “Trang chủ” của một weblog nó giống như một món ăn khai vị của một bữa tiệc. Hãy tạo cho khách truy cập cảm giác ngon miệng và sự hấp dẫn của những món ăn khác mà bạn sẽ cung cấp.

3. Thêm các Tiện ích để chỉ dẫn truy cập

Trang chủ của blog nên bao gồm những yếu tố, các tiện ích hữu ích nhất cho khách truy cập.

Một hệ thống điều hướng hay chỉ dẫn truy cập là rất quan trọng nếu bạn muốn thu hút và tăng số lượng khách truy cập. Hệ thống điều hường (menu/Navigation) bao gồm các thành phẩn chính:

- Công cụ điều hướng truy cập: Hãy tặng cho khách hàng của bạn các lựa chọn điều hướng bằng các Mmenu các Navigation (thanh điều hướng) theo các danh mục rõ ràng, dễ nhìn, và dễ dàng thao tác chỉ bằng một click..

- Công cụ tìm kiếm: là công cụ không thể thiếu để khách truy cập  tra cứu thông tin trong blog của bạn một cách nhanh nhất  Rất đơn giản, bạn không cần phải dùng bất kỳ một thủ thuật nào để thực hiện bạn hãy sử dung dịch vụ của một số nhà cung cấp máy chủ, như: Google, FreeFind.

- Sơ đồ trang:  là rất hữu ích không chỉ cho khách truy cập mà cho chính bạn khi bạn muốn quản lý, theo dõi và cập nhật dữ liệu. Sơ đồ trang sẽ giúp bạn xây dựng được mối liên kết giữa tất cả các nội dung của blog.

Ngoài ra trang chủ còn bao gồm các yếu tố quan trọng sau:

• Bài Posts
• Đoạn giới thiệu  About me
• Trang Contact
• Danh mục
• Blogroll
• Subscription

Một khi webblog của bạn phát triển, bạn có thể thêm các yếu tố như lưu trữ Archive, danh sách bài đăng gần đây (Recent post)  và phổ biến (Popular Post), quảng cáo, hoặc nút  Donate và còn nhiều hơn nữa cho lựa chọn của bạn.

Chúc các bạn bố trí thiết kế cho mình một Trang chủ đẹp

Read more »

Tạo thanh điều hướng cho blog

-- Thanh điều hướng kiểu breadcrumb (kiểu theo dấu vết ruột bánh mì) là thanh điều hướng cho phép người lướt web truy tìm nội dung theo chủ đề. Nó bắt nguồn từ câu chuyện dấu vết những cái ruột bánh mì bị bỏ lại bởi Hansel và Gretel trong truyện cổ tích nổi tiếng của anh em nhà Grimm.




Chuyện là thế này: Hansel và Gretel là 2 đứa trẻ trong một gia đình rất nghèo. Bố mẹ chúng nghèo quá đến nỗi không có gì để cho con cái ăn. Họ đã quyết định đem những đứa trẻ vào rừng và bỏ mặc chúng cho thú hoang ăn thịt. Hansel và Gretel đã phát hiện ra kế hoạch khủng khiếp này và có những biện pháp đề phòng trước. Chúng mang theo một cái bánh mì và thả rơi những mẫu ruột bánh mì dọc theo đường đi để tìm đường về nhà. Nhưng chẳng may chúng đã không tìm được đường về nhà và bị bắt giữ bởi một mụ phù thủy độc ác.



Từ câu chuyện này, ngày nay chúng ta có thể thấy thanh điều hướng theo kiểu “truy tìm đường theo mẫu ruột bánh mì” trên nhiều website để tìm lối trở lại Trang chủ.

Thanh điều hướng breadcrumb xuất hiện nằm ngang trên đầu trang web, thường nằm dưới hoặc trên tiêu đề bài viết. Chúng cung cấp đường dẫn trở lại trang trước, đến một chủ đề nào đó hoặc trở về trang chủ. Nhìn chung người thiết kế thường sử dụng các dấu phân cách như > hoặc ».



Thanh điều hướng breadcrumb điển hình trông như thế này:

Bạn đang ở : Home » Thủ thuật bloger » Tạo thanh điều hướng kiểu breadcrumb




Sau đây là hướng dẫn thiết lập thanh điều hướng breadcrumb cho Blogger:

Bước 1: Đăng nhập Blogger, vào Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML).

Nhớ backup Template của bạn và chọn Mở rộng Mẫu tiện ích (Expand Widget Template).



Bước 2: Tìm đoạn code sau đây (Nhấn Ctrl+F để tìm):

<b:include data='top' name='status-message'/>



Thay thế đoạn code trên bằng đoạn code sau đây:

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>


Kế đến tìm đoạn code như bên dưới:

<b:includable id='main' var='top'>


và thêm trước nó với đoạn code sau đây:

<b:includable id='breadcrumb' var='posts'>


<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>


<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>


</b:loop>

<b:else/>

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</span>

</p>


<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<!-- breadcrumb for the label archive page and search pages.. -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187;


<data:blog.pageName/>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<p class='breadcrumbs'>

<span class='post-labels'>

<b:if cond='data:blog.pageName == &quot;&quot;'>


<a expr:href='data:blog.homepageUrl'>Home</a> &#187;

<b:else/>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187;

<data:blog.pageName/>

</b:if>


</span>

</p>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

Bước 3: Thêm đoạn code dưới đây vào trước dòng ]]></b:skin>.

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

}

Lưu Template lại là xong.

Ngoài ra bạn còn có thể chỉnh sửa Css để thanh breadcrumb của bạn trông dễ nhìn hơn.Vd Blog mình có 2 dòng kẻ trên dưới breadcrumb 

Read more »

Tạo menu đơn giản

Read more »

CÁCH TẠO LIST NHẠC CHO BLOG TỪ MIXPOD.COM

Hôm nay lên mạng tình cờ tìm được 1 trang web dịch vụ nhạc rất hay :">. Các bạn không cần phải upload video clip của mình lên mà chỉ cần tìm bài hát hoặc video clip. Sau đó đưa vào play list của mình :">. Skin của flash play nhạc rất đẹp có nhiều mẫu đa dang cho các bạn chọn lựa nữa hehe... Chúng ta bắt đầu nào  

Đầu tiên các bạn vào trang web http://www.mixpod.com Sau đó nhấn vào chữ Create Playlist để bắt đầu tạo playlist.

    

Các bạn được đưa đến trang Create A Music Playlist của MixPod. Đầu tiên các bạn tìm các bài hát hoặc các video clip bài hát cho playlist của mình bằng cách ghi "tên bài hát" + "tên ca si/nhóm nhạc" + "MV (nếu tìm clip)" hoặc copy link video tại youtube rồi paste vào khung Search.

Nhấn nút add để thêm bài hát vào playlist:

   

 

Bước 2 : Các bạn nhấn nút Customize để chọn skin cho cái play nhạc của bạn.

   


Bước 3: Save playlist - Các bạn điền đầy đủ thông tin, chọn rồi nhấn Save (get code) nha 

    

Bước 4: Đăng kí thành viên. Các bạn điền đầy đủ thông tin nhé rồi nhấn Sign up.

      

Bước 5: Trên thanh menu màu đen phía trên trang web chọn My Playlist

Chọn playlist mà bạn muốn đưa vào blog:


Click chọn Get code

Đến bước này thì coi như bạn đã gần hoàn thành chặng đường của mình rồi đó ..Sau khi copy Code ra , mình khuyên bạn nên bỏ vào Notepad hoặc Word để có thể dễ biết và dễ làm hơn !!
đây là đoạn code mình đã copy từ list nhạc của mình nàh!!!!

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyODg3NzM4MDc3NDQmcHQ9MTI4ODc3MzgwOTU*MSZwPTE4MDMxJmQ9Jmc9MSZvPTQ1MjhlMGMxNmRlMzRhYmViNjBi/ODg4Mjk4N2ZhMWVl.gif" /><embed src="http://assets.mixpod.com/swf/mp3/mff-txtzoom.swf?myid=44399962&path=2010/02/15" quality="high" wmode="transparent" flashvars="mycolor=ffffff&mycolor2=ffffff&mycolor3=f70371&autoplay=true&rand=1&f=4&vol=100&pat=7&grad=false" width="220" height="128" name="myflashfetish" salign="TL" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" style="visibility:visible;width:220px;height:128px;" /><br><a href="http://www.mixpod.com/playlist/44399962" target="_blank"><img src="http://assets.myflashfetish.com/images/get-tracks.gif" title="Get Music Tracks!" style="border-style:none;" alt="Music"></a><a href="http://www.mixpod.com" target="_blank"><img src="http://assets.mixpod.com/images/make-own.gif" title="Create A Playlist!" style="border-style:none;" alt="Playlist"></a><br /><a href="http://mixpod.com">Music</a> <a href="http://mixpod.com">Playlist</a> at <a href="http://mixpod.com">MixPod.com</a>

Các bạn nhớ chú ý cho kĩ hai đoạn code mình đã tô màu hồng và màu xanhcái đó mới là phần chính của code!

Màu hồng là link Skin: Các bạn thay vào Link Skin nha !
Màu xanh là mã list nhạc của bạn :

Đây là code tổng quát để cho các bạn thay nè : </p><p align="center"><embed type="application/x-shockwave-flash" allowscriptaccess="never" src="http://i173.photobucket.com/albums/w49/chiplove9xpro/Flash/Share/chiploveFlashloader.swf?file=Link skin?Mãlistnhạc" wmode="transparent" flashvars="mycolor=222222&mycolor2=77ADD1&mycolor3=FFFFFF&autoplay=true&rand=0&f=4&vol=100&pat=0&grad=false" style="visibility:visible;width:Xpx;height:Ypx;"/><br></p></center>

Các bạn thay X, Y là chiều ngang và chiều cao của playlist

Read more »

Ẩn tiện ích và thành phần tại trang chủ hoặc trang riêng biệt

(Huynh Nhat Ha's Blog) -- Chúng ta đã biết cách ẩn bài viết ở trang chủ vàchỉ hiển thị tiện ích ở trang chủ hoặc trang riêng biệt. Đôi khi chúng ta cần ẩn một hay nhiều tiện ích hoặc một thành phần nào đó tại trang chủ hoặc trang riêng biệt nào đó để giúp dễ dàng hơn trong việc bố trí thiết kế trang chủ blogspot theo ý thích của người tạo blog. Hôm nay tôi sẽ hướng dẫn cách ẩn tiện ích và thành phần ở một phần riêng biệt nào đó của blog.

Muốn ẩn một tiện ích hoặc một thành phần nào đó thì ta phải xác định được id hoặc class của nó. Các id thông thường trong blogspot như là: HTML1, HTML2, HTML3, …, Label1, Label2, Label3, …, BlogList1, Followers1, Blog1, BlogArchive1, Profile1, header-wrapper, sidebar, main-wrapper, footer-wrapper, comments, comments-block, … Các id khi đưa vào CSS có dấu # ở phía trước, ví dụ: #HTML1. Các class thường gặp trong blogspot như: header-outer, main-outer, footer-outer, post-body, post-footer, … Các class khi đưa vào CSS có dấu . (dấu chấm) ở phía trước, ví dụ: .header-outer.

Lấy ví dụ muốn ẩn tiện ích có id là HTML1 ở trang chủ thì đặt đoạn code sau đây vào sau dòng ]]></b:skin> trong Template.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn nhiều tiện ích ở trang chủ, ví dụ các tiện ích có id lần lượt là HTML1, Label1, Followers1 thì sử dụng đoạn code sau.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#HTML1, #Label1, #Followers1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang bài viết thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang chính gồm trang chủ, trang nhãn, trang lưu trữ thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang lưu trữ thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở các trang tĩnh thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Nếu muốn ẩn tiện ích có id là HTML1 ở một trang riêng biệt nào đó thì sử dụng đoạn code sau.

<b:if cond='data:blog.url == &quot;URL của trang riêng biệt&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Trong trường hợp muốn ẩn tiện ích có id là HTML1 ở trang chủ, các trang nhãn, các trang lưu trữ mà không ẩn ở các trang bài viết thì sử dụng đoạn code sau.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>

Như vậy muốn ẩn một cái gì đó thì nó phải có id hoặc class.

Read more »

Hiệu ứng chuyển động con lắc cho Nhãn

Hiệu ứng lúc lắc cho liên kết Nhãn

(Huynh Nhat Ha's Blog) -- Hiệu ứng liên kết lúc lắc là một kiểu hiệu ứng khá độc đáo cho liên kết sử dụng thư viện jQuery do webdesigner David Wash tại Wisconsin (Mỹ) phát triển. Hiệu ứng này có tên là jQuery Link Nudging.

Xem Demo.

Để làm được như vậy, bạn hãy thực hiện như sau.

Bước 1. Đặt đoạn code dưới đây vào trước thẻ </head>.

<script type="text/javascript" src="http://davidwalsh.name/dw-content/jquery-1.2.6.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>

Bước 2. Bước tiếp theo là thêm class="nudge" vào bất kỳ một định dạng liên kết nào đó mà bạn muốn có hiệu ứng này, theo cấu trúc HTML như sau.

<a class="nudge" href="URL_liên kết">Text liên kết</a>

Bạn cũng có thể tạo hiệu ứng này với liên kết là hình ảnh, theo cấu trúc như sau.

<a class="nudge" href="URL_liên kết" ><img src="URL_hình ảnh" /></a>

Bạn thực hiện tương tự đối với Blogger. Ngoài ra bạn có thể cài đặt hiệu ứng này riêng cho các liên kết Nhãn nằm trên phần sidebar của Template. 

Xem Demo.

Để làm được điều này, trước tiên bạn phải tạo một tiện ích Nhãn trên phần sidebar. Đặt code theo Bước 1 ở trên. Lưu Template. Chọn Expand Widget Templates. Tìm đoạn code đại khái như dưới đây trong Template và thêm vào phần được đánh dấu màu đỏ.

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span class="nudge" expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a class="nudge" expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>

</li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>

Có thể nói hiệu ứng này được sử dụng nhiều trên thế giới nhưng đối với Blogger thì có lẽ tôi là người đầu tiên tại Việt Nam sử dụng thành công cho liên kết Nhãn.

Nếu bạn thấy thích hiệu ứng này thì còn chờ đợi gì nữa mà không cài đặt cho blogspot của mình đi nào

Read more »