Hướng dẫn thêm comment facebook vào blogspot

Tương tác giữa người dùng trên các mạng xã hội với blogspot hoặc website tăng lượt truy cập gián tiếp giúp blog của bạn nổi bật hơn trên các kết quả tìm kiếm. và bạn muốn chèn khung comment facebook vào blogspot mà chưa biết cách làm thì đây là bài Hướng dẫn thêm comment facebook vào blogspot.

Sau đây là một thủ thuật blogspot nhỏ giới thiệu tới cả nhà.

Hướng dẫn thêm comment facebook vào blogspot

code blogspot thêm comment facebook vào blogspot.

1. Thêm đoạn mã bên dưới vào trước thẻ </body>. đoạn code này là của facebook .


<div id="fb-root"></div>
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



Và đoạn code sau lên trên thẻ đóng


<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="540"></div>';
//]]>
</script>



Một số lưu ý nhỏ ở đây :
data-num-post=5 : số comment được hiển thị. Nếu vượt quá sẽ tự động gộp comment
data-width=540 : chiều rộng khung comment facebook hiển thị

Bây giời mới đến giai đoạn thêm vào

Tìm một trong các đoạn code như sau: <b:include data='post' name='post'/>
Rồi thêm ngay dưới nó đoạn code sau:


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



Lưu lại vậy là Xong !


Video hướng dẫn thêm comment facebook vào blogspot

More about →

Google Doodle

More about →

code blogspot đếm ngược thời gian

Bạn đang tìm CODE ĐẾM NGƯỢC THỜI GIAN JQUERY để áp dụng cho blogspot


Xem thêm :
code blogspot trở về đầu trang

code blogspot lấy bài viết liên quan theo lable


Với thủ thuật code blogspot nhỏ dưới đây bạn sẽ nhanh chóng áp dụng thành công cho blogspot của bạn

Để đếm lùi đến 1 sự kiện hoặc ra mắt sắp đến hiển thị thời gian thông báo trên trang web sẽ dễ dàng hơn với jquery rất nổi bật



B1 chèn link thư viện jquery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>

B2 chèn link mã jquery

<script src="http://webvn20.googlecode.com/files/count.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
 $(function() {
 // ***** thay 2011/01/01 là năm  tháng ngày *************************     
 $('div#clock').countdown("2012/1/1" , function(event) {
 var $this = $(this);
 switch(event.type) {
 case "seconds":
 case "minutes":
 case "hours":
 case "days":
 case "weeks":
 case "daysLeft":
 $this.find('span#'+event.type).html(event.value);
 break;
 case "finished":
 $this.hide();
 break;
 }
 });
 });
</script> B3 style cho đếm ngược
<style>
#clock{
float:left;
width:400px;
height:50px;
border:1px #000000 solid;
}
.block{
float:left;
height:10px;
width:70px;
}
</style>

 B4 hiển thị ở đâu thì thay đổi style và chèn code sau vào

 <div id="clock">
            <div class="block"><span id="weeks"></span> Tuần</div>
            <div class="block"><span id="daysLeft"></span> Ngày</div>
            <div class="block"><span id="hours"></span> Giờ</div>
            <div class="block"><span id="minutes"></span> Phút</div>
            <div class="block"><span id="seconds"></span> Giây</div>
                   <br/> <div>  <span >Là Đến Tết</span></div>
        </div>

More about →

Code blogspot lấy bài viết liên quan theo lable

Bài viết liên quan theo nhiều label cho blogspot - Code bài viết liên quan theo nhiều label cho blogspot - Bài viết liên quan theo nhiều nhãn cho blogspot

Có quá nhiều bài viết nhưng mỗi bài lại có một ưu, nhược điểm riêng nhưng với thủ thuật của mình đã khắc phục được tất cả các nhược điểm đó hãy xem mình làm như thế nào.

Với 1 thủ thuật blogspot: "Bài viết liên quan - Related posts" dựa trên nhiều label (nhãn) và đã được sửa lỗi hiển thị font Tiếng Việt của đoạn code gốc.

Bằng cách này sẽ hiển thị được nhiều bài viết liên quan đến nhiều label hơn, hướng visitor đến những bài cùng chủ đề tốt hơn cho việc seo của bạn. Hướng dẫn cách thêm Bài viết liên quan theo nhiều label cho blogspot


<!-- related post --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='widget-content'> <h2>Các bài liên quan</h2> <div id='saliproit183'/><br/><br/> &lt;script type=&quot;text/javascript&quot;&gt; homeUrl3 = &quot;khamphablog.blogspot.com&quot;;maxNumberOfPostsPerLabel = 6;maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+21); label = decodeURIComponent(label); var txt = document.createTextNode(label); var h = document.createElement(&#39;h4&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;saliproit183&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> &lt;/script&gt; </div> </b:if><br/><!-- /related post -->



Chú ý:
Bạn sẽ pải thay đổi cho phù hợp với cách sắp xếp hiển thị bài viết liên quan theo nhãn phù hợp

Thay khamphablog.blogspot.com bằng địa chỉ blog của bạn, lưu ý không có "/" ở cuối nhé.

maxNumberOfPostsPerLabel là tối đa số bài viết hiển thị ở mỗi nhãn (label). Ở code trên là mình để là 6

maxNumberOfLabels là số nhãn (label) sẽ được hiển thị. Ở code trên là mình để là 3

More about →

code blogspot trở về đầu trang

Hiệu ứng trở về đầu trang - scroll Top jquery đơn giản
Hiệu ứng scroll top ta thường thấy xuất hiện ở 1 số trang web có nội dung dài -khiến người lướt web phải lăn mouse 3 hay dùng trỏ chuột kéo thanh scroll bar rất bất tiện .

Hôm nay KHÁM PHÁ BLOGSPOT chia sẻ một code blogspot rất hay, và chạy nhẹ nhàng uyển chuyển tới các bạn

Khi sử dụng hiệu ứng jquery scroll top sẽ giúp người dùng trở về ngay đầu trang - tránh làm mất thời gian - nút bấm scroll top sẽ xuất hiện thi nội dung trang web được
1- Thêm phần script

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
    $(document).ready(function(){

        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        });

        $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 'slow');
            return false;
        });

    });
</script>

2- Thêm phần style của nút lên

<style>
    .scrollup{
    width:40px;
    height:40px;
    opacity:1;
    position:fixed;
    bottom:20px;
    right:10px;
    display:none;
    text-indent:-9999px;
    background:#333333 url('http://icons.iconarchive.com/icons/troyboydesign/delightful-zodiac/128/Snake-icon.png') no-repeat;
}
</style>

các bạn có thể thay bằng hình ảnh khác cho phù hợp với trang web http://icons.iconarchive.com/icons/troyboydesign/delightful-zodiac/128/Snake-icon.png
3- Giờ để xuất hiện cái nút đi lên đó bạn hãy đặt trong thẻ body để tiện bạn có thể đặt trước

<a href="#" class="scrollup">Scroll</a>
</body>

More about →

TẠO SLIDESHOW (Kiểu 6)

Ở kiểu 6 này, dưới slideshow ảnh có các thẻ bấm bao gồm: XEM TIẾP, QUAY LẠI và XEM LẠI TỪ ĐÂU...

Trên đầu slideshow có dòng chữ chạy để các bạn giới thiệu mô tả vài nét về slideshow, ngoài ra các bạn có thể điều chỉnh kích thước ảnh mà mình mong muốn (không lệ thuộc vào ảnh gốc) và tốc độ load ảnh rất nhanh. Slideshow này có thể add các định dạng ảnh (ảnh động hoặc ảnh tĩnh đều được).

Mời các bạn xem thử slideshow phía dưới nha.

Các hình ảnh động dưới đây được lấy từ trang anhdepblog.blogspot.com. Cám ơn các bạn đã ghé tham quan và ủng hộ dunghennessy. Chúc các bạn luôn vui khoẻ và hạnh phúc

Trở lại từ đâu

Để làm được như vậy, các bạn đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML/Javacript (nếu chưa biết cách thêm tiện ích HTML mời các bạn xem TẠI ĐÂY), sau đó copy đoạn code phía dưới dán vào.

<center><table border="0" cellpadding="0">
  <caption><marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="scroll" direction="left" bgcolor="#FFE87C" scrollamount=3> <span style="font-weight:bold;font-size:150%;color: rgb(#ffffff,#7D053F, 0);">Lời giới thiệu về slideshow ghi tại đây</span>
</marquee>
</caption>
  <tr>
    <td width="100%"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTeNgri7pGj91Kn3QbnjssF4RcQhXbI2NfK8LQsvhwTd5GCy5DrJGPiCd9xG7FMgxiOnZ4j-xAFT39ljqiCijfQv6vX1N2lLH1jLK9ztA5cNeAhzMZVXvCCb7TAb0ucg9Y9lbKGnzUFROx/s1600/0014.gif" width="300" height="400" name="photoslider" /></td>
  </tr>
  <tr>
    <td width="100%"><form method="POST" name="rotater">
      <div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTeNgri7pGj91Kn3QbnjssF4RcQhXbI2NfK8LQsvhwTd5GCy5DrJGPiCd9xG7FMgxiOnZ4j-xAFT39ljqiCijfQv6vX1N2lLH1jLK9ztA5cNeAhzMZVXvCCb7TAb0ucg9Y9lbKGnzUFROx/s1600/0014.gif"
photos[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPmWJ2mSfY0eSj84EcEWwGTf-5oSqwjdmcRTxs43nzFNVphjoQk-K1n1fNWswnGyEakUtUZz7qJxsvGjCaP8FBbFN0g_cdmB4PvKTEZsHC8cFRuV6NV6vdw5xxzvQDWDN0C8H5C7HOhb8/s1600/0355.gif"
photos[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmM4P4LoP3KyvzK2xuAbap6CiCdYIbzY56fD1QcpJ5IHgT4mjMPVcrB1Jg81jafHmBuWkdFEKLDmWxhNMp90Rt_KHtv9Zif-Bb1ViMO5-L-qSfhTVtvs_DDDn72XprJpaPAE8qClXbTNTF/s1600/0039.gif"
photos[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5Bat7DflpRX9caXQNs77adWt75JP9Xeb3dNY0hdBx841J3hPQAnrC0fiolVuH8B7787lOzdJAfelNViXTlNCEaIR-ysmSmmB8t5vcFQ-MdrAqPO7Eui4GpvEHESFhsqyqHs13HhafaE/s1600/0210.gif"
photos[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK8uEeE_8UDm7k8vGrH19VGzFLwbH2dCsf-J6KKc4tUPrnT0zfU62s8VR2LDCEdH9qk2X4IoUArXnNxinTvbw56FaORIE3B0nnkrc9yRhyphenhyphenlrk6pJCPu0TBu8cyRIblZI934iHAmqn7gdFF/s1600/0073.gif"
photos[5]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3hAFVZvR3YbzofdS9W060qdHf3zAUIjGuMQtTpV4k7daXnCyH9lWpP9URxhN0vTL0sV5bk4kPe2wxtURg1ar5B_sgfnIfg3x-FxaIMHjRwu-d8tq2MLVmnRUJx0xkNhpSvq8wp9hHwK6c/s1600/0231.gif"
photos[6]="link ảnh"
photos[7]="link ảnh"
photos[8]="link ảnh"
photos[9]="link ảnh"
photos[10]="link ảnh"



function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input type="button" value="&lt;&lt;Xem lại" name="B2"
 onclick="backward()" /> <input type="button" value="Xem tiếp&gt;&gt;" name="B1"
 onclick="forward()" /><br />
      <a href="#" onclick="which=1;backward();return false"><small>Trở lại từ đâu</small></a></p>
      </center></div>
    </form>
    </td>
  </tr>
</table>

</center>

Bây giờ các bạn có thể thay đổi các dòng lệnh màu đỏ (lời mô tả giới thiệu cho slideshow), dòng lệnh màu trắng (kích thước của ảnh) và dòng lệnh màu vàng (các link ảnh). Cuối cùng bấm Lưu lại và trở lại blog xem kết quả nha.

* Mở rộng thêm: muốn thêm ảnh vào slideshow, các bạn chỉ việc thêm đoạn code sau:

photos[n+1]="link ảnh" 

dán tiếp theo sau dòng lệnh photos [10] cuối cùng, trong đó n là số thứ tự cuối cùng của ảnh (ở code trên số thứ tự cuối cùng của ảnh là số 10). Ví dụ bạn muốn thêm một ảnh nữa thì code là: 

photos[11]="link ảnh"

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

More about →

Tùy chỉnh ẩn bài viết mới ở trang chủ blogspot theo lalble

Tùy chỉnh ẩn bài viết mới ở trang chủ blogspot theo lalble

Nhiều bạn hỏi cách ẩn bài viết mới ở trang chủ trong blogspot làm thế nào?

Hôm nay cũng đang làm đến đoạn này tìm hiểu đoạn code này áp dụng được 100% trên mọi dạng them blogspot nhé.

Nhiều khi có những bài viết bạn không muốn hiển thị lên trang chủ. mà chỉ để nó nằm trong thư mục con. trong wordpress thì dễ dàng trong blogspot cũng dễ dàng không kém.

Đây là cách ẩn bài viết mới ở trang chủ trong blogspot.

Bạn mở tùy chỉnh HTML để sửa nhé (Nhớ back up).
Tìm dòng <b:includable id='main' var='top'>.
Tính từ dòng này trở xuống vài dòng code mình sẽ tìm thấy đoạn code giống hoặc tương tự như đoạn code bên dưới.

Tìm đoạn code dưới để thay đổi


<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>



Rồi bạn thay nó bằng đoạn code bên dưới.

Thay bằng đoạn code này nhé các tình yêu.



<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<b:if cond='data:label.name != "Z Label"'>
<b:include data='post' name='printPosts'/>
</b:if>
</b:if>
</b:loop>
</b:if>
<b:else/>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>


Lúc này bạn tìm thẻ đóng Thẻ đóng này nằm ngay trước dòng : hoặc bạn có thể tìm thẻ này cho nhanh

Rồi đặt đoạn code bên dưới vào sau thẻ </b:includable> nói trên.


<b:includable id='printPosts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>



Giờ làm thế nào để áp dụng đây?

Đơn giản trong khi viết bài nào bạn muốn ẩn thì cho vào nhãn có tên là: z lable thế là bài đó tự động sẽ ẩn ở trang chủ.

cái z lable thì bạn có thể đổi được nhé có thể là z tintuc, z new...


Thủ thuật khá hay đúng không các bạn. Nếu thấy có ích hãy chia sẻ bài này bạn nhé

More about →