How to Add Video to Blogger Sidebar

Hello friends...Today's tutorial is going to be on how to Add Youtube Video to Blogger Sidebar, which in one word i called 'TUBESIDEBLOG'.. lol, pardon me. TUBESIDEBLOG to me is a blogger video sidebar which allows viewers to view/watch video from your blogger homepage sidebar.....Most of blogger user wants to add blogger video in their blogger sidebar to give more information about their services to user and sometime entertainment bloggers love to put video of the week on their blogger sidebar. Video marketing is a good method to tell more information to your user... So today I'm providing you how to add video in your blogger sidebar. I'm sharing full code here to adding video to blogger sidebar.

How to Add Video to Blogger Sidebar

Follow below steps to Add video to blogger sidebar.

Step 1
Login into Blogger Dashboard.

Step 2
Go to layout and click on add gadget as shown in below picture.

Step 3
Add HTML/JavaScript as shown in below picture.

Step 4
Copy and paste below code:

<div class="widget-content">
<iframe width="336" height="169" src="http://www.youtube.com/embed/gEBJeqvJReg" frameborder="0" allowfullscreen></iframe>
<style>
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}
</style>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?blogID=8193278726666811965&amp;widgetType=HTML&amp;widgetId=HTML15&amp;action=editWidget&amp;sectionId=sidebar" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML15&quot;));" target="configHTML15" title="Edit">
<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<div class="clear">
</div>
<small>

Tips: Change your youtube or video url to Red color url. You can also change Width and Height which is shown in blue color.

Step 5
Click Save button.