Tạo copyright và menu mini cuối blog cho Blogspot

Tạo copyright và menu mini cuối blog cho Blogspot

Share |

Mình cũng chỉ là tay ngang mới bước chân vào thế giới Blogspot, tập tành làm blog nên biết gì thì mình chỉ cái đó thôi.
Mã bài viết này mình lấy từ blog của mình và đem lên đây chia sẻ với các bạn thôi chứ ko phải do mình viết đâu, mã cũng tương đối đơn giản và dễ thao tác.
Đầu tiên là khi lấy một theme nào trên mạng đều có hiển thị bản quyền tác giả phía cuối blog, điều này có hơi hạn chế một xíu, có nhiều bạn sẽ ko thích, nên bước đầu tiên là cần phải ẩn hoặc xóa nó đi để blog để blog đẹp hơn một xíu và mang tính riêng của mình hơn. Nó sẽ có dạng như sau:


Vào Thiết kế -> Chỉnh sửa HTML, ko cần chọn Mở rộng tiện ích. Bấm Ctrl + F để tìm dòng chữ Attribution, sau đó bạn sẽ nhìn thấy đoạn mã sau:

<b:widget id='attribution1' locked='true' title='' type='attribution'/> </b:widget>

Xóa nó đi là Ok, hoặc ẩn nó bằng cách làm như sau:

<!--
<b:widget id='attribution1' locked='true' title='' type='attribution'/>
</b:widget>-->

Cuối cùng lưu lại và xem thử blog của bạn nha!

Tiếp theo là tạo menu mini cuối blog.


Vào Thiết kế -> Chỉnh sửa HTML, chèn đoạn mã sau vào trước thẻ ]]></b:skin>

#credits{
width:840px;/*độ rộng tiện ích*/
padding:10px 0px 5px 0px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHPx2phJC26OnJBoRyivSYADffkjJZhqkM-DXi0m5fvyz6-KAZa0PSY_d0QEWj1isJlMAtsLRNumXrdxch9oDELVi9k0QQZCKGznc95EKi7RDWy3ntjNtBu1hvOqLyK80fVR_XDpQTnug/s1600/80percentblack.png") repeat scroll 0 0 transparent;/*link màu nền tiện ích, ở đây là màu đen*/
position:relative;
font-size:13px;
border:1px solid #404040;/*màu chữ hiển thị ko có link liên kết*/
margin-left:180px;/*khoảng cách so với lề trái*/
height:30px;/*chiều cao tiện ích*/
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-moz-box-shadow:1px 1px 5px #000000;
}

#credits_left {
float:left;
padding-left:40px;
}

#credits_right {
float:right;
padding-right:20px;
}

#credits a {
color:#D54E21;/*màu chữ hiển thị khi có liên kết link*/
}

#credits a:hover {
font-color:#AA0000;/*màu chữ hiển thị khi click chuột*/
text-decoration:underline;
}

Tiếp tục thêm đoạn mã sau vào trước thẻ </body>

<div id='credits'>
<div id='credits_left'>
Copyright 2010 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>
<div id='credits_right'>
<p>
<a expr:href='data:blog.homepageUrl' title='Home'>Home</a> | <a href='Link_lien_ket_1'><span>Ten_link_1</span></a> | <a href='Link_lien_ket_2'><span>Ten_link_2</span></a> | <a href='Link_lien_ket_3'><span>Ten_link_3</span></a> | <a href='Link_lien_ket_4'><span>Ten_link_4</span></a> |

</p>
</div>
</div>

Save lại là xong rồi đó.

Note: các bạn chú ý khi điều chỉnh khoảng cách so với lề trái thì phải điều chỉnh luôn cả chiều rộng của tiện ích để có được khoảng cách đẹp nhất trên blog. Nếu thấy hay đừng quên để lại comment nha!


Nguồn:Kira Phan

Đọc thêm »

Trình chiếu nội dung và hình ảnh sử dụng jQuery

Trình chiếu nội dung và hình ảnh sử dụng jQuery

Share |

Mày mò, lụm lặt bữa giờ mới ra được cái mã trình diễn ảnh kèm nội dung sử dụng jQuery cực đẹp này, hôm nay xin chia sẻ với các bạn. Cùng làm ngay bây giờ nào!



Xem: Demo

Trước hết bạn chèn đoạn mã sau vào trước thẻ </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

(function($){
$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

Chèn tiếp đoạn mã sau vào trước thẻ ]]></b:skin>

#s3slider {
width: 620px;
height: 300px;
position: relative;
overflow: hidden;
margin-top: 17px;
margin-bottom: 10px;
*margin-bottom: 0px;
background:#ffffff;
border: 1px solid #000;

}
#s3sliderContent {
width: 620px;
height:300px;
background:#ffffff;
position: absolute;
top: -13px;
*top: 0px;
padding: 0px;
list-style:none;
margin-left: 0;
overflow: hidden;
}

.s3sliderImage {
float: left;
position: relative;
display: none;
}

.s3sliderImage span {
position: absolute;
right: 0;
font:Georgia, serif;
padding: 10px 13px;
font-size:12px;
width:180px;
height:300px;
*max-height:300px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
top: 0;
overflow: hidden;
}

.s3sliderImage strong a{
color:$titlecolor;
font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
font-size:20px;
}

Cuối cùng là tạo một HTML và dán đoạn mã sau vào:

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="Link_anh_1" />
<span><strong><a href="Link_lien_ket_1">Ten _anh_1</a></strong>

<p>Noi_dung_1</p>
</span>
</li>

<li class="s3sliderImage">
<img src="Link_anh_2" />
<span><strong><a href="Link_lien_ket_2">Ten _anh_2</a></strong>

<p>Noi_dung_2</p>
</span>
</li>

<li class="s3sliderImage">

<img src="Link_anh_3" />
<span><strong><a href="Link_lien_ket_3">Ten _anh_3</a></strong>

<p>Noi_dung_3</p>
</span>
</li>

<div class="clear s3sliderImage"></div>
</ul>
</div>

Tùy chỉnh Link cho phù hợp và Save

Nguồn: Nguyenlibra's blog

Đọc thêm »

Cách ẩn hiện chat box khá đẹp trên Blogger

Cách ẩn hiện Chat Box khá đẹp mắt trên Blogger

Chat Box là một công cụ giúp người đọc qua Blog của bạn có thể để lại những lời nhắn, thông điệp hoặc trao đổi thông tin với nhau. Tại trang Shoutmix chúng ta có thể đăng ký để tạo một Chat Box như vật khá dễ dàng.

Thủ thuật sau đây giúp ẩn hiện Chat Box và giúp tiết kiệm không gian Blog của bạn đồng thời làm cho diện mạo Blog trông đẹp mắt hơn.

Xem Demo.

Để thực hiện thủ thuật này, bạn chỉ cần đặt toàn bộ đoạn code sau đây vào trong một tiện ích HTML/JavaScript trên Blogger.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://farm3.static.flickr.com/2636/3935353655_32c6d2bb30_o.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #990000;
background:#F5F5F5;
padding:7px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<iframe title="abcdXXXX" src="http://www4.shoutmix.com/?abcdXXXX" width="200" height="360" frameborder="0" scrolling="auto"></iframe>
<div style="text-align:right">
<a href="javascript:showHideGB()" style="font-size:11px">
<b>x</b> Đóng lại
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
</div>
<div class='clear'></div>

Chú ý: đoạn code giữa 2 thẻ <iframe>, </iframe> chính là code mà bạn lấy từ Shoutmix và thay abcdXXXX bằng id trên Shoutmix của bạn

Nguồn:Huynh Nhat Ha

Đọc thêm »

Phân trang cho Blogspot

Phân trang cho blogspot

Share |

Hôm nay mình xin giới thiệu cho các bạn một thủ thuật phân trang cho blogspot, cực kì đơn giản và dễ thực hiện chỉ trong 5 bước.




1. Đăng nhập vào tài khoản blogspot
2. Vào thiết kế (Design) chọn chỉnh sửa HTML (Edit HTML)
3. Chọn mở rộng tiện ích
4. Tìm thẻ sau:

<b:include name='nextprev'/>

5. Chèn đoạn mã sau vào dưới thẻ trên:

<!-- start pagutd - blogger pagging script - code by vietutd dot com
http://pagutd-script.vietutd.com/
-->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.pagutdnav li {
list-style-type: none;
display: inline;
}
.pagutdnav a {
border:1px solid #ef8116;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.pagutdnav a:hover {
background-color:#ef8116;
border:1px solid #ef8116;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#ef8116 none repeat scroll 0 0;
border:1px solid #ef8116;
color:#ffffff;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.pagutdnav a:link {
color:#333333;
text-decoration:none;
}
.pagutdnav a:link:hover {
color:#ffffff;
}
</style>
<span style='float:right;margin:0;padding:0;border:0;'><a style='margin:0;padding:0;border:0;' href='http://pagutd-script.vietutd.com/'><img alt='Pagutd - Pagging Script for Blogger Blogs by Vietutd Dot Com' src='http://sites.google.com/site/vietutd/pixel.png' style='margin:0;padding:0;border:0;display: none;'/></a></span>
<script type='text/javascript'>
var home_page = &quot;<data:blog.homepageUrl/>&quot;;
var div = document.getElementById(&quot;blog-pager&quot;);
var atag = div.getElementsByTagName(&quot;a&quot;);
var pager_max_main = (atag[atag.length-1].href.indexOf(&quot;max-results=&quot;)==-1) ? atag[atag.length-2].href.substring(atag[atag.length-2].href.indexOf(&quot;max-results=&quot;)+12,atag[atag.length-2].href.length) : atag[atag.length-1].href.substring(atag[atag.length-1].href.indexOf(&quot;max-results=&quot;)+12,atag[atag.length-1].href.length);
var sub_nav_half = 3;
var pager_first_text = &quot;First&quot;;
var pager_last_text = &quot;Last&quot;;
var pager_pages_text = &quot;Pages&quot;;
</script>
<script src='http://vietutd-js.googlecode.com/files/pagutd-bver.js' type='text/javascript'/>
</b:if>
<!-- end pagutd - blogger pagging script - code by vietutd dot com
http://pagutd-script.vietutd.com/
-->

6. Save lại và xem kết quả.

Nguồn: Vietutd.blogspot

Đọc thêm »