Tạo bản trình diễn SlideShow trượt tuyệt đẹp vào blog/ web

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

1. Tới Blogger Bảng điều khiển> Mẫu

2 Sao lưu mẫu của bạn 

3. Nhấp chuột vào Chỉnh sửa HTML 

4. Tìm  </head> và thêm mã dưới đây ngay trên nó:

<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/AVvXsEj1TDek6srRTkUswJC4Z5EW1BrEI5TBQX8PEd20d3sD1wZ3QtIJiowP20uskh1ShJAcDgc2f0jQm1f82mFQhjrHr-0uovuKMZoCeA_SNI27uagcWi8v1xz7zAr0HaT9JBPuQxxLg6g5H_wL/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5F5G6m0cSvdZ91ZGkh1Kzq_MxDXEcugQpcZa4IdW6vot_9e0-K5c3hFoMDUnUas6laskyp4skd6Ts-Xyls5gYLb3KkWfKTCZpN90y0egLMbmciTL8qmlG_XtU2lAxcuzhMv4j09ZwlJJE/) 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/AVvXsEj2vFJ_-dIW3kt-4e7kiBe1Ie3xK1pXoe4l1mCBP6fZGN6rOIfIlbDTrupvPW0rtugklgOtIAepLY0bvvl2F-q5h2oEcE87dg9_-qwldr4t9rFezjBNOPdribLepFmTEE3le6D4fLXJop-q/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0RzT6JBdnoksbjvY5desWqNUitYMG3NVH7Gsafmi2aACUGHSoEbypr6m0F6k7yqZe6vyYPefAP7dKPTOULWq88FPdH_RKIKJYPZpErH6xgfWCi-9v7MZzsYB00ffOvHZ8zYhFfb7856Gl/) 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/AVvXsEj4H2IeA9QVJnVg1barXHsJ-4GrTPJEObVZoRWAawZaUh0v2144wGYz8Zn_12eCSghcIucgIn-suOkBVS52hsd-Nf2AcTohht3nF1QExmNu1gg_OsFKmRiG-tDHJ_kjC8UGvGPD9HGoK17Q/) 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>

5. Di chuyển xuống nơi bạn nhìn thấy thẻ </ body> . 

6.Copy mã dưới đây và dán nó ngay trước   thẻ </ body> :

<script src='http://keerthiset2.110mb.com/excellent%20slideshow/compressed.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>

Lưu ý : Tải về compressed.js và 5 hình ảnh ( file zip) tại đây và đưa lên hot hoặc dùng compressed.js và hình ảnh của chính mình 

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

8. Tới blogger và nhấn vào Bố cục 
9. Bấm vào Thêm tiện ích và chọn "HTML / Javascript 
10. Dán mã dưới đây vào và lưu lại:

<ul id="slideshow">


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY5y5NBc5b5cOYN-9IegTwClUbe5gwIr16DRfRIO9chUVEh29vX1J9gj_jG2JaNhsWpx5VQkPlJnoi1l8MP3mw9W8y098q9K5THW9Ly4CvD3Iq46vQFX1wTpYPIf_bjfXIgyYvlVKRTE3p/+1+big.jpg</span>

<p>Enter Description 1 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8pPg8K6Kvb6Vk388KS5U3DjScUoTlu1RFwT17BPaSvnNi1dvKhgWG9pvW1VYfnusmuttWy4M3u4nswDFcX5BQ3x5T2MX2vXAyS-LrgbsuYja769exLw1GkUgMwui0FS4qvOVn8UwGj6HM/+1+small.jpg" alt="Bionic" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4WI7nCGXja27dvPFZElZaCs7bcZQStJA9n1ygQx9WhJyPQ0yN4pqCBnpBa1SdBbF2Z96iNb2eRnq0bX5Jaci3XgR1HXgVRl98hSgn246O5Vbam4kY3DiJU_LG8CES-cbNM8KkQjz59OM4/+2+big.jpg</span>

<p>Enter Description 2 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGzsGAoHLMV-_G3NwWinoVjWybYnSdOlYw4NpBsfHuxX0DIbGPOvmQlp9Shr7Od-bGsWY-0lL5Q0X-gPbNzRHh4V8BPE8oxiIshZut2EP46Vm8xv8uLmXadgeJnI-uUJvJHU8YqOsQ10QT/+2+small.jpg" alt="MOH" />
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvA9JIQp3q7omQQxuMcYPfCYIvRdYMhK8yQYmDs38eXE7t0Ezpe5rTzuF_UPbd1LDKbTBpGoHcujDI02Lg1LGpehoDGcHZS2UwzBQgeMBnHpmxzyYzY3AV2iTW9QbgfPk28TNzniGYX4x1/+3+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLUinRGP2HSW6eotpE-aA3CNqaRUmGJshIhVnhydOlISJXf9MsvhOr76O3V1RbfQR1nD6ytpdaTsHOfPIDAsDSTopJq8YPbfrEiZuSAF7-OrMnIbP2hd49e1ZPQuaQxGVSKQGOg4Q0X6kx/+4+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2AfxylacwB4Ive5YtbwImU_UN-DFRjLGIbbeoz3HXjOYTx-zPR7oTrwAAWsrMS3TuEtP_R9AU5eTWfQAUVzE4s4fHaQRrQ7dF4m3cSesr3ryt9n9tYUuJJ4tN_Sogg1XniTlb57zWdZr/+5+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiinjFNUf2vOZEw3gqnTvnXhzo4FAXF4VUusjwPS1S78RlLcYMPINCc_eve9UsbTo2391XK4jXe8h3R-2Yx0wbLK_igT1aLGMC2Bk2IKEMFfbcJrzwQ2usEwcJJBuFdQ0oOLsApPaBlm2-/+6+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDodQlvyS4jwcEaqmZn7fWXdOLvSJSvJV7fFeuTCiA-6LLeg_NRNKyedG_kIG9kNvvvrlzmL1Au8J85vD1rnAejCL2GzKtFZoDoKHVxB9xuCSYSyZYDKDArk4N9ydgHbzB2_I4D82Iw146/+7+big.jpeg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6wabj1zX52oXjzWpfrZ9LdrvuPai4ynYuRhCo8ZIwnEWbw49sunDriUyA2WGCga7brWi8k-ipCbDOHOQP3JDoaKyDnF1vmjruHEo-_Sh29meBfAmB3MxP5iH2DmnO4MG5mPPoXRd5xrWr/+8+big.jpg</span>

<p>Enter Description 8 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghys5C7irfRw-5RmpoH33SuFH9qin-Vz_H8O19k1QcRfaPecPRFYj1wfkJSIl7KNc0Wjez0EA2KFjfKpUhyphenhyphenLeyN3Rd7H9HiQ147dzbzHUpud5bID2DHHlPlY0P0YjvlSeujemx11drxmm8/+8+small.jpg" alt="Game" /></a>
</li>


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3VKyRhhqGKM-YvawLeyivOiGngvNe7cFBXXC-suSRUHKnhy4iYAdj2nB3XvU8G9OtU07aM0L_rQWJTBlWyCrj1wfinzVIy36TOtocOkn2NjK3eqCN2xaDZ7d3i6CR88fxhyphenhyphenrW1DfbH8BV/+9+big.jpg</span>

<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQo3LroK-iNVUq9ON7tMgn0HDDOjxoyoHievR9sQynDbpD_ibyZyyNLxqTvLNwYYqE9KlIpsCcsu4zs9FpUTEGzyppFV9PnlPfJOSdC-hOD3CvrPseobPqRzC7TWndeLAbbTaIzAzJGmkk/+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>

11. Nhấp LƯU để hoàn thành.

Chúc bạn thành công !...

                                                                                                     Nguồn: Lasantha Bandara