Template Instructions:
1. - Started setting social buttons by adding the following code to a widget HTML / Javascript:
Two. - To set the Tab, add the following code to a widget HTML / Javascript. Then edit the sections in red with HTML code.<div class='subsboxfull'> <a href='your-twitter-url' rel='nofollow' target='_blank' title='twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqB5lIE15W6kJmUPwL20KPyJOCvyyMEffq5ZdUbtV4lsZX02FRYzoH1RokWOtmkftbQMULPMNf8fIALGd8CCey578J96TPmTNgk9g9gMCViiVKR6EDa1DoM4h3ULWi0MiiriNG6f6EHs/" /></a> <a href='your-facebook-url' rel='nofollow' target='_blank' title='facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhts9qrZglZAlmhszaKw5IFbBMbgrnjra9ODowqQl6qH8K9w9b-68JNz3S4pITExiCVmpiD_7M2o4KhEoB8a1WnffTwPhct4aUuIdTemEbs0sR1FGLYAjczi30Me1Gba9EesyccGVbPIcI/s1600/facebook--box.png" /></a> <a href='your-delicious-url' rel='nofollow' target='_blank' title='delicious'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWieKihNKUMUQix2RzeM2MIeg3bYi1cax7jE9ZtbPrE6h7ETgnoMFLWqyW6oiRORZMcV-IYnc5UUlP_gjG2hRwtKf5HkelNyFo3SAN-g0cNjVHP7Vv1inM4j1aK8MG0JYxE9D6zpZIGc/s1600/delicious-box.png" /></a> <a href='your-stumbleupon-url' rel='nofollow' target='_blank' title='stumbleupon'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYk1_fr3v-vKxDD7WszT6YdgDq9DBsQ7mGIMYqbv6fEOL1FUIpyX4sE0MvHTmpY0V3jhgnDqMG_BBcGBqA4UByx7IMCCRqt50DKsdfFu5QSPxri_EvV8rzihxWDEf0A4qkoKXickGlnKQ/" /></a> <a href='your-linkedin-url' title='linkedin'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIBf6CLwlbdfm5MO8nOhYok5T8xahdWEvCN15yF-XMCFuqcTIn2TdsgOQEQNBmI-8YBDvE0EdvzueIPKb8FnaY-B2N-BLq827VpAiYS6r_GZfF2KVur50HSNBkoo1TTMh8c21JUpE8n8U/" /></a> <a href='your-contact-url' title='contact'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwCwPVIPUCguvkZhriQkwKwJxr09ief81-wDPpjeFo_WXp6Te93skMby7NDT6C8BymnQZ5U6UyKplQ-EWe93kLKF7o31doVPVadW1inSqFhzY4zDVy4HsjDqYuXFYbaAxrzKhluCXziL4/" /></a> <form action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID&loc=en_u' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><p><input name="email" style="width:230px; border: 1px solid #ccc; padding: 5px;" type="text" value="Enter your email address" /></p><input name="uri" type="hidden" /><input name="loc" type="hidden" value="en_US" /></form> <p><span><a class='rss-boxicon' href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' rel='nofollow' target='_blank'>RSS</a></span> <span><a class='email-boxicon' href='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-FEEDBURNER-ID&loc=en_u' rel='nofollow' target='_blank'>Email</a><span><span style="float:right;"><a href='http://feeds.feedburner.com/YOUR-FEEDBURNER-ID' rel='nofollow'><img alt="" height="26" src="http://feeds.feedburner.com/~fc/YOUR-FEEDBURNER-ID?bg=ff9900&fg=000033&anim=0" style="border:0;float:right;margin-top:0px;" width="88" /></a></span></span></span></p> </div>
Three. - To set the Slider, add the following code to a widget HTML / Javascript, position it below the "header" and edit the sections in red.<div id='tabzine'> <ul class='tabnav'> <li class='pop'><a href='#tab11'>Video</a></li> <li class='fea'><a href='#tab22'>Recent</a></li> <li class='rec'><a href='#tab33'>Popular</a></li> </ul> <!-- tab1 --> <div class='tabdiv' id='tab11'> ENTER-TAB-1-CONTENT-HERE </div> <!--/tab1--> <!-- tab2 --> <div class='tabdiv' id='tab22'> ENTER-TAB-2-CONTENT-HERE </div> <!-- tab2 --> <!-- tab3 --> <div class='tabdiv' id='tab33'> ENTER-TAB-3-CONTENT-HERE </div> <!-- /tab3 --> </div>/
April. - For the date to display correctly, we go to "Settings / Language and Format", and in "Time format" select the format.<script type="text/javascript"> stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:3000}, panelbehavior: {speed:500, wraparound:true, persist:true}, defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhLmxDqlgbYWqKMKWxZRe85Fyr3PGzlRIW1L-wTHGu3_i0MkowgFU6SSTMoDz48Shk4K3zpqXtBR_Mid-f_Gb3xG_Hq25sRQs3tsaOXyqfRB4YhAsINwopgIYFyjw96hpynYLsuYObJUM/', -29, 90], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzy3wIVC07xxODKZJtIi0Q-Uo0lQal936Fc8CZQ4XeUC1taVacZJuaZiRAt7G2hRFN7Vu3_hTu0SWqi6s4n38ezO4gaPxEfyCnCkLzW4RkWZD_sFvAJvNlpEo7O8xgMfrsYs-HRHT7sPQ/s1600/fleche2.png', -18, 90]}, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file'] }) </script> <div id="slider"> <div id="mygallery" class="stepcarousel"> <div class="belt"> <div class="panel"> <img src="URL DE LA PRIMER IMAGEN" alt="" /> <h2><a href="LINK 1">TITULO 1</a></h2> <p>DescripciOn...</p> </div> <div class="panel"> <img src="URL DE LA SEGUNDA IMAGEN" alt="" /> <h2><a href="LINK 2">TITULO 2</a></h2> <p>DescripciOn...</p> </div> <div class="panel"> <img src="URL DE LA TERCERA IMAGEN" alt="" /> <h2><a href="LINK 3">TITULO 3</a></h2> <p>DescripciOn...</p> </div> <div class="panel"> <img src="URL DE LA CUARTA IMAGEN" alt="" /> <h2><a href="LINK 4">TITULO 4</a></h2> <p>DescripciOn...</p> </div> <div class="panel"> <img src="URL DE LA QUINTA IMAGEN" alt="" /> <h2><a href="LINK 5">TITULO 5</a></h2> <p>DescripciOn...</p> </div> </div> </div> </div>
DEMO DOWNLOAD