.socials {float:left;display:block;width:32px;height:32px;background:url(http://i.imgur.com/lmSYJ.png) no-repeat;cursor:pointer;position:relative;margin:14px 0 0 30px} ul.reset,ul.reset li {display:block;list-style:none;padding:0;margin:0} ul.reset li {position:absolute} ul.reset li a {outline:none} a.comment-link:before{content:"7766";} #navbar-iframe { display: none !important;} #navbar-iframe { display: none;} xaydunghanoi.vn
News Update :

SotfWare

My Network Places

Tin Thời Sự Xã Hội

2-Tek

G++ Blog

Add Smooth Scroll to Top Button with Jquery to Blogger / Blogspot

Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

a. Go to Blogger Dashboard < Design tab > Edit Html
b. Search for </head> tag
c. Add below line of code Before </head> tag


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

Step 2: Adding Scroll to Top Script

a. Go to Blogger Dashboard < Design tab > Edit Html
b. Search for </head> tag
c. Add below section of code Before </head> tag and Save your Template.
<style type="text/css">
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;}
#w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}</style>
<script src="http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCubic' }); });</script>

You Are Successfully Done!

Add Social Sharing/Bookmarking Widget with Cool Hover Effect

Add Social Sharing/Bookmarking Widget with Cool Hover EffectSocial sharing / bookmarking widget with Cool Gray-scale/Color hover widget to Blogger blog. i have given a beautiful sharing widget with css/jquery. This widget is used by me in way2blogging.blogspot.com with CSS. After moving to .Org domain name, i change the Template.
Here i am giving that widget and added a cool hover effect with CSS3 for you. If you like it then you can use in your blog :)

Live Demo:-














How to Install Social Sharing/Bookmarking Widget?

Step 1: Adding Css code
1. Login to Blogger Dashboard > Design tab > Edit Html
2. Click on Expand Template widgets ckeckbox
3. Search for ]]></b:skin> tag and put below code above it!
#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#w2b-share ul li {display: inline;background:none;margin:0;padding:0;}
#w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVVeQHTvaag56DFVpA1vAmnGxmgyllyL9LiAGJwD2wab8d5Ds6GMKparF9glNptVm0wvJ3Awc32_uCh5-oHsVLAsJaOSHPKaePfy8kI-gzRpZqNAFaPeJiFnQE98WYVfZjWw4cCfWZzw-/') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#w2b-share ul li a.twitter    {background-position: -0px -0px;   }
#w2b-share ul li a.twitter:hover {background-position: -0px -33px;  }
#w2b-share ul li a.facebook   {background-position: -32px -0px;  }
#w2b-share ul li a.facebook:hover {background-position: -32px -33px; }
#w2b-share ul li a.stumbleupon  {background-position: -64px -0px;  }
#w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#w2b-share ul li a.digg    {background-position: -192px -0px; }
#w2b-share ul li a.digg:hover  {background-position: -192px -33px;}
#w2b-share ul li a.reddit   {background-position: -160px -0px; }
#w2b-share ul li a.reddit:hover  {background-position: -160px -33px;}
#w2b-share ul li a.google   {background-position: -128px -0px; }
#w2b-share ul li a.google:hover  {background-position: -128px -33px;}
#w2b-share ul li a.del-icio-us  {background-position: -480px -0px; }
#w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#w2b-share ul li a.mixx    {background-position: -96px -0px;  }
#w2b-share ul li a.mixx:hover  {background-position: -96px -33px; }
#w2b-share ul li a.technorati  {background-position: -416px -0px; }
#w2b-share ul li a.technorati:hover {background-position: -416px -33px;}
#w2b-share ul li a.linkin   {background-position: -256px -0px; }
#w2b-share ul li a.linkin:hover  {background-position: -256px -33px;}
#w2b-share ul li a.yahoobuzz  {background-position: -448px -0px; }
#w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#w2b-share ul li a.myspace   {background-position: -512px -0px; }
#w2b-share ul li a.myspace:hover {background-position: -512px -33px;}
#w2b-share ul li a.more    {background-position: -576px -0px; }
#w2b-share ul li a.more:hover  {background-position: -576px -33px;}

Step 2: Adding Widget Code
1. Search for <data:post.body/> tag
2. And Put Below Code immediately after it! & Save your Template
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='w2b-share'>
  <ul>
   <li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
   <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
   <li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
   <li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
   <li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
   <li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
   <li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
   <li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
   <li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
   <li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
   <li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
   <li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
  </ul>
 </div>
</b:if>

Solution For Finding Code In Step 2

here i received a comment While finding the <data:post.body/> code is coming three time
This Problem comes when we install Auto Read Hack in our Blogs

For this Problem Search for any one line from below and Put Above Section of Wdget Code after it!
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

Thank you for All your Info & Support

How To Create Your Own Clock and Add in Blogger

You wanna add some widget like clock. You can do it so. It is good to have a clock in your blog. Time is always important. You can create your own clock and add it into your blog. Let's know how yo.
Let's get started

• Just go this site - click here

• Then, just select between listbox options.

• Customize colors with color pickers.

• Set your clock size with zoom slide.

• Hit the Download button.

• Copy the code and paste in HTML/Javascript

• Finish!

How to Add Simple Image Slider With Jquery to Blogger Blogs

Jquery Simple Image Slider with semi transparent Title and Caption. Jquerywrite less. do more. Jquery is great plugin witch allows to create flash like slick effects in ease and very less weight. this slider is very easy to Install/Integrate on blogger blog. so let's see...

Before Going to Tutorial Take a Demo of this Slider



How to Integrate Simple Image Slider with Jquery ?

There are 4 Steps
a. Adding CSS code and customization !
b. Adding Jquery Plugin
c. Adding Javascript
d. Finally Adding Slider Widget

Adding CSS code and customization !

1. Go to Blogger Dashboard > Design tab > Edit HTML
2. Find this ]]></b:skin> tag and put below code of section, Just before it!
#gallery {
    position:relative;
    height:320px; /* Set Height   */
    width:540px;  /* Set Width    */
    overflow:hidden;
}
#gallery a {
    float:left;
    position:absolute;
}
#gallery a img {
    border:none;
}
#gallery a.show {
    z-index:500;
}
#gallery .caption {
    z-index:600;
    background-color:#000;
    color:#ffffff;
    height:100px;
    width:100%;
    position:absolute;
    bottom:0;
}
#gallery .caption .content {
    margin:5px;
}
#gallery .caption .content h3 {
    margin:0;
    padding:0;
    color:#1DCCEF;
}
3. Save your Template

Adding Jquery Plugin

If you have already have Jquery plugin in your blog, then Ignore this step
Add this code before </head> tag
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>

Adding Javascript

Add this code before </head> tag
<script type="text/javascript">
//<!--
$(document).ready(function() {  
 slideShow();
});
function slideShow() {
    var dur= 5000;
 $('#gallery a').css({opacity: 0.0});
 $('#gallery a:first').css({opacity: 1.0});
 $('#gallery .caption').css({opacity: 0.7});
 $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
 $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
 .animate({opacity: 0.7}, 400);
 setInterval('gallery()', dur);
}
function gallery() {
 var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
 var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first')); 
 var caption = next.find('img').attr('rel'); 
 next.css({opacity: 0.0})
 .addClass('show')
 .animate({opacity: 1.0}, 1000);
 current.animate({opacity: 0.0}, 1000)
 .removeClass('show');
 $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); 
 $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
 $('#gallery .content').html(caption);
}
//--></script>

Adding Slider Widget

1. Go to Blogger Dashboard > Design tab > Page Elements tab
2. Add HTML/JavaScript Gadget any where
3. Put Title Field as Blank
4. Add bellow Html Widget Code in Body of the widget and Customize it
<div id="gallery">

<!-- Image Slide 1 and must have a class='show' -->
 <a href="Link url" class="show">
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>

<!-- Image Slide 2 -->
 <a href="Link Url" >
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>

<!-- You can add more n more images as link above  -->

 <div class="caption"><div class="content"></div></div>
 <div style='clear:both;'/>
</div>

Customization:-
Replace Link Url with link that you want
Replace Image url here with Your Image and set it's width and Height
Replace This is Title with your Title
Replace This is Description with with a small Description

You can Add more Image slides by Adding following code  just after this <!-- You can add more n more images as link above --> tag and Customize it as Like above

<!-- Image Slide -->
 <a href="Link Url" >
  <img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
 </a>

5. Finally Save your Widget!

Tạo khung loan tin trên Y!M cho blogger




Dưới mỗi bài viết của Blogger của một số Blog có hiển thị khung gửi link bài viết qua Yahooo! Mesenger để giúp bạn hoặc khách truy cập dễ dàng copy link  bài viết để chia sẻ cho bạn bè.
3L0.11977000_61962_1gui link quan YMĐây chỉ là thủ thuật đơn giả tạo 1 vùng text hiển thị sẵn tiêu đề và link URL của bài viết, bạn để bạn copy và gửi cho bạn bè qua Y!M.

Cách thực hiện như sau:
1. Truy cập vào Blogger:
- Truy cập vào Blogger: Bảng điều khiển (Dashboard)  >> Bố cục (Layout)   >>  Chỉnh sửa HTML (Edit HTML)  >>  click chọn ô check Mở rộng mẫu tiện ích (Expand widget templates).
- Tìm (Nhấn Ctrl + F ) đoạn code
<div class='post-footer-line post-footer-line-3'>
Bằng cách nhấn Ctrl + F và nhập từ khóa line-3 để tìm dễ hơn!
- Nếu không có bạn có thể tìm theo từ khóa line-2 hoặc line-1 để chèn dưới nó
- Thậm chí bạn có thể chèn nó ngay dưới đoạn code:
<data:post.body/>
2.  Chèn code hiển thị Link bài viết
- Chèn đoan code dưới:
<b:if cond='data:blog.pageType == "item"'>
<b>Gửi bài viết này cho bạn bè qua Y!M:</b>
<textarea cols='45' id='embedhtml' name='embedhtml' onclick='this.select()' readonly='readonly' rows='2'>
<b:if cond='data:post.title'> » <data:post.title/> : </b:if>
<b:if cond='data:post.url'><data:post.url/></b:if>
</textarea>
</b:if>
vào ngay phía dưới đoạn code vừa tìm được.
- Lưu lại mẫu (Save Templates).

Trang trí cho tab RSS Feed cho blogspot


Xem hình minh họa kết quả:


- Vài điều về hình minh họa:
+ Feed (Post) : Link RSS của các bài viết của bạn (link mặc định là http://YOURBLOG.blogspot.com/feeds/posts/default, hoặc http://feeds2.feedburner.com/YOURBLOG-Feed (link này có được khi bạn đăng kí từ trang chủ http://feedburner.google.com/))
+ Feed (comments) : Link RSS của các bài viết của bạn (link mặc định là http://YOURBLOG.blogspot.com/feeds/comments/default)
+ Feed (Email) : là mục đăng kí nhận bài viết qua email. (đây là 1 tiện ích của Feedburner)
+ Counter readers: là công cụ đếm số người đọc bài viết qua email.(cũng là 1 tiện ích của Feedburner).

- Để thực hiện 1 bảng RSS link hòan chỉnh như trong hình minh họa thì bạn phải đăng kí chi mình một địa chỉ link RSS bên feedburner rồi sự dụng 2 tiện ích của feedburner là đăng kí nhận bài qua email, và tiện ích đếm người đọc bài viết.

☼ Bây giờ ta bắt đầu:
1. Vào bố cục (Layout)
2. Vào phần tử trang (page element)
3. Tạo một widget HTML/Javascript ở sidebar.
4. Và dán code bên dưới vào:

<table border="1" style="text-align: left; width: 240px; height: 100px; font-weight:bold; background:#fff;" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td><a href="http://YOURBLOG.blogspot.com/feeds/posts/default"><span style="text-decoration: underline;"><img alt="Feeds" style="border: 0px solid ; width: 110px; height: 110px; float: left;" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SLSjKZSO6uI/AAAAAAAAEHs/1_Vb9U5gx88/s320-R/rss128pw8.png" title="¡Suscribe Feed!"/></span></a><br/>
<a href="http://YOURBLOG.blogspot.com/feeds/posts/default">Feed (Post)</a><br/>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=YOURBLOG-Feed" title="Recive my post by email">Feed
(email)<br/>

</a><a href="http://YOURBLOG.blogspot.com/feeds/comments/default" title="Suscribe my comments">Feed
(Comments)<br/>
</a><a href="http://feeds2.feedburner.com/YOURBLOG-Feed"><img width="88" style="border:0" alt="" src="http://feeds2.feedburner.com/~fc/YOURBLOG-Feed?bg=99CCFF&amp;fg=444444&amp;anim=0" height="26"/></a>
<br/>
</td>
</tr>
</tbody>
</table>

- Các dòng code màu xanh có được khi bạn đăng kí từ Feedburner, và đọan code màu xanh dưới cùng là code của bộ đếm readersFeedburner cung cấp cho bạn.

[Thủ Thuật] Bài viết liên Quan gồm danh sách ảnh và bài viết cho blogger

Demo:


- Cách thực hiện như sau:
Bước 1: Các bạn vào Thiết Kế, Chỉnh sửa HTML, sau đó dán đoạn Code bên dưới lên trên thẻ </head>

<style type='text/css'>
.baivietlienquan {
margin : 5px 5px 5px 5px;
padding : 1px;
clear : both;
list-style-type : none;
background : #adc7de url(http://www.vn520.org/@forum/gif/ok/201112182141001.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
color:#000;
font-weight: bold;
}
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:0;margin:10px 0 5px 0;}
#related-posts h2{margin:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcoi0vf2t1DqOdRIx69xIuAw__bMxjA9JxY1mY8BIL-DB7qpIKqBl1Kq6SUkcso7EIggHDUh45PQ1AEPxXl-ku6Jj8-atdFpMa4IIcPQXb4nLwLibKTsvVSUWfF41s-OPlXPEAHOGljI/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;}
#related-posts a:hover {background-color:#d4eaf2}
.lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 173px;margin:1px;overflow:hidden;line-height:1.4em}
.related-posts {margin: 0;padding: 0}
.related-posts ul {margin: 0;padding-top: 5px}
.related-posts ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2JUyeTC700L5Pak5g2KxnQ5HxNyJbc1QFB9YNoOKrLqEqE5FLudvQts6l9jSBJZsiWvsuG9yUXl631dmnC0yL31k8XSYzaSu4E-WRXHRQKxOvbDbhgatnCMBqLJQ5K_Ugg_alNYXmCUb0/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word}
</style>

<!-- Start Related posts  -->
<script src='http://datacafe82.googlecode.com/files/related_posted_img.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài vi?t liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>

</script>
</b:if>
<!-- End Related posts  -->

Lưu Template lại.
Bước 2: Chọn Mở rộng tiện ích mẫu và dán Code sau bên dưới dòng:

<div class='post-footer-line post-footer-line-2'/>
hoặc code sau:
<div class='post-footer-line post-footer-line-1'/>

<!-- Related posts  --> 
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=9&quot;' type='text/javascript'/>

</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=9;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div> 
<div style='margin-bottom:5px;clear:both'/> 

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvYFDYzQJsU04UJFXsQ8QfibhiDXdu7pPM8Bs1IterXDWI4olK7K33JtAMQHXbMEt6O4ESFjHbXkTaIEEwj_kdDiKRfVSewTPhDa3KkDhyphenhyphendPW-LzBXWJdZmEIBLOiqWt0aFP033YfDRI/s1600/cac-tin-khac-namkna-blogspot-com-ngoctra.jpg'/>
<div class='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=12;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>

</div>
<div class='clear'/>
<!-- Related posts  -->

Trong đó các bạn chú ý:
- max-results=9&quot là số bài ở dạng thumbnail
- var maxresults=12 là số bài ở dạng list.

Chèn link Google Search vào footer của bài viếtChèn link Google Search vào footer của bài viết


1. Vào thiết kế
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Tìm đoạn code như bên dưới :

<div class='post-footer-line post-footer-line-3'>
- nếu không tìm thấy đoạn mã này, bạn có thể tìm các đoạn mã bên dưới :
<div class='post-footer'>
hoặc :
<data:post.body/>

5. Sau khi tìm được 1 trong các đoạn code trên, các bạn dán đoạn code bên dưới vào ngay sau nó :
<div class='google-search-link' style='text-align:center;'>
<form action='http://www.google.com.vn/search' method='get' name='search-pt' target='_blank'>
<input autocomplete='off' expr:value='data:post.title' id='search-text' name='q' style='display:none;' tabindex='7' type='text'/>
<a href='#' onclick='document[&quot;search-pt&quot;].submit()'>=== click search google ===</a>
</form>
</div>
- các bạn có thể thay dòng === click search google === thành đoạn text khác mà các bạn thích.

6. Save template.

Đặt CODE trong khung khi bài viết giới thiệu code trong blogspot

Bạn viết blog thường có kèm theo code HTML để giới thiệu. Bạn muốn bài đăng của mình được đẹp hơn trong mắt người đọc.
Xem demo:




Vậy thì hôm nay tôi xin hướng các bạn cách làm đó. Hãy làm theo các bước sau:
B1: Login vào bảng điều khiển -> Thiết kế -> Sửa HTML.
B2: Nhấn CTRL + F để tìm dòng sau: ]]></b:skin> sau đó hãy thêm đoạn code dưới ngay trên dòng vừa tìm được.

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i888.photobucket.com/albums/ac87/luanbony/khothuthuat-3.jpg) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;




Vậy là bạn đã chỉnh sửa HTML thành công rồi ! Bây giờ khi viết bài đăng, hãy dùng code sau chèn vào bài viết và dán code cần hiển thị vào giữa. Chúc thành công !

<div class="codeview">
Đặt code vào tại đây
</div>


Chèn 1 box nhỏ hiển thị các bài liên quan vào bài viết cho blogspot

Bài viết sẽ hướng dẫn các bạn tạo 1 box nhỏ chứa các bài viết liên quan tới bài đang đọc (giống như trang vietnamnet.vn). Để tránh trùng lặp với tiện ích các bài liên quan ở phía dưới của bài viết, thủ thuật này mình sẽ dùng tiện ích các bài ngẫu nhiên từ nhãn để truy xuất cho box này.
Thủ thuật này chỉ hiện thị tốt nhất cho các bài viết có 1 nhãn , nếu 1 bài viết có nhiều nhãn thì các bài hiển thị trong box này cũng sẽ tăng theo. Ví dụ ta thiết lập cho 1 nhãn hiển thị trong box là 4 bài, thì với 2 nhãn ta sẽ có 8 bài.

Hình ảnh minh họa
Và đây là hình ảnh mình thực hiện cho blog test
* Bắt đầu thực hiện thủ thuật: 
1. Vào Thiết kế 
2. Vào Chỉnh sửa HTML 
3. Chọn Mở rộng mẫu tiện ích
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

    <script src='http://datacafe82.googlecode.com/files/rp-posts.js' type='text/javascript'/>
    <script type='text/javascript'>
    var maxEntries = 4;
    </script>
    <style type='text/css'>
    #rp-pre {
    float:right;
    width:150px;
    padding-left:10px;
    }
    #rp-content {
    border:1px solid #bbb;
    background:#eee;
    }
    #rp-title {
    text-align: center;
    background:#bbb;
    font-weight:bold;
    color:#F95107;
    margin:3px;
    padding-bottom:2px;
    }
    #rp-posts {
    position:relative;
    left:-20px;
    }
    #rp-posts a {
    background: url(http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif) no-repeat left;
    padding-left:13px;
    }
    #rp-posts ul li {
    list-style :none;
    }
    </style>

- Code : var maxEntries = 4; chính là số bài viết mà bạn muốn hiển thị cho 1 nhãn.
- Trong hình minh họa, box hiện thị ở bên phải, nếu bạn muốn nó hiển thị ở bên trái thì sửa code float:right; thành float:left;

5. Tiếp tục di chuyển xuống phía dưới trong code template, tìm đoạn code bên dưới:

    <data:post.body/>

6. Thêm đoạn code bên dưới vào trước dòng code vừa tìm được:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='rp-pre'>
    <div id='rp-content'><div id='rp-title'>Bài liên quan</div>
    <div id='rp-posts'/></div></div>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=getRandomPosts&amp;max-results=999&quot;' type='text/javascript'/>
    </b:loop>
    </b:if>7. Save template. 

* 1 lời khuyên nhỏ: 
- Khi chèn box vào bài viết (nằm bên phải) ta sẽ thấy các chữ sẽ không đều (nếu ta chưa chỉnh), như hình minh họa bên dưới: 

- Để khắc phục điều này bạn chỉ cần căn đều 2 bên cho khối văn bản này là được, và ta sẽ được kết quả như hình bên dưới: 


Tình Yêu Giới Tính

 

© Copyright New | Kiến thức -Thủ thuật - Giải pháp công nghệ 2010 -2011 | | Powered by Blogger.com.
Trang web này hổ trợ tốt nhất với trình duyệt Mozilla Firefox, Nếu không xem được trang web trong Internet Explorer, hãy thử laị với Mozilla Firefox