Form đăng nhập cho Blogspot

Bài viết này sẽ hướng dẫn bạn làm một form đăng nhập (Login Form) trên blog với phong cách của Wordpress. Như vậy sẽ tiết kiệm thời gian cho độc giả khi họ muốn để lại nhận xét kèm avatar trên blog của bạn mà quên chưa đăng nhập, thay vì phải gõ địa chỉ trang chủ của Blogger.

Xem demo

Chèn đoạn CSS sau phía trên thẻ </b:skin> trong template:

#slide-panel{background-color:#000;border-bottom:2px solid #838383;display:none;height:80px;margin:auto;padding-top:20px}
.slide{width:950px;margin:auto}
.btn-slide:link,.btn-slide:visited{color:#fff;float:right;display:block;font-size:14px;text-transform:uppercase;font-weight:bold;height:28px;padding:3px 0 3px 0;line-height:28px;text-align:center;text-decoration:none;width:80px;font-family:Arial;background:#000;margin-top:-2px}
.loginform{width:950px;margin:0 auto;color:#999;font-family:Arial,Helvetica,sans-serif}
.formdetails{color:#FFF;font-size:12px;padding:5px}
.formdetails input{border:none;padding:2px 5px;background-color:#EFEFEF}
.loginregister{color:#999;padding:5px}
.loginregister a:link,.loginregister a:visited{color:#90fff6;font-size:12px}
.loginregister a:hover{color:#fff}
.loginform h2{padding:10px 10px 10px 0;font-size:18px;font-weight:normal;text-transform:uppercase}
.loginform ul li{display:inline}
.loginform ul li a:link,.loginform ul li a:visited{color:#FFF;font-size:12px;text-decoration:underline}
input#signIn{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxuWrrF_XveoMgqVMjJWBVokiu8sSxNl-1Dq5nlewFHWc0G99V3DccnSn1pf_IwzXtJHrcKZQiYLAnIOob6jI8yb9QxNV_IBlmcaGMKT8MSsqSVyDfVfePAYKDNUex-rOdMmJW4fT1ywE/) no-repeat;width:94px;height:25px;cursor:pointer;padding-bottom:5px}
input#Email,input#Passwd{background:#414141;color:#fff}
input:focus#Email,input:focus#Passwd{background:#545454}
Tiếp theo, chèn đoạn code sau ngay bên dưới </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&quot;.btn-slide&quot;).click(function(){$(&quot;#slide-panel&quot;).slideToggle(&quot;slow&quot;);});});
</script>

<div id='slide-panel'><div class='loginform'><div class='formdetails'>
<form action='https://www.google.com/accounts/ServiceLogin?service=blogger&amp;continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;ltmpl=start&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8#s01' method='post'>

<label for='log'>Username : </label><input id='Email' name='Email' size='20' type='text'/>

<label for='pwd'>Password : </label><input id='Passwd' name='Passwd' size='20' type='password'/>

<input id='signIn' name='signIn' type='submit' value='Đăng nhập'/>

<label for='rememberme'><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Ghi nhớ</label>
</form></div>

<div class='loginregister'>
<a href='https://www.blogger.com/signup.g' target='_blank'>Đăng kí­</a> | <a href='http://www.blogger.com/forgot.g' target='_blank'>Quên mật khẩu ?</a>
</div></div></div>

<div class='slide'><a class='btn-slide' href='#'>Login </a></div>
Save template và xem thành quả.

Tạo tab nội dung đơn giản với Jquery

Tab menu giúp tiết kiệm không gian trên trang web, làm cho blog của bạn trông gọn gàng và chuyên nghiệp hơn. Có nhiều phương pháp để làm một tab nội dung ở sidebar, ở đây mình giới thiệu một cách đơn giản nhất, đó là sử dụng Jquery.

Demo

Tìm trong template đoạn mã sau:
<div id='sidebar-wrapper'>
Chèn ngay bên dưới nó:
<style type='text/css'>
ul.tabs-widget{padding:0}
.tabs-widget li{margin:0 10px 10px 0;background:#fff;float:left;list-style-type:none;display:block;height:30px;line-height:30px;width:60px;border:4px solid #3c5670;text-align:center}
.tabs-widget li a{display:block;color:#3c5670;font-size:14px;text-decoration:none}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#ff8053;color:#fff}
#sidebartab1 h2, #sidebartab2 h2, #sidebartab3 h2{display:none}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function(){$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);$(this).addClass(&quot;tabs-widget-current&quot;);$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();var activeTab=$(this).attr(&quot;href&quot;);$(activeTab).fadeIn();return false;});});
</script>

<h2><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Tab 1</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tab 2</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Tab 3</a></li>
</ul></h2>
<div class='clear'/>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes'/>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes'/>
</div>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes'/>
</div>
Các dòng màu xanh đỏ ở trên bạn có thể sửa lại cho phù hợp với blog của mình. Vậy là xong, tiếp theo bạn chỉ việc vào phần thiết kế rồi add tiện ích cho từng tab:

Hy vọng thủ thuật đơn giản này có ích cho blog của bạn.

Tiên tri Vanga đã dự đoán thảm họa Nhật Bản

Nhà tiên tri Vanga đã đoán được chính xác thời gian diễn ra thảm họa động đất và cơn mưa phóng xạ. Còn ngay từ thế kỷ 16, nhà tiên tri Nostradamus đã viết: “Trái Đất rung chuyển rất mạnh. Nước đột ngột dâng cao như trận đại hồng thủy”.

Bà Vanga (1911 1996), một phụ nữ mù người Bulgary, nổi tiếng lẫy lừng nhờ rất nhiều tiên đoán chính xác, trong đó có những tiên đoán “động trời” liên quan Chiến tranh Thế giới thứ hai, liên quan ngày chết của Stalin, về việc Liên Xô sụp đổ, về vụ con tàu Kursk bị đắm…

Giờ đây, chắc hẳn bạn sẽ kinh hoàng khi biết rằng trong những lời tiên đoán của bà cho năm 2011 có một câu như sau: “Do những trận mưa phóng xạ nên ở bắc bán cầu cả động vật lẫn thực vật đều sẽ bị tuyệt diệt”.

Câu tiên đoán này hẳn muốn nói đến thảm hoạ ở các nhà máy điện nguyên tử của Nhật. Đám mây phóng xạ tạo thành sau những vụ nổ tại nhà máy điện hạt nhân Fukushima lúc đầu di chuyển về phía đông ra Thái Bình dương nhưng rồi ngoặt về phía tây, phía lục địa Á - Âu tức là về phía Bắc Bán cầu.

Bà Vanga cũng đã tiên đoán vào năm 2010 sẽ bùng nổ cuộc Chiến tranh Thế giới thứ ba và cuộc chiến tranh này sẽ kết thúc vào năm 2014.

“Do những trận mưa phóng xạ nên ở Bắc Bán cầu cả động vật lẫn thực vật đều sẽ bị tuyệt diệt vào tháng 3- 2011. “ - Lời tiên tri Vanga.

Trong bối cảnh đó, hiện tượng hủy diệt cả động vật lẫn thực vật mà bà nói đến chắc chắn là do kết quả các hành động chiến sự chứ không phải do nhà máy điện nguyên tử bị nổ. Nhưng rõ ràng lời tiên đoán của bà Vanga và hiện thực hiện nay ở Nhật trùng hợp một cách thần bí cả về thời gian (năm 2011) lẫn sự việc (mưa phóng xạ).

Cũng có thể tìm thấy ở nhà tiên tri vĩ đại Nostradamus (1503 – 1566) người Pháp đôi điều gì đấy về thảm hoạ ở Nhật. Chẳng hạn như: “Trái Đất rung chuyển rất mạnh” (đoạn 1 quyển 46) hoặc: “Nước đột ngột dâng cao như trận đại hồng thuỷ” (đoạn 8 quyển 16). Tuy nhiên, người ta không thể tìm thấy điều gì cụ thể hơn ở nhà tiên tri này.

Nữ chiêm tinh Ludmila Muravieva, người Nga khi tiên đoán cho tháng 3 năm 2011 có nói: “Sẽ xẩy ra một sự cố gì đấy hoàn toàn mới, đột ngột, và sự cố đó có thể làm đảo lộn cả thế giới. Những xáo động mạnh và bất ngờ sẽ buộc nhiều người phải nhìn cuộc sống riêng tư của mình theo cách khác bất kể chuyện gì đang diễn ra chung quanh”.

Giờ đây có thể mạnh dạn liên hệ những từ ngữ chung chung “đột ngột”, “bất ngờ” và “làm đảo lộn cả thế giới” với những sự cố hiện nay ở đất nước Mặt Trời mọc. Còn từ “xáo động” có thể coi như ngụ ý những cơn địa chấn và dư chấn ngầm ở Nhật.

(Theo Tiền phong/KP.ru)

TechBlog : Template dành cho blog về công nghệ

Thêm một template mới ra lò, TechBlog là template phù hợp cho các blog về công nghệ, IT và thủ thuật...

Screenshot   |   Demo   |   Download

Sau đây là hướng dẫn sử dụng, để cài đặt phần Slider, click chỉnh sửa rồi chèn đoạn code sau:
<div id="featured">
<img width="990" height="335" src="...image1.jpg" class="featured" alt="photo-01" title="photo-01" />
<span><h5><a href="http://noct-land.blogspot.com" rel="bookmark">Tiêu đề 1</a></h5>
<p><strong>Đoạn mô tả...</strong></p></span>

<img width="990" height="335" src="...image2.jpg" class="featured" alt="photo-02" title="photo-02" />
<span><h5><a href="http://noct-land.blogspot.com" rel="bookmark">Tiêu đề 2</a></h5>
<p><strong>Đoạn mô tả...</strong></p></span>
</div>
Thay đổi link ảnh, link bài đăng và các chi tiết khác cho phù hợp với blog của bạn.

Vị trí của các tab ở sidebar trong layout là như thế này:

Để nút Reply ở phần Comment hoạt động được thì ta tìm dòng:
<a class='comment-reply' expr:href='&quot;https://www.blogger.com/comment.g?blogID=8572312764701610119&
Chỉ việc thay dòng màu đỏ bằng Blog ID của bạn vào.

TechBlog có sử dụng một số file .js, vốn đã được mình up sẵn lên Google Sites, tuy nhiên host này không chịu "chơi" với custom domain, vì vậy bác nào đã sắm domain riêng thì hãy upload lại các file js này lên host khác ví dụ như Google Code thì template mới hoạt động ngon lành được. Một lưu ý cuối cùng là template này không sử dụng Auto-readmore để thân thiện với SEO hơn, bạn tự chèn dấu ngắt nhảy để thu gọn bài viết ở trang chủ.

Vui lòng giữ nguyên thông tin tác giả khi sử dụng Template này.

Tiện ích phân trang PageNavi và một số style

Tiện ích phân trang vốn không còn xa lạ với Blogspot, bài này chỉ giới thiệu script hack phân trang mà mình đang dùng cùng với một số style khá đẹp để bạn lựa chọn. Đây là script phân trang từ hỗn tạp blog viết lại theo phong cách WordPress, bạn có thể tham khảo cách làm ở bài viết gốc hoặc xem dưới đây.




 Trong template, chèn đoạn CSS sau phía trên </b:skin>
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}
Tiếp tục tìm đến dòng này:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Chèn ngay sau nó:
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>
Tiếp theo, tìm trong template của bạn:
<!-- navigation -->
<b:include name='nextprev'/>
Thay thế nó bằng:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>
Tùy chỉnh script:
-  perPage: số bài viết hiển thị trong 1 trang
-  numPages: số trang hiển thị
-  firstText, lastText, nextText, prevText: các từ hiển thị cho các nút First, Last, Next, Prev

Cơ bản vậy là xong, sau đây là một số style, hãy chọn kiểu phù hợp nhất với template của bạn rồi thay thế vào đoạn code màu xanh phía trên:

Kiểu 1:

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}
Kiểu 2:

.pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}
Kiểu 3:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}
.pagenavi .pages{display:none}
Kiểu 4:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}
Kiểu 5:

.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}
.pagenavi .pages{color:#fff}
Kiểu 6:

.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}
.pagenavi .pages{color:#666}
Kiểu 7:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none}
.pagenavi .pages{display:none}
Kiểu 8:

.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}
.pagenavi .pages{background:none;border:none}

Fresh Buttons Pack : button CSS3 cực đẹp

Fresh Buttons là bộ button được thiết kế dành cho website. Nghe có vẻ bình thường, nhưng điều đặc biệt ở đây là chúng được làm dựa trên mã CSS3 thuần mà không sử dụng bất cứ image nào. Chỉ vài dòng code CSS và bạn đã có một button bắt mắt, thay vì phải load một file ảnh khiến giảm tốc độ tải trang web.





Gói button này được mình mua ở codecanyon.net - một phân nhánh của themeforest, dưới đây là một vài ảnh preview:

Hoặc bạn có thể xem live demo để biết code hoạt động như thế nào (chú ý nút Read More)

Nếu bạn thật sự quan tâm hoặc chỉ đơn giản là muốn tìm hiểu thêm về CSS3 thì Noct có thể chia sẻ gói button này qua mail, vui lòng điền Tên (hoặc nickname) và email của bạn vào khung liên hệ, tiêu đề là : Fresh Buttons.

Lưu ý: 
  -  Đọc kĩ hướng dẫn sử dụng trước khi dùng
  -  Do được thiết kế trên nền CSS3 nên button sẽ không hiển thị đẹp trên các trình duyệt lỗi thời, điển hình là Internet Explorer
  -  Gói buttons này là sở hữu trí tuệ của tác giả nên bạn vui lòng không chia sẻ link download (mediafire, megaupload .v.v...)

Hy vọng Fresh Buttons có ích cho blog của bạn !