netoops blog
Trang này chỉ copy lại để làm tài liệu cho mình thôi: Nếu có bài của bạn, thì xin bỏ qua. Cảm ơn.
Showing posts with label Thủ thuật. Show all posts
Showing posts with label Thủ thuật. Show all posts

Tuesday, 22 January 2013

Cách Tạo Phong Cách Bài Viết Chuyên Nghiệp


Ở các báo điện tử lớn như Tuổi trẻ, Dân trí, bạn thường thấy bài viết được trình bày rất rõ ràng và đẹp mắt. Thường thì sẽ có một đoạn văn bản riêng biệt được làm nổi bật lên trên bài viết. Trên blog của tôi cũng đã sử dụng cách trình bày này cho một số bài viết, xem hình minh họa dưới đây:


Cách thực hiện rất đơn giản, bạn chỉ cần sử dụng đoạn code sau đây: 

<div style="border: #ccc 1px solid ; margin: 10px; padding: 5px; background: #CFE6F9; width: 150px; float: right; text-align: justify;">{Đoạn văn bản} </div>

Trong đó: + border: màu đường viền
+ background: màu nền
+ width: độ rộng (chiều cao thì sẽ tự thay đổi tùy theo độ dài của đoạn văn bản của bạn)
+ float: vị trí trong bài viết, có thể thay đổi trái(left) hoặc phải(right) tùy bạn.
+ text-align: căn đều cho văn bản.
+ margin, padding: căn lề, bạn có thể chỉnh sửa, tốt nhất là cứ để nguyên.

Và kết quả có thể sẽ trông như thế này:


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

Monday, 21 January 2013

Tynt - Đóng dấu bản quyền bài viết Blogspot



Khi đăng bài lên mạng bạn không thể chỉ bobo giữ nó cho mỗi blog của bạn, vì bạn không thể cấm việc sao chép từ blog này sang blog khác được. Vấn đề đặt ra là nhiều đối tượng sao chép nhưng không chịu ghi nguồn, do vậy cần phải có 1 plusin làm việc đó. Cái mình giới thiệu sau đây sẽ giúp bạn những dòng đóng dấu bản quyền khi có một người nào đó Copy bài viết của bạn. Tuy nhiên với những đối tượng cố tình không ghi nguồn thì cách này cũng không áp dụng được.

hình minh họa
 
Để là được như vậy bạn hãy đăng nhập vào trang sau:
http://www.tynt.com/
- Bấm vào Start here it's free->.
- Điền thông tin cần thiết và bấm Sumbit->
Bấm vào Customize Attribution:
- Sau đo bạn cài đặt nâng cao:
- Sau khi lưu lại bạn Copy code họ cho và dán vào trước thẻ  <head>  trong blog của bạn.
Và đây là hình Demo mình đã dán vào blog Demo.
Chúc thành công!

Thủ thuật tùy chỉnh Heading Style cho Blogger & Wordpress - Tùy chỉnh tags heading



Thủ thuật tùy chỉnh Heading Style cho Blogger & Wordpress - Tùy chỉnh tags heading
Bạn hãy quan sát các đề mục trong mỗi bài viết của namkna, nó thường là một đoạn văn bản được bao quanh bởi hai đường viền màu xanh da trời. Hôm any namkna sẽ giúp các bạn có một cái nhìn thú vị và hấp dẫn cho nội dung blog của bạn. Độc giả dễ dàng hơn để xác định một phần nhất định trong chủ đề bạn đang viết. Hơn nữa, nó sẽ làm tăng xếp hạng tìm kiếm bài viết của bạn bởi vì thẻ Heading là cái đầu tiên mà với các robot của công cụ tìm kiếm đọc tới. Hướng dẫn này chủ yếu là cho người dùng Blogspot nhưng một số cách chắc chắn có thể được thêm vào Wordpress.

Tùy biến Tiêu đề (Heading) Sử dụng CSS đơn giản - Dành cho Blogspot

Namkna có sáu kiểu  Heading cho các bạn chọn Demo chính là các tiêu đề:
☼ Cách tiến hành:
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced):
4- Tìm kiếm thẻ ]]></b:skin>  (Mẹo: Hãy bấm Ctrl + F để tìm nhanh hơn)
5- Dán đoạn code sau vào trước thẻ  ]]></b:skin> (Ứng với mỗi một mẫu là tiêu đề minh họa ngay trên nó).
Kiểu Heading có một đường viền phía dưới:
.post h3{
color:#0080ff;
border-bottom:1px solid #289728;
font-size: 12pt;
padding:2px;
}
Kiểu Heading có một đường viền phía trên và một phía phía dưới:
.post h3{
color:#0080ff;
border-top:1px solid #289728;
border-bottom:1px solid #289728;
font-size: 12pt;
padding:3px;
}
Kiểu Heading có một đường viền bao xung quanh:
.post h3{
color:#0080ff;
border:1px solid #289728;
font-size: 12pt;
padding:2px;
}
Kiểu Heading có hiệu ứng khi dê chuột:

.post h3{
color:#0080ff;
border-top:1px dotted #289728;
border-bottom:1px dotted #289728;
font-size: 12pt;
}
.post h3:hover{ /*h4*/
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
background-color: #289728;
color:#fff;
}
Kiểu Heading bao quanh bởi đường viền và nền:
.post h3 {
border-bottom: 1px solid #289728;
color:#0080ff;
font-size:12pt;
}
.post h3 span {
position: relative;
left: -0.3em;
bottom: -0.6em;
padding: 1px 0.5em;
margin: 0;
border: 1px solid #289728;
background-color: #fff;
}
Kiểu Heading sử dụng một hình ảnh phụ và hiệu ứng khi dê chuột:
.post h3 {
background: #fff url(URL Picture) top left repeat-y;
font-size: 12pt; 
color: #0090ff;
padding:28px 0 0 44px ;
}
.post h3:hover {
color: #289728;
}
Thay thế URL Picture thành hình ảnh của bạn. Hình ảnh này có kích thước là 45 x 45pxhoặc nhỏ hơn
6- Lưu mẫu lại.

Tùy biến thuộc tính của mã CSS cho các tiêu đề (heading)

Tất cả các mã CSS ở trên tùy chỉnh đơn giản như hướng dẫn dưới đây,
1. Thay đổi chiều rộng đường viền, kiểu dáng và màu sắc chỉnh sửa mã như sau:,border:1px solid #0080ff
  • 1px là độ dày/chiều rộng đường viền
  • solid là kiểu dáng đường viền dạng gạch liền. Bạn có thể thay đổi kiểu dáng đường viền gạch liền (solid) thành dạng chấm (dotted) hoặc gạch ngang liền (dashed)
  • #0080ff là màu sắc đường viền. Bạn có thể sử dụng mã màu của namkna để mã màu như mong muốn của bạn tại đây
2. Để Thay đổi cỡ chữ, chỉnh sửa đoạn mã như sau: font-size: 12pt Nếu bạn muốn kích thước văn bản tăng hoặc giảm  thì chỉnh sửa tăng hoặc giảm giá trị này 12pt
3. Thay đổi màu chữ, chỉnh sửa mã tương tự như thế này: color: #0080FF Bạn có thể chọn mã màu TẠi đây

Sử dụng khi đăng bài:

- Bất cứ khi nào bạn viết một tiêu đề trong bài viết trong blogger, chỉ cần thêm các phần sau đây trong phần HTML của bài viết.
<h3> Tiêu đề bài viết của bạn ở đây </h3>
Xem ảnh để thấy rõ hơn:
Thủ thuật tùy chỉnh Heading Style cho Blogger & Wordpress - Tùy chỉnh tags heading
- Đối với Kiểu Heading bao quanh bởi đường viền và nền thì sử dụng hơi khác với trên. dùng đoạn mã sau:
<h3><span>Tiêu đề bài viết của bạn ở đây</span></h3>
Namkna chỉ cần thêm một thẻ span (ví dụ: <span>) cho hộp xuất hiện.
Lưu ý: - Thay đổi sẽ không xuất hiện bên trong Blogger Editor hay xem trước. Bạn sẽ chỉ thấy một văn bản in đậm màu đen bên trong trình biên tập blogger. Kiểu dáng sẽ có hiệu lực chỉ khi bài viết được xuất bản. 

Tùy biến Tiêu đề (Heading) Sử dụng CSS đơn giản - Dành cho Wordpress

Thành thật mà nói namkna thực sự ghét wordpress bởi vì nó không có gì thú vị cho các nhà thiết kế web mới như mình. Nó sử dụng kịch bản php phức tạp, có rất ít hiểu và cũng có một tùy chọn CSS chỉnh sửa phức tạp mà chưa bao giờ đi mình nuốt trôi. Nếu bạn là một chuyên gia sử dụng wordpress bạn có thể sử dụng phương pháp blogspot ở trên tiêu đề mẫu wordpress của bạn, nhưng nếu bạn thấy nó khó khăn để chỉnh sửa trang wordpress như tôi thì bạn có thể áp dụng đơn giản như mô tả dưới đây.
Chúng tôi chỉ có thể áp dụng ba trong số sáu kiểu Heading để wordpress đó là,
  1. Kiểu Heading với một đường viền phía dưới
  2. Kiểu Heading với một đường viền phía trên và một phía dưới
  3. Kiểu Heading bao quanh bởi đường viền
Để áp dụng bất kỳ kiểu trên, làm điều này trong Wordpress Editor của bạn:
  • Trong trình soạn thảo Wordpress của bạn hãy viết một bài
  • Bây giờ chuyển sang chế độ HTML và kèm theo nhóm của bạn với mã sau đây,
Đối với kiểu Heading với một đường viền phía dưới, sử dụng mã này,
<h3><div style="color:#0080ff; border-bottom:1px solid #289728;font-size: 12pt; padding:2px;">Tiêu đề của bạn tại đây</div></h3>
Với Kiểu Heading với một đường viền phía trên và một phía dưới
<h3><div style="color:#0080ff; border-top:1px solid #289728;border-bottom:1px solid #289728; font-size: 12pt; padding:3px;">Tiêu đề của bạn tại đây</div></h3>
Với Kiểu Heading bao quanh bởi đường viền
<h3><div style="color:#0080ff; border:1px solid #289728; font-size: 12pt;padding:2px;">Tiêu đề của bạn tại đây</div></h3>

Cập nhật!

Hãy xem thêm cách chỉnh sửa thẻ Heading tags với hiệu ứng đổ bóng (Drop Shadow) và thay đổi màu khi dê chuột (Mouse Hover Effect) Tại đây.

Monday, 7 January 2013

LÀM GÌ ĐỂ LẬP TRÌNH BLOGSPOT CHO TỐT

Lập trình Blogger-Blogspot banner
Blog là một cấu trúc như bao ngôn ngữ lập trình khác. Nếu bạn am hiểu một ngôn ngữ nào đó thì việc vọc Blog với bạn đôi khi lại cực kỳ đơn giản. Nhiều bạn khi làm Blog chỉ nghĩ rằng "Blog của anh này đẹp thật." . Rồi lao đầu vào học HTML, CSS. Nhưng quả thực bạn đã giỏi và làm được như họ. Lý do vì đâu ?

Nguyên nhân chính là bạn chưa hiểu gì về Blog, bạn đã bao giờ thử tự hỏi bản thân rằng mình đã làm ra một template mà không cần sự hộ trợ từ một template đã có sẵn, hay các thủ thuật được cung cấp sẵn trên mạng? Bạn đã đạt được bao nhiêu phần trăm nhận thức sau những gì mình đã làm ?

Chắc chưa thể trả lời ngay được, nhưng câu hỏi đơn giản hơn là bạn đã thuộc bao nhiêu thủ thuật bạn copy về, bao nhiêu thuộc tính của một widget... Bạn nghĩ mình cần bổ sung cái gì là cốt lõi. Nhiều bạn mình gặp đều chỉ chăm chăm tập trung làm một cái Blog cho chính mình từ CSS, HTML để được ca ngợi từ mọi người. Nhưng họ không biết làm sao hiển thị được bài đăng ra ngoài trang của Blog. Hay nói dễ hiểu hơn là họ chỉ làm được trang index.

Không phải những người họ đã biết họ không chỉ các bạn, mà là do chính các bạn tự làm lười mình đi. Hãy thử một lần tự mình search, tự mình kiểm tra, tự mình học hỏi. Làm vậy bạn sẽ mau tiến bộ hơn, mau hiểu hơn... Học theo từng bước sẽ làm bạn cảm thấy tự tin hơn khi làm một template. Trước đây mình ít chuyên sâu vào javascript mà chỉ chạy theo hớt ngọn Jquery. Nhiều các chức năng đơn giản mà Javascript thuần có thể mình vẫn dùng Jquery để thực hiện, làm template nặng trịch. Load rất chậm..Tự đợt đó mình dừng tìm hiểu Jquery luôn, quay về học Javascript từ đâu.

Mình khuyên bạn, nên chọn cho mình một ngôn ngữ căn bản để học và nghiên cứu trước khi vọc Blog. Blog là một cấu trúc XML, khi được biên dịch trên host của Google nó sẽ xuất thành các cấu trúc trang HTML (hay còn gọi là phân trang) theo người thiết kế định nghĩa. Trong đó chỉ tồn tại CSS, HTML, Javascript. Vậy chung quy lại để giỏi về Blog bạn nên học JavaScript đâu tiên. JavaScript coi như một công cụ biến hoá các chức năng trong Blog của bạn một cách kì diệu, còn CSS, HTML chỉ như một chiếc áo và những bộ xương bất động.

Hãy học theo các câu hỏi mình đưa ra, bạn xem mình có thay đổi điều gì không.

Blogger là gì ? Là bao gồm các Widget, các thực thể - LayOut Tag nằm trong nó
Feed là gì ? Là cấu trúc XML, các bạn có thể xem thêm về Callback, Ví dụ về json blogger
Blogger không hỗ trợ gì sao? Hỗ trợ đầy ra đấy, chẳng qua bạn không chịu đọc thôi

Mình đã đi theo con đường tự mình xây dựng lên, mình nghĩ có lẽ mình đi đúng và mình muốn chia sẻ. Để có người đam mêm, góp sức cùng mình phát triển blogger Việt theo nhiều hướng tốt đẹp.

Monday, 31 December 2012

SITEMAP ĐẸP CHO BLOGGER


Demo for Post
Thủ thuật tạo sitemap này mình đã đọc được bên Thuthuatblogger.info thấy rất hay và muốn chia sẻ cho các blogger.

Hiện nay các Kiểu sitemap có một điểm yếu là liệt kê tất cả các nhãn trên blogspot. Tuy nhiên các blogspotter thì lại thích liệt kê bài viết của một số nhãn nào đó (tức là nếu không thích liệt nhãn nào thì nhãn đó sẽ không nằm trong Sitemap, điểm này rất cần thiết). Giải pháp tối ưu là phải làm sao có một sitemap đáp ứng được nhu cầu tùy biến của blogspotter.
Sau khi nghiên cứu vấn đề này, mình đã nghĩ ra ý tưởng vận dụng cách liệt kê các bài viết của một nhãn, một script rất phổ biến trên cộng đồng Blogger, để tạo ra Sitemap, kết hợp CSS tạo hai cột, vừa tiết kiệm không gian web, vừa giúp người dùng dễ dàng tùy biến theo ý thích
Làm cách nào để tạo sitemap?
Trước hết bạn phải đăng ký và sử dụng FeedBurner để thực hiện được thủ thuật này.
Bước 1: Trước hết bạn vào blogger > Tạo một Trang Mới có tiêu đề là sitemap sau đó để trống nội dung

Bước 2: Sau khi tạo trang mới xong các bạn lấy link trang vừa tạo sẽ có dạng
http://www.tênblogcủabạn.com/p/sitemap.html
Bước 3: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 4: Dán code bên dưới trước thẻ </head>

<b:if cond='data:blog.url == &quot;Link Site Map&quot;'>
<script type='text/javascript'>
//<![CDATA[
function allpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
//]]>
</script>
<style type='text/css'>
#sitemap{width:950px;margin:0;background:#ffffff;padding-bottom:15px;}
#sitemap ul {background:#EEEEEE;max-height: 250px !important; overflow:auto; padding:5px 10px;margin:0;list-style-type:none}
#sitemap ul:hover {background:#D6EAFF}
#sitemap ul li {list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh69xs7sLvRT6YWgGgkOv5S5aS2PoVIXQOodOa21I-C9U6M7LhXf4lUgr8YSEUwvbyEBgLk_J7hz4I9qYFD6NtSsJZUBygDe0sMIDBdIWyIwstSsyx7cZ6QvcJhaUPAP9AYJcURNdUxPyuA/h120/1.giff) inside; vertical-align: top;  padding-left:10px;margin: 0;}
#sitemap ul li:hover {list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCQn_LcMBOeB3Vc5Acl-aaWeZhqlwkCVLGAlsRd2YYnLD4dqB6g3a1hkbwaCtkyIXoVGQEurJgtwbP6oqVEm02PTeYGxFgIlJvz-OWy92N0tm7ZOUOLKi3qE1-i4ilXSeoRDCkvqtWnaf7/h120/2.gif) inside; vertical-align: top;padding-left:10px;margin: 0;}
.sm-left{float:left;width:45%;margin:0 20px 0px 20px;font-size:14px;tex-align:justify}
.sm-right{float:right;width:45%;;margin:0 20px 0px 20px;font-size:14px;tex-align:justify}
p.smtitle {border-bottom:1px dotted #789;clear:both;color:
#2554C7;font-family:Georgia;font-size:25px;padding:10px 50px 5px
0;text-align:right;}
#content-wrapper{display:none}
</style>
</b:if>

  • Link Site Map Sửa  thành link trang Site Map của bạn
  • 950px là độ rộng của trang Site Map
  • ffffff là màu nền của trang Site Map
Bước 5: Dán code bên dưới trên thẻ <div id='content-wrapper'> trong template của bạn
<b:if cond='data:blog.url == &quot;Link Site Map&quot;'>
<div id='sitemap'>
<div class='sm-left'>
<p class='smtitle'><a href='/search/label/Nhãn 1?max-results=10'>Nhãn 1</a></p>
<script src='/feeds/posts/summary/-/Nhãn 1?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn 2?max-results=10'>Nhãn 2</a></p>
<script src='/feeds/posts/summary/-/Nhãn 2?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn 3?max-results=10'>Nhãn 3</a></p>
<script src='/feeds/posts/summary/-/Nhãn 3?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>
</div>
<div class='sm-right'>
<p class='smtitle'><a href='/search/label/Nhãn A?max-results=10'>Nhãn A</a></p>
<script src='/feeds/posts/summary/-/Nhãn A?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn B?max-results=10'>Nhãn B</a></p>
<script src='/feeds/posts/summary/-/Nhãn B?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>
<p class='smtitle'><a href='/search/label/Nhãn C?max-results=10'>Nhãn C</a></p>
<script src='/feeds/posts/summary/-/Nhãn C?max-results=500&amp;alt=json-in-script&amp;callback=allpostslist'/>
</div>
</div>
<div style='clear: both;'/>
</b:if>


  • <div class='sm-left'> Là cột bên trái
  • <div class='sm-right'> Là cột bên phải
  • Tùy theo số lượng các nhãn mà bạn tự cân đối cho hợp lý cả hai bên cột trong Site Map
Bước 6: Lưu Mẫu
Thuthuatblogger.info

Sunday, 9 December 2012

Mô tả tìm kiếm cho bài đăng và blogspot


3 nhận xét
Mô tả tìm kiếm cho bài đăng và blogspot
Phần này giúp cho phép bạn bật tính năng thêm mô tả của bài viết hoặc trang chủ, tức phần tóm tắt sẽ hiển thị trong phần mô tả của kết quả tìm kiếm với Google. Về cái này thì dân IT ai cũng biết có tác dụng tốt thế nào với những chú bọ tìm kiếm của google rùi nhỉ, bi giờ không còn dám dùng từ SEO tốt nữa mà là Cực tốt.
Bạn có thể xem Demo để thấy phần mô tả này. Chú ý phần ngay bên dưới tên trang nha.


Xem hình minh họa:
Mô tả tìm kiếm cho bài đăng và blogspot
Với trang chủ thì chúng ta có cách giải quyết từ rất lâu vấn đề này bằng cách thêm thẻMeta Description. Nhưng với bài viết thì lúc trước chúng ta để tự Google muốn lấy ở đâu bỏ lên kết quả search thì lấy, giờ chúng ta sẽ quyết định việc này. Điều này giúp chúng ta tránh được việc Google lấy những đoạn nội dung không mấy hay ho mà bỏ vào kết quả tìm kiếm, khiến người search ít muốn click.

Để bật tính năng này bạn làm như sau:
1- Vào phần Cài đặt (Settings)
2- Tùy chọn tìm kiếm (Search preferences).
Bật chức năng mô tả tìm kiếm tự động cho blogspot - SEO hiệu quả cực ttots
3- Trong đó có mục Thẻ Meta (Meta tags)=> Mô tả (Description) => hãy nhấn Chỉnh sửa (Edit) chọn Có (Yes) để bật tính năng lên. Lúc này 1 khung nhập xuất hiện, bạn nhập phần mô tả cho trang chủ của bạn (giới hạn 121 ký tự).
Bật chức năng mô tả tìm kiếm tự động cho blogspot - SEO hiệu quả cực ttots
4- Bấm Lưu Thay đổi (Save changes). 
5-  Để các mô tả ở trên làm việc chính xác trong các mẫu tùy chỉnh do đó cần phải chèn một số mã bên trong mẫu. Hãy vào Mẫu (Template) => Chỉnh sửa HTML (Edit HTML) và chỉ dán đoạn code mô tả bên dưới vào sau thẻ  <head>:
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if> 

Mô tả cho bài viết?

Khi bạn bật tính năng này lên thì khi viết bài bạn sẽ thấy thêm mục Mô tả tìm kiếm(Search Description) ở cột bên phải. Bạn click vào đó để nhập vào phần tóm tắt của bài viết sẽ được hiển thị trong mô tả của kết quả tìm kiếm. Cái này là cực tốt cho SEO đó nhé, nhớ chăm chỉ nhập là được. Namkna cũng sẽ kỹ lưỡng trong việc nhập mô tả này.
Bật chức năng mô tả tìm kiếm tự động cho blogspot - SEO hiệu quả cực ttots
- Xem thêm: tạo trang báo lỗi cực coold tại đây hoặc chỉnh sửa file Robor txt tại đây

Chúc thành công!

Bảng điều khiển chỉ hiện với Amin blogspot


12 nhận xét
Bảng điều khiển chỉ hiện với Amin blogspot
Hiện nay đa số các blogger chuyên nghiệp đều ẩn hoặc xóa thanh navbar trên đầu blog. Do vậy khi thao tác chỉnh sửa là tương đối khó khăn. Để tiện cho việc chỉnh sửa template và post bài, hôm nay mình xin giới thiệu cho các bạn 1 thủ thuật tạo một bảng "Admin Control Panel" vào ngay trong blog. Việc tạo bảng này sẽ giúp cho bạn khỏi phải chuyển qua lại giữa 2 trang : trang blog của bạn và trang chủ Blogger khi mình cần chỉnh sửa, đăng bài và xem mẫu.
Bảng điều khiển chỉ hiện với Amin blogspot
Để làm được một tiện ích như vậy bạn càn phải đặt nó trong một class có dạng:class='item-control blog-admin'
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Phần tử trang 
4. Chọn Thêm tiện ích => Chọn Thêm tiện ích HTML/Javar Scrip .
5. Thêm đoạn code bên dưới vào.
<span class='item-control blog-admin'>
<h2>Bảng điều khiển</h2>
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#editor'>Đăng bài</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#allposts'>Sửa bài đăng</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#basicsettings'>Cài đặt</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#pageelements'>Bố cục</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#template'>Sửa HTML</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#publishedcomments'>Nhận xét</a>
|
<a href='http://www.blogger.com/logout.g'>Thoát</a>
</span>
- Trong đó bạn thay BlogIdNumber thành số ID của blog bạn vào nha. Phần này mình hướng dẫn với các bạn đang dùng giao diện mới của blogspot.
- Mở rộng: Các bạn có thể thay đổi nội dung bên trong bằng các thay đổi phần nằm giữa 2 thẻ:
<span class='item-control blog-admin'>
Nội dung bạn muốn hiển thị.
</span>
- Nếu chỉ áp dụng đến đây thì đoạn code trên sẽ nằm cố định một vị trí. Về căn bản tiện ích này chỉ có chủ nhân blog mới nhìn thấy nên không cần phải trang bị quá nhiều. Tuy nhiên các bạn có thể sử dụng CSS để làm đẹp và tăng tính năng động bằng cách thêm các class như only-amin
<span class='item-control blog-admin'>
<span class='only-amin'>
Nội dung bạn muốn hiển thị.
</span></span>
- Khi đó bạn sẽ phải khai báo CSS cho class đó như sau:
<style>
.only-amin{position:fixed; top:100px;//thuộc tính của CSS}
</style>
<span class='item-control blog-admin'>
<span class='only-amin'>
Nội dung bạn muốn hiển thị.
</span></span>
- Trong phần thuộc tính CSS mình thêm position:fixed; top:100px; để cho tiện ích này luôn luôn xuất hiện trên một vị trí cách đầu blog 100 px cho dù bạn đang xem ở bất kỳ vị trí nào. (tất nhiên bạn có thể thay đổi 100px theo ý bạn rùi). Và đừng quyên thêm các thuộc tính khác như widht (chiều rộng), height (chiều cao- Cái này thường không cần thiết vì nếu bạn cho chiều cao nhỏ quá sẽ xuất hiện thanh quận) ringht:..px để quyết định xem nó nằm bên phải hay bên trái
- Tóm lại bạn có một đoạn code mới dạng như sau:
<style>
.only-amin{width:200px; position:fixed; top:100px;right:10px; background: #E0FCB9;box-shadow: 2px 2px 2px #666}
</style>
<span class='item-control blog-admin'>
<span class='only-amin'>
<h2>Bảng điều khiển</h2>
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#editor'>Đăng bài</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#allposts'>Sửa bài đăng</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#basicsettings'>Cài đặt</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#pageelements'>Bố cục</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#template'>Sửa HTML</a>
|
<a href='http://www.blogger.com/blogger.g?blogID=BlogIdNumber#publishedcomments'>Nhận xét</a>
|
<a href='http://www.blogger.com/logout.g'>Thoát</a>
</span>
</span>
- Bạn hãy tự thể hiện khả năng sáng tạo của bạn nha,
Chúc thành công!
Copyright 2010 Chú ý; trang này chỉ để chủ xem.

Home | Layout | Template | Allposts | Viết |