Blogger Auto Video Template by webbilgi

Rate this template:

Demo: Click here for Demo

Source And Designer: Author page

Click here to Download



Features:
  • Automatic thumbnail creation for Youtube videos.
  • A picture similar to the articles.
  • Custom fields gadget.
  • Simplified design.
  • Dailymotion, metacafe, vimeo, LiveLeak, YouTube, to automatically embed videos
Usage:

  • For videos from, Dailymotion, metacafe, vimeo, LiveLeak, add the endofvid tag to the end of the link. 
  • For the video description: place the [starttext] and [endtext] code to the beginning and end of description.

Example:
http://www.dailymotion.com/video/xmpjro_yntikamyn-bedeli-seeking-justice-vizyonda_shortfilmsendofvid
[starttext]
this is description
[endtext]

The thumbnails for these video services are not available. You'll have to add pictures manually.

Youtube videos: When you add the iframe code, it automatically creates a thumbnail. Instructions:When creating a post, switch to Edit HTML tab and paste the embed code of youtube video in the HTML box.
You don't need to add any pictures.


Other: If thumbnails don't appear, find and delete the ?rel=0 code at the end of youtube URL.

Add a Popular Posts Gallery just above your Blogger posts

The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usability and engage the user. This widget shows the most popular 10 posts on your blog just above your Blogger posts. You can see the Demo on my blog.
Let's start adding it

Before adding it you should know that this widget is not fully compatible with all templates, so please make a backup before making any changes to your blogger template. Now, follow these steps:

1. If you are using the old Blogger interface: 
  • Go to Dashboard - Design - Edit HTML - (make a backup) Expand Widget Template 
If you are using the new Blogger interface: 
  • Go to Dashboard - Template - Edit HTML - Proceed - (make a backup) Expand Widget Template
2. Search (CTRL + F) for this piece of code:

]]></b:skin>

3. Just above/before it, add the following code:

#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhARbRfy3j_AigVUhkPZ6dpUZSvBmXP7i0JY6DZsLVl6i060wrEKStATOhcZnKWjA3Yh7UlGesuW4H4Wg3GMMS2gt6_9gFr3UNXUOTW6J-7Pr7iAon5BB6xa8ll0yYTvKANIIoji60wULN/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Note: you can adjust the size of gallery, changing the values in red (590 and 126).

4. Now search for the following piece of code:

</head>


5. Just above/before it, add this code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_yRvYzHhwCE6bfkcdKqbwIF9g1TfLgFm5yS42mQHTow8eJueIvhbt10WI-MBxq7XgPa9IK1i0_q07_YFfxoA8Yn4IJdD4rfDmFIMiCD60yQsV_is4Z-IZqZZ5tvd1kWxEjGObCH6aXQQg/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhInbUN6_1SRcWxE4uDJ5VRvsdyZNKKlBuPZmFHlzPoYbZKPqhCNPyC1TIWs33h3QoDUnw2Y6M9Cp2TYaQuvu-xbcrkuaMXBIygOWsD6QQjBCxp0i5KNYZyKiUBuVancbPeavo1hwLCW0f1/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Next thing to do is to place the widget just above the blogger posts.

6. Search for this code:

<b:section class='main' id='main' showaddelement='yes'>

...or if you can'find it, search for this one:

<b:section class='main' id='main' showaddelement='no'>

7. Just below it, add the following code:

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpsChLaVTYHLoTaNmAoQsTEHg098adV1Wts6nGM7U-CDWP7xsKzEWgIwpob7WWhfQFppJ2MC4YyrXqto6plOXZzFZfVczzFRPZcsjZSECkQLnqvN1ibEhEw6R6vPPZktSkKBAmdNrtxRZf/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also.

8. Preview and if everything is ok, Save the Template.