Image Slider (Sidebar top center)

to show the slider, enter the layout and click edit the box HTML / Javascript that I give the name of theimage slider as in the picture above. Enter the following code into it:


<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>


Description:

Video Category

You just enter or type the name of the label on the widget Video Category as the picture below:

Jazz is my category or label widget to display on the video category, please feel free to edit the label of your choice. Well, now how to make posting videos (specifically from Youtube ) to display the thumbnail on the widget. Same way as in the article I Johny Crottube , I will repeat here:

1. Login to Youtube and select your favorite videos.
2. Then click on the share as top ranking first step, then click the embed code waiting to emerge.
3. Note that I check in the box top ranking 3 above, here you just check the option or options most of which ( Suggested Videos Show When the video is held ) leave the other empty.
4. Then take iframe code Youtube as the top ranking 4 above, paste into a posting on the position ofthe Edit HTML  not compose . To measure the length and width of the video up please you select.
5. Video from Youtube are seen in the posting if you preview, but the thumbnail will not appear on the Homepage. To display the thumbnail on the front page (homepage) you should add this code after the code iframe from Youtube:

   <Iframe width = "640" height = "360" src = "http://www.youtube.com/embed/ 8Pjh0visgJI "frameborder =" 0 "allowfullscreen> </ iframe> <img border = "0" height = " 0 "width =" 0 "src =" http://i2.ytimg.com/vi/ video series code/ 0.jpg "/>

6. I bolded code above is code that you must add after code Iframe Youtube. Note that writing code video series (red color), you fill it with red tint code on it ( 8Pjh0visgJI ). Code from the Youtube video of this draw varies for each video, so if you insert a video do not forget to change the code should draw her with a code on it. And posting to the video will look like the picture below:
   
   
   
   
   
   Note the code in the above picture with blue background. And for the video from Youtube you should not do manual thumbnail, by making the picture from the video first and then uploaded into the postings.

Label widget

Here are few things that you have to do in your blog html codes or install widgets in your blog

1. Latest Post
   
   Located on the left, this feature automatically, meaning that if you make a new post then the article will appear automatically on the latest post. way as the setting for demo template as follows ( new blogger interface ):
   On the dashboard select settings and then click the formatting and language then the timestamp format select only an hour, because the width of the timestamp on my latest post for setting the clock ( see demo ). To set the number of posts to be displayed is the setting, select the post and comment >> show at most select how many posts are shown in columns latest post.
2. Slider
   to change the image on the slider, locate the following code:
   

   numposts1 = 7 ;
   label1 = " health ";

   Description:
   
   Figure 7 is the number of the image displayed on the slider, you can replace it according to your taste. health is a label or category that is displayed on the slider, please change the label you want displayed on the slider (Remember the letter must be the same as the label you have created).
3. Label 1, label 2 and label 3
   is located under the banner 468 x 69 and follow twitter. To display the widget enter the following code to the layout >> add the gadget select HTML / Javasxript   :
   
   
   

   <script type='text/javascript'> numposts var = 1; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; numchars var = 60; </ script> <script type = "text / javascript" type = "text / javascript"> function recentpostslist (json) { document.write ('<ul>');  for (var i = 0; i <json.feed.entry.length; i + +)  {     for (var j = 0; j <json.feed.entry [i]. link.length; j + +) {       if (json.feed.entry [i]. link [j]. rel == 'alternate') {         break;       }     } var entryUrl = "'" + json.feed.entry [i]. link [j]. href + "'" ;/ / bs = json.feed.entry entryTitle var [i]. title. $ t; var items = "< li> "+" <a href="+ entryUrl +'" target="_blank"> 'entryTitle + + "</ a> </ li>";  document.write (item);  }  document.write ('< / ul> ');  } </ script><script href = " http://johnyportal2.blogspot.com / search / label / news "style =" float: right; font: normal 11px Arial; padding: 5px 0; "> More on this category» </ a >
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   Description:
   
   The color blue : the labels or categories displayed in the widget. You can replace it with a label you adjust as needed.
   The color red : Replace URL with the URL of your blog.
4. Label 4 and label 5
   Enter the code below:
   
   
   

   <script type="text/javascript">
   var numposts = 4; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; var numchars = 100;
   </ script>
   <script src = "/ feeds/posts/default/- / multi About ? orderby = updated & alt = json-in-script & callback = labelthumbs "type =" text / javascript ">
   </ script>
   <a href = " http://test-maskolis.blogspot.com / search / label / all-About "style =" float: right; font: normal 10px Arial; padding: 5px 0; "> More on this category </ a>
   The color red : the labels or categories displayed in the widget. You can replace it with a label you adjust as needed.
   The color blue : Replace URL with the URL of your blog.
5. Tab view menu
   
   Located on the upper right sidebar, you just want to make 4 widget will be automatically installed tabber sidebar, I recommend to be given the title of the widget.
6. Twitter Widget
   
   To create a twitter widget like the demo enter the code in the box below HTML / Javascript :
   
   

   <Div style = "background: # fff url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggzUAKmOoHO8VhgTu33ZFaZwpd-nCoP-zE9Tvu2s2deWetsEmx2s052pO5s_PEPeI5oFgmsgFxm5kuxzo5NNUQ76xPng8Wulsu__3RPRKJLUliqQOFFPMTfcLkHXlxnTqGLeeZ_fxTS_cc/s1600/tweet.png) no-repeat; padding-top: 45px; padding- left: 8px ">
   <script src="http://widgets.twimg.com/j/2/widget.js"> </ script>
   <script>
   TWTR.Widget new ({
   version: 2,
   type: 'profile '
   Draft: 10,
   interval: 3000,
   width: 285,
   height: 123,
   theme: {
   shell: {
   background: 'transparent',
   color: '# 000000'
   },
   tweets: {
   background: 'transparent',
   color: ' # 000000 ',
   links: '# 135a9e'
   }
   },
   features: {
   scrollbar: false,
   loop: true,
   live: true,
   hashtags: true,
   timestamp: true,
   avatars: true,
   behavior: 'default'
   }
   }). render (). setUser (' maskolis '). start ();
   </ script>
   </ div>
   Replace maskolis with your twitter username.
7. To replace existing ads or adsense under post in addition to related articles on the Edit HTML(check expand widget templates) Find the following code:
   
   

   <div id="banner-ads">
   

   <script type='text/javascript'> <! -

   google_ad_client = "ca-pub-9608487840337104";

   google_ad_host = "pub-1556223355139109";

   / * Johny side * /

   google_ad_slot = "1127342458";

   google_ad_width = 300;

   google_ad_height = 250;

   / / ->

   </ Script>

   <script type='text/javascript'> src='http://pagead2.googlesyndication.com/pagead/show_ads.js'

   </ Script>
   Change the color code blue on the script code of your ads.