banner

Bài viết này tôi sẽ hướng dẫn các bạn làm một slide để chạy trên blogspot. Nó sẽ giúp blog của bạn có thể trông đẹp hơn và thanh thoát hơn với những slide đẹp chạy trên blog của bạn. 

Hỉnh ảnh được chạy trên blog Seo Document

Các bạn làm theo những hướng dẫn sau.

Bước 1: Đăng nhập vào blog của bạn

Bước 2: Vào phần Layout/ bố cục chọn Add A Gadget/ thêm tiện ích. 




Bước 3: Chọn HTML / JavaScript 


Bước 4: Copy và dán đoạn code dưới vào
<style type="text/css">/* http://dimpost.com */#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}      #slider {    width:700px;height:306px;/* Make it the same size as your images */ background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto;/*make the image slider center-aligned */    box-shadow: 0px 1px 5px #999999;}#slider img { position:absolute; border:none; display:none;}/* the link style (if an image is wrapped in a link) */#slider a.imgLink { z-index:2; display:none;position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%;}/* Caption styles */div.mc-caption-bg, div.mc-caption-bg2 { position:absolute; width:100%; height:auto; padding:0; left:0px; bottom:15px; z-index:3; overflow:hidden; font-size: 0;}div.mc-caption-bg { background-color:black;}div.mc-caption { font: bold 14px/20px Arial; color:#EEE; z-index:4; padding:10px 0; text-align:center;}div.mc-caption a { color:#FB0;}div.mc-caption a:hover { color:#DA0;}
/* ------ built-in navigation bullets wrapper ------*/div.navBulletsWrapper  { top:320px; left:280px; /* Its position is relative to the #slider */ width:150px; background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer;}/* each bullet */div.navBulletsWrapper div{    width:11px; height:11px;    background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;    margin-right:11px;/* distance between each bullet*/    _position:relative;/*IE6 hack*/}div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */#slider{ transform: translate3d(0,0,0);    -ms-transform:translate3d(0,0,0);    -moz-transform:translate3d(0,0,0);    -o-transform:translate3d(0,0,0);}</style><script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script><div id="sliderFrame"><div id="slider"><a href="#"><img src="https://lh4.googleusercontent.com/-oxV19sM3O5I/Uc_MfCW09hI/AAAAAAAAAPU/8K4xW8f5ID4/h120/image-slider-1.jpg" alt="#htmlcaption1" /></a><a href="#"><img src="https://lh6.googleusercontent.com/-_V9ia-vRQDw/Uc_Me-WX21I/AAAAAAAAAPQ/1HZH3J08jr0/h120/image-slider-2.jpg" alt="Go UP!" /></a><a href="#"><img src="https://lh6.googleusercontent.com/-E6waK4w3Pyg/Uc_MekrMOpI/AAAAAAAAAPI/WcXBXJKmb9E/h120/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a><a href="#"><img src="https://lh4.googleusercontent.com/-IIz2KjyU3W0/Uc_Mfiw-QaI/AAAAAAAAAPg/kLf_VnQ1YHE/h120/image-slider-4.jpg" alt="#htmlcaption2" /></a><a href="#"><img src="https://lh4.googleusercontent.com/-SH8EBmFLe2A/Uc_MfjT6POI/AAAAAAAAAPk/y4XTNq80Wdk/h120/image-slider-5.jpg" alt="Stay Connected"/></a></div><div id="htmlcaption1" style="display: none;">Code by <a href="http://www.haakblog.com" target="_blank">Haakblog</a></div><div id="htmlcaption2" style="display: none;"><a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.</div></div> 
Bước 5: Bấm Lưu lại và sau đó xem thử blog của bạn đã có sự xuất hiện của các slide ảnh chưa.

Thay tất cả các URL hình ảnh mà bạn muốn xuất hiện ở vị trí các URL màu đỏ xuất hiện phía trên

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

Lê Đức Tuấn
Nhãn:
Bài đăng Mới hơn
This is the last post.

Đăng nhận xét

Tin Tức

[tin-tuc][fbig1]

Khám Phá

[kham-pha][fbig2]

Sức Khỏe - Làm Đẹp

[suc-khoe][Lam-dep][column1]

Mẹo Vặt

[Meo-vat][hot]

Pháp Luật - Xã Hội

[Phap-luat][xa-hoi][timeline]

Author Name

{picture#YOUR_PROFILE_PICTURE_URL} YOUR_PROFILE_DESCRIPTION {facebook#YOUR_SOCIAL_PROFILE_URL} {twitter#YOUR_SOCIAL_PROFILE_URL} {google#YOUR_SOCIAL_PROFILE_URL} {pinterest#YOUR_SOCIAL_PROFILE_URL} {youtube#YOUR_SOCIAL_PROFILE_URL} {instagram#YOUR_SOCIAL_PROFILE_URL}

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Vnedaily. Được tạo bởi Blogger.