Sửa lỗi không hiển thị ảnh thumbnail ở Blogspot

Nếu bạn đang sử dụng blogger với cập nhật mới cho blog của bạn và đột nhiên bạn thấy ảnh thumbnail hoàn toàn không hiện. Hãy bỏ ngay suy nghĩ rằng bạn phải edit template để khắc phục tình trạng này. Mà hôm nay mình sẽ hướng dẫn các bạn khắc phục sự cố không mong muốn này.

Tại sao ảnh thumbnail không hiển thị?

Đầu tiên bạn nên quan tâm tới lý do tại sao ảnh thumbnail tự dưng không hiển thị cho dù bạn không tác động vào template trước đó. Điều này sẽ xảy ra với những blog với bài post có hình ảnh trước khi google update tính năng mới. Hãy bình tĩnh và làm theo hướng dẫn dưới đây nhé.

Hướng dẫn:

Đầu tiên hãy vào Blogger >> Bài đăng >> hãy nhìn tất cả các bài viết đã được xuất bản và chọn bất kỳ bài viết nào và ấn vào chỉnh sửa.

Bạn chuyển về chế độ chỉnh sửa bài đăng ở dạng HTML khi thấy link ảnh hãy sửa toàn bộ https:// thành http://

Sau đó hãy lưu lại và quay lại trang chủ xem giờ thì ảnh thumbnail của bạn đã hiển thị lại bình thường.
Chúc bạn thành công !

More about →

Cách hiển thị đánh giá trên kết quả tìm kiếm Google

Sau đây mình sẽ hướng dẫn các bạn cách hiển thị đánh giá trên kết quả tìm kiếm của google. Mục đích của nó là gây ấn tượng và tăng độ tin tưởng cho visitors khi họ tìm kiếm tới trang web của bạn trên Google.

Sau khi thực hiện thủ thuật này bạn sẽ có kết quả tìm kiếm được hiển thị như sau:

Hướng dẫn:

Khi viết bài bạn thêm đoạn html dưới đây vào bài viết cho sản phẩm muốn được đánh giá.

<div class="hreview"> <span class="item"> <span class="fn">Tên Sản Phẩm </span><br/> </span> Đánh giá bởi <span class="reviewer">Tên người đánh giá</span>on <span class="dtreviewed">Aug 11 2012<span title="2014-11-08" class="value-title"></span><br/> </span> Rating: <span class="rating">Số sao cho sản phẩm</span></div>

Chú ý: Chỉnh ngày tháng và số sao cho sản phẩm (nên chọn là 5) theo ý bạn trong đoạn code trên và hãy chuyển sang chế độ soạn thảo HTML trong bài viết sau đó chuyển lại chế độ Viết. Nên làm thao tác này cuối cùng sau khi đã viết xong bài viết.

More about →

Sevida v1.7 - Responsive magazine blogspot theme

Giới Thiệu:
 
Sevida là giao diện phong cách báo chí cho Blogger với chức năng tích hợp phong phú. Hoạt động tốt trên nhiều thiết bị với tốc độ load trang nhanh và tối ưu SEO cho trang Blog của bạn.

Thời gian cập nhật Sevida V1.7: 25/8/2014

Có gì mới ở phiên bản này?

1. Thay đổi và chỉnh sửa

- Summary Script (Fixed Image Regex make full support Youtube Thumbnail)
- Recent Post by Tag Script (Fixed Image Regex make full support Youtube Thumbnail)
- Related Post Script (Fixed Image Regex make full support Youtube Thumbnail)            
- Ajax Search Result (Fixed Image Regex make full support Youtube Thumbnail)

 2. Thêm các tính năng

- Auto social Icon (Just change the name)
- Auto google map (when location select)
- Author Profile picture on blog post
- Disqus recent comment custom
- Support Load three Cumment System

Hướng dẫn cài đặt

Sau khi giải nén, hãy mở thư mục Documentations rồi mở file index bằng trình duyệt web, trong đó sẽ có hướng dẫn cụ thể cài đặt như DEMO.

DEMO | DOWNLOAD

More about →

Tạo floating menu cho blogspot

Sau đây mình sẽ hướng dẫn các bạn tạo floating menu trượt theo blog cho Blogger.

DEMO

Hướng Dẫn:

Truy cập vào quản trị blog: 

Blogger.com >> Mẫu >> Chỉnh HTML sau đó tìm thẻ ]]></b:skin> rồi thêm lên trên nó đoạn code dưới đây:

/*--Sticky Navigation Bar--*/

#MBL_wrapper .MBL_social_wrapper

{

margin-top: 15px;

}

#MBL_wrapper

{

width: 100%;

margin: auto;

background: #fff;

height: 50px;

border-top: 5px solid #2c2f32;

border-bottom: 1px solid #EBEBEC;

-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);

-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);

-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);

box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);

position: fixed;

z-index: 999;

}

#MBL_wrapper .topmenu.notice

{

float: left;

width: 500px;

margin-top: 15px;

color: #fff;

}

#top_menu a

{

color: #fff;

}

#top_menu

{

display: block;

float: left;

list-style: none;

margin-top: 12px;

}

#top_menu li

{

display: inline-block;

margin-right: 15px;

font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;

font-size: 14px;

text-transform: uppercase;

}

#top_menu li ul

{

display: none;

}

#boxed_wrapper

{

width: 980px;

margin: auto;

}

.MBL_standard_wrapper

{

width: 960px;

margin: auto;

}

.MBL_standard_wrapper.wide

{

width: 980px;

}

.MBL_standard_wrapper.header

{

margin-bottom: 0px;

}

.MBL_social_wrapper

{

width: auto;

float: right;

}

#menuforall .MBL_social_wrapper

{

margin-top: 15px;

}

.MBL_social_wrapper ul

{

list-style: none;

}

.MBL_social_wrapper ul li

{

float: right;

margin-left: 5px;

}

.MBL_social_wrapper ul li img

{

width: 24px;

}

#MBL_menu_wrapper

{

width: 930px;

height: 50px;

padding: 0;

margin:auto;

}

.mainmenu.notice

{

float: left;

width: 600px;

padding: 17px 0 10px 12px;

z-index: 999;

}

#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav

{

list-style: none;

display: block;

float: left;

margin: 0 23px 0 5px;

width: 700px;

}

#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li

{

display: block;

float :left;

margin: 0;

}

#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul

{

display: none;

list-style: none;

background: #000;

position:absolute;

padding: 0;

margin-top: 51px;

width: 200px;

height: auto;

z-index: 1000;

padding-top: 5px;

border-bottom: 5px solid #000;

border-left: 0;

}

#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul

{

margin-left: 200px;

margin-top: 5px;

}

#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a

{

background: none;

}

.main_nav li ul li

{

width: 100%;

}

#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a

{

color: #fff;

display: block;

width: 188px;

font-weight: bold;

line-height: 1em;

padding: 10px 0 10px 12px;

background: none;

}

.main_nav ul, .main_nav

{

list-style: none;

margin: auto;

width: 600px;

height: 50px;

z-index: 999;

float: left;

border-left: 1px solid #EBEBEC;

}

.main_nav ul li,  .main_nav li

{

display: block;

float :left;

margin: 0;

}

.main_nav ul li a,  .main_nav li a

{

display: block;

float :left;

margin: 0 0 0 0;

padding: 18px 15px 14px 15px;

color: #2c2f32;

font-family: 'Patua One';

text-transform: uppercase;

font-size: 13px;

font-weight: 500;

border-right: 1px solid #EBEBEC;

}

.main_nav ul li ul li a,  .main_nav li ul li a

{

width: 165px;

padding: 7px 19px 7px 16px;

border: 0;

font-size: 12px;

font-weight: normal;

color: #ccc;

font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;

}

.main_nav ul li ul li:last-child a,  .main_nav li ul li:last-child a

{

border-bottom: 0;

}

.main_nav ul li a:hover,  .main_nav li a:hover, .main_nav ul li a.hover,  .main_nav li a.hover, .main_nav ul li a:active,  .main_nav li a:active, .main_nav li.current-menu-item a

{

color: #fff;

background: #1bc4de;

}

.main_nav li:last-child a:hover, .main_nav li:last-child a.hover

{

border-right: 0;

}

.main_nav li ul li a,  .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,

{

display: block;

width: 170px;

line-height: 0.7em;

padding: 5px 0 5px 30px;

}

.main_nav li ul li a:hover,  .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover,  .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover

}

 div

{

margin:0;

padding:0;

border:0;

font-weight:inherit;

font-style:inherit;

font-size:100%;

font-family:inherit;

vertical-align:baseline;

}

a

{

color: #2C2F32;

text-decoration: none;

-webkit-transition: color .2s linear, background .1s linear;

-moz-transition: color .2s linear, background .1s linear;

-ms-transition: color .2s linear, background .1s linear;

-o-transition: color .2s linear, background .1s linear;

transition: color .2s linear, background .1s linear;

}

/* Font Face ----------------------------------------------- */

@font-face {

font-family: 'Patua One';

font-style: normal;

font-weight: 400;

src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');

}

ul{

margin: 0;

padding: 0;

list-style: none;

}

Sau đó bạn tìm thẻ <body> và thêm dưới nó đoạn code dưới đây:

<!-- Begin Navigation -->
<div id='MBL_wrapper'>
<div class='MBL_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>

<a href='#'>Home</a></li>

<li><a href='#'>Blog</a></li>

<li><a href='#'>About Us</a></li>

<li><a href='#'>Advertise Here</a></li>

<li><a href='#'>Contact Us</a></li>

<li><a href='htto://www.mybloggerlab.com'>MyBloggerLab</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='MBL_social_wrapper'>
<ul>

<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0ztvOlyLuFHN3BqdlZ7U65RXZnQ1Fr6fQopl14c-2s3RfoFUTrhdLIDy9KYYznRZOCF5JFE0QTkNvWS-3nVlNYChxOqc_MeIVc4ILuIxarLc1fOmVHIYhyZ4LdNg2GCitk5FkC10dXTD/s1600/facebook.png'/></a></li>

<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcQEknL0pp25a28F7-D0S-5sAm3YalS8T-Rxn8o63-IpaRbF88WioqTlX0iCugPd1ToOho5ZR6_ojbug2TtpGWyp0JXvYFH8nK3nALbm386D2rBMBq95HywgBVvY98OZ9e7QLZswCCJe3l/s1600/twitter.png'/></a></li>

<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy3AH02AejslBmUfGA_95re9QbAaZC21VriFSlVd6zKQIvYAb70gJCXSwdZn8oTdlQzVxUxkyGiNg1jgaFSXL6Z655bktcp0BgP6TdoRVdVUXSVVG6s14d30hi17cwEgO7TNKuzHf_LGnD/s1600/flickr.png'/></a></li>

<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLqkLkiJx4PByAo04NJ7jZy1ZyA7jwA4Xx34FrUkU9zsZTkSksnzkqSgT_UjcwYpqBhB9aMmy2NAoB64D5fQ4slC-LfBGQ7_rP4F9HTgojcoOTDVPZtYCH3iNuSGL5jVxaHnOPLrCVyYA1/s1600/vimeo.png'/></a></li>

<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2oUc1Kq8ZnQVxarL698mXBDnKGUI6TBjQeCvMEum9BRZ65d3MKEhRWNf-lpUf8u2BdwwaI0dtbIoAowDcwNrcotj2V163ZkrtycOs0kUABSgD8Aj_cDJRSCSRiuP_a0sx_1PgkQZqIgAN/s1600/tumblr.png'/></a></li>

<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMFYw2IcpF5SYiwjynuFjLRy3sYzjygu3omYQDJ68A_6spfIMAWwAT_AP12al0va3sVmL81VUUOLUtK5DOQDAtBmwl2nqcsso0fXGwPSVoJAZz4LnBuqP8H0X_US5vRQc5F9JkRPYw79nX/s1600/google.png'/></a></li>

<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaDYTR5nDPCrJ7xNwZ5ICR-AidUt60ir8cMPEmdwVBBMMCHMEleQ8ArjO8IzcQd5aFEtqkrfrar9VVct9a2_dcWDUFhKchyPErNHvzwFNTai_NZTBJq2q4fQTO_P8PR1QAmEEjVV6Wyz43/s1600/dribbble.png'/></a></li>

<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicMtqgWEuKZaNj3gAfYYUgy0B5iKjRw3da6VzOUjXt1QQ0054_Se9wc6ZUraG89pUO1WVsJmI4iWGvmI_GKo1mMZ2cMYqaaIFj-DWoonGlB6y9cTHWOvz3dudV7atw0nzdzUHnawnt-tv6/s1600/digg.png'/></a></li>

<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9OiMkK9K-ZWNrh8bfcgoH4HVVXaYsVXR5DVWQ73QDuHc1l5tjwUeCj9UwOJl6dIztTgnABCs0Wg1eGNLpAunOndqhwtUjLVqD7ZHvtzqSpbz2wJV5cb9CeR4FYhuMKub_6P9KPpNzhk8c/s1600/linkedin.png'/></a></li>

<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTRy5RJC3mBxJvCpGv-GbgCjQbolgktHq7r4oErDhys75ErQhdUeMfqJaAoHzMSlTdf6OqsuR3O7ZYyqASXI6S2UyR_qc59TuMxIhqTKynYESe0Fu8wbcSx4n_k3eEiKAqzMqhoyGr0Rxb/s1600/pinterest.png'/></a></li>

<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD0SYZAZ-vmwH3RK546zoYxlfjdgP9jlHRO1oa531dBQ1Yl8a_RwudtKgiNVVPEhar4rZwSbJylJqtMGCIFkZlz9nw634X6kSmQVsgVHslq1uePZ80bdamlkkxwQrPA-hfTltEs3bTmAMW/s1600/rss.png'/></a></li>

</ul>
</div>
</div>
</div>
<!-- End Navigation -->

 Sau đó hãy chỉnh lại đường link cho đúng với chuyên mục nhé, chúc các bạn thành công.
 

More about →

Code blogspot hiện lable widget trong blogspot theo ý mình

Hiện lable trong blogspot theo ý mình, Hiện widget trong blogspot theo ý mình, Hiển Thị Widget ở trang chủ hoặc riêng biệt
Một khi bạn tạo một widget trên blog thì nó sẽ được hiển thị ở tất cả các trang theo mặc định, bao gồm cả trang chủ.
Đôi khi bạn chỉ cần hiển thị một vài widget ở trang chủ hoặc chỉ ở một số trang hoặc thậm chí ở một trang riêng biệt
nào đó.

Thủ thuật này cũng khá đơn giản. Điều quan trọng là bạn phải nắm được id của widget mà bạn tạo ra.

Lấy ví dụ widget mà bạn tạo có id là HTML10 và bạn đặt tiêu đề cho widget đó là BLOGGER TIPS. Vào Bố cục (Layout) rồi chỉnh sửa HTML ở chế độ mở rộng mẫu tiện ích.

Có thể bạn cần xem bài này thêm nữa

code popup cho blogspot

Trường hợp 1: Hiển thị widget chỉ ở trang chủ: Tìm và thêm đoạn code được đánh dấu màu đỏ và màu xanh như bên dưới.



<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
 <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>




Thêm: - Hiện tất cả trừ trang chủ


<b:if cond='data:blog.url != data:blog.homepageUrl'>


Trường hợp 2: Hiển thị widget ở tất cả các bài viết, trừ trang chủ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.pageType == "item"'>


Trường hợp 3: Chỉ hiển thị widget ở một trang riêng biệt nào đó: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.url == "URL của trang riêng biệt"'>


Trường hợp 4: Chỉ hiển thị widget ở các trang chính gồm trang chủ, các trang Label và Archive: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.pageType == "index"'>


Trường hợp 5: Chỉ hiển thị widget ở các trang lưu trữ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.pageType == "archive"'>


Trường hợp 6: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang lưu trữ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.pageType ! == "archive"'>


Trường hợp 7: Chỉ hiển thị widget ở tất cả các trường hợp trừ các trang bài viết: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.pageType ! == "item"'>


Trường hợp 8: Chỉ hiển thị widget ở tất cả các trường hợp trừ trang chủ: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.url ! == data:blog.homepageUrl'>


Trường hợp 9: Chỉ hiển thị widget ở tất cả các trang trừ một trang riêng biệt nào đó: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.url ! == "Url của trang đặc biệt"'>


Trường hợp 10: Chỉ hiển thị widget ở tất cả các trang trừ hai trang riêng biệt nào đó trở lên: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.url ! == "Url của trang đặc biệt 1"'><br /> <b:if cond='data:blog.url ! == "Url của trang đặc biệt 2"'>




Trường hợp 11: Nếu bạn muốn hiển thị một thứ gì đó ở trang chủ và một thứ gì đó khác ở tất cả các trang: Bạn sử dụng lệnh điều kiện như thế này:



<b:if cond='data:blog.url == data:blog.homepageUrl'>


Đây là điều cần hiển thị ở trang chủ
<b:else/>

Đây là điều không hiển thị ở trang chủ
</b:if>
Trường hợp 12: Chỉ hiển thị widget ở một trang nhãn: Thay đoạn code màu đỏ ở trên bằng đoạn code sau đây:


<b:if cond='data:blog.url=="http://yourblogname.blogspot.com/search/label/Tennhan"'>


Trường hợp này chỉ hoạt động với tên nhãn không dấu như Blogger, CSS, Thuthuat, Thuvien (không dùng cho nhãn tiếng
Việt). Đối với các nhãn có khoảng cách như Recent Posts thì phải đặt là Recent%20Posts (tức là thay khoảng cách bằng %20).
Các liên kết trang nhãn trong trường hợp này cũng không hoạt động được khi có đuôi ?max-results= Những thủ thuật nhỏ này rất có ích trong việc xây dựng trang chủ cho blog của bạn.

More about →

Code popup cho blogspot

Tổng hợp các Code Popup Javascripts quảng cáo cho website Ưu điểm cái này mình thích là dùng jquery nên có vẻ mượt mà và load nhẹ hơn tốt cho seo


Code popup cho blogspot - Code popup cho blogspot



Chú ý: code popup chỉ hiện 1 lần duy nhất thôi nhé nên không gây phiền hà cho người dùng, cái này có thể thêm được like cho trang của bạn hoặc một quảng cáo cho chương trình quảng cáo rất hay

Có thể bạn cần xem bài này
code blogspot hiện lable widget trong blogspot theo ý mình

Các bạn hay bắt gặp như hình này



Hôm nay KHÁM PHÁ BLOGSPOT mình sẽ giới thiệu cho các bạn CÁCH LÀM POPUP CHO BLOGSPOT


B1 : thêm thư viện jquery vào giữa cặp thẻ HEAD

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>

B2: thêm style css.




<style>
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{}
          

#cboxLoadingOverlay{background:url(http://3.bp.blogspot.com/-7VRvnW_MUSw/TwRGXjXjloI/AAAAAAAACM0/5K-J5jgkxo4/s1600/%255Bwww.gj37765.blogspot.com%255Dloadingbackground.png) no-repeat center center;}
          

#cboxLoadingGraphic{background:url(http://3.bp.blogspot.com/-xjj51r2lm2M/TwRGaKezqHI/AAAAAAAACNI/lKX9_-YUUdY/s1600/%255Bwww.gj37765.blogspot.com%255Dloading.gif) no-repeat center center;}
           #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
           #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
           #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px;

background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
           #cboxPrevious{left:0px; background-position: -51px -25px;}
           #cboxPrevious.hover{background-position:-51px 0px;}
           #cboxNext{left:27px; background-position:-75px -25px;}
           #cboxNext.hover{background-position:-75px 0px;}
           #cboxClose{right:0; background-position:-100px -25px;}
           #cboxClose.hover{background-position:-100px 0px;}
           .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
           .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
           .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
           .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
      #mdfb {
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #mdfb a,
    #mdfb a:hover,
    #mdfb a:visited {
        text-decoration:none;
    }
    .mdbox-title {
background:#000;
       color: #fff;

       font-size: 20px !important;
       font-weight: bold;
       margin: 10px 0;
    border:20px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }
    .mdbox-tagline {
       color: #999;
       margin: 0;
       text-align: center;
    }
    #mdsubs-container {
        padding: 35px 0 30px 0;
        position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }</style>



B3: Thêm java script


<script type="text/javascript">
 $(function() {
   
if (document.cookie.indexOf('visited=flase') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#mdfb"});
}

}); </script>


B4 Thêm nội dung khi hiển thị bật lên


<div style='display:none'>
<div id='mdfb' style='padding:10px; background:#fff;'>
<center>
helo  nhúng gì đó vào đây
</center>
</div></div>
<style>#cboxClose{display:none;}</style>


Chỉ có thế thôi. các bạn thắc mắc để lại comment nhé

More about →

Chèn yahoo vào blogspot

Bạn có thể đưa thêm yahoo messenger chat vào trên blogspot. Khi đó người xem chỉ cần click lên biểu tượng yahoo trên blogspot để bắt chát

Vậy cách chèn yahoo vào blogspot như thế nào?

Cũng khá nhiều bài viết về cái này mình viết lại một bài nữa nghĩ cũng không sao cả, chia sẻ cho mọi người

Bắt tay vào làm thôi

Vào phần quản trị blogspot chọn 'Bố cục' chọn "Thêm tiện ích mới" như hình sau:

sau đó chọn "HTML/Javascript" bằng cách nhấn nút dấu cộng màu xanh nhỏ nhỏ bên phải như hình dưới

Khi click vào nút thêm đó, sẽ ra một popup dạng như hình sau
Tiêu đề : Bạn có thể viết gì tùy thích hoặc hai cái phổ thông hay dùng 'Hỗ trợ online' hoặc 'Hỗ trợ trực tuyến'.
Nội dung: Copy đoạn code dưới đây paste vào, thay địa chỉ yahoo của bạn vào duynhatvamaimai thay bằng yaho của bạn. chú ý là có 2 chỗ nhé


<a href='ymsgr:sendim?duynhatvamaimai'>
<img alt='Hỗ trợ bán hàng' src='http://opi.yahoo.com/online?u=duynhatvamaimai&amp;m=g&amp;t=2' title='Hỗ trợ bán hàng'/>
</a>



Bấm lưu.
Click hình dưới để xem code nhé

Tiếp theo đó ra phần bố cục ấn "lưu sắp xếp" ở góc phía trên bên tay phải, thì nó mới có hiệu lực nhiều bạn hỏi mình đã làm như bạn rồi nhưng không lưu nên không hiện ra là quên bước này.

Và đây là kết quả khi thêm yahoo vào blogspot

Các bạn có gì không hiểu để lại comment bên dưới hoặc click vào yahoo trên blogspot của mình test thử luôn nhé

More about →