Giới thiệu Template blogger dành cho trang ảnh

Lang thang trên internet thấy có trang này chứa nhiều template dành cho site ảnh, Bạn nào muốn làm blogspot với theme trên thì vô đây nhé http://soratemplates.com

Hướng dẫn thay đổi giao diện cho blogger

Coppy bài viết này, post vào đây để cho mem mới và những ai chưa biết thay theme cho blogger tham khảo.

Blogger là một dịch vụ cung cấp miễn phí cho người dùng, với lợi thế có sự chống lưng của ông Trùm Google blogger được trang bị khá đầy đủ những yếu tố thích hợp cho một blogger chuyên nghiệp, trong số đó tính năng thay đổi theme (giao diện) là một điểm nhấn chứng tỏ phong cách riêng của mỗi blogger nhưng không quá xa với cộng đồng.
Bài viết này mình xin liệt kê lại những bước cơ bản cho những bạn mới làm quen với blogger.

Trước tiên bạn cần ĐĂNG NHẬP vào blogger với tài khoản Google của mình. Sau khi đăng nhập thành công hệ thống chuyển bạn sang Portal của blogspot tương tự hình sau:

Để tiến hành thay theme (giao diện) bạn nhấn vào liên kết "THIẾT KẾ" ---> chọn menu "CHỈNH SỮA HTML":

Bấm vào "CHỌN TIỆP TIN" (thứ tự 3) và chọn file ".XML " của theme bạn muốn thay, sau đó nhấn "TẢI LÊN", 
Nếu bạn thấy xuất hiện một hộp thoại với nội dung tương tự như sau:

Nhấn bạn chọn "GIỮ TIỆN ÍCH" để hoàn tất yêu cầu thay theme.


Ngoài ra bạn cũng có thể chỉnh sửa một số hiển thị cho blog của bạn tại menu "TRÌNH THIẾT KẾ MẪU"

 Chúc các bạn thành công.
Tác giả: mr.winni

Code popup New tab cho quảng cáo

Một số trang web có phần code Popup rất chuyên nghiệp là mở tab mới chứ không như các popup truyền thống là bật ra màn hình sẽ rất khó chịu, sau đây mình xin chia sẻ các bạn code popup.
Mở tab mới code này được một số website như: phimvang.org, thaudem.com, nethoabinh.com .... đang sử dụng hiệu quả popup bật ra tăng gấp 1,5 lần so với code popup truyền thống và chạy được trên tất cả các trình duyệt.

Download đính kèm
Sau đó chèn đoạn code sau vào chỗ bạn cần hiển thị popup

<script type="text/javascript" src="http://kenhdaihoc.googlecode.com/files/popup.js"></script>

Thay Đường dẫn đường dẫn popup và chỉnh sửa lại code cho phù hợp nhé

Download đính kèm

Congly Blogger Theme - Theme tin tức ( Update )

Do khá nhiều người sử dụng theme này nên mình cập nhật thêm 1 số sửa đổi mà blogger update: + Tối ưu tăng tốc độ load + Slide bài mới nhất có thêm hình ảnh + Fix không lưu được widget ở phần tử trang + Sửa widget  nhỏ trang lable ở phần tử trang + Thêm thumbnail cho bài viết ở trang nhãn khi không có ảnh + Thêm trang Archive cho blog + Fix tìm kiếm = tìm kiếm blogger + Tạo widget ở sidebar có khung bo viền + Sử dụng phân trang mặc đinh + Loại bỏ Menu sổ ngang + Sử dụng comment phân cấp blogger 

XEM DEMO DOWNLOAD

Hướng dẫn : Để sửa đổi theme bạn nên dùng Notepad++ để dễ dàng sử dụng  

1. Thay đổi logo tìm: http://4.bp.blogspot.com/-SvH6xyNEkkY/T-6yaYQGhiI/AAAAAAAABE8/7_aQzYPMao0/s1600/logos.png thay = link ảnh logo của bạn  

2. Thay đổi link menu

  
<ul class='menu'>
<li><a href='/'><span>Home</span></a></li>
<li><a href='/search/label/Destination'><span>Menu1</span></a></li>
<li><a href='/search/label/Destination '><span>Menu2</span></a></li>
<li><a href='/search/label/Destination '><span>Menu3</span></a></li>
<li><a href='/search/label/Destination  '><span>Menu4</span></a></li>
<li><a href='/search/label/Destination  '><span>Menu5</span></a></li>
<li><a href='/search/label/Destination '><span>Menu6</span></a></li>
<li><a href='/search/label/Destination '><span>Menu7</span></a></li>
<li><a href='/search/label Destination '><span>Menu8</span></a></li>
<li><a href='/search/label/Destination '><span>Menu9</span></a></li> 
</ul>

Thay Destination và Menu.. thành các nhãn blog của bạn 

3. Hiện thị các table ở trang chủ 

Tìm

<div class='body-home'>
<div class='boxtitle'>
<h2><span class='boxtitle1'/><span class='boxtitle2'><a href='/search/label/Destination' title='Destination'>Destination</a></span>
<span class='boxtitle3'/></h2>
<ul class='subbox'>
<li><a href='/search/label/Menu1'>Menu1</a></li>
<li>|</li>
<li><a href='/search/label/Menu2'>Menu2</a></li>
<li>|</li>
<li><a href='/search/label/Menu3'>Menu3</a></li>
</ul>
</div>
<div class='body-info'> 
<script>document.write("<script src=\"/feeds/posts/default/-/Destination?max-results="+7+"&orderby=published&alt=json-in-script&callback=helloximo02\"><\/script>");</script> 
</div> 
<div style='clear:both;'/> 
</div> 


Thay chữ in đậm màu đỏ và xanh thành các nhãn của bạn

Và đây là data test nếu blog bạn chưa có bài viết nào
Vào Download về cài đặt và Import là có  ngay blog
Link download data http://kenhdaihoc.com/forum/threads/7888-Share-data-blogger-gan-3k-bai-viet-chat-luong-cua-kenhdaihoc-com.kdh

Share code liên kết logo chạy qua lại

DEMO online: http://kenhdaihoc.com/forum

<!-- ////////////// lien kết logo ///////////////// --><!-- Affiliate -->
<div id="wgo" class="collapse wgo_block block">
<h2 class="blockhead"><font color="#ffff00">TextLink - Logo - Liên Hệ  </font>
<a href="ymsgr:sendIM?contact_kdh">
<img border="0" src="http://opi.yahoo.com/online?u=contact_kdh&m=g&t=1&l=us"></a><br />
</h2>

<div class="blockbody formcontrols floatcontainer"> <!---Liên kết logo--->
 <table class="tborder" cellpadding="4" cellspacing="1" border="0"  width="100%" align="center">
<tr>
<td class="tcat" align="left"><a style="float:right" href="#top" onclick="return  toggle_collapse('forumhome_announce')"></a></td>
</tr>
<tbody id="collapseobj_forumhome_announce">
<tr>
<td bgcolor="#e9e9e9">
 
<TABLE BORDER="1">
<TR>
<td align="right" width = "20%" height = '62px'>

<!---Logo của tôi--->
  <center><a href="http://kenhdaihoc.com/forum"  target="_blank"><img alt=" kênh thông tin -học tập -giải trí" src="http://kenhdaihoc.com/forum/images/logolienket.jpg"  width="164" border="0" height="70"></a></center>
  <!---Hết logo của tôi-->

  </td>
<td align="left" width = "80%" height = '62px'>
<marquee onmouseover="this.stop()" onmouseout="this.start()"  behavior="alternate">

<!--Logo liên kết -->
<a href="http://home.kenhdaihoc.com" target="_new"><img src="http://kenhdaihoc.com/forum/images/logolienket.jpg" border="0" height="70" width="164"></a>
<a href="http://home.kenhdaihoc.com" target="_new"><img src="http://kenhdaihoc.com/forum/images/logolienket.jpg" border="0" height="70" width="164"></a>
<a href="http://home.kenhdaihoc.com" target="_new"><img src="http://kenhdaihoc.com/forum/images/logolienket.jpg" border="0" height="70" width="164"></a>
<a href="http://home.kenhdaihoc.com" target="_new"><img src="http://kenhdaihoc.com/forum/images/logolienket.jpg" border="0" height="70" width="164"></a>
<a href="http://home.kenhdaihoc.com" target="_new"><img src="http://kenhdaihoc.com/forum/images/logolienket.jpg" border="0" height="70" width="164"></a>
<a href="http://home.kenhdaihoc.com" target="_new"><img src="http://kenhdaihoc.com/forum/images/logolienket.jpg" border="0" height="70" width="164"></a>
<!---Hết logo liên kết--->
 
</marquee>
</td>
     </TR>
</TABLE>
</td>
</tr>
</tbody>
 </table>
 <!---Hết Liên kết logo--->
</div>
</div>
<!-- End Affiliate -->
<!-- /////////////////stop liên kết logo /////////////// -->

Share Code quảng cáo hoặc thông báo cho Blogspot

Nhân dịp mới chuyển giao diện trang này nên nay mình share giới thiệu với các bạn 1 code rất hay, với code này có thể làm quảng cáo hay thông báo gì cũng được

DEMO

Hoặc ảnh bên dưới

Chèn code này vào HTML/Javascript

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
[ CLOSE ]
</a>
</div>
<center>
Mời làm cộng tác viên với trang này!!! Mail: admin@kehdaihoc.com
</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Save lại!
Thay màu đỏ bằng mã html, ảnh hay đoạn text thì tùy bạn

Chúc thành công!

Hướng dẩn chèn comment của facebook vào blogspot

Facebook đã trở nên phổ biến và quen thuộc mỗi khi chúng ta muốn lên đây để ... "chém gió". Và hôm nay mình sẽ hướng dẫn cho các bạn đem cái công cụ "chém gió" này vào blog của các bạn. Với việc thay thế comment của blogspot bằng comment của facebook hy vọng blog của các bạn sẽ sôi động hơn.

Có thể nói thủ thuật chèn comment của facebook vào mỗi bài viết blogspot cũng không mới lạ gì, 1 số blog thủ thuật nước ngoài đã đăng tải rồi (các bạn có thể vào google search với từ khóa facebook comments for blogger là có kết quả ngay). Tuy nhiên phải nói là cách thực hiện nó cũng khá phức tạp. Ngay cả mình cũng chưa thực hiện thành công khi làm theo các bước hướng dẫn. Có lần mình đã cố thử vào trang http://developers.facebook.com/setup/ mà không được, không biết có phải facebook hạn chế đối với user ở Viện Nam ko nữa.

Và ở thủ thuật này, các bạn sẽ chỉ cần copy và paste code là xong, không cần phải thiết lập hay tạo App trên facebook.

Xem DEMO dưới bài viết này

Bước đầu tiên bạn phải làm là đóng comment của blogger lại( có thể bỏ qua bước này). Các bước thực hiện như hình bên dưới :

- Save cài đặt lại.

Bước 2 : chèn code của thủ thuật vào template.

1. Vào phần thiết kế -> chỉnh sửa code HTML -> nhấp chọn mở rộng mẫu tiện ích.

2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="660"></div>';
//]]>
</script>

- data-width là độ rộng của comment box.

- data-num-posts là số comment được hiển thị (cũng chính là số bài reply trên 1 comment)

- data-href là để phân biệt từng comment box, mỗi địa chỉ data-href khác nhau sẽ cho 1 comment box khác nhau. và trong thủ thuật này data-href chính là link của mỗi bài viết.

3. Chèn đoạn code bên dưới vào sau thẻ <body>

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

4. Tìm đoạn code như bên dưới :

<b:include data='post' name='post'/>

5. Chèn ngay sau nó đoạn code bên dưới :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>

6. Save template.

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

Sưu tầm