Remove Header và thay thế bằng Ảnh

[FD's BlOg] - Có nhiều cách khác nhau để trang trí, chỉnh sửa Header của blog, và đây là một trong những cách đó. Thủ thuật này rất cơ bản và đơn giản, thích hợp cho những bạn mới bắt đầu làm quen với việc chỉnh sửa giao diện của blogspot.

Hình ảnh minh họa:

trước khi thực hiện thủ thuật

sau khi thực hiện thủ thuật

Với thủ thuật này, ta sẽ có 2 bước thực hiện : bước 1 là làm ẩn header, bước 2 thay thế vùng header đã bị ẩn bằng 1 ảnh (banner)

☼ Bước 1: Ẩn header
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn mở rộng mẫu tiện (expand widget template)
5. Tìm đọan code CSS của header như bên dưới (hoặc code tương tự)

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

6. Thêm dòng code màu đỏ như bên dưới:

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

7. Khoan save template lại, tiếp tục thực hiện sang bước 2

☼ Bước 2: Thay thế header đã bị ẩn bằng 1 ảnh (banner)
1. Tiếp tục bước 1, xuống phía dưới, tìm đọan code sau:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header' locked='true' title='Blog FD | Tips For Blogger' type='Header'/>
</b:section>
</div>

2. Thêm vào sau đọan code vừa tìm được đọan code bên dưới:

<a href="URL_OF_YOUR_BLOG"><img src="URL_OF_IMAGE(BANNER)" alt="Home" /></a>

3. Save template.

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

More about →

Modify sidebar : bo góc header và tạo border (đường viền) cho các widget ở sidebar

[FD's BlOg] - Một cách khá phổ biến cho việc trang trí các widget ở sidebar là bo các góc. Ở bài viết này mình sẽ giới thiệu một thủ thuật nhỏ để bo góc cho header của widget với ảnh nền, và trang trí 1 chút cho khung hiển thị nội dung với việc tạo đường viền.

Hình ảnh minh họa :

Ở trong hình minh họa ta thấy có 2 phần cần phải chỉnh sửa, đó là phần header và content của widget, do đó ta sẽ tìm trong code CSS của template 2 class sau: ".sidebar h2" và ".sidebar .widget" .(hoặc class tương tự)

☼ Ta bắt đầu với thủ thuật:
1. Đăng nhập blog
2. Vào bố cục (layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Tìm đọan code CSS sau (hoặc tương tự):

.sidebar h2 {
margin:0;
padding:0;
color:$sidebarHeaderColor;
font: $headerFont;
}

- Thay thế nó bằng code bên dưới:

.sidebar h2 {
background: #CCCBB9 url(http://img133.imageshack.us/img133/3540/h2bgwn2.png) top center no-repeat;
padding: 5px 10px;
margin-bottom: 0;
color: #333;
}

- Lưu ý : bạn nên download ảnh nền (code màu xanh) trong code về, và thay đổi màu sắc cũng như độ rộng để phù hợp với blog của bạn. Việc này khá đơn giản với các phần mềm đồ họa.

5. Tiếp tục tìm đọan code như bên dưới (hoặc tương tự):

.sidebar .widget {
font-size:86%;
margin-top:6px;
margin-$endSide:0;
margin-bottom:12px;
margin-$startSide:0;
padding:0;
line-height: 1.4em;
}

- Và thay thế nó bằng code như bên dưới :

.sidebar .widget {
font-size:86%;
border-left: 3px solid #CCCBB9;
border-right: 3px solid #CCCBB9;
border-bottom: 3px solid #e0d5c2;
padding: 10px;
line-height: 1.4em;
}

- các code màu xanh chính là code tạo đường viền cho khung hiển thị nội dung của widget.

6. Save template.

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

More about →

Tạo cửa sổ popup khi rê chuột vào ảnh trong blogger

Create Popup Image Viewer Using CSS in Blogger

[FD's BlOg] - Với vài đọan code CSS nhỏ ta có thể tạo một cửa sổ popup để hiển thị ảnh rất chuyên nghiệp mà không cần tới javascript. Thủ thuật cho phép hiện thị của sổ popup của ảnh gốc khi ta rê chuột vào.

Xem demo trực tiếp ở đây : http://fandung.110mb.com/test/popup-images-view.html

Hình ảnh minh họa:

Để thực hiển, trước tiên bạn chèn đọan code CSS này vào trước thẻ đóng </head> trong code template:
- Đăng nhập blog
- Vào bố cục
- Vào chỉnh sửa code HMTL
- Chèn đọan code CSS bên dưới vào trước dòng code </head>

<style type='text/css'>

.img-thumbnail{
position: relative;
z-index: 0;
}

.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.img-thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.img-thumbnail span img{
border-width: 0;
padding: 2px;
}

.img-thumbnail:hover span{
visibility: visible;
top: -100px;
left:100px;
}

</style>

- Dòng code màu đỏ chính là vị trí popup sẽ hiển thị ở trong blog của bạn. Hãy điều chỉnh 2 giá trị này để có được vị trí thích hợp nhất trên blog của bạn.

- Save template.

Và sau cùng là code HTML:

<a class="img-thumbnail" href="#">
<img src="link ảnh1" border="0" height="98" width="130"/>
<span>
<img src="link ảnh1"/>
</span>
</a>

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

More about →

Modify Form comment : Bài 8 - Tạo số đếm cho các comment

Comment numbering in Blogger

[FD's BlOg] - Thêm một thủ thuật nữa để trang trí cho form comment của bạn, thủ thuật sẽ tự động đánh số thứ tự cho các bài comment.

Hình minh họa:

☼ Bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào bố cục
3. Vào Chỉnh sửa code HTML
4. Chọn mở rộng mẫu tiện ích
5. Chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin>

.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px;
text-align: right;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: bold;
}

6. Tiếp tục xuống phía dưới, tìm đọan code như bên dưới:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

7. Thay thế tất cả bằng đọan code bên dưới:

<dl id='comments-block'>

<script type='text/javascript'>
var CommentsCounter=0;
</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>

<script type='text/javascript'>
CommentsCounter=CommentsCounter+1; document.write(CommentsCounter)
</script>

</a>
</span>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>

8. Save template.

Nguồn : Blog Anol

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

More about →

Khắc phục nhược điểm từ thủ thuật "Tạo thanh menu nằm ngang có sổ dọc"

[FD's BlOg] - Ở thủ thuật "Tạo thanh menu nằm ngang với hiệu ứng sổ dọc các menu con" (xem thêm ở đây) có 1 nhược điểm nhỏ là : chưa tùy chỉnh lượng bài viết hiển thị ở mỗi menu con (mỗi nhãn). Do đó khi nhấp vào 1 menu con (tức là 1 nhãn nào đó) thì số bài viết hiển thị của nhãn đó trên 1 trang khá nhiều. Bài viết này sẽ khắc phục nhược điểm đó.

Đối với những ai chưa thực hiện thủ thuật "Tạo thanh menu nằm ngang với hiệu ứng sổ dọc các menu con" thì xem ở đây để thực hiện thủ thuật này, sau đó tiến hành các bước như bên dưới để khắc phục nhược điểm không tùy chỉnh được lượng bài viết hiển thị ở mỗi nhãn.

☼ Bắt đầu:
1. Đăng nhập blog
2. Vào bố cục
3. Vào phần tử trang
4. Tìm đến widget của "Thủ thuật menu nằm ngang với hiệu ứng sổ dọc các menu con", vào chỉnh sửa


5. Tìm trong đọan code javascript đọan code sau sau :

function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#F57900\'" class="nav23sub" onclick="window.location.href=\'http://YOURBLOG.blogspot.com/search/label/'+submn_label+'\'">'+submn_text+'</td></tr>');
}

hình minh họa:

Và thêm vào nó đọan code màu cam vào trong đọan code trên(như bên dưới):

function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#F57900\'" class="nav23sub" onclick="window.location.href=\'http://YOURBLOG.blogspot.com/search/label/'+submn_label+'?max-results=5\'">'+submn_text+'</td></tr>');
}

Hình minh họa:

- Các bạn có thể thay đổi số "5" thành số bài viết mà bạn muốn hiển thị ở mỗi trang của mỗi nhãn.

6. Save widget là xong.
Chúc các bạn thành công.

More about →

Thủ thuật yêu cầu : Chèn biểu tượng vui vào khung sọan thảo của bài viết

Install Emoticons To Post Editor

[FD's BlOg] - Sau thủ thuật chèn biểu tượng vui vào form comment. Có bạn hỏi mình, là thủ thuật có áp dụng cho bài viết được không. Và mình có trả lời là có thể. Và hôm nay mình cũng xin post 1 bài hướng dẫn cái chèn các biểu tượng vui vào phần sọan thảo bài viết.

Hình ảnh minh họa:

Kết quả hiển thị ngòai layout:

Trước khi thực hiện thủ thuật, mình xin lưu ý là : Muốn thực hiện thủ thuật này, bạn phải dùng trình duyệt web là Firefox. Do vậy, bạn cũng sẽ phải dùng Firefox để sọan thảo bài viết. Và 1 điều nữa là thủ thuật này(các biểu tượng trong khung sọan thảo) chỉ hiển thị với firefox đã cài đặt tiện ích này, tức là chỉ hiển thị với máy của bạn. Còn kết quả hiển thị ngòai layout thì ta ko cần phải lo.
Nếu bạn nào chưa có cài đặt Firefox thì có thể download ở đây về để cài vào máy của mình.

Bây giờ ta bắt đầu với các bước sau::
☼ Bước 1 : Mở trình duyệt Firefox
☼ Bước 2 : Cài đặt Greasemonkey , các bạn nhấp vào link này https://addons.mozilla.org/en-US/firefox/addon/748 , sau đó nhấn vào nút Add to Firefox (xem hình bên dưới)


- Sau khi cài đặt xong nó sẽ đòi bạn phải restart firefox, nhấn vào nút restart firefox để restart (như hình bên dưới)


Sau khi restart Firefox, một cửa sổ popup hiện lên thông báo "Đã cài đặt Greasemonkey" vào firefox , và bên dưới góc phải của Firefox sẽ có 1 biểu tượng nho nhỏ (như hình bên dưới)



☼ Bước 3: Cài đặt bộ biểu tượng vui của Yahoo, các bạn nhấn vào đây để cài đặt. Sau khi nhấn vào file, một của sổ popup hiên ra (như hình bên dưới) và nhấn Install để cài đặt:

Kết quả:

-Nếu các bạn muốn cài đặt thêm bộ Onion Emoticons (như hình bên dưới), thì tiếp tục nhấn vào link này, một cửa sổ popup cũng hiện ra tương tự như trên, và ta cũng nhấn install để cài đặt, và kết quả như bên dưới:



☼ Bước 5 :
- Vào bảng điều khiển
- Vào Bố cục (Layout)
- Vào chỉnh sửa code HTML
- Tìm dòng code ]]></b:skin> và dán lên trên nó đọan code CSS bên dưới:

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

- Save template.

Như vậy đã xong. Chúc các bạn thành công.

More about →

11 ways to increase your RSS feed subscribers count

[FD's BlOg] - As a blogger or freelancer, you can have different goals and ways to measure your success. My goal as a freelancer has always been to have dedicated clients, not to change all the time. As a blogger, I value feed subscribers more than visitors or page views. Following are some tips to make people subscribe to your feed more.

1. Give something unique to your subscribers

This could be an e-book, Photoshop brushes or whatever (on Designer Daily it’s free animal vectors). To make this available only to your subscribers, install the great RSS footer plugin and put the link to the goodie in the RSS footer.

2. Advertise that freebie

If the freebie you’re offering is really valuable (and it should be if you want more subscribers), advertise directly to its landing page. You can try a Google Adwords or BuySellAds campaign, I wouldn’t recommend using StumbleUpon ads for that.

3. Use Feedburner to track your subscriber count

This one probably sounds obvious for all seasoned bloggers, but Feedburner is a very useful service. It lets you count your subscribers, which is important if you want to track your progress. If you don’t want a third-party service hosting your feed, take a look at the Feed Statistics plugins for WordPress.

4. Install the Feedsmith plugin for WordPress

Now that you have a Feedburner feed, you should definitly use the Feedsmith plugin to redirect all your feeds to it.

5. Enable email subscription

This is another thing made easy by Feedburner, in your admin just go to Publicize > Email subscriptions, activate it and customize the messages. Again, if you’re not using Feedburner, you can try the Subscribe2 WordPress plugin.

6. Point the auto-discovery feature to your Feedburner feed

The auto-discovery feature of your browser is the little RSS icon in your adress bar. Wordpress themes have it included by default, to replace it you should look for the following code in your header:

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />

And replace it by this:

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="Replace this by your feed’s adress” />

7. Track your subscribers with Google Analytics

If you’re going to improve your blog’s subscribers count, you should definitly check what sources are bringing you the most subscribers. For example, I learned that getting links from authority design blogs is the best way to gain subscribers (2% to 10% conversion on Designer Daily), right after offering freebies (15% to 20% conversion on Designer Daily). To learn how to track RSS subscribers, read this article.

8. Offer full feeds

I’ve been reading this advice very often, and I must admit that I tend to subscribe more often to blogs that offer full feeds. I’ve noticed that I unsubscribe quicker if the blog doesn’t provide full feed. Getting subscribers is good, keeping them is even better!

9. Optimize your subscription options display

First, your subscription options should be displayed above the fold and made unmissable either by having a big RSS button or by having enough space around it. Another strategic place to include your RSS subscription options is at the end of every post, the spot where your reader finished the article and looks for what to do next.

10. Submit your feed to directories

Blog directories will often give you the opportunity to also submit your feed, just make sure that they won’t scrape all your content. Of course, to save yourself some time you can ask some SEO company to do it for you (I would recommend Submit Comfort).

11. Run a contest

This is a pretty good way to make people subscribing happily, obviously some people will unsubscribe right after the contest, but you’ll get some new subscribers for sure. The number of new readers is likely to be related to the attractiveness of the gift. If you’re interested by this technique, learn how to track RSS subscribers in a blog contest.

Source Daily Designer

More about →