Featured Content Slideshow no.2

Με το featured Content Slideshow no.2 μπορείτε να κάνετε το blog σας να μοιάζει μα ένα σύγχρονο site. Μπορείτε να βάλετε ειδήσεις με εικόνες, τις τελευταίες σας αναρτήσεις και ότι άλλο θέλετε. Μετά από αυτήν την ανάρτηση θα ακολουθήσουν και άλλες για το ίδιο θέμα. 
DEMOΠάμε βήμα προς βήμα να δούμε πως θα τα βάλετε! 
1..Σύνδεση στον λογαριασμό σου στον blogger.com2..Διάταξη 3..Επεξεργασία html 
4..Πατάμε το ctrl + F για να ανοίξει το παραθυράκι αναζήτησης και εκεί ψάκνουμε να βρούμε το </head> 5..Αφού τον βρούμε ,βάζουμε από πάνω του τον παρακάτω κώδικα:

<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/AVvXsEjR52jvdn0rbiIkCm88isWtHpjsAJC5o1-yKxFtuHZUEREigANFHBTB-ZzdoyUfCunSdo1qzNIAH-silFqAStReo1dvD5tFbc3GxHXFuDvVm45NZ-PDn3mRAF2CulLaorIY7qFZ6wat7YdR/) left center no-repeat} #imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRuaY-O3Q2XxXpkbg425Pp7M-yKz1ftAapqNgSvpd3DlnhhPLOZaQHbVzG9lTVSmgaE7nP1-UzzjufsTQCCOqeBmDM3A2la3BvasxLDD4QZnSeQ7sSjcwkDBYTCOCylhMjmOhAY04Sq35H/) 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/AVvXsEiD6WL3srnpwloqmp1cGgQTPCuNgRqdqqhqR5MxDG932Z6GJynqzV31tKd45cbioGc_sVbpBrf0azxal5WNpHurhHSexjhJ_jnSxcNiNbkRHx5G8C2JaqLF09XZemhorBNBFa5rUp_auG26/) center center no-repeat} #thumbnails {margin-top:15px} #slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOGQY2FJaDx7b_thnzvQt4xS91u4sNjBt2yrBVV9O-OtjrvaXT3zQhjX4K000qOv3Xq4jkNLe-gTPJXrzlE-ZBvNKZTAoYczyreAii0JUv6KBBXwKW4DAmJMsiP7WyiEeBsM5yncFOToQu/) 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/AVvXsEi0rOQf3w80dt_kFvN_CQrbBHPwbjt1bAOWGBHVRBJu2TIsYP99gPoWX-MoEVmH3bZBLpsIBJR5I93cPBjcbcO9nmyJbPhwyLAhNWyoGfKvhvlNRCZUvfjGQSYlDMmqzTAIhBYFYMYxSnxi/) 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>

Πάμε τώρα στο δεύτερο βήμα:

1..Πατάμε το ctrl + F για να ανοίξει το παραθυράκι αναζήτησης και εκεί ψάκνουμε να βρούμε το </body> 

2..Αφού τον βρούμε ,βάζουμε από πάνω του τον παρακάτω κώδικα:

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

Πάμε τώρα στο τρίτο βήμα:


1..Πίνακας ελέγχου2..Σχεδίαση
3..Στοιχεία Σελίδας4..Προσθήκη gadget5..HTML/JavascriptΚαι μέσα στο gadget βάζουμε τον παρακάτω κώδικα:

<ul id="slideshow">

<li>

<h3>Enter Title 1 Here</h3>

<span>< ...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 1.../span>

<p>Enter Description 1 Here.</p>

<a href="...your link..."><img src=" ...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 1..." alt="Bionic" /></a>

</li>

<li>

<h3>Enter Title 2 Here</h3>

<span> ...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 2...</span>

<p>Enter Description 2 Here.</p>

<a href="...your link...">

<img src="...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 2..." alt="MOH" />

</li>

<li>

<h3>Enter Title 3 Here</h3>

<span> ...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 3...</span>

<p>Enter Description 3 Here.</p>

<a href="...your link..."><img src=" ...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 3..." alt="Fear" /></a>

</li>

<li>

<h3>Enter Title 4 Here</h3>

<span> ...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 4...</span>

<p>Enter Description 4 Here.</p>

<a href="...your link..."><img src="...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 4..." alt="Farcry" /></a>

</li>

<li>

<h3>Enter Title 5 Here</h3>

<span> ...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 5...</span>

<p>Enter Description 5 Here.</p>
<a href="...your link...">

<img src="...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 5.." alt="Farcry 2" />

</li>

<li>

<h3>Enter Title 6 Here</h3>

<span> ...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 6...</span>

<p>Enter Description 6 Here.</p>

<a href="...your link..."><img src="...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 6..." alt="Crysis" /></a>

</li>

<li>

<h3>Enter Title 7 Here</h3>

<span> ...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 7...</span>

<p>Enter Description 7 Here.</p>

<a href="...your link..."><img src="...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 7..." alt="Tomb Raider" /></a>

</li>

<li>

<h3>Enter Title 8 Here</h3>

<span> ...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 8...</span>

<p>Enter Description 8 Here.</p>

<a href="...your link..."><img src="...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 8..." alt="Game" /></a>

</li>

<li>

<h3>Enter Title 9 Here</h3>

<span> ...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο  post 9...</span>

<p>Enter Description 9 Here.</p>
<a href="...your link..."><img src="...εδώ βάζουμε το url της εικόνας που θα εμφανίζετε στο πρώτο post 9..." /></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>

πηγές:http://bdlab.blogspot.com


http://stagona-stagona.blogspot.com

Posted in:

Γράψτε το e-mail σας για να ενημερώνεστε πρώτος! Ακολουθήστε μας!