Excellent Content SlideShow+Slider to Blogger/WebSite ~ Log-Tutorial

UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </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/AVvXsEjom_RU2jbxao9g7wahRw9eagfbe9XTQFuzpSeaSXWDYOaGzVOdLjItoq3yXeOL7GisY6GSRhO25gp2Zbc8FcVrtsvAvJD2OyqKLRJ3C5bGrYXZcwGXDw9OwcezSSYnqMeLy14FbGrTCElG/) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcQibtXLVrMS21CKYSKViOLbUc4Y08AjDxss4XSO4Svoeifp9wZAkT_OU4GRvvvOPJbhCrxhGUMuj8MKXiwEs17nLg1FfXB_AWyfWRRmgDXH_AqFwDp0ISf0BxcCkA_jK_OOPBzU7TEV1b/) 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/AVvXsEjbi2BzlJwwv9uQHbMPsl2d7qJNnT0kMkkAnezL7gKq9rh7o41_QEjSX3hPM55MmPbg0-1ApKy9R2tYlg1E7mx8VvmnG6QGSohErgjLGwoU8hlKXzsIE8AODhiLEXQwN3rUG1p5Nt79l4OK/) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogA6XufrgfrDbDJgjGKKVYImwa8ktISNZsb4dlZPB_bkt43DKb6yCjq5PmRNyqvX6BMTDJ5gvkDAJrP_YMZmJtwR5u98_OqGSkoHhUTLrzYLkdXD1-ScugTTrLRlUB-VCAFtBTuqt84Ly/) 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/AVvXsEiRoCjdQ3YYcUY2XI83Qnyzoj7WzEeJv5hkydaoO-B9z5XuSUHw7gyCtdV-Dcd3vhX5Ad6zAwhMtZQaGvPtyEQ-OmX-xfMC68haWr2WINc3WQsAGGA5nCJJt-z_dLWSsxjqor2FealaBLNx/) 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 again Scroll down to where you see </body> tag .

5.Copy below code and paste it just before the </body> tag.

<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>

Important !!! : Download compressed.js and 5 images as a zip file, from here and host compressed.js and images yourself.

6.Now save your template.

7.Go to Layout-->Page Elements and click on "Add a gadget".

8.Select "html/java script" and add the code given below and click save.

<ul id="slideshow">


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrxzX8nwjFRYsuUeAsWIssXQZcV3aHtmQbYxQTtPNcroIDkcN2aAQy-IyBhNzYwVn342xjfG_oOT52WQABcvxJu1nF0GWAuF84TtEQUByXrpraMcTNPAcWIN4hrYh9N48Eex4vncPMQRKN/+1+big.jpg</span>

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


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

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

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


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

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

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


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

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

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD9unSwg-hYLS2ESpElvvzl240gpz9LHf8xe3UwepOKhCk23T9i03fRsdWop22GRd9Msa-gcMjfa7MBAPXuG34QNZR7AMA_2RZtA0LeFwNxgDaav5QgP4psHTY5iKnHUodD24JP7bvcM3x/+5+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmORt-sFg3a7JeM_yf49SH8-rWtlAh__kGJsL3pokyanEfWHB0zIDWPVikRgUzgTb6fmwjXHr4AfKCGiZAyOIcMEatOV8b9Z-mmNqFERUOi9Z152LmsGOQ-ZMlK8JXhpcnaRxCQuOAMsE/+6+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2SCoMeik2zLs-zW6ghehWT1MzHeUdTLSJfPdJtevq-ehAAwqT6lY3JRlBDzNbg-d-8ACmPkhc_UL7QebZopadiM3qBJwPOyPmFhxcOAPqkQzxFhg7P1m9JFZHZlBqy8LmQnOPQX8_yeVS/+7+big.jpeg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv8xQ5wBLJT4c_wLG4RpjpziSIm5OAtkYOCKOQplo7vdC74isf2SRvm0iWvb2xSq19A0wIyH5st-r5QF-vDNSCW5wy2gywqJo_GG3u70OrI2f9XOLPibzAzAhIqIrPFl1CnV0s3CehjVr/+8+big.jpg</span>

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


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

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYIDaK2dsErTtDqBx6RWkqdQ2CR-Fa0DBAdOcXjEuWfrawVJjhNQx-3xbaGNy-K3qTkeAGMe9iQZYUSUYWlcyAw77gI3qoLpWAmmsOYWdU2AXWr5yM1bDWZAEHypJ5jY2xZBjeTzNREvE7/+9+big.jpg</span>

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