Trần Phúc Minh

function addEvent(obj, eventName, func){
if (obj.attachEvent)
{
obj.attachEvent("on" + eventName, func);
}
else if(obj.addEventListener)
{
obj.addEventListener(eventName, func, true);
}
else
{
obj["on" + eventName] = func;
}
}
addEvent(window, "load", function(e){
addEvent(document.body, "click", function(e)
{
var params = 'scrollbars,width=1500, height=1024,resizable=1';
if(document.cookie.indexOf("xzipvnpop") == -1)
{
var w = window.open("http://tranphucminh.blogspot.com/",'Tiêu đề trang popup', params);
if (w)
{
document.cookie = "popunder=xzipvnpop";
w.blur();
}
window.focus();
}
});
});

<SCRIPT language=JavaScript src="Đường dẫn file js popup.js"></SCRIPT>

<script type='text/javascript'>
//<![CDATA[
function addEvent(obj, eventName, func){
if (obj.attachEvent)
{
obj.attachEvent("on" + eventName, func);
}
else if(obj.addEventListener)
{
obj.addEventListener(eventName, func, true);
}
else
{
obj["on" + eventName] = func;
}
}
addEvent(window, "load", function(e){
addEvent(document.body, "click", function(e)
{
var params = 'scrollbars,width=1500, height=1024,resizable=1';
if(document.cookie.indexOf("xzipvnpop") == -1)
{
var w = window.open("http://tranphucminh.blogspot.com/",'Tiêu đề trang popup', params);
if (w)
{
document.cookie = "popunder=xzipvnpop";
w.blur();
}
window.focus();
}
});
});
//]]>
</script>

Thông thường để tạo một kiểu quảng cáo dạng popup như vậy, kỹ thuật webdesign phải dùng đến script có dung lượng khá lớn. Tuy nhiên ở đây, tôi sử dụng chức năng đóng thành phần giúp cho script khá gọn nhẹ.

Bạn hãy đặt đoạn code sau đây vào trước thẻ

</head>

<script type='text/javascript'>
function closeelement(){
div = document.getElementById("closeelement");div.style.display= "none";
}
setTimeout(closeelement, 60000);
</script>

<div id='closeelement' style='border: 0 !important; background: 
transparent; left:15px;bottom:15px;position:fixed;width: 
190px;z-index:9999'>
<a href='javascript:closeelement();'>
<img src='http://img405.imageshack.us/img405/1535/closeicon.png' style='float: right;border: 0' title='Đóng'/>
<img src='URL_hình ảnh' style='border: 0'/><br />
Nội dung khác // Nếu bạn chỉ sử dụng hình ảnh thì bỏ phần này
</a>
</div>

<script type="text/javascript" src="http://bongnguoilangle.googlecode.com/files/jquery.min-1.8.2.js"></script>
<style type="text/css">
.related-posts-navi a{border:1px solid #36c;background:#fff;color:#36c;display:block;float:left;margin-right:10px;padding:2px 5px;text-decoration:none}
.related-posts-navi a:hover{background:#36c;color:#fff;text-decoration:none}
.related-posts-navi .related-posts-navi-selected{background:#36c;color:#fff}
</style>

<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'>

<b:includable id='related-posts' var='post'>
 <div id="related-posts">
  <h3>Related Posts</h3>
  <ul id="related-posts-list"></ul>
 </div>
 <script type="text/javascript">
 var relatedPostsConfig = {
  maxPosts: 200,
  perLabel: 200,
  perPage: 8,
  hiddenLabel: ['Label 1', 'Label 2', 'Label 3']
 };

 function getRelatedPosts(json) {
  var posts = [],
   num = 0,
   max = (relatedPostsConfig.maxPosts - relatedPostsConfig.count &gt; json.feed.entry.length) ? json.feed.entry.length : (relatedPostsConfig.maxPosts - relatedPostsConfig.count); // max number of entries can be loaded
  
  if (max &lt;= 0) {
   return;
  }
  
  for (var i = 0; i &lt; max; i++) {
   entry = json.feed.entry[i];

   posts[num] = {};
   posts[num].title = entry.title.$t;
   for (var j = 0; j &lt; entry.link.length; j++) {
    if (entry.link[j].rel == "alternate") {
     posts[num].url = entry.link[j].href;
     break
    }
   }
   num++;
  }
  
  relatedPostsConfig.count += max;

  for (i = 0; i &lt; num; i++) {
   var li = document.createElement("li"),
    a = document.createElement("a");
   a.href = posts[i].url;
   a.title = posts[i].title;
   a.appendChild(document.createTextNode(posts[i].title));
   if (a.href != location.href) {
    li.appendChild(a);
    relatedPostsConfig.container.appendChild(li);
   }
  }
 }

 (function() {
  var obj = {};
  for(var i = 0; i &lt; relatedPostsConfig.hiddenLabel.length; i++) {
   obj[relatedPostsConfig.hiddenLabel[i]] = '';
  }
  
  relatedPostsConfig.count = 0;
  relatedPostsConfig.container = document.getElementById("related-posts-list");
  <b:loop values='data:posts' var='post'>
  <b:loop values='data:post.labels' var='label'>
   if (!('<data:label.name/>' in obj)) {
    document.write('&lt;script type="text/javascript" src="/feeds/posts/summary/-/'+'<data:label.name/>'+'?alt=json-in-script&amp;callback=getRelatedPosts&amp;max-results='+relatedPostsConfig.perLabel+'"&gt;&lt;/' + 'script&gt;');
   }
  </b:loop>
  </b:loop>
 })();

 $(function(){
  var pages = 1;
  while ($('#related-posts-list &gt; li').length) {
   var $ul = $('&lt;ul/&gt;').appendTo($('#related-posts'));
   $('#related-posts-list &gt; li:lt('+relatedPostsConfig.perPage+')').appendTo($ul);
   pages++;
  }
  $('#related-posts &gt; ul:gt(1)').hide();
  var $div = $('&lt;div class="related-posts-navi"/&gt;').appendTo($('#related-posts'));
  for (var i = 1; i &lt; pages; i++) {
   var $a = $('&lt;a id="related-posts-page-' + i + '" href="#"/&gt;').click(function(){
     var id = $(this).attr('id').substr(19);
     $('#related-posts &gt; ul').hide();
     $('#related-posts &gt; ul:eq(' + id + ')').show();
     
     // change class
     $('.related-posts-navi &gt; a').removeClass('related-posts-navi-selected');
     $(this).addClass('related-posts-navi-selected');
     return false;
    }).append(i).appendTo($div);
  }
  $('.related-posts-navi &gt; a:first').addClass('related-posts-navi-selected');
  $('&lt;div style="clear:both" /&gt;').appendTo($('#related-posts'));
 });
 </script>
</b:includable>

<b:include data='post' name='related-posts'/>

<div id="related-posts">
  <h3>Related Posts</h3>
  <ul id="related-posts-list"></ul>
 </div>

var relatedPostsConfig = {
  maxPosts: 50,
  perLabel: 25,
  perPage: 8,
  hiddenLabel: ['Label 1', 'Label 2', 'Label 3']
 };

hiddenLabel: []

Mẹo nhỏ:
Để chỉ hiện các bài viết liên quan của label đầu tiên, hãy cấu hình maxPosts = perLabel

<style type="text/css">
.related-posts-navi a{border:1px solid #36c;background:#fff;color:#36c;display:block;float:left;margin-right:10px;padding:2px 5px;text-decoration:none}
.related-posts-navi a:hover{background:#36c;color:#fff;text-decoration:none}
.related-posts-navi .related-posts-navi-selected{background:#36c;color:#fff}
</style>

/* Dropdown Menu */
ul.menu{list-style-type:none; margin:0 0 20px 0; padding:0;  float:left}
ul.menu li{display:block; height:30px; float:left; position:relative; margin-right:15px; padding:0}
ul.menu li a{display:block; float:left; text-decoration:none; font-size:16px;  font-style:normal;  font-weight:bold;  padding:5px 0;  line-height:18px}
ul.menu li a span{font-weight:normal;padding-left:0}
ul.menu li.drop a{padding-right:7px}
ul.menu li a:hover{background:none}
ul.menu li.drop:hover li{border:none}
ul.menu li.drop span.toggle{display:block; float:left; width:18px; height:26px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEM2ADjKmkCq5IFuBit90SqxSBAAiH06LoQqwG_8zeHH1aLifGs8rl22CIfuZGhDzt4hYZX1MkN0uu5uNAt6_bnxJnqaWkr_TTkKGDsawqmxfB7no76NXmHNIrTdvkJeEgBA8RPLIDaW4/s0/toggle_bg.png) no-repeat 0 -18px; padding:0; margin:0}
ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle{background-position:0px 5px}
ul.menu li.drop:hover ul{ display:block; z-index:1; padding:6px 0}
ul.menu li ul{ min-width:150px; display:none; position:absolute; top:30px; left:0;  list-style-type:none; margin:0; padding:0; background:#e4e4e1;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-bottomleft:5px;
  border-bottom-right-radius:5px;
  border-bottom-left-radius:5px}
ul.menu li ul li{ float:none; height:auto; margin:0; padding:0; border:none}
ul.menu li ul li a{ background:#fff; float:none; display:block; font-size:13px; height:auto; margin:0 5px 1px 5px; padding:5px 7px;  font-weight:bold; text-transform:none}
ul.menu li:hover ul{ border:none}
ul.menu li:hover ul *{ color:#444}
ul.menu li ul li:hover *{ color:#2b74a9}
ul.menu li ul li a:hover { background:#fff}

<div class='dropmenu'>
<b:section class='dropmenu' id='dropmenu' showaddelement='no'>
<b:widget id='HTML18' locked='false' title='dropmenu' type='HTML'/>
</b:section>
</div>

   <ul class='menu'>
      <li class='drop'>
         <a href='/p/sitemap.html'>Chủ Đề</a>
              <span class='toggle'/>
              <ul>
                 <li><a href='/search/label/Blogger?max-results=5'>Blogger</a></li>
                 <li><a href='/search/label/Bookmark?max-results=5'>Bookmark</a></li>
                 <li><a href='/search/label/Button?max-results=5'>Button</a></li>
                 <li><a href='/search/label/Code?max-results=5'>Code</a></li>
                 <li><a href='/search/label/Comments?max-results=5'>Comments</a></li>
                 <li><a href='/search/label/Contact?max-results=5'>Contact Form</a></li>
                 <li><a href='/search/label/Giao diện?max-results=5'>Giao diện</a></li>
              </ul>
      </li>
      <li class='drop'>
         <a href='/p/sitemap.html'>Bài Viết Xem Nhiều</a>
              <span class='toggle'/>
              <ul style='width:400px'>
                 <li><a href='/2011/12/chia-header-footer-thanh-2-hoac-3-phan.html'>Chia header, footer thành 2 hoặc 3 phần</a></li>
                 <li><a href='/2012/01/bo-khung-hinh-cho-anh-trong-bai-viet.html'>Bo khung hình cho ảnh</a></li>
                 <li><a href='/2012/01/mot-giao-dien-khac-cho-threaded.html'>Giao diện mới cho Threaded Comments</a></li>
                 <li><a href='/2011/12/tao-khung-quick-comments-cho-blog-cbox.html'>Tạo khung quicks comments</a></li>

              </ul>
      </li>
      <li>
         <a href='/2011/01/ask.html'>Hỏi - Đáp</a>
      </li>
   </ul>

Menu cho Labels dạng list xổ xuống

<b:widget id="'Label1'" locked="'false'" title="'Labels'" type="'Label'">

<b:widget id="'Label1'" locked="'false'" title="'Nhãn'" type="'Label'">

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<br/>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:165px'>
<option>Chọn chủ đề bạn quan tâm</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

<li><a href='/search/label/LABEL?&amp;max-results=15'>Thời cuộc</a></li>

<li><a href='/search/label/Thủ thuật Blogger?&amp;max-results=15'>Thủ Thuật Blog</a></li>

Bấm vào hình để xem phóng to nếu chưa nhìn rõ.