Hướng dẫn thêm slide hình ảnh trượt vào blogspot

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7qgEpq8SsSnYHX9Amr5y9qHwGracUMQ82BoDA6GpATyHiyqtY_UMX7HP2n1DFjdxaeyQXU4PJn_nEE5RBD5__7d1Leye2fpDWEO1AiyYy4wVQsg4-z2KxwUFdceuFOeTi1KaXcmFjHPTQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaoatmY5w9YLESJj5cHTf1qYlgQzk7781yqln4HjcPnUQbYtjL58o0fOeymvXm2vB8f5yF51TGNyr3_OzUN2W8saIdr6zinZunr8yFjwmgX1mXALCD7-gKdp-93QmcSITb0hUVk4dtgkCR/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho5Q-_La8TJ_Tl-fzwa09Ak2iGEDVtFPC5OeGhhbvxnBP4b4rklRhpbQyjgTRwK9GZxHqY_y6dcUQdWzDHqbV1KvDjXNmx43hUuHoezRijqABMBqDkY_tPZNzMG0A6gED8brBwJbdLuxGf/h120/image-slider-1.jpg" alt="#htmlcaption1" /></a><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbVAJ3nqKzQ_AoaCBvQuA-Lhyxv3oioPFR3TroDVDk6cCghJk7-h5qGNW0kJ00VPPejk3jHQRhbzsa4NI6Ts9D-6mUqRR6hQ4ieX5m9UNjHlmTv_uAqUqnaTSk6IQLgHIRhrdU3R_e1xeo/h120/image-slider-2.jpg" alt="Go UP!" /></a><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1D1IVyuv77tZJiD8Q-SDBc6x3rtL8Riwkcnde3Aiv77WVf33Vc89Ngd8079zjNz9O-HUv5mpgqARbWYom-Gbg0XN7FFQV2UZrz0jlGpgihIjfIc3lVWO-gulidKbE64UQGGtDGA3jNR-o/h120/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis5dcXQSlCdJ8y77JR2tAGFm36R8iGuRZZYzhIDGOzynTlzFsHDdRfXtARxjmsRZldC7j7Uac1QdDPsmYuX36QQJp0qoFRCDE9qvil2ZXqrqEKvxLMQ0Z3dH7liFiXxYq__uBiHhi3tSrt/h120/image-slider-4.jpg" alt="#htmlcaption2" /></a><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1h1OUjzIwdov1sUz7-IYPfSX1ece31tamAXRtkthm56S3-2dQ7gyXqZJDptdfRxxxAWA7NqF2BPwpOOJFZTl3PvwjY9-4yA7ZCdbX9-jU96KVLrq8CP3QtDTNV4Z18ovdv-tkNDB-CXdn/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