Add a Youtube video to Blogger Sidebar

This is an step by step tutorial on how to add a Video to Blogger Sidebar.A Video in the Blogger Sidebar can be as important as giving the very first good impression of the blog to the user.It also a better way of giving more information about the content or services of the blog.Video marketing is a good method to tell more at a short time and simply to your user.So why not making your blog a better one by just adding a video to the sidebar? So below is given the tutorial on how to add the slider with detailed steps and codes.Follow the steps to add the video sidebar to your blog Today!.

Follow below steps to Add video to blogger sidebar.

Step 1  First Login into your Blogger Dashboard.



Step 2 Go to layout and click on add gadget as shown in below picture.Click on to add a gadget where you want your video to appear.

Step 3 Choose 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><a style='align:center;' href='http://masterbloggingtips.blogspot.com/2013/10/how-to-add-video-to-blogger-sidebar.html' target='_blank'>Widget</a></small>

Step 5 Now go to youtube and search the video you want to add to blogger.



Step 6  Once you found the video, click on 'share'



Step 7   After click on 'embed video' button. After making your selection, copy the embed code. The code changes based on your selection such as size.



Step 8  Now replace your embed code with the red colored codes .You may also change the size of the video manually just by changing the length and width colored blue.


Step 9  Click Save button.


Now you'r done.If you have any problem or question feel free to write it on the comment box or email me at larrimoreashley@gmail.com.




0 comments:

Post a Comment

 
Top