Slide

Posted by Fishers Of Men on 11/10/2010 12:51:00 SA in , | 0 Comments

Hôm nay F.O.M có 1 thủ thuật cho các bạn đây ^^ .. mọi người ai đang yêu thích 1 slide quảng cáo cho blog cá nhân mình .. các bạn cùng thực hiện theo các bước sau nhé ! ;)
1.Login vào bảng điều khiển blogger của bạn -> bố trí -> Edit HTML

2.Scroll xuống đến nơi mà bạn nhìn thấy </ head> tag.

3.Copy code dưới đây và dán nó ngay trước các </ head> tag.

<style type='text/css'>
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:50px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #ccc; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXdXQqqFp1AAbWoNKJX0dIm1PZGN9C55w5HUQGfwOPeSKl4tSKV_lu4qt3u3L0odyG17w5n08syUv-GKokiQkrr45HCcZij7-zhqxyWjQ0LrLVEyuY1k4EhU5Kl6nu3xM-2oVZLvcOdQZh/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCdLP-T4JonFJQB_5UDNbW0BaHIHGdHN4ZlwWdVWMl8SQS8MK16zBIgbBsCzBZfY84HPWWRoUy2z0_Wfi8hdSk5SRilztToyc_4btOsnZhg9w7dIudvYwMlYhpSxBTY279TPQL1KAk6HF5/) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGbmfPlXi7INuChQCjAnD_r2glcizic0kh2n_6QZ_QBQLP7iili4jWNkLhpHk0YMExYtox36rHTQKA12yGgtkad0rapPs5wsWVookjwjMBilNXQlnw6HPf4wwzKEf6vA6U1JRPieuT2Z7h/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8k_jZD8BkA_eJcAmwdV5BVNbLpwE9Xbm51uh8W_NmIGVMj6zijO1iDS_RpwZKrUyQaUeYjShjndcueQrEig4fLm7kGrATudEa6ZmLz5ciHTg6gFc59zbK_1no6pkCUHBkHYAoCiQmo8D/) center center no-repeat; background-color:#222}
#slideleft:hover {background-color:#333}
#slideright {float:right; width:20px; height:81px; background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3NZ_Uvnwqis8vdkTS2z_1gPS6uefD77OB2NrV8ayhhKlsl4APS_hmT8uXJgdZkBh4tSszUAaqU5RkC4Yb1Y9HIgFJb7Z_u0I75rvfG9l2cxQSDOHNkD7oM89MF9En1Z1arGfCg7-2FT_i/) center center no-repeat}
#slideright:hover {background-color:#333}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #666; padding:2px}
</style>
 4.Now một lần nữa Di chuyển xuống đến nơi mà bạn nhìn thấy </ body> tag.

5.Copy mã dưới đây và dán nó ngay trước khi các </ body> tag.
<script src='http://aassas.googlecode.com/files/Slideshow%20cho%20blogger.js' type='text/javascript'/>

<script type='text/javascript'>
$(&#39;slideshow&#39;).style.display=&#39;none&#39;;
$(&#39;wrapper&#39;).style.display=&#39;block&#39;;
var slideshow=new TINY.slideshow(&quot;slideshow&quot;);
window.onload=function(){
        slideshow.auto=true;
        slideshow.speed=5;
        slideshow.link=&quot;linkhover&quot;;
      slideshow.info=&quot;information&quot;;
      slideshow.thumbs=&quot;slider&quot;;
      slideshow.left=&quot;slideleft&quot;;
      slideshow.right=&quot;slideright&quot;;
      slideshow.scrollSpeed=4;
      slideshow.spacing=5;
slideshow.active=&quot;#fff&quot;;
      slideshow.init(&quot;slideshow&quot;,&quot;image&quot;,&quot;imgprev&quot;,&quot;imgnext&quot;,&quot;imglink&quot;);
}
</script>
 Quan trọng!!! : Tải về .js và 9 hình ảnh như là một file zip, từ đây và chủ  .js và hình ảnh chính mình.

6.Now lưu mẫu của bạn.

7.Go để Layout -> Page Elements và nhấp chuột vào "Thêm một tiện ích".

8.Select "html / java script" và thêm mã dưới đây và bấm vào lưu.
<ul id="slideshow">


<li>
<h3>Enter Title 1 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_1fiPm21QEV430OiGqgi0L3q60D5SuvLvno-97YRlr4YWBSH4GixsBuoeUXuo8sHmCHJEb61fbdN56_zGd8MQPgS0xXJAzg5T27u50jh7d8tURk9BvmVQyJyUC_HeeK_0B95lleRLKAQF/+1+big.jpg</span>

<p>Enter Description 1 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWR2GFEJCU_4Ty5U1dXZcpr6Is7RxVLSYqA-VsBNsDkCdjHSJvUXdoQQhaC2Uyex8obmU14Sp3-6isSRsjAgDsjGG9jqZkI-3QELG3yjoAgKjo62-HCICR9ZTd-oNVP-E_RoZeeKgxOMi/+1+small.jpg" alt="Bionic" /></a>
</li>


<li>
<h3>Enter Title 2 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFz9kDRK_E5bRuAKceSbO6G7iDM8NldkYq6dAuEzut26GIgXJcK7o-1EDj0pAz5NTEZVcv1mfuESHsiig_Zgogq2HJgVVRxvoCVtAOwQ8SUB0Tf24gIm3c4XW2B00V6Kj5U8z-4vhTDCHW/+2+big.jpg</span>

<p>Enter Description 2 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikwyzFQq2faDTh4tvhR53SE3zUmtU-7CU7ai3-fu3f8s4o0JwNJiCmK3oxQ6v4PaeJgeyooaRYxY6TvKR7C0RM3Z-qMp69H_R6n7UYVbdvTYxsuWVaU6f96anNKBUEwbwW8xYN2KddUOe_/+2+small.jpg" alt="MOH" />
</li>


<li>
<h3>Enter Title 3 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUXKmsR_PBNl7S6fyRpsJtRoVGfMUjJWt6-93TmDyfWQzgMPx-3GSGSv9SEMpee-zhzAAy0BBPNGYL5GEQeOeyjhqS2HiJAM8OWYVF6uuVW7_NkqZiSdsfRU9Bp4g-jM0ud3qE40GGaMY/+3+big.jpg</span>

<p>Enter Description 3 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilFXLpkKqpECqXvMU_aP9W56l19fs2fDVXmqTm3xGUvYSjw_k7Mam_T7rmZAgPGZf9cD2mKd0MHG185TBBiqKJFIpdxFVrpnI-fv8FBEXvusArzaBe8in9CebKQimTeZZf39CjBktaqFs/+3+small.jpg" alt="Fear" /></a>
</li>


<li>
<h3>Enter Title 4 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhphwzF_ZhR1s2P85mcO2n9bAoQsv7kARr5OwmRbYqAakbDMqTIL-o8kYci2AutnFHuJIwb4JxF_0PyLKa4Z99RwVCB1IP5FYLnpitDriiyYSWays6HsgFbYz_NNIdhaakanIrE5A8w6WLS/+4+big.jpg</span>

<p>Enter Description 4 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxQjh9dAkLRRbKszYRiWhVfj5LYOdFJAPORwpLKPbWx1CXnkm8sxefUU5o6oqfcbKaZ4Q4NjRvUBr5seR6a_Yd_yb5FtSSEtNrd8jSf-XQtJXw80MrV_YYXk69TsdVqlHGI7BBIWluyfvD/+4+small.jpg" alt="Farcry" /></a>
</li>


<li>
<h3>Enter Title 5 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6d4rAyg3euJFqQI03-Eiw1nKDQTBlyigzaP-n4aqrco7w1IvYAmk9dj3u-CwwiPJ57VOBlRt5iJ0Ry7hckzVYqNLJZGrXsEcyytS_kvvKVEukkX6EF8wIKi7ak1tv_m2tYsL2lArb7FkQ/+5+big.jpg</span>

<p>Enter Description 5 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiftjj97SWusNECW93XbzqrYrrrlGBOOdoDJEyJLTACZrgns-j85q7ng6jjDPg2XLGREUxGEz3cykNQCv_jKFvRkQE1tEUUYaaXrvLrdZEe7PrpnR3DM88Dug4xsXY1mtmWQ8suU0YuqyqP/+5+small.jpg" alt="Farcry 2" />
</li>


<li>
<h3>Enter Title 6 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqJY2DWVXVI2FiODdSvWBTzMBwom0nviUy2m7NHY6fE20YYOqh29dYYdJw3Qq0XfwtF0lHrWG30rWlmcRLNbatQdgKkSCjLS5D4ISRkBiDf1mjHzim-ep57tgTKDn34Mi8NnkLTcWogf1l/+6+big.jpg</span>

<p>Enter Description 6 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloEMfGJ3kFMF-Wp7pQnso3ktVBwzorDblBtcCKDeiUjGpTp3oEngR1WjzD_YLN_IHM7H5ctZg7MI6-TOk_BAih1IXLw90BrHhuVLp9_8z1QgTjtgEC4wP25WtskyTjrLzrVUlm88ilTRt/+6+small.jpg" alt="Crysis" /></a>
</li>


<li>
<h3>Enter Title 7 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI4gVai-Vy_HjXnxXeLy1h3wuTn9ewc7B_zXrxGqtaZO_uhnT4VVNNvjd84QrKDUEPBCECQddS4JhEwJXhsG0De2VBxDlVtcOOtR2jukEKKlkFjynQVW7hbweXMqUVo9MiTI40SiTaEe8W/+7+big.jpeg</span>

<p>Enter Description 7 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZWTOowKwRz5EudNoywTlVfCH5kbqsJABEbr57DsvGWbMtsQV2StkV66WZXdMRIo7gwzjvUv2xMeCYbsewEXjfVrF7LupafJ85HX_-Q9LnONmwDa1m7vwaJDfj-d1xQvbKDjXHPdVvUCCW/+7+small.jpg" alt="Tomb Raider" /></a>
</li>


<li>
<h3>Enter Title 8 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN9Y-PO__hAYQFsht43zkgm6F8nvvzHXC8M1FrXem1uqx2WTJ62A2YThIoG0jjXgvxQJ-EhOxM100x1Lxi12EJObmm8aJ1wlZeoPqynJYSpPuRVEWuszHlmCTXtRDlSRXECAxkUOY4hp-k/+8+big.jpg</span>

<p>Enter Description 8 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWAC60V56LZso3bkxRneV8-qrCd4tXNl0vZmu_9Sb4RzebQ4d6Ng_0nmXFPL8tj0-VPXZN-Es9hKHttw3YTSDo-b5qw6loE8HFiDFtk5JN0mDCoMPODjcyza4VKyYy0_igVEs90FTPZvQE/+8+small.jpg" alt="Game" /></a>
</li>


<li>
<h3>Enter Title 9 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWVo_A86UNvFlCapBwXBPpdVRAv64baRjryEF6AhTDa9t6blVha3g6v5DkUEMxM8l0xJlfQLLwDjpaNxbrMqa3ZedCkRq7X5QHgmSop6yf7jS3YV-QqEwSddIjmZ6z09LIsjwMXYMc0m8J/+9+big.jpg</span>

<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWYf0zcPrz5QVXclqhcCiX926_o22hxHkxcrlVAk7WfVQkOxMGppcyZyhS4m-8Bsgg81OzC0bCie8QbVjEN0TUx48bDr1kmsitveLIv8QbtXg5HHgpzW0qJPVWghAnHwNeAu5HD51-c8B_/+9+small.jpg" alt="Medal of honor" /></a>
</li>

</ul>

<div id="wrapper">

<div id="fullsize">

<div id="imgprev" class="imgnav" title="Previous Image"></div>

<div id="imglink"></div>

<div id="imgnext" class="imgnav" title="Next Image"></div>

<div id="image"></div>

<div id="information">
<h3></h3>
<p></p>
</div>
</div>

<div id="thumbnails">

<div id="slideleft" title="Slide Left"></div>

<div id="slidearea">

<div id="slider"></div>

</div>

<div id="slideright" title="Slide Right"></div>

</div>

</div>

</div>
 Thay thế hình ảnh tùy thích và Text của bạn !

ví dụ : 

<ul id="slideshow">


<li>
<h3>Chúng ta đang đặt niềm tin cho Đấng nào ?!</h3>

<span>http://farm5.static.flickr.com/4055/5164668084_aab4646257.jpg</span>

<p>Chỉ duy nhất có một Đấng có thể cứu bạn !</p>
<a href="#"><img src="http://farm2.static.flickr.com/1259/5164063213_b5734e4b4e_m.jpg" alt="Bionic" /></a>
</li>


<li>
<h3>Chính Jesus Christ là Đấng đã chết thay cho bạn và tôi !</h3>

<span>http://farm2.static.flickr.com/1337/5164668150_18c4749747.jpg</span>

<p>Chúa đáng được tôn cao, Ngài là Đấng nhân từ và ban cho chúng ta sự bình an thật ..</p>
<img src="http://farm2.static.flickr.com/1360/5164063141_200987e432_m.jpg" alt="MOH" />
</li>


<li>
<h3>Hành trình lịch sử của dân sự Chúa trong Kinh Thánh</h3>

<span>http://farm2.static.flickr.com/1213/5164668020_c1595d26a9.jpg</span>

<p>Ngài đã giải cứu dân sự Ngài. Ngài hiện diện ở mọi nơi và Ngài là Đấng giải cứu bạn khỏi xiềng xích nô lệ.</p>
<a href="#"><img src="http://farm2.static.flickr.com/1402/5164063189_179d8e17ed_m.jpg" alt="Fear" /></a>
</li>


<li>
<h3>Một người bạn thật sự cho bạn và cho tôi !</h3>

<span>http://farm2.static.flickr.com/1213/5164668182_58c992cc8d.jpg</span>

<p>Chúa Jesus cũng là một người bạn thân mật luôn luôn lắng nghe mọi điều về bạn..</p>
<a href="#"><img src="http://farm5.static.flickr.com/4016/5164063271_60219a45f9_m.jpg" alt="Farcry" /></a>
</li>


<li>
<h3>Ngài đã chết vì tội lỗi của chúng ta !</h3>

<span>http://farm2.static.flickr.com/1210/5164063319_2b9c642d82.jpg</span>

<p>Người đã vì tội lỗi chúng ta mà bị vết,vì sự gian ác chúng ta mà bị thương,bởi sự sửa phạt Người chịu chúng ta được bình an,bởi lằn roi Người chúng ta được lành bệnh</p>
<img src="http://farm5.static.flickr.com/4071/5164063351_94cee8eab3_m.jpg" alt="Farcry 2" />
</li>


<li>
<h3>God is Love</h3>

<span>http://farm5.static.flickr.com/4014/5164063049_433d6ce221.jpg</span>

<p>Vì tình yêu thương Chúa đã chết thay cho chúng ta</p>
<a href="#"><img src="http://farm2.static.flickr.com/1176/5164668412_892c90d4d1_m.jpg" alt="Crysis" /></a>
</li>


<li>
<h3>Ngài là người chăn hiền lành</h3>

<span>http://farm5.static.flickr.com/4144/5164668252_1b05f3fcde.jpg</span>

<p>Người chăn hiền lành vì chiên mình mà phó sự sống mình..</p>
<a href="#"><img src="http://farm5.static.flickr.com/4085/5164668276_9b2248bf2e_m.jpg" alt="Tomb Raider" /></a>
</li>


<li>
<h3>Đức Giê-hô-va là Đấng Toàn năng</h3>

<span>http://farm2.static.flickr.com/1246/5164062729_26f093c9a0.jpg</span>

<p>Đối với chúng ta thì không thể nhưng đối với Đức Chúa Trời mọi việc đều là có thể..</p>
<a href="#"><img src="http://farm5.static.flickr.com/4125/5164063161_ca51b25895_m.jpg" alt="Game" /></a>
</li>


<li>
<h3>Đức Thánh Linh</h3>

<span>http://farm2.static.flickr.com/1321/5164668118_85599a1321.jpg</span>

<p>Nhưng khi Đức Thánh Linh giáng trên các ngươi,thì các ngươi sẽ nhận lấy quyền phép,và làm chứng về Ta tại thành Jerusalem,cả xứ Giu-đê,xứ Samari,cho đến cùng trái đất</p>
<a href="#"><img src="http://farm2.static.flickr.com/1437/5164668392_51c637af23_m.jpg" alt="Medal of honor" /></a>
</li>

</ul>

<div id="wrapper">

<div id="fullsize">

<div id="imgprev" class="imgnav" title="Previous Image"></div>

<div id="imglink"></div>

<div id="imgnext" class="imgnav" title="Next Image"></div>

<div id="image"></div>

<div id="information">
<h3></h3>
<p></p>
</div>
</div>

<div id="thumbnails">

<div id="slideleft" title="Slide Left"></div>

<div id="slidearea">

<div id="slider"></div>

</div>

<div id="slideright" title="Slide Right"></div>

</div>

</div>


Kết thúc ^^

Chúc thành công các bạn nhé !
Tags: ,

About author

Hy vọng các bạn ủng hộ cho blog Fishers Of Men và những đóng góp của các bạn trong các bài đăng có thể để vào phần comment phía dưới mỗi bài đăng. Xin chân thành cảm ơn các bạn. Chúa ban phước cho các bạn.

Nhập email của bạn:

*Xin vui lòng bấm vào liên kết xác nhận gửi trong thư mục Thư rác của Email*

0 Comments

Leave a Reply

Bài đăng Mới hơn Bài đăng Cũ hơn Trang chủ