Cảm nhận tư duy và tổng hợp kiến thức

Thứ Năm, 5 tháng 5, 2016

Tạo bộ tag , keyword cho bài viết trong blogspot



Keywword (meta tag) là tập hợp các thẻ từ khóa liên quan đến các chủ đề, bài viết của bạn. Các thẻ này giúp góp phần tăng traffic, giúp cho độc giả tìm một bài viết mà họ quan tâm, thông qua bất kỳ một bài viết nào đó ngay trên blog của bạn.


 Với thủ thuật này các từ khóa sẽ nằm trong một ô và được lấy hoàn  toàn tự động.

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML)
4- Dán đoạn code sau vào trước thẻ đóng  ]]></b:skin>.

.keywords {
width:520px; /*độ rộng của phần hiển thị từ khóa*/
float:left;
margin:0px 0px 5px 0px;
border-bottom: 1px #fff dashed;
font-size:12px; /*cở chữ*/
font-family:arial; /*font text*/
color: #F4A460;
padding:1px;
}
.keywords a{
color: #8B4726
}
.keywords a:hover{
color: #0000CD
}
» Trong đó:
  • #F4A460  Là màu chữ Tags.
  • #8B4726 Là màu của từ khóa khi chưa dê chuột.
  • #0000CD Là màu của từ khóa khi dê chuột vào.
5- Tìm đoạn code sau (Bấm Ctrl + F trên bàn phím):
<data:post.body/>
Thay thế nó bằng đoạn code sau:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='post_body'>
<data:post.body/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var keyword_collect = [
                            "18+","16+",
                "Adsense","Ajax","âm nhạc","ảnh","audio","axit","Ăn chơi","Ảnh nóng","Alexa","Ảnh vui","Alexa",
                "bài gần đây","bài liên quan","bán dâm","banner","Bill Gates","blogger","blogspot","bookmark",
                "cafe","cấu hình","chơi đàn","chồng","clip","cơ bản","cơ sở","con gái","công cụ","CSS","cua gái","comment","Chuyện ấy","cute girl","Crack","cine",
                "đại gia","đàn bà","đàn ông","Dashboard","Desktop","địa chỉ ip","điện thoại","domain","download","down nhạc","design","DVDrip","HDrip",
                "editor","email","Explorer","Ebooks",
                "feedburner","file","FireFox","flash","Form comment",
                "GA","gà cáo","ghita","Gmail","Google","google.com","GTalk","guitar","giới tính","giới trẻ",
                "Hà Nội","hacking","hacker","hexa","hiếp dâm","hình","hình sự","Hitler","Hoa Kỳ","hóa học","học sinh","HTML","Huế","Hot girl","Hot Link","Học đường","học trò","Hài hước",
                "image","Internet","IPhone",
                "java","javascript","jquery","js","json",
                "kinh tế","khoa học","kiến thức","kinh nghiệm","keygen","kiếm tiền","kontactr",
                "làm tình","lập trình","Linux","love","Lưu Diệc Phi","lời khuyên",
                "mạng cộng đồng","Media","menu","Mobile","Mozilla","MP3","MP4","MS Office","mua dâm","music","Mỹ","Mẹo","Mootools","Mediafire","Megaupload","Máy tính",
                "Nga","nghệ thuật","ngoại tình","nhắn tin","nhật ký","nick","Nghệ thuật sống","Notrasdamus","Navbar","Nude","Ngày ấy","ngộ nghĩnh",
                "Office","Opera","office",
                "Phi Phi","phụ nữ","Portable","Phim hot","Photoshop","papazazi","phim","Phim bộ",
                "Sài Gòn","sát thủ","sinh học","sinh lý","sinh viên","SMS","soft","sothink","Sex","sofwware","scandal",
                "Tây Ninh","tên miền","thất tình","thư điện tử","thủ thuật","thương mại","tìm kiếm","tin tức","tình dục","tình yêu","toán","tool","top","TP HCM","TP. Hồ Chí Minh","Trảng Bàng","Trung","tiện ích","tỏ tình","teen","tự sướng","template","thumbnail","truyện cười","truyện ngắn","thằng nhỏ","trẻ em",
                "Users online","Using",
                            "Rank","Read more","Recent posts","Related posts","Rapidshare",
                "vật lý","video","Việt Nam","Vista","vợ",
                "web","widget","window",
                "xác suất","XXX","xe độ","xa xỉ",
                "Yahoo","Yahoo 360","Yahoo Mail","Yahoo Mash","Yahoo Messenger","yahoo.com","yêu đương","Youtube","youtube.com"
                ]
  //]]>
</script>
<script type='text/javascript'>
//<![CDATA[
  function makeKeywordForPost(mKF_id)
{
        var content;
        var isDOM  = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
        if(isDOM) {
                        content = document.getElementById(mKF_id).textContent;
        } else {
                        content = document.getElementById(mKF_id).innerText;
        }
        var str = "";
        var link1 = "http://www.google.com/custom?num=10&hl=vi&sitesearch="+home_page2+"&safe=active&client"+"="+"pu"+"b"+"-"+"4673"+"536952"+"067"+"001"+"&channel=2050848750&cof=FORID%3A1%3BAH%3Aleft%3BCX%3ABlog%2520Search%2520Engine%3BL%3Ahttp%3A%2F%2Fwww.google.com%2Fcoop%2Fintl%2Fvi%2Fimages%2Fcustom_search_sm.gif%3BLH%3A65%3BLP%3A1%3BLC%3A%230000ff%3BVLC%3A%23663399%3BGFNT%3A%230000ff%3BGIMP%3A%230000ff%3BDIV%3A%23336699%3B&adkw=AELymgVLQ1pCgQ1HkGAZON5Ler9SjqKIlb-EpWbmPXOLco0m2rF7o0kpQwgiMj010xBmPliz5EvXVi7Gf8yNKr_D_X9kkLWWtOK6ZKU2Ac1jbzP6nm3hy9s&q=%22";
        var link2 = "%22&btnG=T%C3%ACm+ki%E1%BA%BFm&cx=partner"+"-p"+"ub-"+"467"+"35"+"36952"+"0670"+"01";
        for(var j=0;j<keyword_collect.length;j++){
                if(content.indexOf(" "+keyword_collect[j]+" ")!=-1){
                        str += '<a href="'+link1+encodeURIComponent(keyword_collect[j])+link2+'">'+keyword_collect[j]+'</a>, ';
                }
        }
        str =  (str!="") ? keyword_text + str : keyword_text + "no keyword";
        document.write(str);
}
  //]]>
</script>
<div class='keywords'>

<script type='text/javascript'>
home_page2 = &quot; cuahangtemplate.blogspot.com&quot;;
keyword_text = &quot;<b>Từ khóa :</b> &quot;;
window.onLoad = makeKeywordForPost(&quot;post_body&quot;);</script>

</div>

</b:if>


» Tùy chỉnh:
  • Thay phần cuahangtemplate.blogspot.com thành URL blog của bạn.
  • Thay phần màu vàng thành các từ khóa của bạn. Để thêm các từ, bạn chỉ việc thêm từ khóa vào trong dấu ngoặc kép (ví dụ : "Vui Cười", ) , nhớ sau mỗi từ khóa bạn thêm vào phải có dấu phẩy (,) theo sau. Chỉ từ khóa cuối cũng là không có dấu phẩy theo sau. Bạn có thể thêm bao nhiêu từ khóa tùy ý.
  • Bạn có thể thay đổi chữ Từ khóa : thành chữ bạn muốn.

7- Bấm
 (save Widget) lại.
- Cách thức hoạt động của tiện ích này: Các từ khóa hiện ra sẽ được lấy từ bộ từ khóa (màu đỏ) mà bạn đã thiết lập ở bước 6 và trong bài viết. Có nghĩa là những từ trùng nhau trong bộ từ khó và bài viết sẽ được hiện thị ra ngoài phần Tags. Nếu trong bài viết của bạn khong có từ nào trùng với từ bất kỳ trong bộ từ khó thì sẽ hiển thị là "Tags: no keywork". Do vậy thêm mẹo nhở là các từ khóa của bạn nên là những từ liên quan đến nội dung mà web site bạn đang viết.

Nguồn bloggervnn.blogspot.com
Ghi chú: - Bạn thay địa chỉ: http://www.google.com/custom?num=10&hl=vi&sitesearch= ở bước 5 bằng địa chỉ sau: http://www.ngdkhanh.com/search?q= như trang Web mình đang làm, kết quả tìm kiếm được sẽ hiển thị trên chính Web site của mình. Web site/ blogger của bạn tên gì, chỉ cần thay vào cho đúng.

Share:

accordion menu kiểu Xổ dọc bằng JQuery


Từ một tài liệu sưu tập, mình chợt nghĩ đến một cách để ứng dụng nó vào thực tiễn thiết kế accordion menu kiểu xổ dọc bằng JQuery. Các bước tiến hành cũng khá đơn giản, như sau:
Bước 1:
Đăng nhập vào Blogger > Layout > Edit HTML (Không cần Mở rộng Mẫu tiện ích)
Bước 2:
Thêm đoạn code bên dưới vào ngay trên thẻ </head>

<script src='http://code.jquery.com/jquery.js' type='text/javascript'/>
<style type='text/css'>

/* Main accordion container */
.accordion{
width:300px;
}

/* accordion content div, default display is hidden */
.accContent{
display:none;
border:1px solid #CCCCCC;
padding:3px;
}

/* Title links (clickable to show their content and hide others) */
.acctitle{
display:block;
width:100%;
padding:3px 3px 3px 3px;
background-color:#CC0000;
color:#FFFFFF;
cursor:pointer
}

/* Default accordion class (usually first one so it is always visible) */
.defaultAccordion{
display:block;

}
</style>
Bước 3:
Thêm đoạn code bên dưới vào ngay dưới thẻ </head>

<script type='text/javascript'>
$(function(){
    // loop though each link
    $(&quot;a.acctitle&quot;).each(function(){
        // add an event on click
        $(this).click(function(){
            // hide all div&#39;s with accContent class
            $(&quot;.accContent&quot;).each(function(){
                $(this).hide(&quot;slow&quot;);
            });
            // the main point of this script - Fetch ref attribute of
            // title link and display the hidden div with that id
            $(&quot;#&quot;+$(this).attr(&quot;ref&quot;)).show(&quot;slow&quot;);
                return;
              });
    });
});
</script>
Bước 4:
Tạo 1 HTML/JavaScript:  Chép Source Code dưới đây vào:

<div class="accordion">
    <a ref="first_section" class="acctitle">Thủ thuật Blogger</a>
    <div id="first_section" class="accContent defaultAccordion">
    <a href="Địa chỉ Url của các nhãn(label), Tag/Keyword">Căn bản về Blogger</a><br />
<a href="Địa chỉ Url của các nhãn(label), Tag/Keyword">Thiết kế cơ bản</a><br />
<a href="Địa chỉ Url của các nhãn(label), Tag/Keyword">Blogger Blogspot</a><br />
<a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Css</a>
    </div>
    <a ref="second_section" class="acctitle">Tin học</a>
    <div id="second_section" class="accContent">
        <a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">FaceBook</a><br />
<a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Google</a><br />
<a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Kỹ thuật tin học</a>
    </div>
    <a ref="third_section" class="acctitle">Những thứ khác</a>
    <div id="third_section" class="accContent">
        <a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Chuyện đó đây</a><br />
<a href="http://hocvalamtinhoc.blogspot.com/search/label/Tên nhãn">Hộp thử Code HTML/JavaScript</a>
    </div>
</div>
Lưu Widget nầy lại và đặt nó ở nơi mà bạn cần thiết. Nó sẽ có hình như dưới đây:
Chú thích:
Bạn cần phải thay vào cho phù hợp

- Các hàng chữ màu đỏ:là tiêu đề của menu, khi bạn click chuột vào nó sẽ xổ xuống một danh sách chọn lựa. Như hình trên, các tiêu đề gồm: Thủ thuật Blogger, Tin học, Những thứ khác.
- Các hàng chữ màu xanh Địa chỉ Url của các nhãn(label), Tag/Keyword: Tự tên của nó, bạn muốn thay bằng địa chỉ nhãn (thẻ label) hay địa chỉ của một Tag/keyword do bạn tự tạo cũng được.
Để tạo một Keyword, bạn tham khảo bài: Tạo bộ tag , keyword cho bài viết trong blogspot
- Các hàng chữ màu vàng: là tên của các Nhãn(label), hoặc Tag/keyword mà bạn cần hiển thị trong danh mục truy cập. Nó phải đồng hành với nội dung địa chỉ của Địa chỉ Url của các nhãn(label), Tag/Keyword.
width:500px như ở bước thực hiện số 2, bạn có thể thay nó là mấy cũng được cho phù hợp với size của bạn.

Chúc các bạn thành công.
Khanhnguyen's Blog

Share:

Không cho trang khác nhúng blog của bạn bằng thẻ iframe

Bạn đang có một trang chuyên về phim ảnh, hay về các tool trực tuyến như chỉnh sửa ảnh, photoshop online, convert code,... Những thứ này bạn không muốn chia sẻ với người khác vì nó là nội dung và nguồn view chủ yếu của bạn. Tuy nhiên có rất nhiều người cũng muốn chèn những công cụ đó của bạn vào trang của bạn. Cách thức được sử dụng chủ yếu ở đây là dùng thẻ nhúng Inframe. Bạn không thể tắt hay xóa bài viết hay công cụ đó của bạn vì thế giải pháp đặt gia là làm thế nào để người khác không thể nhúng trang của bạn vào trang của họ thông qua thẻ nhúng infame.

Không cho trang khác nhúng blog của bạn bằng thẻ inframe


Bài viết này namkna sẽ giới thiệu cho các bạn một đoạn scripts nhỏ giúp bạn vô hiệu hóa thẻ inframe khi người khác nhúng trang của bạn vào trong trang của họ. Tức là khi người khác dùng thẻ inframe để nhúng trang của bạn vào trang của họ thì ngay lập tức trang của họ sẽ bị chuyển hướng đến trang gốc của bạn. Đây là một giải pháp rất hữu ích nhằm hạn chế người khác nhúng trang của bạn vào trang của họ phải không.

☼ Cách chuyển hướng trang web khác về trang của mình khi họ nhúng trang của mình bằng thẻ Inframe

1. Đăng nhập vào blog.
2. Chọn mẫu (template)
3. Chọn Chỉnh sửa HTML (Edit HTML)
4. Dán đoạn code bên dưới vào trước thẻ </head>
<script language="JavaScript">
if (window != top) top.location.href = location.href;
</script>
5. Lưu lại để hoàn tất cài đặt của bạn.

- Giờ thì bạn không phải lo lắng vấn đề trang của bạn bị nhúng trong một trang khác bằng thẻ inframe nữa nha.

- Nếu bạn muốn kiểm tra xem thủ thuật trên có hoạt động ổn định không thì bạn hãy áp dụng thủ thuật này vào trang của bạn và nhúng trang của bạn vào một trang khác bằng đoạn mã nhúng bên dưới nha:
<iframe src="Link before Change" style="width:650px; height:550px;" frameborder="0"></iframe>
Nguồn terocket.com

Share:

Một số style searchbox đẹp cho blog

Search box là một thành phần quan trọng trong mỗi blog, nó giúp độc giả có thể tìm thấy các bài viết họ muốn chỉ với vài thao tác nhỏ, ngoài ra nó còn có chức năng điều hướng và phân loại các kết quả tìm kiếm. Nó giúp độc giả ở lại lâu với trang của bạn mà không cần sử dụng các công cụ tìm kiếm khác.

Bài viết này mình xin chia sẻ một số style searchbox (khung tìm kiếm) đẹp để các bạn có thể lựa chọn kiểu mình thích đưa vào blog.


Có nhiều màu sắc để bạn có thể lựa chọn màu thích hợp với màu sắc chủ đạo trên trang blog của bạn:

» Có 2 hình thức bạn có thể thêm search box vào trang của bạn như sau:
  • Tạo một tiện ích HTML/JAvascripts và dán mã của khung tìm kiếm bạn thích vào phần nội dung của tiện ích đó (với cách này khung tìm kiếm thường chỉ nằm ở một số vị trí nhất định, bạn không thể đưa đến những vị trí ngoài b:section như vào trong menu chẳng hạn)
  • Thêm trực tiếp vào trong mẫu (Template) của bạn (với cách này bạn có thể cho vào bất cứ đâu bạn muốn, tuy nhiên bạn phải am hiểu về coder, Tất nhiên nếu bạn không tìm được vị trí hãy để lại comment của bạn ở bên dưới bài viết này).

» Dưới đây là một số kiểu chính bạn có thể lựa chọn bạn thích nha.


» Kiểu 1:

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinLICxpr6B7TN64KXAtqMD2WHDj4U1BMpb5I8LpsNMtyHH23qMFwp_Kl_44m8Zvtfo5EyFz-p3RZvd_w_fbKjFvntgzkq9sfvlD3bZjJggYhyTMg3kKSrXJSD7g-fCaOuu-KD5JkeseX7/s380/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

» Kiểu 2: 

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAF9rTlj8ZdNH5tnP9N-RtBZmR46QB4DpR_RWHyZHiMH8Ea3JbvRFziZMbHbQmsClL-JdZs0bk27MxX3IrtKnqDRr-slAYmzlZrKdpBCaGQHcsJ-NgcJrgO0Uu42eyyztzW1oFYoJZG8e1/h57/white-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

» Kiểu 3: 

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwTSBtb_QM8G2DAFB4Qcj1O-9lwyS0ZhDCJmez6BkFEmGE-OArsP_xHg4fRjGVQdiGMH6XKHEdbSnuPbdoC2fqSzSfnZ54FJNvuGi6PJFMJ7OUuNqRBD2gZpMEv_aEYL9Kv7xgCytW4vj/h57/blue-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

» Kiểu 4: 

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjue54puMn94h_JwvFT6UTlqutBk4MhpF6JgTx5womEFCm-bl14dGvkpYtT5vGijYasr2BZdaPWFEItEbqMqndcHBhwmHzWs5HIL7aCUK1xWIe3K985igWYmxSXUQ0aqlZf8bo2uUI-C9z9/h57/transparent-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

» Kiểu 5: 

<style type="text/css">
#dt-searchbox{
border-radius:5px;
background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-lgtdVUyLrTNgiNJOq1Xzbao3xAc8lWmtOO8jai6Csqo3SfBKmJwk_lEXfNO3p_Pc2n1rSbepRu8ECUyaoE5RnULaabBmHmORWZ_hoJl7t5M35S6YtWFpWIhEJ_-anU0_Ux1ojpVsuzD/h57/pink-searchbox+%2528www.%25C4%2591oa%25CC%2580ntri%25CC%25A3nh.vn%2529.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#dt-searchform{display: block;padding: 10px 12px;margin:0;}
form#dt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#dt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="dt-searchbox">
<form id="dt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
<span class="author-credit" style="font-family: Times roman,Arial, Helvetica, sans-serif;font-size:10;"><a href="http://www.đoàntrịnh.vn/" target="_blank">Get Search box for your blog</a></span>
</form>
</div>

Chúc các bạn thành công !
Nguồn terocket.com
Chú ý:
Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:

Share:

Chèn widget socializer 3 trong 1 bên dưới bài đăng

Chèn widget socializer 3 trong 1 bên dưới bài đăng
Ở những bài trước mình đã giới thiệu một số style sharing box chèn bên dưới bài đăng trong Blogger. Bài này mình sẽ chia sẻ một style nữa mà mình gọi là '3 trong 1' như hình trên. Sau đây là các bước thực hiện thủ thuật:
Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, nhấn Ctrl + F tìm dòng<data:post.body/>.
Bước 2: Chèn đoạn code sau vào bên dưới nó:
<!--Socializer Widget by kjmagic.blogspot.com-->
<b:if cond='data:blog.pageType == "item"'>
 <style>
#kjsocializer {
    width: 500px;
    height: 240px;
    border: 1px solid #ddd;
    -webkit-box-shadow0px 7px 9px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75);
    background: #f1f1f1;
    -transition: background 0.50s;
    -webkit-transition: background 0.50s;
    -moz-transition: background 0.50s;
    margin-bottom: 10px;
    overflow: hidden;
}

#kjsocializer:hover {
    background: #fff;
}

#kjsocializer-title {
    text-align: center;
    border: 1px solid #2aa4cf;
    font-size: 20px;
    background: #2aa4cf;
    font-weight: 2000;
    font-family: oswald;
    padding: 5px;
    color: #fff;
}

#SocializeIt {
    float: left;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    margin-left: -10px;
    margin-top: 10px;
}

.tweet, .like, .plusone, .stumbleit {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.g-plusones {
    margin-left: 20px;
}

.heading {
    float: left;
    padding-right: 20px;
    padding-top: 15px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    padding-left: 30px;
    font-family: oswald;
}

#followus, #share {
    float: left;
    border-bottom: 1px solid #eaeaea;
    margin-left: -10px;
}

.likeonfb, .followontwitter, .sharing {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 15px;
}

#sw-credits {
    float: right;
    padding: 3px;
    font-size: 10px;
    margin-right: 10px;
}
</style>
   <script type='text/javascript'>
(function (_0x2162x1, _0x2162x2, _0x2162x3) {
    var _0x2162x4 = _0x2162x1['getElementsByTagName'](_0x2162x2)[0];
    if (!_0x2162x1['getElementById'](_0x2162x3)) {
        _0x2162x1 = _0x2162x1['createElement'](_0x2162x2);
        _0x2162x1['id'] = _0x2162x3;
        _0x2162x1['src'] = '//platform.twitter.com/widgets.js';
        _0x2162x4['parentNode']['insertBefore'](_0x2162x1, _0x2162x4);
    };
})(document, 'script', 'twitter-wjs');
   </script>

<script type='text/javascript'>
    var switchTo5x = false;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
    stLight.options({
            publisher: "
            ede9503f - 57ea - 4698 - a245 - 17187b93fa50 ", doNotHash: false,
            doNotCopy: false,
            hashAddressBar: false
        });
</script>
 <center>
<div id='kjsocializer'>
 <div id='kjsocializer-title'>
   Socializer Widget by kjmagic.blogspot.com
 </div>
 <div id='SocializeIt'>
  <font class='heading'>SOCIALIZE IT →</font>
  <div class='tweet'>
   <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
  </div>
  <div class='like'>
   <iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
  </div>
  <div class='plusone'>
   <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
   </div>
  </div>
  <div id='followus'>
   <font class='heading'>FOLLOW US →</font>
   <div class='likeonfb'>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fmrjan.tk&amp;send=false&amp;layout=button_count&amp;width=77&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21' style='border:none; overflow:hidden; width:77px; height:21px;'/>
   </div>
   <div class='followontwitter'>
    <a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/quocdoantrinh' rel='nofollow'/>
    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
   </div>
  </div>
  <div id='share'>
   <font class='heading'>SHARE IT →</font>
   <div class='sharing'>
    <span class='st_facebook_large' displaytext='Facebook'/>
    <span class='st_twitter_large' displaytext='Tweet'/>
    <span class='st_googleplus_large' displaytext='Google +'/>
    <span class='st_pinterest_large' displaytext='Pinterest'/>
    <span class='st_linkedin_large' displaytext='LinkedIn'/>
    <span class='st_stumbleupon_large' displaytext='StumbleUpon'/>
    <span class='st_email_large' displaytext='Email'/>
    <span class='st_sharethis_large' displaytext='ShareThis'/>
   </div>
  </div>
 </div>
 </center>
 </b:if>
<!--/Socializer Widget by kjmagic.blogspot.com-->

Những chỗ mình đánh dấu màu xanh là ID Facebook Fanpage và Twitter của bạn. 

Chúc các bạn thành công !
Nguồn terocket.com

Share:

Thứ Tư, 4 tháng 5, 2016

Tạo hiệu ứng loading mang phong cách riêng cho Blogspot của bạn


Bước 1: Bạn vào Chỉnh sửa HTML trong Blogspot 
Bước 2: Dán đoạn code bên dưới trước thẻ </body> (bạn có thể copy full code ở cuối bài viết)

<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO_DnCFvdAWo_o2GUGSladfrMQ2dKvZQTqoitmYCK_BW2Z7I4olR6Nw_62oO8NCu4XrAS8o0-WquJ7STdoPOa9xDC2IrbsU6bSWQfjzKqdLwkDRD8VFEejd8GV-6eiGbnFErL7VUYAfVg/s1600/loadding+google++.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">
Loading...</div>
');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>


Tùy chỉnh:
  • Bạn có thể thay link ảnh màu hồng thành link ảnh của bạn. Hoặc chọn một số hình ảnh loadding mà mình cung cấp ở cuối bài viết này nha:
  • top: 0; Là vị trí của ảnh loadding so với lề trên.
  • right: 0; Là vị trí của ảnh loadding so với lề phải.
  • bottom: 0; Là vị trí của ảnh loadding so với lề dưới.
  • left: 0;  Là vị trí của ảnh loadding so với lề trái.
4- Lưu mẫu lại và kiểm tra kết quả nha.

☼ Một số hình ảnh loadding đẹp:

Hiệu ứng loadding sử dụng cho blogger
- Loadding của facebook:
- Loadding của Google +:

Bạn có thể tìm hiểu thêm: Tự tạo ảnh động loading vô cùng đơn giản cho website bạn
Bạn copy full code tại đây:


Nguồn thegioiblogspot.blogspot.com

Share:


Thống kê Blogspot

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP