Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Sunday, March 17, 2013

Hộp like và đăng ký ở cuối bài viết cho blogger

Đây là một hộp bao gồm nút like và send, hộp đăng ký qua Email (Subscription box) và các biểu tượng lá cờ liên kết đến các mạng xã hội. Widget này được sử dụng rất nhiều trên blog wordpress, nó thuuwongf nằm ở dưới cùng của bài viết. Góp phần thu hút sự chú ý của độc giả truy cập và thuận tiện khi độc giả đó muốn thích hay chia sẻ bài viết của bạn. Đó là lý do tại sao namkna đặt tên cho tiện ích này là "hộp like và đăng ký cuối bài viết". Nó sẽ làm tăng của bạn lưu lượng truy cập vào trang web của bạn thông qua các mạng truyền thông như: Facebook , Google, Twiter,... Đồng tăng truy cập trên các mạng xã hội của bạn từ trang web của bạn.

Chia sẻ:
Đây là một hộp bao gồm nút like và send, hộp đăng ký qua Email (Subscription box) và các biểu tượng lá cờ liên kết đến các mạng xã hội. Widget này được sử dụng rất nhiều trên blog wordpress, nó thuuwongf nằm ở dưới cùng của bài viết. Góp phần thu hút sự chú ý của độc giả truy cập và thuận tiện khi độc giả đó muốn thích hay chia sẻ bài viết của bạn. Đó là lý do tại sao namkna đặt tên cho tiện ích này là "hộp like và đăng ký cuối bài viết". Nó sẽ làm tăng của bạn lưu lượng truy cập vào trang web của bạn thông qua các mạng truyền thông như: Facebook , Google, Twiter,... Đồng tăng truy cập trên các mạng xã hội của bạn từ trang web của bạn.
Hãy xem demo để thấy rõ tiện ích hoạt động thế nào:

VIEW DEMO

Ảnh minh họa:
hộp like và đăng ký cuối bài viết - Like, Subscription box for blogger

» Thêm Like, Subscription box vào blogspot của bạn!

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn Chỉnh sửa HTML (Edit HTML)
4. Chọn Mở rộng tiện ích (Expand Widget Templates).
5. Tìm kiếm một trong 2 thẻ bên dưới:
<data:post.body/>
Hoặc thẻ sau:
<div class='post-footer'>
- Dán vào sau nó đoạn code ben dưới:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.namknatext{
background:url(http://1.bp.blogspot.com/-OKWh_J24th8/UUXCa4un_dI/AAAAAAAAJaY/LJ0Fg9A3DZs/s1600/namkna-blogspot-com-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.namknabutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>

<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#FF683F;'>Bạn có thích bài viết này...?</span>
<tr>
<td>
<!-- Facebook like and share link -->
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
</td>
</tr>
<tr>

<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Nhận tin miễn phí hằng ngày!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=--namkna--&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='--namkna--'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='namknatext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>

<input alt='' class='namknabutton' title='' type='submit' value='Submit'/>
</form>
</td>


<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;  '>Follow us!</p>
<a href='http://feeds.feedburner.com/--namkna--' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://4.bp.blogspot.com/-gDoWNZfoqXQ/UUXTP-7blQI/AAAAAAAAJaw/opUCofauvyM/s1600/namkna-blogspot-com-RSS-0001.png'/></a>

<a href='http://twitter.com/namkna' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://4.bp.blogspot.com/-WZ4-AbLxZS8/UUXThzlDz_I/AAAAAAAAJa4/Nf71NcMuHuw/s1600/namkna-bl;ogspot-com-Twitter-001.png'/></a>

<a href='http://www.facebook.com/pages/namkna-blogspot' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://4.bp.blogspot.com/-QCGH6J76gnE/UUXTvRx2twI/AAAAAAAAJbA/yQ3xHiY4J_c/s1600/namkna-blogspot-com-flag-FaceBook.png'/></a>
</td>

</tr>
</tbody></table></div></div>
</b:if> 

Tùy chỉnh!

  1. Thay namkna thành id trên twiter của bạn.
  2. Thay --namkna-- là id feed của bạn.
  3. Thay http://www.facebook.com/pages/namkna-blogspot là URL trang facebook hoặc fanpage của bạn.
  4. Thay #FF683F là màu sắc của chữ "bạn có thích bài viết này...?"
- Cuối cùng lưu mẫu lại sau đó vào một bài viết bất kỳ và xem kết quả nha.
Tác giả: mybloggertricks.com

44 nhận xét:

  1. anh giúp em tạo mấy cái nút share như hình này sau cái hộp đăng ký nhận tin này với,thanks. https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/c0.0.277.277/p403x403/554892_421144134649048_36088303_n.jpg

    ReplyDelete
    Replies
    1. Em chèn đoạn code sau vào vị trí em muốn hiển thị nha:

      <!-- AddThis Button BEGIN http://namkna.blogspot.com/-->
      <style>
      .wdt_button{float:left;margin:5px}
      <style>
      <div class="wdt_button"><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></div>
      <div class="wdt_button"><a class="addthis_button_tweet" tw:count="vertical"></a></div>
      <div class="wdt_button"><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></div>
      <div class="wdt_button"><a class="addthis_counter"></a></div>
      <!-- AddThis Button END http://namkna.blogspot.com/ -->
      <!-- FAST SHARING SCRIPT -->
      <!-- TWITTER SCRIPT -->
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      <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_GB/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <!-- G+ SCRIPT -->
      <!-- Place this render call where appropriate -->
      <script type='text/javascript'>gapi.plusone.go();</script>
      <!-- STUMBLEUPON SCRIPT -->
      <!-- Place this snippet wherever appropriate -->
      <script type='text/javascript'>
      (function() {
      var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
      li.src = 'https://platform.stumbleupon.com/1/widgets.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
      })();
      </script>
      <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
      <!-- AddThis Button END -->

      Delete
    2. This comment has been removed by the author.

      Delete
  2. Demo:
    http://namkna-test.blogspot.com/2013/03/demo.html

    ReplyDelete
  3. Cảm ơn bác nam thủ thuật này :D

    ReplyDelete
    Replies
    1. Không có gì rất vui vì bán thích nó :)))

      Delete
  4. Anh xem hộ em sao khi e làm theo bài này không thành công, xong e xóa hết code của anh đi để lai như ban đầu thì bài đăng ở trang chính của em lúc nào cũng chỉ xuất hiện có 2 bài, dù đã chỉnh sửa lại số bài đăng thì nó vẫn hiện 2 chả hiểu làm sao. Anh xem hộ e với
    http://tuong-dep.blogspot.com/

    ReplyDelete
    Replies
    1. Em hãy puplish để được giúp đỡ nha

      Delete
  5. Chủ blog ơi, nếu không tìm thấy thẻ thì làm thế nào?

    ReplyDelete
  6. Replies
    1. THẻ <data:post.body/> blog nào cũng có. Bạn hãy bấm chọn MỞ RỘNG TIỆN ÍCH MẪU và bấm Ctrl + F tìm sẽ thấy/

      - Lưu ý mỗi blog có từ 2 đến 4 đoạn <data:post.body/> do vậy chèn đúng vị trí nó mới hiển thị nha.

      Delete
  7. anh cho em hoir :ID feed là gì vậy ạ

    ReplyDelete
  8. Anh ơi mình làm sao cho nó hiển thị giống trong ảnh này được
    https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn2/969520_178150725696965_158554936_n.jpg

    của em nó cứ hiện mặc định anh ạ

    ReplyDelete
  9. cảm ơn anh Nam nhiệt tình nhiều nhé,thật sự ngôi nhà của anh rất phong phú,

    ReplyDelete
  10. anh nam ơi , tại sao mình đăng ký nhận mail miễn phí mà báo lỗi thế này:
    The feed does not have subscriptions by email enabled

    là sao anh nam, help mình với

    ReplyDelete
    Replies
    1. Anh nam ơi, thật sự em có đăng ký rồi , link đây ah

      http://feeds.feedburner.com/truongchanphong

      Mà sao lại ko dc đăng ký nhận mail vậy anh nam

      Delete
    2. đã thành công anh nam ơi, vô cùng cảm tạ anh nhé

      Delete
    3. anh nam ơi, mình muốn úp hình lên mà muốn sử dụng link dạng này: http://4.bp.blogspot.com/-PywZTL2iYfk/UJfPjB8m4hI/AAAAAAAADkk/vkKLQlK_yU8/s45/avanta-namkna-blogspot-com.JPG. Thì thế nào anh.

      Delete
    4. Không có gì rất vui vì giúp được em/

      Delete
    5. anh Nam ơi, cái blog này http://kenhnhac.blogspot.com/ mình muốn làm dạng theo kiểu này, tức là bài viết theo hiểu bố trí theo dòng và cột, mấy dòng mấy cột tùy mình bổ sung, thì cách thức để tạo được như thế làm thế nào vậy anh, trong blog anh có đường link này .

      Delete
    6. Nói thật là câu hỏi của bạn khong rõ ràng cho lắm nên hiện tại khong thể nói trước được điều gì.

      Delete
    7. ah, nghĩa là em muốn thiết kế phần nội dung blog như http://kenhnhac.blogspot.com/ thì thủ thuật là ntn vậy anh nam?

      Delete
    8. Đó là tiện ích autoreadmore kết hợp với related post nếu chỉ lọc nguyên code đó thì blog em sẽ không tận dụng hết chức năng do vậy sẽ chậm trong khi vẫn phải load toàn bộ code.

      Delete
    9. anh nam, vậy anh có bài viết nào nói về 2 thủ thuật này ko, cho em xem nhé

      Delete
    10. Hiện tại anh chưa có bài nào về thủ thuật đó. Bài tới anh sẽ viết về nó :)

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Thank a namkna!
    E mới tập làm blog đc khoảng hơn 1 tuần rùi! Hầu hết các kiến thức em sử dụng đều được lấy từ blog của a. Thank vì tinh thần chia sẻ của anh nhé!

    Em chỉ cập nhật 1 chút đó là mấy cái blog của em làm, nhiều khi dán đoạn code trên vào sau <data:post.body/> thì không thành công.
    Nên em đành lên google search kiểu khác và thấy bài của itviet360 tại
    http://www.itviet360.com/2013/05/like-va-share-bai-viet-cho-blogspot.html

    Nhưng mà em vẫn thích kiểu này của anh hơn, thế là em thử lấy râu ông này cắm cằm bà kia thử xem có được không.

    Em lấy đoạn code của anh chèn sau <div class='post-footer'> (của itviet360 hướng dẫn).... không ngờ lại được.

    Hehe..... em update lên đây để lỡ có ai cùng cảnh ngộ như em có thể làm thử, biết đâu lại đc như em :D

    Àh quên, nhân tiện pr cho cái blog em mới tập tành làm tý, có gì ae mình giao lưu nha.
    gamebeen.com

    ReplyDelete
    Replies
    1. Cám ơn em đa ủng hộ blog anh :)
      Những đoạn code dạng <data:post.body/> hay <div class='post-footer'> mỗi blog đều có 2 đến 3 đoạn như vậy, nên đôi khi chèn không đúng vị trí nó sẽ không hiển thị.

      Delete
  13. bác nam cho em hỏi sao cái blog của em nó không hiện nút share vậy
    http://thietbisieuthigiare.blogspot.com/

    ReplyDelete
  14. Một blog thường có 2 đoạn: <div class='post-footer'> bạn chèn nhầm vj trí rồi bạn ak.

    ReplyDelete
  15. còn cách nào hiện sao với hiện lượt view khác ko anh Nam? Trang http://graddit.com/ratings-widget quá chậm làm nặng cả blog.

    ReplyDelete
    Replies
    1. Hiện tại thì blog chưa thể can thiệp để hiện được lượng view trừ khi sử dụng plugin từ bên thứ 3. Nếu dùng code script thì nó chỉ đếm được lượt xem của chính người đó, và xẽ biến mất khi xóa cookie trình duyệt.

      Delete
    2. vang, nhung ma trang nay vao cham lam anh a, co trang nao nhe hon ko, don gian thoi ko can dep.

      Delete
    3. Đoạn cuối ko phải data:post.body/ mà là div class='post-header nha anh.

      Nó hiện lượt view rồi nhưng cưa quay vòng vòng ko ra số view
      http://www.themmua.com/

      Delete