Theo yêu cầu của bạn Tiến (lecongtienlkvn.blogspot.com)

[FD's BlOg] - Bài viết này mình sẽ hướng dẫn chi tiết cho các bạn (nhất là những bạn mới làm quen với blog) cách chèn Flash vào header. Bài viết sẽ tổng hợp từ nhiều thủ thuật khác nhau như : ẩn title & description của header, tạo phần "Thêm tiện ích" cho header, chèn flash vào blog...

Để thực hiện bài này, các bạn sẽ thực hiện 3 bước sau :
1. Ẩn title và description của header :
- Thông thường khi chưa chỉnh sửa nhiều phần Header của 1 blog mới sẽ có dạng như bên dưới :

- Để chèn flash vào ta phải xóa hoặc ẩn phần header cũ này đi. Tốt nhất ta sẽ ẩn nó đi, để ẩn nó, các bạn vào thực hiện các bước sau :

+ Vào bố cục
+ vào chỉnh sửa code HTML
+ tìm đoạn code sau :

#header h1 {
...
...
...
}

#header .description {
...
...
...
}

+ thêm đoạn code in đậm vào để ẩn nó đi :

#header h1 {
...
...
...
display:none;
}

#header .description {
...
...
...
display:none;
}

+ save template.

- Mở blog lên ta sẽ thấy phần header đã biến mất, như bên dưới:


2. Tạo phần "Thêm tiện ích" cho header :
- để thêm flash vào cho phần header, ta phải tạo 1 widget HTML/Javscript và dán code của flash vào, tuy nhiên, mặc định thông thường Blogger ko cho phép ta thêm widget vào Header, vì vậy muốn thêm widget vào header ta phải chỉnh sửa đôi chút.

Hình ảnh minh họa khi chưa có phần "Thêm tiện ích"

- Để thêm phần "Thêm tiện ích" cho header, các bạn thực hiện các bước sau:

+ vào bố cục
+ vào chỉnh sửa code HTML
+ tìm đoạn code như bên dưới:

<b:section class='header' id='header' showaddelement='no'>

+ sửa nó lại như bên dưới:

<b:section class='header' id='header' showaddelement='yes'>

+ Lưu ý : nếu trong đoạn code trên mà có thêm dòng maxwidgets='1' như bên dưới:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

thì các bạn hãy xóa nó đi. Đoạn code đó chỉ là giới hạn số lượng widget được phép hiển thị ở Header.
+ save template.

Và ta sẽ thấy kết quả như bên dưới:

Như vậy đã xong bước 2, bây giờ ta có thể chèn 1 widget vào header rồi.

3. Chèn Flash vào header:
- Trước tiên bạn phải có 1 file Flash.
- Tạo 1 widget HTML/javascript ở header
- dán đoạn code này vào :

<embed bgcolor="#FFFFFF" height="140" width="700" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://URLsite.com/yourfile.swf" type="application/x-shockwave-flash" >
</embed>

- Thay code màu xanh thành link file Flash của bạn.
- Ngoài ra bạn có thể tham khảo thêm ở bài viết này cho bước 3.

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

Read more…

Theo yêu cầu của bạn Tuấn P.H.A (www.kenh78.com)

[FD's BlOg] - Với thủ thuật này, các bạn sẽ có 1 thanh bookmark với hiệu ứng động nho nhỏ khi rê chuột vào icon đó. Đây là 1 plugin được viết cho wordpress bởi Josh Jones và nó được fix lại để dùng cho blogger.

Hình ảnh minh họa:

☼ Các bước thực hiện :
1. vào bố cục
2. vào chỉnh sửa code HMTL
3. chọn mở rộng mẫu tiện ích
4. chèn đoạn code CSS bên dưới vào sau dòng code ]]></b:skin>

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}
</style>

5. Bước kế tiếp là xác định vị trí đặt của bookmark, các bạn có thể tùy chỉnh lại vị trí này nếu muốn, ví dụ đặt ngay sau dòng code <data:post.body/> hoặc đặt nó ở dưới cùng của post footer..., ở đây mình sẽ đặt nó ở trên cùng của post footer.

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

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>

- chèn ngay sau nó đoạn code sau:

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

- điều chỉnh lại code màu xanh.
6. Cuối cùng là save template.

☼ Một lưu ý nhỏ, tiện ích sẽ hiển thị tốt với phần main có độ rộng trên 540px.

Author Josh Jones

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

Read more…