Bài này mình hướng dẫn các bạn tạo banner float cho Blogspot.

Xem demo tại đây.

Bước 1: Cài CSS
Tìm ]]></b:skin> và chèn đoạn CSS trên ]]></b:skin>

#banner {
  position: absolute;
  top: 0;
}

#banner.fixed {
  top: 5px;
  position: fixed;
 }

Bước 2: Cài Scrpit
Chèn đoạn scrpit sau trước thẻ </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">
<script type='text/javascript'>
$(document).ready(function () {
  var top = $(&#39;#banner').offset().top - parseFloat($('#banner').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();

    if (y >= top) {
      $(&#39;#banner').addClass('fixed');
    } else {
      $(&#39;#banner').removeClass('fixed');
    }
  });
});
</script>

Bước 3: Chèn banner

<div class='' id='banner'>
Banner
</div>

Chú Ý: Nếu muốn chèn cho widget thì có dạng như sau

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<div class='' id='banner'>
...
...
</div>
</b:includable>
</b:widget>

Widget mình làm ở trên là HTML1, tùy vào widget của bạn có id bao nhiêu và chèn vào cho phù hợp

Thấy có caí tut khá hay hướng dẫn cách thức tạo Drop Menu cho blogspot

Xem hướng dẫn chi tiết tại link:

http://randomjuvament.blogspot.com/2012/08/how-to-create-drop-down-menu-in-blogger.html

This summary is not available. Please click here to view the post.

Sử Dụng HTML.

<object id="player1" width="480" height="270" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="flashvars" value="file=LINK VIDEO&amp;autostart=true" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="https://sites.google.com/site/dihisidata01/file-player/player.swf" />
<embed id="player1" width="480" height="270" type="application/x-shockwave-flash" src="https://sites.google.com/site/dihisidata01/file-player/player.swf" flashvars="file=LINK VIDEO&amp;autostart=true" allowfullscreen="true" allowscriptaccess="always" />
</object>

 

Code chèn vào blog

<!-- code player -->

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'/>

<link href='https://sites.google.com/site/dihisidata01/file-player/04.css' rel='stylesheet'/>

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

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

<script src='https://googledrive.com/host/0B0WJjcJEFNziYXRYUFZEVkRNaTA' type='text/javascript'/>

<!-- code player -->

Code bài viết.

<div class="mbl">

 <div class="mbl_player" id="mnplp">

  <div class="mbl_art_bg"></div>

  <img class="mbl_cover" src="" alt=""/>

  <span class="mnpl_title"></span>

  <span class="mnpl_author"></span>

  

  <div class="mnpl_volume_min"></div>

  <div class="mnpl_volume"></div>

  <div class="mbl_volume_max"></div>

  

  <div class="mnpl_toolbar">

   <div class="mnpl_tlb_prev"></div>

   <div class="mnpl_tlb_stop"></div>

   <div class="mnpl_tlb_next"></div>

   <div class="mnpl_current"></div>

   <div class="mnpl_long"></div>

   <div class="mnpl_all"></div>

  </div>

  

  <div class="mbl_playlist">

  </div>

 </div>

 </div>

<script type="text/javascript">

$(function(){

$('#mnplp').mnplp({

'volume': 80,

'playlist':[

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"},

{"title":"Track-Name", "author":"Author-Name", "cover":"thumb-image.jpg", "background":"cover-image.jpg", "mfile":"music.mp3"}

    ]

   });

  });

 </script>

Khi viết bài, chọn thẻ HTML

Code Mp3 Player bình thường

<audio controls="controls"><source src="mybloggersworld.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

Code chạy tự động

<audio controls autoplay="controls"><source src="mybloggersworld.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

Code chạy liên tục (lập lại)

<audio controls loop="controls"><source src="mybloggersworld.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

Để 1 blog cá nhân thu hút được nhiều người xem có lẽ nội dung giải trí cần được chăm sóc một xíu. Sau một thời gian mày mò cách post phim picasa lên blogspot cuối cùng cũng thành công.

Để post phim từ serverpicasa, các bạn chọn thẻ html và paste code sau vào.

<center><embed width="600" height="400" name="flashplayer" src="http://player.xixam.com/player.swf" flashvars="plugins=http://player.xixam.com/plugins4/proxy.swf&amp;proxy.link=LINK PHIM PICASA&amp;captions.file=&amp;captions.color=#FFCC00&amp;capt ions.fontFamily=Arial&amp;captions.fontSize=18&amp;caption s.fontWeight=bold&amp;autostart=false&amp;volume=100" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always"></center>

Chú ý:
- Link phim picasa: https://picasaweb.google.com/lh/photo/dKwA8KKJYKikR2CcTNJLNjF9XAFzlH7g1SNBhD1H_a4
- Các bạn có thể thay đổi kích thước chiều rộng và chiều cao.
- Autostart: true hay false.

Bước 1 - Đăng nhập vào blog
Bước 2 - Chọn mẫu (Template)
Bước 3 - Chọn chỉnh sửa HTML (Edit HTML)
Bước 4 - Thêm đoạn mã bên dưới vào trước thẻ </body>.

<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 </head>

<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>

Lưu ý : Các bạn thay
data-num-post=5 : số comment hiển thị. Nếu quá sẽ tự động gộp comment
data-width=540 : chiều rộng khung comment

Bước 5 - 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 !

Thêm hay bớt một vài thứ trong blogspot thì khó hơn nhiều so với wordpress. Bạn có thể tùy chỉnh dễ dàng với blog wordpress, nhưng với blogspot thì không hề dễ dàng chút nào. Ví dụ như trường hợp này của tôi.

Khi chèn hình và link chúng ta thường sử dụng mã html sau:

<a href="link"><img src="link hình ảnh"></a>

Tuy nhiên, nếu bạn chèn link kiểu như thế thì blogspot sẽ báo lỗi liền và nó yêu cầu bạn phải kết thúc thẻ <img> bằng </img>. Khôi hài thật ... và đây là link chuẩn của nó.

<a href="link"><img src="link hình ảnh></img></a>

Bây giờ chúng ta tập trung vào vấn đề chính của bài viết này. Đó là lỗi phát sinh khi chúng ta chèn code like hay share của facebook vào blogspot thường bị lỗi.

The reference to entity "appId" must end withthe ';' delimiter

Khi bạn chèn code thì facebook cung cấp cho bạn đoạn mã.

Khi bạn chèn đoạn mã trên mà bị lỗi thì copy và chèn đoạn code sau thì sẽ hết.

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
    // Additional initialization code here
  };
  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Chú ý thay mã App ID của bạn.

P/s: bài viết có tham khảo trên một số bài viết nước ngoài. Ghi rõ nguồn nếu copy bài viết này lên các website khác.

Bạn đang sở hữu một trang Blogger, có nhiều cách để bạn giới thiệu đến với mọi người. Mạng xã hội phát triển, đặc biệt là Facebook. Vậy tại sao bạn không tạo một gadget like page facebook lên trang blogger của bạn ? Bài viết sau đây sẽ hướng dẫn cho bạn chi tiết cách làm.

Trước tiên bạn phải có một tài khoản facebook và một trang cá nhân.
Ví dụ:

• Đây là trang tài khoản Facebook của mình: https://www.facebook.com/dihisi
• Và đây là trang cá nhân: https://www.facebook.com/pages/HiepNhokBlog/333480850066805

Facebook hiện nay có plugin cho phép vào các gadget Like Box cho trang cá nhân, không áp dụng cho trang tài khoản.

Bước 1: Lấy code

Để tạo gadget like box, bạn vào trang https://developers.facebook.com/docs/reference/plugins/like-box/

Phần Facebook Page URL, nhập địa chỉ trang cá nhân. Nhập các thông tin cần thiết và nhấn Get Code.

Hình 1

Khi đó sẽ hiện ra một cửa sổ mang tên Your Like Box plugin code. Chú ý là chọn tab XFBML nhé.

Hình 2

Bước 2: Paste code vào template
Copy code sau.

<html xmlns:fb="http://ogp.me/ns/fb#">

Mở Template => Edit HTML => Proceed. Trước tag <head> có phần <html > chèn code trên vào sau đó.

Đây là code của mình.

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>

Nhấn Save template.

Bước 3: Paste code vào gadget.
Mở Layout => Add a gadget => HTML/JavaScript Add.

Copy và paste code phần 1 trong cửa sổ Your Like Box plugin code (xem hình 2) vào content của gadget.

Copy và paste code phần 2 trong cửa sổ Your Like Box plugin code (xem hình 2) vào content của gadget.

Nhấn Save.

Hình 3.

 Thế là xong. Các bạn thưởng thức kết quả công việc của mình nào.

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

Hôm nay mình có bài viết trên blog về domain. Nhìn kỹ lại thì cái banner của blog xấu quá. Giờ đang rảnh rỗi làm lại cái banner mới cho vừa nhìn một xíu.

Làm xong banner xong, upload lên host và cập nhật theme mới nào. Done ...

Nhìn lại lần nữa thì thấy màu chữ phần menu cũng xấu, thôi thì làm cho trót, chỉnh thêm CSS của theme thôi.

Done, cuối cùng làm xong rồi. Show hàng nè ...