How to Adding Video to Blogger Sidebar | Haak Blog

3
Today we provide step by step guide to Adding Video to Blogger Sidebar. Most of blogger platform user wants to add blogger video in their sidebar to give more information about their services to user. Video marketing is a good method to tell more information to your user. Because of video marketing more than anything. So today we provide you how to add video in your blogger sidebar. We are sharing full code here to adding video to blogger sidebar.
How to Adding Video to Blogger Sidebar

Adding 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.

How to Adding Video to Blogger Sidebar

Step 3

Add HTML/JavaScript as shown in below picture.

How to Adding Video to Blogger Sidebar

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>
<a style='align:center;' href='http://www.haakblog.com/2013/09/adding-video-to-blogger-sidebar.html' target='_blank'>Widget</a></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.

Post a Comment

Hollywood Bloom said... October 10, 2017 at 12:39 AM

Good Tutorial about Adding video to blogger website and its help me to get video on my sidebar.

www.buyrealsocialfollowers.com said... December 27, 2017 at 4:03 AM

These codes are very much helpful to guide and easy method information to add videos to our blog,I also follow www.buyrealsocialfollowers.com and I need some guidens for an audio upload because i have more soundcloud followers for latest updates on blogs

more soundcloud followers said... December 27, 2017 at 4:05 AM

These codes are very much helpful to guide and easy method information to add videos to our blog,I also follow www.buyrealsocialfollowers.com and I need some guidens for an audio upload like i have more soundcloud followers for latest updates on blogs

 
Top