Tạo StickyBar nổi Với Facebook Like và nút Google+

Đăng bởi Admin | 15/10/13 | 0 nhận xét

Stickybar MBT chỉ là một phiên bản tùy chỉnh của hello thanh nhưng nó không có quảng cáo và có thể dễ dàng được theo kiểu và tùy chỉnh để pha trộn mẫu blog của bạn. Vì nó luôn luôn là tốt hơn để có các vật dụng riêng của bạn do đó chúng tôi thiết kế thanh này dễ dàng mà dính vào phía trên cùng của blog hoặc trang web của bạn để lấy sự chú ý của tất cả du khách. Cả các plugin xã hội sẽ giúp bạn tăng fan hâm mộ của bạn sau. Facebook nút như sẽ được liên kết với trang fan hâm mộ của bạn để bất kỳ như có thể trở thành một Fan.

Thêm Stickybar vào Blogger

Nếu bạn là người mới ở đây thì vui lòng đọc các phiên bản trước đây của tôi đầu tiên để bạn có thể có một ý tưởng rõ ràng về cách tiện ích này hoạt động và làm thế nào bạn có thể tùy chỉnh nó. Vui lòng có một cái nhìn vào họ:

Thực hiện theo các bước đơn giản sau:

Về Blogger> Thiết kế> Chỉnh sửa HTML
Sao lưu mẫu của bạn
Tìm kiếm này

]]></b:skin>

4. Ngay phía trên nó dán mã CSS sau đây:

/*MBT Stickybar*/

#mbt_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK5Mkex9VE2ZcDsxtPJXgg51F3WRkghHaPmUNBzH7JdP14uVgy7VS00PclhqmxSpn2LTrmFhXVFl8SFUdnXx1ZrATbs2IKJPB1PtIoFxhq5tAmpYbkaehCN1b0X9fkgWjmHuenvgLbeyg/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:3px 0 0 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:12px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
margin-right: 6px;}

Tìm kiếm tiếp theo cho </ head> và dán đoạn mã Javascript sau ngay phía trên nó:

<script type='text/javascript'>
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>

6. Sau đó tìm kiếm cho <body> và ngay dưới nó dán mã HTML sau đây:

<div id='mbt_bar'> <span style='padding-right:5px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAdsundefined);return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLE7nnFpYMhygDv0UOaqo_LV7Ph2ocjzZNUB9dKOdRnnXodwuihkoo_mrIiBLogPPS3scLsmg980EVDIP54hE8JpnBDEqbIIHhzRS5jLz6oaAf26LVUEeoBfeTweSLcLV98uhmEi05jQ/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>Stickybar with social Plugins</div> <div style='float:right; padding-right:0px;'> <p style='font:bold 12px arial; float:left; margin:5px;'>Liked us?</p><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggertricks&send=false&layout=button_count&width=80& show_faces=false&action=like&colorscheme=light&font&height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://www.mybloggertricks.com' size='medium'/> </div> </div>

Bạn có thể viết tin nhắn, thông báo, bất cứ điều gì bạn thích thay đoạn văn bản màu tím.

Thay thế blogger tricks (phần màu vàng) với Facebook Fan Page của bạn Tên đăng nhập và thay thế liên kết blog (phần màu da cam) của chúng tôi thành của bạn.

7 Lưu ý: Bỏ qua bước này nếu bạn đã thêm nút google+ ở đâu đó đã có trong blog của bạn.

Dán đoạn mã sau chỉ dưới: ]]> </ b: skin>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </ script>

8. Lưu mẫu của bạn .

Trở ra blog của bạn để xem nó cố định ở phía trên hoàn hảo như thế nào.

Tùy chỉnh

Để thay đổi màu nền của thanh chỉ cần chỉnh sửa # 0080FF trong bước 4 với một màu sắc của sự lựa chọn của bạn. Sử dụng bảng mã màu tại đây.

Nguồn: mybloggertricks.com

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

15/10/13