Create A Tab View Widget Category

Exspost Blog - This Time I would make another tutorial on one of the features that exist on the template Really, Johny Jeepers make tab view widget per category. Previously I've also addresses how to make simple tabber on the sidebar. Yes the plan I will later make a tutorial about the various features of all that exists in the template-the templates I made. No one should be kept secret, all the features I will explain one by one to make way, so that in the future, hopefully You are able to make your own template, Thanksgiving can be handed out to friends or other bloggers at least used it myself. And who knows after that anyone want to be my partner in making blogger template or at least make a tutorial for new users can be distributed to bloggers, as currently I work alone, make a tutorial yourself, make a template also own, so if anyone would like to help, please I am very grateful.
Back to the tutorials tab view widget per category, this widget displays 4 post with thumbnail in every single label or category, for more details please look at the screenshot below, and click the demo let more clearly.

DEMO

Just go ahead and on how to make it:

1. First You meesti log into your blogger account with You
2. The second select the blog that you want to add this slider.
3. Once it goes into the template Edit HTML>>, and then tick the expand widget templates
4. Just in case if an error in editing later, you should backup your template first.
5. After all the above steps you do, place the following code above the code ]] > </b:skin> :
   
   # tabber-wrapper {width:640px; float: left; word-wrap: break-word; overflow: hidden}
   Deut. tab-view {float: left; list-style: none; height: 32px; border-bottom: solid # aaa "1px"; border-left: solid # aaa "1px"; width:638px; margin: 0; padding: 0}
   Deut. tab-view li {float: left; height: 31px; line-height: 31px; border: "1px" solid # aaa; border-left: none; overflow: hidden; position: relative; background: # eee; margin: 0 0-"1px"; padding: 0}
   Deut. tab-view li a {text-decoration: none; color: # 26231c; display: block; border: "1px" solid # eee; outline: none; font-weight: 700; padding: 0 15px}
   html ul. tab-view active html li., Deut. tab-view active a, li. html ul. tab-view a:hover{background li. active: # eee; color: # 026ab5; border-bottom: solid # eee "1px"}
   tab-wrapper [...] {border: "1px" solid # aaa; border-top: none; overflow: hidden; clear: both; float: left; width:638px; background: # eee; margin-bottom: 15px}
   ... tabber {padding: 10px 0}
   ... tabber. column {float: left; display: inline; width:146px; margin: 0 an 11px 0 0}
   ... tabber h2 {font: bold 12px Arial; line-height: 15px; margin: 7px 0 5px}
   h2 tabber. a {color: # 222}
   .: # tabber h2 a:hover{color 026ab5}
   Because in the blog demo which I use wide main-wrapper (column postings) is 640px then to wrap up the tab view widget width must be the same, i.e. 640px. You can adjust the width of the main-wrapper on the template you are using.
   And to viewnya its own tab width to be reduced to 2px ("1px" right and left), since this tab is wrapped with a border, so the width became "1px" 638px. The width of each single post here 146px, if the template you are using wide main-wrapper is smaller, then the width for one post this one should also be minimized so that the distance between the left and right sides together.
6. The next step is still in a position to Edit HTML, insert the following code above the code </head> :
   
   < script src = ' http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ' type = ' text/javascript '/>
   < script src = ' https://masolis-javascript.googlecode.com/svn/trunk/tabview.js ' type = ' text/javascript '/>
   <script type='text/javascript'>
   //<![CDATA[
   imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOrY7GGrFKMuSnnpoMrbu8dU8I_V0kExL-LsKta6GeluJV1dZjO8BNM6Wuquhd6tesw5jPwdVNIw_LPJByUCvBi2zoYyR5q7eP43JkoCSpk3Efik4oBld1x1iqhhHCiu7Gh-EauHlXis8/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="Norah Jones";Title2="Diana Krall";Title3="Sting";Title4="Basia";Title5="Sade";Title6="Jamie Cullum";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"><a href="'+posturl+'"><img width="146" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}}
   //]]>
   </script>
   Description:
   

   Note the URL of the script color Blue above, it is the script code jQuery.min.js recent series that I use to make the tab view widget. If You are already on the template, there is aQuery.min.js even though the series is different, the blue color code above You no longer need to enter. Pretty one jQuery.min.js is on the template, it's up to how many series, if you can the latest version.

   Red writing: Norah Jones, Diana Krall and beyond is the title for the tab view widget, you can replace the appropriate katehori who want to appear in the widget. Blue color (146 and 95) above is the size of the width and height of thumbnails on a single post category, please size adjusted.
7. Then insert the following code before the code </body> :
8. < script type = ' text/javascript ' >
   //<![CDATA [
   jQuery (document). ready (function () {$ ("" tabber). hide (); $ ("ul li-view tab.: first"), ("active"). show (); $ (". • tabber •: first"). show (); $ ("ul li-view tab."). click (function () {$ ("ul li-view tab."). removeClass ("active"); $ (this)., addClass ("active"); $ ("" tabber). hide (); var activeTab = $ (this). find (' a '). attr ("href"); $ (activeTab). fadeIn (); return false})});
    //]]>
   </script>
    
9. The next step is how to put them on the tab view widget on our blog. If you want to put on the top of the post as in the demo before, look for the code < div id = ' main ' wrapper->, and then place the following code below:
   < div id = ' wrapper ' tabber->
   < ul class = ' tab-> view '
   <li> < a href = ' # tab1 ' > <script>document.write(Title1);</script></a></li>
   <li> < a href = ' # tab2 ' > <script>document.write(Title2);</script></a></li>
   <li> < a href = ' # tab3 ' > <script>document.write(Title3);</script></a></li>
   <li> < a href = ' # tab4 ' > <script>document.write(Title4);</script></a></li>
   <li> < a href = ' # ' > <script>document.write(Title5);</script></a></li> tab5
   <li> < a href = ' # tab6 ' > <script>document.write(Title6);</script></a></li>
   </ul> < div class = ' clear '/>
   < div class = ' wrapper ' tab->
   < div class = ' tabber ' id = ' tab1 ' >
   <script>
   document.write (& quot; & amp; lt; script src = \&quot;/feeds/posts/default/-/Norah Jones Lyrics? max-results = & quot; + & quot; numposts + & amp; orderby = published & amp; alt = json-in-script & callback = showrecentposts\&quot; & gt; & lt;/script & gt \; & quot;);
   </script></div>
   <div class='tabber' id='tab2'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Diana Krall?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab3'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sting?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab4'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Basia?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab5'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sade Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   < div class = ' tabber ' id = ' tab6 ' >
   <script>
   document.write (& quot; & amp; lt; script src = \&quot;/feeds/posts/default/-/Jamie C. Lyrics? max-results = & quot; + & quot; numposts + & amp; orderby = published & amp; alt = json-in-script & callback = showrecentposts\&quot; & gt; & lt;/script & gt \; & quot;);
   </script></div>
   < div class = ' clear '/>
   </div></div>
   Writing the color Red in the above code is label or category that I show on the tab view widget, please replace with your own label and customize with title tab view in step number 7 above. And if you want to display this widget in the bottom of the post, put the code above the code here (if there is no search is similar):
   

   <!-- spacer for skins that want sidebar and main to be the same height-->
   <div class='clear'>&#160;</div>
   
   </div> <!-- end content-wrapper -->

10. Lastly, save templates and see the result.

Well that last tab view widget tutorial make a lot of friends asked by bloggers on the previous article. Please try, if there is something unclear please leave a message in the comment box. Good luck and hopefully useful.