Hà Nam Thủ Thuật: blogger

Cách tiến hành ẩn bài viết ở trang chủ!
Trước tiên thực hiện bạn phải xác định id của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1".Với một số blog có thể khác. Các bạn xác định theo các bước bên dưới:
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) Tìm đoạn code tương tự như dưới:

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

- Trường hợp này Id là Blog1 (phần màu đỏ). Sau khi xác định đc id này, ta thực hiện các bước tiếp theo:
4- Chèn đoạn code bên dưới vào sau dòng code ]]></b:skin>
<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {
display:none;
visibility:hidden;
}
</b:if>
</style>
- Lưu ý: Nếu Id blog của bạn không phải là blog1 thì hãy thay blog 1 thành tên Id blog của bạn nha.

Ẩn bài viết từng label khi view từng nhãn.
-xác định id của widget (label)-HTML1
-Tìm đoạn code tương tự:
</b:widget>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

-Thêm dòng code <b:if cond='data:blog.url==data:blog.homepageUrl'> dưới dòng <b:includable id='main'> và </b:if> trước dòng </b:includable>.

</b:widget>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url==data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>

</b:widget>
g

Đọc tiếp...

Xem bài viết trên phiên bản di động

Đầu tiên bạn chèn đoạn CSS sau phía trên ]]></b:skin> trong template:

#PopularPosts1{max-width:300px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
Tiếp theo, bạn tạo một tiện ích bài đăng phổ biến (nếu trong blog đã có tiện ích Popular Posts thì bỏ qua bước này), rồi chỉnh như sau:

Cuối cùng, bạn vào phần chỉnh sửa HTML, không click mở rộng tiện ích, tìm đoạn sau:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
Thay thế nó bằng đoạn sau:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<dd>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Lưu lại mẫu và kiểm tra kết quả.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Tiếp theo các thủ thuật về "tiện ích các bài viết mới" thì hôm nay mình chia sẻ cùng các bạn một cách trình diễn các bài viết dạng slide trông rất hấp dẫn và mượt mà dành cho blog. Nhược điểm của tiện ích này là sử dụng nhiều file JS nên có thể load hơi chậm, tuy nhiên đổi lại thì các bài viết của bạn được trình diễn đẹp hơn. Ở tiện ích này sẽ được tích hợp các nút như Next, Previous và nút Stop/Play các bài viết. Ở đây mình không chỉ cung cấp cho các bạn một kiểu hiệu ứng cho tiện ích này mà mình sẽ cung cấp một vài kiểu hiệu ứng cho bạn lựa chọn, bạn có thể xem demo để thấy trực quan hơn.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script language="javascript" type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/Jquery.min.1.5.1.js"></script>
<script language="javascript" type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.easing.1.3.js"></script>
<script language="javascript" type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/script.js"></script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.main-slider{width:414px; /*độ rộng của phần bên trái*/
height:300px; /*chiều cao của phần bên trái*/
border-right:#ccc solid 1px;}
.lof-slidecontent { width:710px; /*độ rộng của cả tiện ích*/
height:300px; /*chiều cao của cả tiện ích*/
background:#eee;position:relative; overflow:hidden; border:#ccc solid 3px;}
.preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.preload div{ height:100%;width:100%; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicMptDcI8g2gYcgcavhbJ_Sn0o77hikvleRbueAa07_DENGCzejI6icz2F6Q12RxKl5gguUqGTVNMWo2lsoDO5NshAslTGeXsOxSmB6F9hl4eKqH_GYXT0wSnh_7za5dk3iHjR0uYfmXU/s16/load-indicator.gif) no-repeat scroll 50% 50%;}
.sliders-wrapper{position:relative; height:100%; z-index:3px; overflow:hidden; }
ul.sliders-wrap-inner{overflow:hidden; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicMptDcI8g2gYcgcavhbJ_Sn0o77hikvleRbueAa07_DENGCzejI6icz2F6Q12RxKl5gguUqGTVNMWo2lsoDO5NshAslTGeXsOxSmB6F9hl4eKqH_GYXT0wSnh_7za5dk3iHjR0uYfmXU/s16/load-indicator.gif) no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; overflow:hidden;}
ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;}
ul.sliders-wrap-inner li img{ padding:0px;
width:414px; /*độ rộng của ảnh bên trái*/
height:300px; /*chiều cao của ảnh bên trái*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:400px; /*độ rộng của phần mô tả hay phần tóm tắt nội dung*/
background:#000;
height:100px; /*chiều cao của phần mô tả hay phần tóm tắt nội dung*/
padding:0px 8px 5px 8px;
color:#fff;
opacity:0.8;
line-height:1.5em;
}
ul.navigator-wrap-inner h2,.slider-description h2{background:none; }
.slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;}
.slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff}
.navigator-content {position:absolute;right:0;top:0px;z-index:9;height:300px;color:#FFF
}
ul.navigator-wrap-inner h2{line-height:1.3em;padding:0 0 0 8px;font-size:14px;margin-left:85px;color:#fff;}
.navigator-wrapper{ z-index:10;
height:180px; /*chiều cao của list bài viết bên phải*/
width:310px; /*độ rộng của list bài viết bên phải*/
overflow:hidden;
color:#FFF;
}
ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
ul.navigator-wrap-inner li{ cursor:hand; cursor:pointer; list-style:none; padding:0; margin:0px; overflow:hidden; display:block; text-align:center;}
ul.navigator-wrap-inner li.active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpK3BdBZzg7eg12uNSfTTD3jr7DbXchiDzx3RYvme4U0zPxlWAL1j_j0yZMwKr_o4apHtLfIHl-fdS-AOH604g-8Lc73b6kzk6o5_YeKlYc5awvlPg-B_kQ5eKMmYiLntsOWftzeKgRP0/s38/arrow-bg.png) no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner li.active div{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98qc5tUYEP5ElT7SU2KTLiyrBNdM4yL0cBixyQpyMPqiYSb0gSyqHZR5BiU41GHS5NEAto-OIStQYe4unlJfodQ9HFJUnCYFei864Q_PrTdlcUyFhdxSCnSori4ofbJv-mUDU5PEaW4E/s100/grad-bg.gif);
color:#FFF;}
ul.navigator-wrap-inner li > div{
background:#333;
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.navigator-wrap-inner img{
height:75px; /*chiều cao của ảnh thumb ở list bài viết bên phải*/
width:75px; /*độ rộng của ảnh thumb ở list bài viết bên phải*/
margin:8px 8px 8px 0px;
float:left;
padding:2px;
border:#C5C5C5 solid 1px;
}
.button-next,
.button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.button-next {
right:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkM3K62DRQ3-JNvtAaXZHxgOtg8B1chbPl9_E3ODqJpbZVBq0UgiCXR6fnDxVNM-Onq018CD8W-u27bgOd8C5kBRv8q292_I4KempiaL8XyRVRsiwisUKsI7xsJ4Kn2ajTk5Xq-X3zpM/s38/next.png) no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6dOUStGeAVX77dgo4GvAT-TH9UPR4biQehkPL8gNQotU8SS096JBf5kbXmP21AshCfAtO3nznKAFjQJ8WYVUPq4QZam8IfAW6niXBhl-uG7WmULQb0k5rr0d2Won7b8ioZfFF4zRkRU/s38/previous.png) no-repeat left center;
}
.button-control {
background:#333;
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
}
.button-control span { display:block; width:100%; height:100%;}
.action-start span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf0vBqaanekKTAoTwo0CLmzc1_doWyoWCEmgkbXgPvETi6J7cB5gOPYO_athw9k9qK4IajN4kRGGv1Dx7CK1Lzs03uTzMLVCGFWBT_MTJw_lLHtXH4qbWv_xDAvelJ-9_7cJV76aX-BPg/s16/play.png) no-repeat center center;
}
.action-stop span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE8WG1Vpg-iPaUEHZtUs4kq0wgs5LEioae6hzqnrLc2KNjBQLqXSo4dBeJi2trKbuc01l_InPlo4aAeH4uHlUSgAYXXPWtSRXB25bi1MIlAufq0m30GctyfELx5Z7zvuQaudVNu924_y8/s16/pause.png) no-repeat center center;
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<script type="text/javascript">
$(document).ready( function(){
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeOutBounce', // tên hiệu ứng
duration:1200,
auto:true,
mainWidth:414, //độ rộng của phần trình diễn bên trái
mainHeight:300, //chiều cao của phần trình diễn bên trái
navigatorHeight : 100, //chiều cao của list bài viết bên phải
navigatorWidth : 310, //độ rộng của list bài viết bên phải
maxItemDisplay:3,
buttons:buttons});
});
summaryposts = 30; //số ký tự của nội dung phần mô tả
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn của blog bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div id="jslidernews" class="lof-slidecontent">
<script src="http://data-traidatmui.appspot.com/scripts/jqslidernews.js" type="text/javascript">
</script></div>

- Ở trên mình chọn kiểu hiệu ứng là (easeOutBounce), bạn có thể chọn kiểu trình diễn khác bằng cách thay (easeOutBounce) thành một trong các tên sau: easeInOutExpo, easeInOutQuad.
- Ở trên mình cho tiện ích hiển thị tất cả bài viết trên blog không theo từng nhãn riêng nên bạn không cần quan tâm đến phần (label = "Advanced blogger";), phần đó mình thêm phụ để bạn nào muốn hiển thị theo nhãn thì sẽ phải quan tâm đến biến này. Để hiển thị theo từng nhãn riêng biệt thì bạn cần thay file JS bên dưới

http://data-traidatmui.appspot.com/scripts/jqslidernews.js

thành file JS sau
http://data-traidatmui.appspot.com/scripts/jqslidernews_label.js

Bạn nhớ sửa tên nhãn (Advanced blogger) lại cho đúng với tên nhãn mà bạn muốn hiển thị cho blog của bạn.

8. Cuối cùng bạn save tiện ích lại là xong.

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

nguồn traidatmui.com

Đọc tiếp...

Xem bài viết trên phiên bản di động

Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger

2. Vào phần thiết kế (Design)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chèn code bên dưới vào sau thẻ <head>

function Outcat(q){$("#neocat-"+q+" ul.dpost").find("li").hide();$("#neocat-"+q+" ul.dpost").find("li:eq(0)").show()}

</script>

<style>

.first_post {font-family:arial;font-size:12px;color:#333;line-height:1.5em;}

.first_post {line-height:1.5em;}

.first_post img{width:150;height:100px;float:left; margin-right:10px; padding:2px; border:solid 1px #DEDEDE;}

.first_post h2{line-height:1.3em;font-size:14px;font-weight:bold;margin:0 0 5px;}

.first_post h2 a{color:#034c91}

.first_post h2 a:hover{color:#333}

.readm a{

color:#f00;

font-size:12px;

margin-right:10px;

margin-top:8px;

float:right;}

.readm a:hover{

color:#766162;}

.repost{

color:#3366ff;

font-family:arial;}

.repost a{

color:#000066;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5OxWMqnoHM_XBdpTSm0hD2D_J3e4Oqe4L-83rrfl9rgsjSbsW1MV79yjsEVvfRyO6VPAEzHqTnP_EO5_XCYwvMMCsdBFJBBgThkuKWe6dHItbC2noWe0wLYQkT4K5xQR_bkZKLe8DjRIC/) no-repeat left;

padding-left:10px;}

.repost a:hover{

color:#bf9798;}

.tab {

font-size:13px;

padding:0px 5px 5px 5px;

width:550px; /*độ rộng của bài viết*/

}

.dpost a{

padding:0 2px;

font: 11px/22px Arial;

color:#000;

float:left;

height:20px;}

.dpost li{

float:left;

height:20px;

overflow:hidden;}

.dpost li.active{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghWYXRYdL7uJ5TWcLtjvAysEGfEEFcvgkSoqbc8BhdqsgQfFlXQOC-uANXIOP5Wmjk-Uodw4CGDbWTLaKva0aAYzH_2WpAo7JBNNVh52nZRW1xkumjaGS52emaSm4LERMFLDCU1yKCA1xm/) right no-repeat; /*màu nền của chủ đề chính */

position:relative;

top:1px;

}

.dpost li.active a{

font-size:10px;

font-weight:bold;

color:#fff;

text-transform:uppercase;

padding-right:25px;}

.iframpost{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3H3dEyGgpiEuzQd6OqE3OfZjEML13h63uAFs1x2Y1gDZkEXEfLLVUOBCBM2TWNY6EJXA7tyMhm2nb3dKofIm5fcFjhga2Ab4QmSm_wwDoxTpF-MrrqN59nnRM3coebcW3olUe4vLiMOVq/) no-repeat; /*màu nền của tiện ích*/

height:25px;

}

*{margin:0;padding:0px 0px 0px 0px;}

</style>

5. Save template lại và trở về phần tử trang (Page Elements)

6. Thêm 1 HTML/Javascript và thêm vào code bên dưới.

imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = false;

showPostDate = false; //Nếu muốn hiển thị ngày đăng bài bạn thay FALSE thành TRUE

summaryPosts = 350; // số kí tự hiển thị ở phần mô tả

dtnumposts = 4; //số bài viết hiển thị trong phần bài viết liên quan

dthome_page = "http://www.traidatmui.com/"; //Thay thành địa chỉ blog của bạn

</script>

<li class="active"><a href="#">Thủ thuật blogger</a></li>

<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao | </a></li>

<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản | </a></li>

</div>

dtlabel = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị

document.write("<script src=\""+dthome_page+"feeds/posts/default/-/"+dtlabel+"?max-results="+dtnumposts+"&orderby=published&alt=json-in-script&callback=dtposts\"><\/script>");</script>

</div>

Bạn chỉ việc chỉnh sửa lại code theo các hướng dẫn trong code.

7. Cuối cùng save tiện ích lại là xong

Mở rộng thủ thuật

Để lặp lại tiện ích cho các nhãn khác trên blog của mình thì bạn chỉ cần lặp lại đoạn code như bên dưới và chỉnh sửa phần số màu đỏ lại cho phù hợp

<li class="active"><a href="#">Thủ thuật blogger</a></li>

<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao | </a></li>

<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản | </a></li>

</div>

dtlabel = "Templates"; // Thay thành tên nhãn bài bạn muốn hiển thị

document.write("<script src=\""+dthome_page+"feeds/posts/default/-/"+dtlabel+"?max-results="+dtnumposts+"&orderby=published&alt=json-in-script&callback=dtposts\"><\/script>");</script>

</div>

nguồn: traidatmui.com

Đọc tiếp...

Xem bài viết trên phiên bản di động

nguồn traidatmui.com

Đọc tiếp...

Xem bài viết trên phiên bản di động

Đối với các blog riêng tư, không muốn chia sẽ cùng mọi người thì việc liên kết không đáng quan tâm. Tuy nhiên đối với các blog phục vụ công chúng thì việc muốn được nhiều người biết đến blog mình là điều rất quan trọng. Một trong những cách làm cho đọc giả tìm đến blog là liên kết với các blog khác có cùng chủ đê. Khi liên kết của bạn quá nhiều nó sẽ chiếm một không gian đáng kể trên nền blog của bạn, để giảm thiểu việc này bạn có thể cho nó chạy ngang hoặc dọc trên blog của bạn. bạn có thể tham khảo cách tạo logo liên kết chạy ngang từ trái sang phải bên dưới (Theo yêu cầu của bạn Libra)

DEMO

1. Đầu tiên bạn hãy đăng nhập vào tài khoản Blogspot
2. Tiếp đến vào bố cục (Thiết kế)
3. Tạo 1 phần tử HTML/Javascript 4. Thêm code bên dưới vào phần tử vừa tạo trên

<div style="background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy1k2ZoB4R7AjToWbQAUCFozyMQFybxXaiQzVidagnDBVXEcVqNBjNPw13Ptjx0v6sETJHcKhZF4W6QD3jT7XuV4tGOr2X8XlrRNW05luzAE88uMH29772WAt-3w5uux5Hakxf42aQfSmr/) no-repeat left; border-top:#999 1px solid; border-bottom:#999 1px solid; padding-left:19px;padding-right:2px;width:100%;">
<marquee onmouseout="this.start()" direction="left" behavior="50" scrollamount="5" height="60" onmouseover="this.stop()" scrolldelay="50" width="511">
<a href="URL liên kết 1" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 1"/> </a>
<a href="URL liên kết 2" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 2"/> </a>
<a href="URL liên kết 3" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 3"/> </a>
<a href="URL liên kết 4" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 4"/> </a>
<a href="UR Lliên kế 5" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 5"/> </a>
</marquee></div>

Tùy chỉnh: Bạn hãy thay các dòng text màu đỏ trong code thành địa chỉ blog bạn liên kết và các dòng màu xanh thành địa chỉ logo tương ứng.
Ở đây mình chỉ cho 5 logo chạy ngang từ trái sang phải nếu muốn thêm nhiều hơn bạn chỉ việc thêm code bên dưới vào sau các logo trên và sửa lại cho phù hợp.

<a href="UR Lliên kế 6" target="blank" ><img style="width: 220px; height: 60px;" src="Link logo 6"/> </a>

5. Việc cuối cùng là bạn tìm vị trí thích hợp để đặt nó là xong.

Theo traidatmui.com

Đọc tiếp...

Xem bài viết trên phiên bản di động

Trước đây mình đã giới thiệu các bạn một bài viết về cách post video youtube dạng list, tuy nhiên với thủ thuật trước thì bên dưới video là ảnh thumbnail của các các video liên quan, điều này khó cho người dùng khi xem video. Điều đó sẽ gây khó khăn khi chúng ta post quá nhiều video trong list thì người dùng sẽ khó biết họ đang xem video nào? Với thủ thuật này thì chúng ta sẽ khắc phục được vấn đề đó và hơn nữa nó sẽ linh hoạt hơn, bạn có thể đặt chúng ở bất kì đâu trên blog, bạn có thể đặt ngay trên sidebar của blog, khi click vào các video ở list thì nó sẽ không phải rời khỏi trang blog của bạn. Bạn có thể xem demo để thấy rỏ hơn công dụng của thủ thuật này.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<style>
#ytplay {margin:0;padding:0 0 2px 0;border-bottom:1px solid #ccc;}
।yt-container {color:#333;line-height:1.5;font-size:12px;font-family:arial;background:#eee;
width:300px; /*độ rộng của tiện ích*/
border:1px solid #ccc;}
.yt-container ul{list-style-type:none;border-top:1px solid #fff;margin:0;padding:5px;height: 108px; overflow: auto;}
.yt-container ul li a{background:url(https://lh5.googleusercontent.com/-Fm9icK415H8/TzDtraRfvsI/AAAAAAAABro/HBht2Fug_g8/s15/pl.gif) no-repeat;color:#222;padding:0 0 0 19px;}
.yt-container ul li a:hover{background:url(https://lh4.googleusercontent.com/-HHQGhqe9Yv0/TzDuINfTfsI/AAAAAAAABsA/tru7N9t_6-k/s15/hoverpl.gif) no-repeat;color:#036b5d}
.yt-container ul li.currentvideo a{font-weight:bold;color:#c20404; background:url(https://lh4.googleusercontent.com/-PFFQGfP_K_c/TzDvEJJ3iSI/AAAAAAAABsY/yiIfVgwKneI/s15/cur.gif) no-repeat;padding:0 0 0 19px;}
</style>

<script src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.youtubeplaylist.js"></script>
<script type="text/javascript">
$(function() {
$("ul.ytlist").ytplaylist({
playerWidth: 300, //độ rộng của video
playerHeight:175, //chiều cao của video
addThumbs: false,
thumbSize: 'small',
showInline: false,
showRelated: true,
allowFullScreen: true,
autoPlay: true, holderId: 'ytplay'});
});
</script>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div class="yt-container">
<div id="ytplay"></div>

<ul class="ytlist">

<li class="currentvideo"><a href="http://www.youtube.com/watch?v=nQYlLlSo73s" class="yt-vid">Phim "Nợ đa tình" - 1a</a></li>
<li><a href="http://www.youtube.com/watch?v=I0K7Pw34n5A&feature=related" class="yt-vid">Phim "Nợ đa tình" - 1b</a></li>
<li><a href="http://www.youtube.com/watch?v=Il205mA-en0&feature=related" class="yt-vid">Phim "Nợ đa tình" - 1c</a></li>
<li><a href="http://www.youtube.com/watch?v=pAm2ts1lafQ&feature=related" class="yt-vid">Phim "Nợ đa tình" - 2a</a></li>
<li><a href="http://www.youtube.com/watch?v=WzqFohS16xE&feature=related" class="yt-vid">Phim "Nợ đa tình" - 2b</a></li>
<li><a href="http://www.youtube.com/watch?v=vVvZhfjoKyU&feature=related" class="yt-vid">Phim "Nợ đa tình" - 2c</a></li>
<li><a href="http://www.youtube.com/watch?v=M7Bq_Fx6ezU&feature=related" class="yt-vid">Phim "Nợ đa tình" - 3a</a></li>
<li><a href="http://www.youtube.com/watch?v=pL9WlXtqrYA&feature=related" class="yt-vid">Phim "Nợ đa tình" - 3b</a>
</li> <li><a href="http://www.youtube.com/watch?v=KIb5ubk5L74" class="yt-vid">Phim "Nợ đa tình" - 3c</a></li>

</ul></div>

Bạn chỉ cần thay các link video bên trên thành link video (màu tím) và tên của video đó tương ứng (in đậm) mà bạn muốn hiển thị trong tiện ích này.

7. Save tiện ích lại là xong.

nguồn traidatmui.com

Đọc tiếp...

Xem bài viết trên phiên bản di động

Để tối ưu việc post video có nhiều phần trong blog, mình chia sẻ cùng các bạn thủ thuật tạo Video List, tức là chúng ta sẽ liệt kê các video thành dạng list trông sẽ gọn ràng và nhẹ hơn việc bạn post nhiều code trong cùng một bài viết. Các video sẽ chạy với chương trình của Youtube và danh sách các phần tiếp theo sẽ được liệt kê bên dưới bạn chỉ cần click vào ảnh thumbnail bên dưới là có thể xem phần tiếp theo.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script language="javascript" src="http://traidatmui-tips.googlecode.com/files/videoyoutube_list.js"></script>
<style type="text/css">
.myYoutubePlaylist_YoutubeMovie, .myYoutubePlaylist_YoutubePlaylist {
display:block;
}
.myYoutubePlaylist_Img {
width:64px; /*độ rộng ảnh thumb*/
height:60px; /*chiều cao ảnh thumb*/
overflow:hidden;
margin-left:3px;
border:1px solid #fff;
padding:2px ;
}
</style>

5. Save templates lại

Như vậy là bạn đã cài đặt chương trình video vào template, bây giờ là đến việc đăng bài của bạn. Sau này nếu bạn muốn post video từ Youtube thì bạn chỉ cần lấy mã Video đó và thay thế nó vào code bên dưới.

<div class="myYoutubePlaylist"><div id="myYoutubePlaylist_0ipWJzkUoMI" class="myYoutubePlaylist_YoutubeMovie"></div><center>
<div class="myYoutubePlaylist_YoutubePlaylist" id="myYoutubePlaylist_YoutubePlaylist_0ipWJzkUoMI"></div></center></div><script language="JavaScript" type="text/javascript">myYoutubePlaylist_cy('0ipWJzkUoMI','myYoutubePlaylist_0ipWJzkUoMI');myYoutubePlaylist_dl('0ipWJzkUoMI, SEFMQfPlC6E, 2GCcVm30Qvo','myYoutubePlaylist_YoutubePlaylist_0ipWJzkUoMI','myYoutubePlaylist_0ipWJzkUoMI');</script>

Phần mã màu đỏ (0ipWJzkUoMI) ở trên chính là mã video đầu tiên hay đó là phần 1, và các mã màu xanh là mã video các phần tiếp theo, nếu có nhiều hơn bạn chỉ việc thêm mã tương ứng, mỗi mã cách nhau bằng dấu phẩy (,) và mã cuối cùng không có dấu phẩy.

Bạn sẽ lấy mã của video trên Youtube bằng cách mở xem video đó và nhìn lên thanh địa chỉ bạn sẽ thấy, ngoài ra bạn còn nhiều cách lấy mã video khác bạn tìm hiểu thêm.
Bạn lấy mã video xong thay thế vào code trên và post bài nó sẽ tự động gọi chương trình chạy video youtube cho bạn.

Lưu ý: Bạn phải đặt code bên chế độ HTML khi post bài.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Thông thường trên một blog/web có chứa rất nhiều tiện ích ở sidebar, footer... nếu bạn đặt tiện ích theo kiểu thông thường, tức là các tiện ích đặt nối tiếp nhau thì sẽ làm cho trang blog của bạn trở nên dài và load khá chậm. Cách để bạn có thể khắc phục chính là bạn gom các tiện ích là và đặt chúng thành từng tab, điều này sẽ giúp site của bạn ngắn gọn và người dùng dễ dàng xem được các tiện ích trên blog của bạn thông qua các tab đó. Chủ đề về tạo Tab chứa nội dung thì mình trước đây đã chia sẻ cùng các bạn một số bài, tuy nhiên các thủ thuật trước thì thường nội dung của từng tab lại được thêm vào trong thẻ <div> </div>. Thủ thuật hôm nay mình chia sẻ cùng các bạn cách tạo các Tab nội dung từ những tiện ích có sẵn trên blog của bạn. Nói dễ hiểu là thủ thuật này sẽ tự động gom các tiện ích có sẵn trên blog của bạn chỉ cần bạn chỉ định số lượng tiện ích cần gom và điều kiện là các tiện ích có tiêu đề thì mời có thể gom vào trong tab.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/Jquery.min.1.5.1.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3 //số tab bạn muốn gom
});
});
</script>
<style type='text/css'>
.tabber {
padding: 0px !important;
border: 0 solid #687979;}
.tabber h2 {
float: left;
color:#333;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #ccc;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #fff;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;}
html .tabber h2.active {
background: #eee;
border-bottom: 1px solid #eee;}
.tabber .widget-content {
border: 1px solid #ccc;
padding: 10px;
clear:both;
background: #eee;
margin:0;}
</style>

5. Save template lại và trở về phần tử trang (Page Elements)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id='codeholder'><a href="http://www.bloggersentral.com"></a></div>

Bạn nhớ đặt tiện ích này trước các tiện ích mà bạn muồn gom lại vào tab và các tiện ích muốn gom nên đặt liên tiếp kế nhau.

Đọc tiếp...

Xem bài viết trên phiên bản di động

☼ Bắt đầu thủ thuật

1. Đầu tiên đăng nhập vào blog của bạn
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>

4. Save template lại
5. Bây giờ bạn hãy thêm 1 HTML/Javascript và dán code bên dưới vào

Chỉnh code:
- Bạn hãy dựa vào các dòng chữ màu xanh lá ở trên để chỉnh sửa màu nền và text theo ý bạn
- Những dòng màu đỏ đậm trong code trên chính là tên của các thư mục chính, bạn hãy thay đổi cho phù hợp với blog của bạn.
- Code màu xanh dương là tên của những thư mục con cấp 1 của menu chính
- Code màu xanh nhạt là tên của thư mục con cấp 2 của thư mục chính
- Code màu cam là thư mục con cấp 3 của thư mục chính, bạn hãy sửa tên các thư mục trên cho phù hợp với blog của bạn.
- Thay các dấu "#" thành những đường dẫn tương ứng với tên của thư mục

Ở trên mình chỉ giới thiệu cho bạn tạo 7 thư mục, bạn có thể thêm nhiều hơn hoặc bớt đi tùy ý. Nhưng bạn cần phải lưu ý khi xóa đi hoặc thêm vào thư mục nào thì phải kiểm tra lại thẻ đóng của chúng cho phù hợp.

Cách tạo menu con: ví dụ bạn muốn tạo thư mục con cấp 2 cho thư mục "Download" tại thư mục Sub Item 2.2 thì bạn làm như bên dưới:

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.2.2</a></li>
</ul>
</li>
</ul></li>

Bạn muốn tạo cho các thư mục khác thì làm tương tự, chú ý các thẻ <li>, <ul> đóng chúng cho phù hợp.

Nếu muốn thêm thư mục không cần có thư mục con bạn chỉ việc thêm code như bên dưới và vị trí bạn muốn. ví dụ thêm như mục "Cộng cụ" vào sau thư mục "Học tập" bạn làm như sau:

6. Save lại
Chúc bạn thành công

nguồn : http://www.traidatmui.com

Đọc tiếp...

Xem bài viết trên phiên bản di động

☼ Tiến hành thủ thuật

1. Đăng nhập vào blogger
2. Vào bố cục chọn chỉnh sửa HTML
3. Thêm đoạn mã bên dưới vào sau thẻ <head>

4. Tiếp theo bạn hãy tạo 1 HTML/Javascript và thêm vào code bên dưới

Hướng dẫn sử code:
- Các bạn hãy dựa vào các code màu xanh lá hướng dẫn ở trên để chỉnh sửa lại cho phù hợp với blog của mình.
- Code màu cam chính là tên của các thư mục chính
- Code màu nâu là tên của các thư mục cấp hai
- Code màu xanh nhạt chính là tên của thư mục cấp 3
- Code màu xám xanh là tên các thư mục cấp 4
- Bạn hãy chỉnh sửa dấu "#" trong code thành các đường link tương ứng với các tên của thư mục. Ở đây mình chỉ tạo mẫu cho các bạn 10 thư mục, nếu blog bạn có nhiều nội dung thì có thể thêm nhiều thư mục hơn. Ví dụ bạn muốn thêm thư mục 11, 12 thì chỉ việc thêm code bên dưới vào sau thư mục thứ 10 trong code và chỉnh sửa chúng lại tương tự như các thư mục trên.

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

nguồn : http://www.traidatmui.com

Đọc tiếp...

Xem bài viết trên phiên bản di động

☼ Cách thực hiện thủ thuật

1. Đầu tiên hãy đăng nhập vào tài khoản Blogger
2. Vào bố cục và thêm phần tử HTML/Javascript
3. Chèn đoạn mã bên dưới vào phần tử tiện ích trên

- Tùy chỉnh:
+ Code màu tím dùng để chỉnh sửa phần mô tả cho các bài viết liên quan khi rê chuột vào link
+ Code màu xám dùng để chỉnh sửa màu của text của bài viết tóm tắt
+ Code màu đỏ dùng để chỉnh sửa màu chữ phần bài viết liên quan

Bạn hãy dựa vào những chú thích trong code để chỉnh sữa màu chữ, màu nền, kích cỡ... cho phù hợp rồi save lại.

» Cập nhật ngày 07/10/2011

Các bạn thấy ở thủ thuật trên có một nhược điểm đó là bài viết bị lặp lại, bài viết đầu tiên sẽ lặp lại ở phần link bài viết liệt kê bên dưới và một nhược điểm khác là sử dụng 2 file JS. Điều này sẽ phần nào ảnh hưởng tới độ load của trang blog của bạn. Để khắc phục 2 nhược điểm trên mình xin chia sẻ file JS của thủ thuật này để bạn sử dụng. File dưới đây đã khắc phục được lỗi trên tránh tình trạng lặp lại bài viết. Bạn chỉ việc thay 2 file JS ở trên thành code bên dưới là xong

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

nguồn : http://www.traidatmui.com

Đọc tiếp...

Xem bài viết trên phiên bản di động

Hà Nam Thủ Thuật

DEMO

Ghost Window

Bài viết xem nhiều

Tên nhãn