Thời Trang & Cuộc sống: thủ thuật blogspot

Showing posts with label thủ thuật blogspot. Show all posts

Blogspot Ưu và nhược điểm khi sử dụng

Có rất nhiều nhà cung cấp dịch vụ nền tảng blog khác nhau trên internet. Mỗi dịch vụ có điểm mạnh yếu riêng. Tùy theo mục đích, túi tiền, khả năng mà bạn có thể lựa chọn cho mình một dịch vụ blog tương ứng.
Bài viết này sẽ phân tích những cái hay và dở khi bạn sử dụng Google Blogger làm dịch vụ nền tảng cho blog của mình.

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

Những cái hay khi sử dụng blogger

Miễn: Miễn phí đăng kí tài khoản, miễn phí máy chủ, hơn nữa còn là máy chủ rất mạnh, miễn phí tên miền (tài khoản sau khi tạo sẽ được cung cấp một tên miền có dạng ABC.blogspot.com).
Nhanh: Nhanh chóng được đánh chỉ mục vào bộ máy tìm kiếm số một thế giới và bài viết dễ dàng được tìm thấy trên công cụ này, mới đây là trên công cụ tìm kiếm blog: Google BlogSearch.
Không giới hạn:
- Không giới hạn băng thông (bandwidth) hàng tháng.
- Không giới hạn số blog cho một tài khoản.
- Không giới hạn số bài đăng cho một blog.
- Không giới hạn kích thước cho một bài đăng (post).
- Không giới hạn số nhận xét (comments).
- Không giới hạn số thành viên cùng làm một blog.

Tiện: Tiện ích phong phú, đáp ứng tối đa nhu cầu người dùng. Có thể nhanh chóng nhúng các đoạn mã JavaScript quảng cáo, đặc biệt tích hợp với chương trình kiếm tiền trên mạng nổi tiếng Google AdSense thông qua tiện ích Adsense.
- Có thể dùng Blogger chung với nhiều vụ nổi tiểng khác của Google: Talk (Trình tán gẫu trực tuyến, giống như Yahoo! Messenger,…), Reader (Công cụ đọc tin RSS trực tuyến), Picasa Web Albums (Kết hợp với phần mềm Picasa để lưu trữ, quản lý ảnh trực tuyến), Orkut (Mạng xã hội ảo), Docs (Dịch vụ xử lý văn bản, bảng tính và trình diễn trực tuyến, như Microsoft Offices trên Windows), Pages (Dịch vụ tạo web), ... Nếu dùng tài khoản Google (tài khoản này có thể đăng ký bằng bất kỳ địa chỉ email nào), bạn không sử dụng được với các dịch vụ riêng rẻ như Gmail, Talk,...

Những cái dở khi sử dụng blogger

Khó tùy chỉnh giao diện: Mặc dù blogger cho phép chúng ta có thể toàn quyền xử lý giao diện blog nhưng họ lại giao phó cho chúng ta một "ĐỐNG" những đoạn mã khó dùng như: xml, HTML, script...khiến việc cá nhân hóa giao diện là rất khó khăn. Chính vì vậy nên người dùng thường tìm đến các giao diện có sẵn, sử dụng chúng mà không biết rõ nó như thế nào, đến khi gặp trục trặc thì chỉ có....MẾU !.
Nội dung bắt buộc phải 'Sạch': Điểm này nằm trong thỏa thuận khi sử dụng blogger, nếu tôi liệt kê ra hết thì chắc bạn cũng phải dừng đọc bài này vì mỏi mắt.
Bị chặn: Giống như Facebook, Blogger cũng không thể do một số nhà cung cấp dịch vụ internet Việt Nam sử dụng bộ lọc hạn chế. Để khắc phục, bạn cần sử dụng tên miền rút gọn hoặc các công cụ thay đổi DNS.
- Và còn một số hạn chế khi sử dụng Google Blogger nữa mà tôi không đề cập tại đây vì sự thật thì chúng ta cũng khó mà đạt đến các ngưỡng của chúng.

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

Nhìn chung bạn là người có kiến thức tin học, muốn thoải mái xây dựng một ngôi nhà chuyên nghiệp và không phải mất nhiều thời gian để xây dựng website, thuê dịch vụ lưu trữ (hosting): Hãy chọn Blogger!

Read more »

Hướng dẫn trỏ tên miền của Mắt Bão về blogspot

10 comments

Việc trỏ tên miền về blogspot với tên miền do mắt bão quản lý gặp nhiều khó khăn hơn 1 chút so với việc trỏ tên miền do godady quản lý. Mình đã rất mất công trong việc loay hoay làm sao để trỏ được tên miền về , trước đây ông anh mất tiền mua tên miền 3d-edu.info về lại không trỏ về blogspot được, tìm mỏi mắt trên google, hỏi hỗ trợ của mắt bão thì nó chỉ nó chỉ chuyển hướng hoặc làm flame cho và bảo hệ thống của nó không hỗ trợ blogspot <chăm sóc khách hàng như shit >. Thế là mất 2 năm trời bỏ qua (vì nghĩ rằng nó không hỗ trợ) bây h có việc cần nên phải mày mò lại. Với sự hỗ trợ đắc lực của google dịch :D.

Nói dài quá, bắt đầu nhá. Trong cài đặt thông thường ở blogspot thì cũng như trỏ về godady thôi.

Bước 1: Đăng nhập quản trị blog và click "Cài Đặt".

Bước 2 : Click "Thêm tên miền tùy chỉnh".

Bước 3: Click "Chuyển sang cài đặt nâng cao."

Bước 4 : Ghi tên miền mà bạn đã mua vào, hoặc tên miền cấp 2 vào .

Nếu là subdomain thì viết dạng abc.tenmiencuaban.com

Còn nếu là tên miền cấp 1 của bạn thì viết là "www.tenmiencuaban.com"

Lưu lại là okie nhé :D.

Phần màu cam này chỉ làm khi bạn trỏ tên miền chính nhé. Với subdomain thì không làm :D

Bước 5: Truy cập vào panel quản trị tên miền của bạn nhé ở mắt bão là http://dns.matbao.net . Và thêm vào các recode mới (ko biết viết đúng chính tả không).

- Trỏ 4 ip:

Ô đầu để @

- Ô thứ 2 lần lượt để 4 ip :

261.239.32.21

261.239.34.21

261.239.36.21

261.239.38.21

- Ô thứ 3 chọn A (Address).

Tiếp sau đó là trỏ tên miền nhá.

Nếu là tên miền cấp 2 thì ghi thế này.
Ví dụ : ecom.tenmiencuaban.com thì ô thứ nhất ghi là ecom

Nếu là tên miền chính cấp 1 thì ô thứ nhất ghi là www

Ô thứ 2 để là CNAME (Alias).

Read more »

Một kiểu phân trang đẹp cho blogspot

5 comments

(Huynh Nhat Ha's Blog) -- Hiện nay trên cộng đồng Blogger có khá nhiều kiểu phân trang khác nhau cho blogspot. Mỗi kiểu đều có nét đẹp và ưu điểm riêng cho nên bạn cần lựa chọn kiểu nào phù hợp nhất để cài đặt cho blog của mình. Bạn có thể dùng từ khóa “phan trang” để tìm trên blog này một số kiểu phân trang cho blogspot.

Script cho các kiểu phân trang dường như có những điểm na ná giống và cách cài đặt cũng vậy. Ở đây tôi xin giới thiệu một kiểu phân trang cũng khá đẹp.

Xem Demo.

Để cài đặt kiểu phân trang này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>.

.showpageOf{background:#006666;margin-right:3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpagePoint{background:#FFF;border:1px solid #006666;margin:0 3px;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a,.showpageNum a:visited{background:#006666;margin:0 3px;padding:4px 7px;color:#FFF;text-shadow:1px 1px 1px #000;font-size:13px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.showpageNum a:hover,.showpageNum a:active{background:#FFF;border:1px solid #006666;padding:3px 6px;color:#006666;text-shadow:1px 1px 1px #7F7F7F;text-decoration:none}

Bước 2. Đặt đoạn code bên dưới vào trước thẻ </body>.

Bạn có thể điều chỉnh số bài viết hiển thị ở mỗi trang tại tham số postperpage=7.

Bước 3. Tìm bất kỳ dòng nào như thế này 'data:label.url'

Rồi thay thế nó bằng dòng 'data:label.url + "?&max-results=7"'

Lưu Template là OK.

Read more »

Tạo Read More tự động không dùng Javascript

1 comment

(Huynh Nhat Ha's Blog) -- Phần lớn các blogspot hiện nay đều áp dụng thủ thuật tạo Read More tự động để hiển thị các bài viết mới nhất trên trang chủ, các trang nhãn và lưu trữ theo định dạng gồm ảnh đại diện và phần mô tả tóm tắt bài viết. Và chúng ta đều biết thì thủ thuật này phải dùng đến Javascript nên ít nhiều cũng ảnh hưởng đến tốc độ load trang.

Một bữa nọ ghé sang thăm blog của bạn Duy Phạm thấy có bài viết Auto readmore không sử dụng javascript cho Blogger. Tôi thấy tò mò nên đọc xem. Thì ra thủ thuật này tùy biến từ code của tiện ích Popular Posts của Blogger. Tôi nhận thấy đây cũng là một cách hay và cũng muốn phổ biến cho cộng đồng Blogger Việt. Tuy nhiên code của tôi khác một chút so với code của bạn Duy Phạm. Hy vọng với nỗ lực của Duy Phạm và Huỳnh Nhật Hà, từ nay cộng đồng Blogger sẽ phổ biến thuật ngữ Auto Readmore without Javascript.

Dưới đây là hình minh họa kết quả sau khi áp dụng thủ thuật này.

Để làm được như vậy, bạn hãy thực hiện như sau. (Lưu ý nếu bạn đã áp dụng cách tạo Read More tự động sử dụng Javascript thì tháo nó ra khỏi Template trước khi áp dụng thủ thuật này)

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code sau đây trước dòng ]]></b:skin>.

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {float:right}
.jump-link a,.jump-link a:visited{background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.jump-link a:hover,.jump-link a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

Bước 2. Tìm <data:post.body/> và thay nó bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/>
</b:if>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Lưu Template là OK.

Nếu bạn muốn ảnh đại diện nằm bên phải thì thay dòng

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}

Bằng dòng

.item-thumbnail {float:right;margin-left:15px;width:75px;height:70px}

Điểm chú ý trong code của tôi tùy biến là phần mô tả tóm tắt bài viết (snippet), văn bản được căn đều hai bên (nhờ sử dụng class item-snippet có định dạng text-align:justify).

Read more »

Tạo bài viết liên quan kèm ảnh Thumbnails cho blogspot

No comments

Thủ thuật hiển thị bài viết liên quan kèm ảnh Thumbnails ở đây thể hiện một cách chuyên nghiệp hơn. Bài viết này được lấy từ 1 số nguồn trên internet trong khi lang thang .

relatedpost tipblogspot Tạo bài viết liên quan kèm ảnh Thumbnails cho blogspot

Đầu tiên: Đăng nhập vào blog –> Bố cục –> Chỉnh sửa HTML -> Mở rộng mẫu tiện ích
Sau đó tìm đến thẻ </head>

Chèn đoạn code dưới đây trước nó nhé:

<!–Related Posts with thumbnails–>
<b:if cond=’data:blog.pageType == "item"’>
<style type=”text/css”>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src=’http://xemtruyenhinh.110mb.com/relatedthumbs21.js’ type=’text/javascript’/>
</b:if>
<!–Related Posts with thumbnails–>

Tiếp theo: Tìm đến đoạn code tương tự sau:

<div class=’post-footer-line post-footer-line-1′>

Thay thế bằng đoạn code dưới :

<!– Start Related Posts with Thumbnails–>
<b:if cond=’data:blog.pageType == "item"’>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != "true"’>
</b:if>
<b:if cond=’data:blog.pageType == "item"’>
<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"’ type=’text/javascript’/></b:if></b:loop><a href=’http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html’ style=’display:none;’>Related Posts with thumbnails for blogger</a><a href=’http://www.bloggerplugins.org/’ style=’display:none;’>blogger tutorials</a>
<script type=’text/javascript’>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle=”Related Posts“;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style=’clear:both’/>
</b:if>
<!– End Related Posts with Thumbnails–>

Chú ý: var maxresults=5; số 5 là giá trị max số bài viết hiển thị
Save lại —> kiểm tra kết quả thế nào nhé !
Chúc các bạn thành công !

Read more »

Chèn quảng cáo vào giữa bài viết của Blogger

5 comments

Có nhiều vị trí đặt quảng cáo trong phần bài viết của blog, như đã giới thiệu trong bài Chèn quảng cáo ads vào trong bài viết Blog. Tuy nhiên rất nhiều bạn hỏi cách thức đặt Ads vào phần giữa mỗi bài viết giống như một số Blog tham giá GA đã thực hiện được.
Trong bài viết này xin giới thiệu với các bạn cách đặt quảng cáo vào giữa mỗi bài viết trong Blog dành cho Blogger.

Chèn quảng cáo vào giữa bài viết của Blogger

Cách thực hiện:
Truy cập vào Blogger:
Truy cập vào Blogger Dashboard > Layout > Edit Html > Check vào ô chọn “Expand Widgets”
Chỉnh sửa Code trong Edit HTML:
Tìm (Press Ctrl + F) đoạn code:

<data:post.body/>

Và thay chúng bằng đoạn code dưới:

<div expr:id=’”aim1″ + data:post.id’></div>
<div style=”clear:both; margin:10px 0″>
<!—Chèn mã quảng cáo vào đây—>
</div>
<div expr:id=’”aim2″ + data:post.id’>
<data:post.body/>
</div>
<script type=”text/javascript”>
var obj0=document.getElementById(“aim1<data:post.id/>”);
var obj1=document.getElementById(“aim2<data:post.id/>”);
var s=obj1.innerHTML;
var r=s.search(/\x3C!– adsense –\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Bạn chèn đoạn mã quảng cáo thay cho dòng <!—Chèn mã quảng cáo vào đây—> và lưu mẫu.
Các thực hiện:
Bây giờ mỗi khi soạn bài viết, khi viết (soạn thảo) tới khoảng giữa bài bạn muốn hiển thị quảng cáo thì chèn đoạn code dưới vào:
<!– adsense –>
và tiếp tục viết tiếp bài.
Khi đăng bài viết bạn sẽ thấy quảng cáo hiển thị ngay dưới đoạn bạn đã chèn mã: <!—adsense –> vào.
Chúc các bạn thành công !!!

Copy from http://www.vnblognet.com/2010/04/at-quang-cao-vao-giua-bai-viet-cho.html

Read more »

Tạo Pop-under Ads hiển thị quảng cáo cho Blogger

4 comments

Chắc hẳn bạn đã gặp nhiều trường hợp khi truy cập vào một địa chỉ nào đó thì các quảng cáo tự hiện ra trên một hay hàng loạt trên các cửa sổ khác. Đây là dạng quảng cáo Pop-Up Ads, hình thức này gây khó chịu cho đa số các Blogger. Tuy nhiên, đôi khi bạn có nhu cầu đặt ads để quảng cáo một dịch vụ nào đó, vậy hãy dùng Pop-under Ads.
- VnBlognet [dot] com: Không như Pop-up Ads, hình thức Pop-under Ads chỉ trượt kèm theo trỏ chuột, và người đọc hoàn toàn có thể tắt nó một cách dễ dàng.
Nếu bạn muốn tạo Pop-under ads, hãy thực hiện các bước dưới đây.

Truy cập vào Blogger:
- Truy cập vào Blogger Bảng điều khiển (Dashboard) >> Bố cục (Layout) >> Chỉnh sửa HTML (Edit HTML) – (không cần Mở rộng Mẫu tiện ích). .
Chèn code CSS vào Blog:
- Tìm (Ctrl – F) thẻ ]]></b:skin> trong template, và thay thế nó bằng đoạn code sau:

#popad{
padding:5px;
border:1px solid #999;
background:#eee;
width:X px;
}
#popad_footage{
width:X px;
height:Y px;
background:url(Link hình ads) top left no-repeat;
}
#popad_footage a{
display:block;
width:X px;
height:Y px;
text-indent:-600px;
overflow:hidden;
}
#popad.dynamic #popad_footage{
width:X px;
height:Y+Z px;
background:url(Link hình ads có kèm nút Close) top left no-repeat;
}
#popad.dynamic #popad_footage a#popad_close{
color:#ddd;
height:Z px;
}
#popad.dynamic{
position:absolute;
top:3em;
right:15%;
}
html>body #popad.dynamic{
position:fixed;
}
]]></b:skin>
<script src=’http://boyprodx.110mb.com/BlogTools/popundermagic.js’ type=’text/javascript’/>

- Lưu mẫu (Save) lại template
Chèn code HTML vào Blog
- Bạn vào Bố cục (Layout) >> Phần tử trang (Page Elements) và tạo 1 phần tử HTML với nội dung :

- Lưu (Save) lại phần tử và kiểm tra kết quả.
Hiệu chỉnh các thông số hiển thị trong code CSS:
Các giá trị :
- X : Chiều rộng ads.
- Y : Chiều cao ads.
- Z : Độ dài khoảng cách từ nút Close tới ads.

Tạo Pop under Ads hiển thị quảng cáo cho Blogger

(Hình minh họa: Giá trị XYZ)
Để biết được chính xác các giá trị này, đơn giản nhất hãy bật chế độ xem Title trong PC.

Bật chế độ xem Title
Thiết lập vị trí xuất hiện của ads trên Blog :
- #popad.dynamic{position:absolute;top:3em;right:15%;} : Ads sẽ cách phía trên 3em và bên phải 15% chiều rộng trình duyệt.
Kết quả như hình bên dưới hoặc Demo tại đây (Bạn có thể View Source để hiểu thêm về đoạn code).

Nguồn : Boyprodx Blog

Read more »

Add Random Posts Widget for Blogger with Thumbnails

No comments

The Random Posts Gadget will display a list of Random Posts(from your blog) on your Blog’s Sidebar. The Gadget has an options panel and can be configured to meet your needs. The Gadget inherits styles from your Blog. But you can override the colors if you want(this was done to support third party templates which doesn’t have the skin variables properly designed).

Add Random Posts Widget for Blogger with Thumbnails

Add Random Posts Widget for Blogger with Thumbnails

About the Various Options

Maximum Length of Post Title – Your post titles can be too long. In that case you can limit the title to x number of characters using this parameter.
Snippet Style – You can display the snippet with Post Summary, Post Thumbnail , or both or none.
Feed – The default Option “Summary Feed” will scan your post summary feed. This is the faster and efficient option and i would advise you to opt this one. If you choose “Full Feed” , the gadget will be slower but you will get YouTube Thumbnails also.
Note:- If you want to grab the images or YouTube thumbnails, then you should have “Site Feeds” set to Full. If you opt for the Media Thumbnail only, then the short feed will be used by default.
Thumbnail Dimensions – Size of the Thumbnail in pixels. The gadget doesn’t generate any Thumbnail. It just uses the media thumbnail,YouTube thumbnail , or any image in the post and scales it to the specified dimensions
Summary Length - If you have opted to display the post Summary, then you can control the length of the summary(in characters)
Post Meta Style – You can display the Post Date, Comment Count and a Read More Link.You can choose any combination of these three.
Font and Font Size– By Default, the container’s font and Font Size is inherited into the Gadget. But if you are using a 3rd party template, then these might not be properly inherited. In that case you can use this Option to over ride these parameters.
Extra Styling – Allows you to specify the position of the Thumbnail, and whether to underline the links or not.
Border Color – You can either opt for No Border, or select one of the 140 available colors. If you are not sure about how these colors look like, then take a look at this color chart at W3Schools – http://www.w3schools.com/html/html_colornames.asp
Link Color and Text Color – By default , the colors will be inherited from your Blog. If you want to override this , you can choose one out of the 140 different colors.
(The colors were provided in the Dropdown(and not as text fields) to tackle a problem with the API)
Read More Text – This field was intentionally added to help blogs which are not written in English. Initially i used “More »” as the Read more text without taking any user Input. Seeing this on a non- English Blog is a little awkward. So i added this new field