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

Hiển thị các bài đăng có nhãn Comments. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Comments. Hiển thị tất cả bài đăng

Thứ Năm, 2 tháng 6, 2016

Thêm Recent Comments có ảnh Avatar bo tròn tuyệt vời cho Blogger Blogspot


Làm cách nào để thực hiện được, khi mà bạn muốn có được những những Comments gần đây. Tất cả chỉ trong một Widget thôi với ảnh Avatar được bo tròn rất đẹp.
Các bước thực hiện như sau:
1- Mỡ Blogger, vào Layout, tạo một Widget HTML/JavaScript
2- Chép Source Code dưới đây dán vào trong khung soạn thảo Code:


<style type="text/css">
ul.helploggercomments{list-style: none;margin: 0;padding: 0;}
.helploggercomments li {background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;}
.helploggercomments li .avatarImage {padding: 3px;
background: #fefefe;-webkit-box-shadow: 0 1px 1px #ccc;-moz-box-shadow: 0 1px 1px #ccc;box-shadow: 0 1px 1px #ccc;float: left;margin: 0 6px 0 0;position: relative;overflow: hidden;}
.avatarRound {-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;}
.helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;}
.helploggercomments li span {margin-top: 4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var numComments  = 5,
showAvatar  = true,
avatarSize  = 60,
roundAvatar = true,
characters  = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar  = "http://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg",
hideCredits = true;
//]]>
</script>
<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('7 E=E||5,8=8||12,o=o||13,k=k||"h://4.F.p.f/-14/15/16/17/G/18-19.1a",H=H||" 1b &1c;",q=(r q===\'u\')?j:q,v=(r v===\'u\')?Q:v,m=(r m===\'u\')?j:m,I=(r I===\'u\')?Q:m;1d R(w){7 9;9=\'<S J="R">\';K(7 i=0;i<E;i++){7 x,y,3,n;6(i==w.T.b.z)1e;9+="<U>";7 b=w.T.b[i];K(7 l=0;l<b.L.z;l++){6(b.L[l].1f==\'1g\'){x=b.L[l].A}}K(7 a=0;a<b.M.z;a++){y=b.M[a].1h.$t;3=b.M[a].1i$1j.V}6(3.g("/G/")!=-1){3=3.B("/G/","/s"+8+"-c/")}e 6(3.g("/W/")!=-1){3=3.B("/W/","/s"+8+"-c/")}e 6(3.g("/X-c/")!=-1&&3.g("h:")!=0){3="h:"+3.B("/X-c/","/s"+8+"-c/")}e 6(3.g("N.f/C/1k-Y.O")!=-1){3="h://1.F.p.f/-1l/1m/1n/1o/s"+8+"/1p.Z"}e 6(3.g("N.f/C/1q-Y.O")!=-1){3="h://2.F.p.f/-1r/1s/1t/1u/s"+8+"/1v.Z"}e 6(3.g("N.f/C/1w.O")!=-1){6(k.g("1x.f")!=-1){3=k+"&s="+8}e{3=k}}e{3=3}6(q==j){6(m==j){n="1y"}e{n=""}9+="<10 J=\\"1z "+n+"\\"><C J=\\""+n+"\\" V=\\""+3+"\\" 1A=\\""+y+"\\" 1B=\\""+8+"\\" 1C=\\""+8+"\\"/></10>"}9+="<a A=\\""+x+"\\">"+y+"</a>";7 11=b.1D.$t;7 d=11.B(/(<([^>]+)>)/1E,"");6(d!=""&&d.z>o){d=d.1F(0,o);d+="&1G;";6(v==j){d+="<a A=\\""+x+"\\">"+H+"</a>"}}e{d=d}9+="<D>"+d+"</D>";9+="</U>"}9+=\'</S>\';7 P="";6(I==j){P="1H:1I;"}9+="<D 1J=\\"1K-1L:1M;1N:1O;1P-1Q:1R;"+P+"\\">1S 1T<a A=\\"h://w.p.f/\\"> 1U</a></D>";1V.1W(9)}',62,121,'|||authorAvatar|||if|var|avatarSize|commentsHtml||entry||commBody|else|com|indexOf|http||true|defaultAvatar||roundAvatar|avatarClass|characters|blogspot|showAvatar|typeof|||undefined|showMorelink|helplogger|commentlink|authorName|length|href|replace|img|span|numComments|bp|s1600|moreLinktext|hideCredits|class|for|link|author|blogblog|gif|hideCSS|false|helploggercomments|ul|feed|li|src|s220|s512|rounded|png|div|commHTML|60|40|SRSVCXNxbAc|UrbxxXd06YI|AAAAAAAAFl4|332qncR9pD4|default|avatar|jpg|More|raquo|function|break|rel|alternate|name|gd|image|b16|7bkcAKdpGXI|UrbyQRqvSKI|AAAAAAAAFmI|oBv_yMeYnMQ|blogger|openid16|VgnInuIUKBU|UrbzyXTYWRI|AAAAAAAAFmU|3f_Vfj3TI6A|openid|blank|gravatar|avatarRound|avatarImage|alt|width|height|content|ig|substring|hellip|visibility|hidden|style|font|size|10px|display|block|text|align|right|Widget|by|Helplogger|document|write'.split('|'),0,{}))
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="http://helplogger.blogspot.com/2012/03/add-recent-comments-widget-with-avatar.html">Recent Comments Widget</a></div>
3- Save lại Widget mà bạn mới tạo.
4- Cho Blogspot hoạt động thử để biết kết quả của hiệu ứng.

Xem bản Demo:


Chúc các bạn thành công với tài liệu chia sẽ mà mình đã Cóp được từ nguồn helplogger.blogspot.com

Share:

Chủ Nhật, 8 tháng 5, 2016

Thủ thuật làm nổi bật Comment trong hệ thống bình luận cho Blogspot




Comment là một lời bình luận, nhận xét, giải thích mà bất cứ một bài đăng nào của một Blogger cũng đều rất cần thiết. Giá trị của chúng đều có điều lợi hại từ hai phía. Bất cứ một Blogger nào khi viết bài, hay tổng hợp kiến thức dẫu viết hay dỡ cỡ nào chăng nữa cũng cần được bạn bè, độc giả quan tâm. Từ những nhận định từ phía người xem, mà bài viết hay bài đăng của mình có tầm cỡ và sức hấp dẫn, khích lệ cao hơn. Nói đúng hơn, là một người viết Blog, mình rất chú trọng đến cả hình thức lẫn nội dung của một khung Comment, xem như đó cũng là tôn trọng độc giả, cũng chính là tôn trọng giá trị của bản thân.

Mình có một cái may mắn, tìm kiếm được từ Blog thủ thuật SeO Blogger một thủ thuật hay về cách trang trí để "làm nổi bật hệ thống Comment", cũng là một IT nhưng hoàn toàn là vừa phải làm, vừa phải tự học trong lĩnh vực nầy, cũng là điều rất ham thích chia sẽ lại cùng các bạn. Cách làm đơn giản thôi:

Bạn hãy làm theo các bước sau để thêm nó vào blog của bạn nhé:


1. Đăng nhập vào blogger : 
2. Chọn chuột vào hướng chỉ của mũi tên màu xanh lá: Tiếp theo Click chọn "Mẫu"
3. Chọn vào ô "Chỉnh sữa HTML" để mỡ Template



4. Tìm thẻ này bằng cách sử dụng tổ hợp phím Ctrl + F   </ body>  và chép Source Code dưới đây dán vào trên nó:

            

5. Cuối cùng bạn Click chuột lưu lại Template nhe..Có hình dưới minh họa:

Chúc các bạn thành công và có được một khung Comment tuyệt hảo nhé. 



Khanhnguyen' s blog

Share:

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

Thêm comment Facebook, Google+ vào blogger ves4

Bài viết này mình sẽ hướng dẫn các bạn thêm cùng lúc 3 loại comment phổ biến nhất hiện nay dành cho blogger. Đó là comments mặc định của blogger, comments của trang facebook và cuối cùng là comment của trang google +. Với dạng tab chuyển động nên cho dù các bạn chèn 3 loại comment nhưng không hề chiếm diện tích và làm sấu bố cục, mà ngược lại nó còn làm cho trang của bạn nhìn chuyên nghiệp hơn.

Các bạn có thể xem ảnh minh họa để thấy rõ nguyên tắc hoạt động của thủ thuật này trước khi quyết định có áp dụng nó hay không nha:

Thêm comment Facebook, Google+ vào blogger  ves4


Và nếu cần thiết bạn có thể thử nghiệm trực tiếp trên blog demo của mình nha:


Để làm được điều đó các bạn lần lượt làm theo các bước bên dưới:

» Bước 1: Tạo app trên facebook và lấy Application ID

Bước này mình đã từng giới thiệu đến cho các bạn trong ves 2 và các bạn có thể xem cách tạo một APP facebook như trong bài viết mình từng hướng dẫn ở đây: » Tạo app trên facebook và lấy Application ID

» Bước 2: Cài đặt phần comment mặc định của blogger

- Để các blogger để hiển thị bình luận facebook tab, bạn phải thiết lập comment nhúng bên dưới bài viết. Để hiển thị các comment blogger bên dưới bài hãy làm như sau:
2.1- Bào BloggerCài đặtBài đăng và nhận xét
2.2- Thiết lập "Vị trí nhận xét" (Comment Form Placement) để nhúng (Embedded ) bên dưới bài viết vàLưu thiết đặt của bạn lại. Như vậy khi chuyển tab phần comment đó sẽ nằm ở vị trí như trong demo
(Bước này đa số mặc định của blogger đã cài đặt sẵn tuy nhiên một số blog có thể vô tình mà bạn cài đặt dạng khác. Nếu kiểm tra thấy nó không như hướng dẫn thì hãy cài lại nha)

» Bước 3: Chèn comment Facebook, comment Google+ và comment mặc định của blogger vào blogspot

3.1- Vào phần mẫu (Template)
3.2- Chọn Chỉnh sửa HTML (Edit HTML).
3.3- Tìm thẻ như bên dưới (thông thường nó nằm ngay phần đầy của blog vì nó là thẻ mở của template mà):
<html
- Thay thế nó thành đoạn code bên bên dưới
<html xmlns:fb='http://www.facebook.com/2008/fbml'
3.4- Dán code khai báo với face book  bên dưới sau thẻ <head>:
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Logo.png' property='og:image'/>
<meta content='App ID' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script type='text/javascript'>
          function commentToggle(selectTab) {
            $(".comments-tab").addClass("inactive-select-tab");
            $(selectTab).removeClass("inactive-select-tab");
            $(".comments-page").hide();
            $(selectTab + "-page").show();
          }
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
☼ Tùy chỉnh code: 
  • Thay Logo.png thành link ảnh của bạn. Tốt nhất hãy sử dụng ảnh có kích thước 30 x 30px. Nếu bạn không  muốn có một biểu tượng hiển thị trên tường mỗi khi có một ai đó đăng nhận xét trong blog của bạn thì hãy xóa đoạn code màu xanh đi.
  • Thay App ID thành App ID đã tạo ở bước 1. (ở bài này)
  • Nếu blog của bạn đã có file jquery-min.js rồi thì xóa phần màu vàng (Để biết blog có file đó hay chưa hãy bấm CTrl + F và đánh tên file vào).
3.5- Dán đoạn CSS sau trước thẻ ]]></b:skin> :
#blogger-comments-page{padding:0 5px}
#comments h4{text-indent:-999em;height:1px;background:#0186CB;margin-top:27px}
#fb-comments-page, #googplus-comments-page{display:none}
#googplus-comments-page {border-top: 1px solid #0186CB;margin-top: 27px;}
.comments-page{width:98%}
.comments-tab{float:left;padding:5px;margin-left:5px;margin-right:3px;cursor:pointer;background-color:#048F14;color:#fff}
.comments-tab-icon{height:14px;width:auto;margin-right:3px}
.comments-tab:hover{background-color:#rgb(35,117,44)}
.inactive-select-tab{background-color:#000}
.fb_iframe_widget{background:#333;color:#fff}
☼ Tùy chỉnh CSS: 
  • background:#333 là màu nền của phần comment facebook bạn có thể đổi lại thành màu khác (trong bài này mình để nền màu đen)
  • color:#fff là màu chữ của phần commnet facebook. Nếu bạn thay đổi màu nền thì hãy thay đổi cả phần này cho thích hợp với blog của bạn nha.
  • background-color:#000 là màu nền của các tab. Phần mà khi bạn bấm để chuyển qua lại giữa các tab như hình sau: 
3.6- Tìm đoạn code có dạng như bên dưới:
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
- Thêm vào sau nó đoạn code sau:
<div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://1.bp.blogspot.com/-kWJNusoCMrY/UmFj2SvSviI/AAAAAAAAL3A/TYFuh_symU4/s1600/icon-blogger-namkna.png'/><data:post.numComments/> Comments
 </div>
 <div class='comments-tab inactive-select-tab' id='googplus-comments' onclick='javascript:commentToggle(&quot;#googplus-comments&quot;);' title='Comments made with Google+'><img class='comments-tab-icon' src='http://3.bp.blogspot.com/-PNOKhttBWcI/UmFjlkpQ5kI/AAAAAAAAL24/GSt-90XQyE4/s1600/google+++namkna.png'/>
                    G+ Comments
</div>
<div class='comments-tab inactive-select-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://2.bp.blogspot.com/-6VCYhvZAYYQ/UmFjVg3hgpI/AAAAAAAAL2w/QZVHMtQ7CQw/s1600/facebook-namkna123.png'/>
   <fb:comments-count expr:href='data:post.url'/>Comments
</div>
<div class='comments-page' id='googplus-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <div id='google_comments'/>
<script src="http://apis.google.com/js/plusone.js"></script>
          <script>
           gapi.comments.render(&#39;google_comments&#39;, {
           href: window.location,
           width: &#39;680&#39;,
           first_party_property: &#39;BLOGGER&#39;,
          view_type: &#39;FILTERED_POSTMOD&#39;
          });
       </script>
   </b:if>
</div>
<div class='comments-page' id='fb-comments-page'>
       <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='fbcm'>
         <div id='fb-root'/>
<fb:comments colorscheme='dark' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='680'/>
       </div>
   </b:if>
</div>
<div class='comments-page' id='blogger-comments-page'>
☼ Tùy chỉnh phần comment: 
  • Phần màu vàng là phần comment của google + nếu không thích thì bạn có thể xóa nó đi.
  • Phần màu xanh là phần comment của facebook nếu không thích thì bạn có thể xóa nó đi.
3.7- Tìm thẻ đóng </b:includable> tương ứng nằm ngay bên dưới của thẻ mở mà mình nói đến ở bước 3.6 và thêm vào trước thẻ </b:includable> đó đoạn code sau:
</div>
3.8- Lưu mẫu của bạn lại và kiểm tra kết quả đã làm nha.

Nếu gặp bất cứ khó khăn nào khi áp dụng hãy để lại comment của bạn ở dưới bài viết này mình sẽ hướng dẫn cụ thể và giải đáp các thắc mắc của các bạn.

☼ Quản lý comment được đăng trong tab facebook:

- Để đánh dấu bất cứ bình luận nào đó là thư rác (spam) hoặc loại bỏ/ẩn bất cứ bình luận bạn cần đăng nhập vào tài khoản facebook đã tạo App trên của bạn bằng cách truy cập trang này:
http://developers.facebook.com/tools/comments
Bạn có thể kiểm duyệt tất cả cùng một lúc mà không cần truy cập tất cả các bài viết trong blog của bạn và điều chỉnh các ý kiến ​​cá nhân cho mỗi bài viết.

Làm thế nào để cho phép các nhà cung cấp khác đăng nhận xét trên khung comment facebook,

Với Facebook Plugin bạn có thể chọn để chấp nhận ý kiến ​​ngay cả với Yahoo, Hotmail hay AOL. Để chấp nhận bình luận từ các nhà cung cấp phần thứ ba chỉ cần nhấp vào liên kết Settings trên Facebook hộp bình luận bên trong một bài viết bất kỳ của bạn và nhấp vào hộp kiểm nói rằng "các nhà cung cấp đăng nhập khác" (Other login providers)
Thêm comment Facebook, Google+ vào blogger  ves4
Lưu ý: liên kết Settings hoặc Moderator view sẽ chỉ xuất hiện trên các bài viết mới của bạn hoặc bài viết có ít hơn 2 comment Facebook. Do vậy chỉ cần truy cập bài viết mới của bạn và chỉnh sửa nó từ tab facebook.

Lưu ý với thread comment:

Với các bạn sử dụng mẫu thread comment của blogger thì các tab chỉ xuất hiện khi có một commnet đầu tiên được xuất bản.
Nguồn terocket.com

Share:

Dropmenu tích hợp nhận xét và bài đăng mới nhất cho blogger

Hẳn các bạn đã quyen với các tiện ích Bài viết mới nhất và Nhận xét mới nhất được trình bày theo phương pháp truyền thống trong một tiện ích HTML rồi phải không, Để tạo phong cách riêng và mới lạ cho cả tác giả và độc giả của blog trong cách trình bày của 2 tiện ích này, bài viết này mình sẽ hướng dẫn thêm hai tiện ích này vào trong thanh menu. Bình thường chúng sẽ được ẩn ở dưới tiêu đề của menu và sẽ hiện ra dạng sổ dọc khi người dùng dê chuột hoặc bấm vào tiêu đề đó như trên trang facebook. Khá thú vị phải không? Vậy còn chần chừ gì nữa hãy bắt tay vào làm thôi.

Để hiểu rõ hơn nguyên tắc hoạt động của menu này các bạn vui lòng xem ảnh động bên dưới:
Các bạn cũng có thể xem trực tiếp trên blog demo của mình ở bên dưới:

VIEW DEMO

Trên thưc tế menu này được viết bởi tác giả dte.web.id một blogger nổi tiếng của malaysia. Mình giới thiệu cho những ai chưa biết. Để có được một menu như thế bạn chỉ cần làm theo các bước ở bên dưới:

» Cách tạo Menu xổ dọc tích hợp bài đăng mới nhất và nhận xét mới nhất cho blogspot.

1. Đăng nhập vào blog.
2. Vào mẫu (Template) => Chọn chỉnh sửa HTML (Edit HTML).
3. Dán đoạn code bên dưới vào trước thẻ </head>
<style type='text/css'>
#autonav {
  position:absolute;
  top:0px;
  right:0px;
  left:0px;
  z-index:9999;
  margin:0px 0px;
  padding:0px 0px;
  font:normal 11px Arial,Sans-Serif;
  color:white;
  border-bottom:2px solid #333;
  -webkit-box-shadow:0px 1px 7px rgba(0,0,0,.4);
  -moz-box-shadow:0px 1px 7px rgba(0,0,0,.4);
  box-shadow:0px 1px 7px rgba(0,0,0,.4);
}

#autonav ul {
  margin:0px 0px;
  padding:0px 0px;
  height:30px;
  background-color:#0F5079;
}

#autonav ul li {
  list-style:none;
  display:inline;
  float:left;
  margin:0px 0px;
  padding:0px 0px;
  position:relative;
}

#autonav ul li a {
  display:block;
  line-height:30px;
  height:30px;
  overflow:hidden;
  margin:0px 0px;
  padding:0px 15px;
  border-left:1px solid #155F90;
  border-right:1px solid #082E46;
  text-decoration:none;
  text-shadow:0px -1px 0px rgba(0,0,0,.4);
  color:white;
  font-weight:bold;
}

#autonav ul li a:hover {
  background-color:#0F486C;
}

#autonav ul ul {
  position:absolute;
  width:220px;
  height:auto;
  top:100%;
  left:0px;
  z-index:99;
  background-color:#111;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,.7);
  box-shadow:0px 1px 3px rgba(0,0,0,.7);
  overflow:visible !important;
  display:none;
}

#autonav ul ul:before {
  content:"";
  width:0px;
  height:0px;
  border:7px solid transparent;
  border-bottom-color:#111;
  position:absolute;
  top:-14px;
  left:24px;
}

#autonav ul ul li {
  display:block;
  float:none;
}

#autonav ul ul li a {
  border:none;
  color:#999;
}

#autonav ul ul ul {
  top:0px;
  left:100%;
}

#autonav li:hover > ul {
  display:block;
}

/* Khusus JSON */
#autonav ul.json-dropdown {
  overflow:hidden;
}

#autonav ul.json-dropdown li {
  cursor:pointer;
  display:block;
  padding:7px 10px;
  margin:0px 0px;
  overflow:hidden;
}

#autonav ul.json-dropdown li a {
  line-height:14px;
  height:auto !important;
  padding:0px 0px;
}

#autonav ul.json-dropdown li a:hover {
  text-decoration:underline;
  background:transparent;
}

#autonav li ul li a:hover,
#autonav li ul.json-dropdown li:hover {
  background-color:#222;
}

#autonav ul.json-dropdown img.rp-thumb {
  padding:0px 0px;
  outline:none;
  border:2px solid #333;
  background-color:#02406C;
  display:block;
  float:left;
  margin:0px 10px 0px 0px;
  width:40px;
  height:40px;
}

#autonav .subposts span,
#autonav .subcomments span {
  font-family:Verdana,Arial,Sans-Serif;
  color:#666;
  font-size:9px;
}

/* Drop down menu untuk ukuran yang cukup lebar */
#autonav .wide {
  width:400px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numposts = 7,
    cmtext = "Nhận xét",
    pBlank = "http://lh4.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/s512/no-image.png",
    numcomment = 7,
    cmsumm = 100;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/json-dropdown.js' type='text/javascript'></script>
» Tùy chỉnh code:
  • var numposts = 7, Số bài viết mới nhất sẽ hiện thị khi menu xổ dọc xuống phía dưới. 
  • cmtext = "Nhận xét", là ký tự xuất hiện trong phần đếm số comment của mỗi bài viết như hình minh họa bên dưới:
    Dropmenu tích hợp nhận xét và bài đăng mới nhất cho blogger
  • numcomment = 7, Số nhận xét mới nhất sẽ hiện thị khi menu của bạn xổ dọc xuống.
  • http://....no-image.png link ảnh thay thế cho các bài viết mới nhất không có hình ảnh minh họa. Bạn nên sử dụng hình ảnh có kích thước 72x72 picel để tối ưu được tốc độ load trang web của bạn.
  • cmsumm = 100; là số ký tự mô tả (tóm tắt) của phần nhận xét mới nhất trong menu bạn có thể chỉnh lại theo ý muốn của bạn. Tuy nhiên không nên để quá lớn như vậy bố cục giữa những nhận xét ngắn và nhận xét dài sẽ không đẹp.
  • http://......../json-dropdown.js link của file Js. Bạn hãy tải về tại đây và upload lên host riêng để dùng lâu dài nha. Nếu chưa có host riêng thì bạn có thể xem bài này để tạo cho mình một host riêng nha.

4-  Tiếp tục dán đoạn code bên dưới vào trước thẻ </body> . (Bạn cúng có thể dán ở các vị trí khác trong mẫu của bạn, nếu không xác định được vị trí cần chèn theo ý của bạn thì hãy comment bên dưới mình sẽ chỉ đoạn đó cho các bạn)
<nav id='autonav'>
    <ul>
        <li><a href='/'>Home</a></li>
        <li><a href='#'>Music</a></li>
        <li><a href='#'>Recent post</a>
            <ul class='json-dropdown subposts wide'>
                <script src='http://namkna.blogspot.com/feeds/posts/default/?alt=json-in-script&amp;callback=dropdownposts'></script>
            </ul>
        </li>
        <li><a href='#'>Reccent comments</a>
            <ul class='json-dropdown subcomments'>
                <script src='http://namkna.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=dropdowncomment'></script>
            </ul>
        </li>
        <li><a href='#'>Liên hệ</a>
            <ul>
                <li><a href='#'>Sub menu 1</a></li>
                <li><a href='#'>Sub menu 2</a></li>
            </ul>
        </li>
    </ul>
</nav>
» Tùy chỉnh code:
  • Thay thế http://namkna.blogspot.com/ thành link blog của bạn hoặc link blog bạn muốn lấy bài viết cho vào trong menu.
  • Thay các đoạn màu xanh thành các tiêu đề của menu theo ý thích và nội dung của blog bạn nha
Nguồn terocket.com

Share:

Thống kê Blogspot

  • Total visitors::
  • Lưu trữ Blog

    Bài có nhiều người xem nhất

    Comments trên Blog

    Bài đăng ngẫu nhiên

     
    BACK TO TOP