Home » All posts

CÁC MẪU PHÂN TRANG CHO BLOG

Người đăng: buonkhongem on Thứ Năm, 21 tháng 4, 2011

Trước đây tôi có giới thiệu bài "Phân trang cho Blog" (xem TẠI ĐÂY), ngoài ra còn các mẫu khác dưới đây, bạn thích cái nào thì copy code phía dưới và làm theo các bước tương tự.
Mẫu 1:



Mẫu 2:


Mẫu 3:



Mẫu 4:



Mẫu 5:



Mẫu 6:



Mẫu 7:





More about →
vào lúc 23:46 { Add nhận xét }
Nhãn: ,

TẠO LIÊN KẾT LOGO CHẠY NGANG

Người đăng: buonkhongem

Blog là nơi để các bạn có thể chia sẻ, trao lưu học hỏi kinh nghiệm với nhau qua các bài đăng và các comment. Để khách tham quan biết đến blog mình thì phương pháp hữu hiệu nhất là bạn phải liên kết với các blog khác có cùng mục đích có cùng chủ đề...
Khi liên kết Logo trên Blog của bạn quá nhiều nó sẽ làm tăng không gian đáng kể trên Blog, do đó để khắc phục điều này bạn nên tạo một hiệu ứng cho các Logo chạy ngang hoặc ẩn hiện trên Blog theo thời gian mình định trước. Điều này sẽ làm cho Blog bạn trông "Pro" hơn và đặc biệt sẽ làm cho khách dễ "bắt mắt" hơn. Trong giới hạn bài viết này tôi chỉ hướng dẫn logo chạy ngang, sau này sẽ giới thiệu tiếp cách làm logo thay đổi theo thời gian định trước
Đầu tiên, bạn đăng nhập blog, chọn Thiết kế > chọn Thêm tiện ích > Thêm HTML/Javacript, sau đó dán tất cả các code này vào

<div style="background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioiNjcLb6ZKddFHY1C_0KecvVOg2cujPEmSo_snWXzSuDjB6rUGCq9_uzUGSjw7JsWgCQvglsZTb3UWqjnsJaOTPAYOx75gXfoTeQQ0dKEHWchjWFpKU0ay1G__khGkKTgPmBtANn1DZxf/) no-repeat left; border-top:#999 1px solid; border-bottom:#999 1px solid; padding-left:19px;padding-right:2px;width:100%;">
<marquee onmouseout="this.start()" direction="left" behavior="50" scrollamount="5" height="60" onmouseover="this.stop()" scrolldelay="50" width="511">

<a href="http://dungheineken.blogspot.com/" target="blank" ><img style="width: 220px; height: 60px;" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfJUI_9n7K_bNTAf0Lclee5fY_Ax_7mpkQso5D5CsBg8Tpfbr_gUsEWPFZr0jinTtv1Ikwr3mf4OnmLNk6JpUZTeVIMMflNJZF_ktl-2kzrNXlD6DkXjog5GbyZ1NAzqQ8e8qhKtbb73ul/s1600/coollogo_com-21114715.gif" /></a>
<a href="URL liên kết 2" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 2" /></a>
<a href="URL liên kết 3" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 3" /></a>
<a href="URL liên kết 4" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 4" /></a>
<a href="UR Lliên kế 5" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 5" /></a>

</marquee></div>
Bạn thay đổi các code màu đỏ và màu xanh theo link ảnh và địa chỉ liên kết của bạn, bạn cũng có thể thay đổi tốc độ chạy, độ cao và độ dài của ảnh ở các thông số màu xanh, cuối cùng lưu lại và đặt tiện ích vào nơi bạn muốn nó hiển thị trên Blog.
Nếu muốn thêm liên kết bạn chỉ việc copy đoạn code này, thay đổi số thứ tự rồi dán tiếp tục phía dưới 

<a href="UR Lliên kế 5" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 5" /></a>
Thay đổi số 5 thành số 6 (cứ như vậy nếu có nhiều hơn)
Chúc các bạn thành công

More about →
vào lúc 04:07 { Add nhận xét }
Nhãn: , ,

TIÊU ĐỀ BÀI ĐĂNG MỚI VỚI HIỆU ỨNG CHẠY NGANG

Người đăng: buonkhongem

Để cho khách tham quan thuận tiện lựa chọn bài để xem, bạn có thể tạo thanh tiêu đề các bài mới đăng trên Blog với hiệu ứng chạy từ phải sang trái hoặc ngược lại.
Đầu tiên bạn đăng nhập Blog, chọn Thiết kế > Thêm tiện ích > Thêm HTML/Javacript, sau đó dán toàn bộ code này vào:
<script style="text/javascript"
src="http://dreamydonkey.googlepages.com/scrolling_blogger_posts.js">  </script><script style="text/javascript"> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://dungheineken.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script>
Bây giờ bạn thay thế code màu đỏ, "dungheineken.blogspot.com"  thành Link của blog mình là xong, sau đó lưu lại và vào blog xem kết quả.
Trên đây tiêu đề sẽ chạy từ trái sang phải, nếu bạn muốn nó chạy ngược lại từ phải sang trái thì thay từ "right" vào chỗ "left" ở trên. Bạn cũng có thể thay đổi số bài hiển thị bằng cách thay đổi số "15" ở trên thành số bài mà bạn muốn. Nếu muốn tốc độ chạy nhanh hơn hoặc chậm hơn bạn thay đổi số "175" thành số khác (số càng nhỏ tiêu đề chạy càng nhanh và ngược lại)
Mách nhỏ: Bạn nên để tiện ích này phía trên bài đăng trên Blog sẽ hợp lý hơn và trông đẹp hơn
Chúc bạn thành công
More about →
vào lúc 01:18 { Add nhận xét }
Nhãn: ,

PHÂN TRANG CHO BLOG

Người đăng: buonkhongem on Thứ Ba, 19 tháng 4, 2011



Để Blog của bạn "Pro" hơn, bạn nên phân trang cho blog theo các bước sau đây.
Đầu tiên, bạn đăng nhập vào blog, chọn thiết kế > Thêm tiện ích > thêm HTML/Javacript, sau đó dán toàn bộ các code này vào
<style>
.showpageArea {font-size: 16px; width:300px;background: url(http://thantoc.xm.com/hinh-anh/Pagenavbar-1.jpg) no-repeat left top; padding: 10px; color:#003366;text-align:center;
}
.showpageArea a {
color:#0F0;
text-decoration:underline;
}
.showpageNum a {

text-decoration:none;
color:#0F0; border:1px solid #FFF;
margin:0 10px;
padding:0 5px 0 8px;
}
.showpageNum a:hover {
color:#ffff00; border:1px solid #00ff00;
background-color:#FFF;
}
.showpagePoint {
color:#ffff00;
margin:0 8px 0 4px;
}
.showpage a {
text-decoration:none;
color:#FFF;
padding:0 2px 0 4px;
}
.showpage a:hover {
color:#ffff00;
text-decoration:underline;
} .showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#00ff00;
}
</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";   
    thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=5;
var firstPageWord = 'Đầu';
var endPageWord = 'Cuối';
var upPageWord ='&#9668;';
var downPageWord ='&#9658;';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
  var timestamp = post.published.$t.substr(0,10);
  var title = post.title.$t;
  if(isLablePage){
    if(title!=''){
        if(post.category){
      for(var c=0, post_category; post_category = post.category[c]; c++) {
        if(encodeURIComponent(post_category.term)==thisLable){                     
          if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
            if(thisUrl.indexOf(timestamp)!=-1 ){
              thisNum = postNum;             
            }

            postNum++;
            htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
          }                
        }     
      }
    }//end if(post.category){

     itemCount++;
   }

  }else{
    if(title!=''){
      if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
        if(thisUrl.indexOf(timestamp)!=-1 ){
          thisNum = postNum;
        }

        if(title!='') postNum++;
        htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
      }     
    }
    itemCount++;
  }
}

for(var p =0;p< htmlMap.length;p++){
  if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    if(fFlag ==0 && p == thisNum-2){
      if(thisNum==2){
        if(isLablePage){
          upPageHtml = labelHtml + upPageWord +'</a></span>';         
        }else{
          upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
        }
      }else{
        upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
      }

      fFlag++;
    }

    if(p==(thisNum-1)){
      html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
    }else{
      if(p==0){
        if(isLablePage){
          html = labelHtml+'1</a></span>';
        }else{
          html += '<span class="showpageNum"><a href="/">1</a></span>';         
        }
      }else{
        html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
      }
    }

    if(eFlag ==0 && p == thisNum){
      downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
      eFlag++;
    }
  }//end  if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
  if(!isLablePage){
      html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
  }else{
      html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
  }
}

  html = '<div class="showpageArea"><span >Trang '+thisNum+' / '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
  html += downPageHtml;
  html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
  html += '</div>';

  if(isPage || isFirstPage || isLablePage){
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");

    if(postNum <= 2){
        html ='';
    }

    for(var p =0;p< pageArea.length;p++){
      pageArea[p].innerHTML = html;
    }

    if(pageArea&&pageArea.length>0){
      html ='';
    }

    if(blogPager){
      blogPager.innerHTML = html;
    }
  }

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>


<style type=”text/css”>
.showpageArea {padding: 10px; color:#003366;text-align:left;width:530px;
}
.showpageArea a {
float:left;
text-align:center;
display:block;
margin:0 5px;
color:#333;
}
.showpageArea a:hover {
color:#333;
margin:0 5px;
}
.showpageNum a { background: url(‘http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif’) no-repeat 0 0;
width:37px;
height:42px;
display:block;
text-align:center;
float:left;
margin:0 5px;
padding-top:6px;
text-decoration:none;
color:#333;
}
.showpageNum a:hover { background:url(‘http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif‘) no-repeat 0 100%;
color:#FFF;
}
.showpagePoint {background:url(‘http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/page_num.gif‘) no-repeat 0 100%;
width:37px;
height:42px;
display:block;
float:left;
text-align:center;
margin:0 5px;
padding-top:6px;
font-weight:bold;
color:#FFF;
}
.showpageNum a:link, .showpage a:link {
text-decoration:none;
color:#cc0000;
}
.showpageupPageWord a { float:left;
background:url(‘http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/nextbutton.gif‘) no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#333;
}
.showpageupPageWord a:hover { float:left;
background:url(‘http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/provup.png‘) no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#FFF;
}
.showpagedownPageWord a { float:left;
background:url(‘http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/backbutton.gif‘) no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#333;
}
.showpagedownPageWord a:hover { float:left;
background:url(‘http://i410.photobucket.com/albums/pp181/JohnSmithamazon/Blogger-Templates-Free-Designs-XML-Tutorial/nextup.png‘) no-repeat 0 0;
width:127px;
height:42px;
text-align:center;
font: bold 1.0em Arial,Helvetica,sans-serif;
display:block;
margin:0 5px;
padding-top:6px;
color:#FFF;
}
.pagenextprov {
text-align: center;
}
</style>
<div class='pagenextprov'>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5;
var displayPageNum=2;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&amp;max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&amp;max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&amp;max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) &amp;&amp; p<(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpageupPageWord"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpageupPageWord"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '<span class="showpagedownPageWord"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end  if(p>=(thisNum-displayPageNum-1) &amp;&amp; p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span  class="showpage"> Total '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&amp;&amp;pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999" type="text/javascript"></script>
</div>
 Sau khi dán xong bạn lưu lại vào kéo tiện ích này nằm phía dưới bài đăng thì mới có hiệu lực.
Ngoài ra còn các mẫu khác mời bạn xem thêm TẠI ĐÂY

More about →
vào lúc 03:40 { Add nhận xét }
Nhãn: ,