Tạo khung code converter cho blog

Việc bạn lấy code từ các trang publisher, adsense... khi chèn vào source code template của blogspot thường sẽ xảy ra lỗi do code không tương thích. Do vậy, trước khi chèn vào template bạn cần phải chuyển đổi cho phù hợp với code nguồn. Sau đây, mình sẽ hướng dẫn bạn tạo một box code converter như thế:

Một box code converter

Read More »

Tạo Recent post theo lable với thumbnails

Với việc tạo được recent post theo lable sẽ giúp bạn có thể tùy biến giao diện template của bạn một cách linh hoạt, gọn gàng, đẹp đẽ hơn:

Recent post theo lable với thumbnail

• Bạn vào "Bố cục" thêm widget "HTML" và dán đoạn code sau vào đó--> save tempalte:

<center><div id='bp_recent2'></div><div class='bp_footer2'>
<script style='text/javascript'>
//Featured Posts Script by crounji.org
var postTitleOriginal,  myLink, myDiv, myImage,mySeparator;
var    main;
var float_clear=false;
var flag = 0;
function bprecentpostswiththumbnails(json) {
for (var i = 0; i < numberOfPosts; i++) {
if (i == json.feed.entry.length) break;
var s;
    var entry = json.feed.entry[i];
    var postTitle = entry.title.$t;
    postTitleOriginal = postTitle;
    if (isNaN(titleLength) || titleLength == 0) {
        postTitle = '';
    }
    else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";
    var postUrl="";
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            var commentText = entry.link[k].title;
            var commentUrl = entry.link[k].href;
        }
        if (entry.link[k].rel == 'alternate') {
            postUrl = entry.link[k].href;
            break;
        }
    }
    if (showThumbs == true) {
        var thumbUrl = "";
        try {
            thumbUrl = entry.media$thumbnail.url;
            thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
        } catch (error) {
            if ("content" in entry) s = entry.content.$t; else s="";
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                 regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;
                videoIds = s.match(regex);
                if (videoIds != null) {
                    videoId = videoIds[4];
                }
                if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"
            }
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                a = s.indexOf("<img");
                b = s.indexOf("src=\"", a);
                c = s.indexOf("\"", b + 5);
                d = s.substr(b + 5, c - b - 5);
                if ((a != -1) && (b != -1) && (c != -1) && (d != "")) thumbUrl = d;
            }
        }
        if(thumbUrl.indexOf("static.flickr.com")!=-1) {thumbUrl= thumbUrl.replace("_b_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_s_t.jpg","_s.jpg");
        thumbUrl= thumbUrl.replace("_b.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m.jpg","_s.jpg");}
        if (thumbUrl == "" && showNoImage == true)
        {
        thumbUrl = "https://lh3.googleusercontent.com/-ea5jZ9lkvY8/VUHBkl7kjgI/AAAAAAAADZs/ejPARM37uX0/s64-no/icon-pic-project.png";
        try{if(defaultImage!="") thumbUrl=defaultImage;}catch(error){}
        thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
        }
    }
    if (showPostDate == true) {
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
        var monthnames = new Array();
        monthnames[1] = "Jan";
        monthnames[2] = "Feb";
        monthnames[3] = "Mar";
        monthnames[4] = "Apr";
        monthnames[5] = "May";
        monthnames[6] = "Jun";
        monthnames[7] = "Jul";
        monthnames[8] = "Aug";
        monthnames[9] = "Sep";
        monthnames[10] = "Oct";
        monthnames[11] = "Nov";
        monthnames[12] = "Dec";
    }
    code = "";
        main = document.getElementById('bp_recent2');
        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "bp_item_title");
        myLink = createLink(postUrl,"_top",postTitleOriginal)
        if(main.innerHTML!=""){
        mySeparator = createDiv("bp_recent2_separator");
        main.appendChild(mySeparator)
        }
        if(postTitle != ''){myDiv.appendChild(myLink);}
        main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;

    if (showThumbs == true && thumbUrl != "") {
        myImage = document.createElement('img');
        myImage.setAttribute("src", thumbUrl);
        if(imgFloat!="none")
        {
        float_clear=true;
        myImage.style.cssFloat=imgFloat;
        myImage.style.styleFloat=imgFloat;
        }
      try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}
        myImage.setAttribute("alt", postTitleOriginal);
        myImage.setAttribute("width", imgDim);
        myImage.setAttribute("height", imgDim);
        myLink = document.createElement('a');
        myLink.setAttribute("href", postUrl+"?utm_source=bp_recent2&utm-medium=gadget&utm_campaign=bp_recent2");
        myLink.setAttribute("target", "_top");
        myLink.setAttribute("title", postTitleOriginal);
        myLink.appendChild(myImage);
        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "bp_item_thumb");
        myDiv.appendChild(myLink);
        main.appendChild(myDiv);
    }
 try {
        if ("content" in entry) {
            var postContent = entry.content.$t;
        }
        else if ("summary" in entry) {
            var postContent = entry.summary.$t;
        }
        else var postContent = "";
        var re = /<\S[^>]*>/g;
        postContent = postContent.replace(re, "");
        if (showSummary == true) {
            myDiv = createDiv("bp_item_summary");
                if (postContent.length < summaryLength) {myDiv.appendChild(document.createTextNode(postContent));}
            else {
                postContent = postContent.substring(0, summaryLength);
                var quoteEnd = postContent.lastIndexOf(" ");
                postContent = postContent.substring(0, quoteEnd);
                myDiv.appendChild(document.createTextNode(postContent + '...'));
            }
            main.appendChild(myDiv);
        }
    } //end try
    catch (error) {}
    myDiv =  createDiv("bp_item_meta");
    myDiv.style.clear="both";
    myDiv.style.marginBottom="4px";
    if (showPostDate == true) {
        myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));
        flag = 1;
    }
    if (showCommentCount == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        if (commentText == '1 Comments') commentText = '1 Comment';
        if (commentText == '0 Comments') commentText = 'No Comments';
        var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML=commentText;
        flag = 1;;
    }
    if (showReadMore == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        var myLink = createLink(postUrl,"_top",postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML = readMore+" &raquo;";
        flag = 1;;
    }
    if (flag == 1) main.appendChild(myDiv);
}
if(float_clear==true && imgFloat!="none")
{
myDiv = createDiv("bp_clear_float");
myDiv.style.clear=imgFloat;
main.appendChild(myDiv);
}
document.getElementById("bp_recent2_link").style.backgroundImage="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsRMM_pZHJpDIoUECECuU9pJed8bzNM3bIkDn-o-wBTg90R9c9KqqbsORpI36W_mRvn3Dw2pMuHFggJr2GqRNoIuoIvK-dflPNobeRmASy1vVNq9P0cMVDC4A78x9ImuIMu1JATSwITtR1/s1600/blogger-widgets.png')";
document.getElementById("bp_recent2_link").style.backgroundRepeat="no-repeat";
try{
if(myMargin!=0 && imgFloat=="left" && flag==0) document.getElementById("bp_recent2_link").style.marginLeft = myMargin+"px";
} catch(error){}
}
function createDiv(className)
{
var myDiv = document.createElement('div');
myDiv.setAttribute("class", className);
return myDiv;
}
function createLink(href,target,title)
{
var myLink = document.createElement('a');
        if(href.substring(href.length-13,href.length)=="#comment-form") {href= href.substring(0,href.length-13)+"?utm_source=bp_recent2&utm-medium=gadget&utm_campaign=bp_recent2"+"#comment-form";myLink.setAttribute("href", href);}
        else myLink.setAttribute("href", href+"?utm_source=bp_recent2&utm-medium=gadget&utm_campaign=bp_recent2");
        myLink.setAttribute("target", target);
        myLink.setAttribute("title", title);
        return myLink;
}
</script>
<script style='text/javascript'>
 var numberOfPosts = 21;
 var showPostDate = false;
 var showSummary = false;
 var titleLength = 0;
 var showCommentCount = false;
 var showThumbs = true;
 var showNoImage = true;
 var imgDim = 70;
 var imgFloat = 'left';
 var myMargin = 5;
 var mediaThumbsOnly = true;
 var showReadMore = false;
</script>
<script src='http://www.dientudieukhien.net/feeds/posts/default/-/ten-lable?max-results=21&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'>
</script></div></center>

• Bạn thay đổi địa chỉ "http://dientudiekhiken.net" thành địa chỉ blog của bạn nhé.
• Bạn đổi "ten-lable" thành lable mà bạn muốn hiển thị
• "var numberOfPosts = 21;" thay đổi giá trị là số lượng post xuất hiện
• "var imgDim = 70;" size ảnh thumbnail

Read More »

Tạo box có thanh cuộn cho blogspot

Để đặt một bài đăng có nội dung dài trên một diện tích nhỏ, ta có thể xử dụng một box có thanh cuộn để làm điều đó.

Thanh cuộn cho blogspot

Read More »

Trang trí lại thanh trượt trong trình duyệt khi duyệt trang web

Như chúng ta biết, trình duyệt web sẽ xuất hiện một thanh trượt dọc khi trang web của chúng ta có nội dung dài, mặc định thanh trượt này có màu xám đơn giản, đôi khi bạn muốn thay đổi màu và kích thước cho phù hợp với giao diện của trang web của mình thì làm như thế nào? Sau đây mình chia sẽ với bạn một cách làm đơn giản mà trên mạng đã chia sẽ.

Thanh truợt mặc định

• Để thay đổi bạn thêm đoạn code sau trên thẻ ]]></b:skin>

/*Mau thanh cuon CSS3 */

::-webkit-scrollbar {
width: 8px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-webkit-scrollbar-thumb {
background: rgba(255,127,26,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,127,26,0.4);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

 }


Thanh truợt đã thay đổi

• Bạn thay đổi mã màu  rgba để thay đổi màu cho thanh trượt nha.

Read More »

Tạo nút Read more cho bài đăng trên blogspot

Trước đây blog của mình cũng không có tiện ích read more, thấy thiếu thiếu nên nghiên cứu, sau khi tìm hiểu nhiều nguồn, có rất nhiều bài viết về vấn đề này, nhưng mình áp dụng không như ý muốn được - hiển thị không đúng vị trí, code thì rất dài. Sau một thời gian thì mình chỉ thêm một đoạn ngắn code và đã đạt được mục đích. Sau đây, mình sẽ chia sẽ với các bạn cách làm của mình, có thể ở template của bạn thì lại khác, hi vọng sẽ giúp ích được cho mọi người.

• Ban đầu các bài đăng trên blog của mình không có Read more như sau:

• Sau khi thêm chức năng Read more thì như sau:

Cách làm như sau:

• Tìm đoạn code sau:

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
masSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);
</script>


• Thêm dòng code sau ngay phía bên dưới nó:

<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span>

• Save Mẫu lại và xem thử kết quả nhé, chúc bạn thành công. 

Read More »

Xóa dòng Showing posts with lable trên blogspot

Trên blogspot khi ta xem bài viết theo nhãn (lable) thì sẽ xuất hiện dòng message "Showing posts with lable...", tiện ích này cũng lí thú nhưng đôi khi nó làm ảnh hưởng đến một số thành phần khác của trang: ví dụ như nó có thể che phần của dropdown menu. Vậy làm sao để disable hoặc xóa luôn nó.

Xóa dòng mesage "Showing posts with lable"

Sau đây mình chia sẽ với bạn hai cách làm mất massage ấy, tùy theo template mà có thể áp dụng cái nào cho phù hợp.

• Trước tiên bạn phải vào "Mẫu/Chỉnh sửa HTML", bạn nên sao lưu source code trước khi chỉnh mã nguồn để đảm bảo có cái khôi phục lại nếu như trong lúc vọc bị hư nhé.

           1. Cách 1: cách này là disable, tức source code vẫn còn, nhưng ta chỉ disable nó thôi.
               Bạn tìm code "b:/skin" , bạn sao chép và dán đoạn code sau phía trên nó:
.status-msg-wrap{
display:none;
}

          Save lại và xem kết quả. Cách này ngắn gọn và khi cần khôi phục bạn chỉ cẩn xóa đoạn code trên hay đổi none thành yes.

         2. Cách 2: cách này là xóa luôn code
             Bạn vào code tìm đoạn mã sau: và xóa nó nhé.
<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>

         Tiếp theo bạn sao chép và dán đoạn code sau vào vị trí vừa xóa ở trên nhé:
<b:includable id='status-message'>
  <b:if cond='data:navMessage'>
<div>
</div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>

        Save template lại và xem kết quả. Chúc các bạn thành công!!

nguồn: dientudieukhien.net

Read More »