This template type magazine a lot of features. Not too difficult to install. To further facilitate the installation of this template not widget lay out screenshot given below.
Slider works on this template automatically displays the latest post.How to set it up?
Blogger Dashboard - Open Layout - Edit HTML/JavaScript - Paste below code and Save
<div id='featuredContent'>
<div id='slideshow'>
<div id='slideshowThumbs'>
<ul><script>
document.write(" <script src="/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
</script> </ul>
</div>
<div class='post' id='slideshowContent'>
<script>
document.write(" <script src="/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1"></script>");
</script></div>
</div>
<script type='text/javascript'>
$(function() {
$("#slideshowThumbs ul").tabs("#slideshowContent > div", {
effect: 'fade',
fadeOutSpeed: 1000,
rotate: true
}).slideshow({
clickable: true,
autoplay: true,
interval: 3000
});
});
</script>
<div class='clear'>
</div>
</div>
02.Tab view Widget a label
Note the picture above to change the title of the tab .Find the following code in the edit HTML
Title1="DIARY";Title2="JAZZ";Title3="HEALTH";Title4="SPORT";Title5="COMEDY"
After the meet and changes post color "Blue" on the title. You want to display on the tab view widget categories. Mean while to fill the widget with the label still on the edit HTML find the following code (do not forget to tick the expand widget template)
<div class='tabber' id='tab1'>
<script>
document.write(" <script src="/feeds/posts/default/-/
sport?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9"></script>");
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(" <script src="/feeds/posts/default/-/
lifestyle?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9"></script>");
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(" <script src="/feeds/posts/default/-/
economics?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9"></script>");
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(" <script src="/feeds/posts/default/-/
diary?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9"></script>");
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(" <script src="/feeds/posts/default/-/
health?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9"></script>");
</script></div>
<div class='clear'>
</div>
Writing the color "red" is a fifth above the label put in this category tabber widget, you simply replace with your label and adjust the title of the tab view that has been made.
03. label widget
Included in the label widget layout template is Label 1, Label 2 , label 4, label 5 and Video category You just insert or type the name of the label that you have created on the box .As the picture below.
04. subscribe to widget
It is located on the right sidebar at the top , still in the layout and then select HTML/Java Script and enter the following code in it.
<style type='text/css'>
.social a{color: #6e6e6e;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
.sub-box{width:300px;background:();padding: 2px 5px 7px 2px;font-family:Droid Sans,Helvetica,Arial;}
.emailform{margin:16px 0 0; display:block; clear:both;}
.emailtext{margin:10px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeuhiH8n6E4fcoPlHUCe7PziPrk5KiJgvSqD4Hdi_ADZ3Us3Z82pThkJwbHFNjRLg2Q2d6nnV4zhOIAKk33lJQTeGO1RQO8Ojz01W5h-mlZ6JXx4JOpC_6LEgQ6UDOyp7HWjKALGu-w1c/s1600/email.png) no-repeat scroll 4px center;padding:6px 5px 6px 34px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:175px;}
.emailtext:hover{background: #f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeuhiH8n6E4fcoPlHUCe7PziPrk5KiJgvSqD4Hdi_ADZ3Us3Z82pThkJwbHFNjRLg2Q2d6nnV4zhOIAKk33lJQTeGO1RQO8Ojz01W5h-mlZ6JXx4JOpC_6LEgQ6UDOyp7HWjKALGu-w1c/s1600/email.png) no-repeat scroll 4px center;border-color:#999;}
.emailtext:focus{outline:none;}
.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:5px 10px; border:1px solid #666;cursor:pointer;background:#999}
.sub-button:hover{color:#444;border-color: #999;background:#ccc}
</style>
<center><div class="social" style="padding: 0pt 0pt 0pt 5px;">
<table><tbody><tr><td>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=maskolis' target='_blank'><img alt='newsletters' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPoOZzG5siA9iqWN0bbbR061xyVT_A5f5mULZ6NqaZ_4CfqShiRx6_bIBYUGEesy_r7eK9fENvQUQYFY_wdHD0gwrEABKqYG7DM37ZW_iPJ5Fp8ulg3JGuZtztGvqimTT2DxZO_cU60Mc/s1600/mail.png" border="0" title='newsletters'/></a> </td>
<td> <a href='http://feeds.feedburner.com/maskolis' target='_blank'><img alt='rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7xinQqzXAm-t3Nt5wn2zXRZoxZpV46oX4ZU1pwEE4sJEh_PzKPkrOAMgwT2CCSTkPyR_WivChWontkPJ_bkhQJb_f5uKRcux0wj0cTzYg9YEGgGdINmL2fhbVw8UVttpAxd8xABJ01c/s1600/rss.png" border="0" title='rss'/></a> </td>
<td> <a href='http://twitter.com/maskolis' target='_blank'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBbD9LlR4ebprR_pi1dBvVX64NgcyceSYX2suFaTiTzv3MPF3rmqdWQPgnBCn5PNPWaNqrgP_azp3Z6_qvgMHFyR66lHxO7wQ0VS4JXAzAVDaHSTEyFQHpLp2hq4IVk51a3uXUS0VpKxA/s1600/twitter.png" border="0" title='twitter'/></a> </td>
<td> <a href='http://www.facebook.com/maskolis' target='_blank'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHLhwb0DIUoJazLnYpf1Oiivn5WU9zL1ByKG0mcgwGAos-V9iL9nAFwqmPTCYsFxlMYxfWFzbYa6iFs8MDNl-hLtTRhOLpfKyyAFaNYx9Im-2sr3hmegDe0Kd403fEuyhHfb8j-nItvWg/s1600/facebook.png" border="0" title='facebook'/></a> </td>
<td> <a href='http://www.youtube.com/maskoli' target='_blank'><img alt=' youtube' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyWkvK-uR5vZ4cKQfWDQflaIFtXWE4d-H81gTdfidbZLAccOYijPEJ0hXoebVENBBSPRCU0ziwofK_efdYTcgR2IvGtLaZo0uUk07Vdu4jtY4CuPkl06G-c_Sh6kL0qxuA0we1ls4KN2M/s1600/youtube.png" border="0" title='youtube'/></a>
</td></tr></tbody></table> </div></center>
<center>
<div class='sub-box'>
<div style="text-align: left; display: inline-block;">
<h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8>
<small><i>If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</i></small>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=maskolis', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="maskolis" name="uri"/>
<input type="hidden" name="loc" value="fr_FR" />
<input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="Enter" title='' alt='' />
</form></div></div></center>
