How to Replace Older/Newer Post buttons with Post Titles in Blogger

You must have seen some popular blogs who have replaced older and newer post buttons with post titles and you must be wondering that “how to do it?” Therefore, today in this article, we will show you how to replace older/newer post buttons with post titles in blogger.
Read more »

Add Custom Social Media Share Buttons to Blogger Posts

Add Custom Social Media Share Buttons to Blogger Below Post Title and Post FooterSocial Media Platforms (sites) play a major role in overall success of our content because SEO takes time to drive targeted traffic from search engines.

Not to mention, social signals (how many times your content has been shared on different social media sites) has an impact on your overall SEO in many ways.

So I am not going to write an essay on Social Media strategy but, today I am going to share another version of Custom Horizontal Social Media Share Buttons for Blogger along with total shares count. You can add these buttons below the post titles or in footer to increase the social shares of your well written content.

These social media buttons are made purely with the help of HTML and CSS so they don't affect the Page load time speed at all.
Even by removing the Official Social Media Share Buttons from your blog, you can decrease your page load time by half of the total time.

Features:-
1) Fully Responsive Design
2) Made with Pure CSS and HTML
3) Shares Counter
4) Integration of FontAwesome Icons
5) 5 Social Media Share Buttons Included
6) Super Easy to Install (Copy and Paste)

Responsiveness: Check out the below Screenshot which shows the Responsiveness of these social media share buttons on different screen resolutions in one go.

Responsive Social Media Share Buttons for Blogger

Live Demo: If you want to see the live demo then just scroll down to the post footer and watch these buttons live.


Important Update and read Carefully:-
I use Free hosting provided by OpenShift.com for hosting PHP scripts which are liable to get the shares count of all the social media sites. There is monthly bandwidth limit and shares count script will stop working if limit is crossed.

You can upload these PHP scripts yourself if you have premium hosting or else you can use OpenShift.com to get free hosting. Free hosting is enough for one blog.

If you can't manage it yourself then you can hire me. I'll upload these scripts for you and make it working without any issue.

Get PHP Scripts Here = https://github.com/abeMedia/shareCount

How to Add Custom Social Media Buttons to Blogger Posts

Step 1) As usual, login to your blogger account > Select your blog > go to Template section > click on Edit HTML and let the Template Editor load. Do not forget to save template backup before altering anything, be safe.

Step 2) As you know that we are using FontAwesome icons for it so you need to install them in your blog first otherwise icons would not appear. So find out this opening <head> tag (click inside template editor and press Ctrl+F on windows or Cmd+F on Mac to open up a search box inside template editor) and just below that, paste the FontAwesome icons link given below (only if you're already not using them on your blog, avoid adding same codes twice).

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>

You also need to add Google JavaScript Libraries link to make the shares count API work. So add the link given below if you're already not using (rare case, please check before adding).

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>


Step 3) So now you need to add the CSS code to your template so just find out this closing </head> tag and just before this tag, paste the whole CSS code given below as it is.

CSS code:-
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*------------------------------------------------------------
Horizontal Social Media Share Buttons for Blogger
Designed by:: http://www.TwistBlogger.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome
******** Do Not Remove These Credits ********
------------------------------------------------------------*/
.tbn_horizontal_sharebar {
    position: relative;
    background: none;
    z-index: 2;
    width: 100%;
    padding: 10px 0;
    display: inline-block;
    font-family: sans-serif;
    margin: 5px 0px;
    border-top: 1px dotted rgba(0, 0, 0, 0.05);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
}
.tbn_horizontal_sharebar .Share_buttons {
 display: block;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    min-width: 41px;
}
.tbn_horizontal_sharebar .Share_buttons .wrap1 {
    display: inline-block;
    width: 31px;
    float: left;
}
.tbn_horizontal_sharebar .Share_buttons ul {
    margin: 0;
    padding: 0;
}
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 1px;
    float: left;
    width: 16%;
    max-width: 115px;
    display: inline-block;
    font-size: 13px;
    overflow: hidden;
    text-align: left;
    height: 25px;
    line-height: 25px;
    color: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    color: #fff;
    font-size: 17px;
    font-weight: normal;
    font-family: FontAwesome;
    display: inline-block;
    text-align: center;
    padding: 0;
    height: 25px;
    line-height: inherit;
    width: 30px;
    background-color: rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.05);
}
/*--Facebook---*/
.tbn_horizontal_sharebar .Share_buttons .btn_fb {
    background: #3a579a;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb:hover {
    background: #314a83;
}
/*--Tweeter---*/
.tbn_horizontal_sharebar .Share_buttons .btn_twtr {
    background: #00abf0;
}
.tbn_horizontal_sharebar .Share_buttons .btn_twtr:hover {
    background: #0092cc;
}
/*--Google Plus---*/
.tbn_horizontal_sharebar .Share_buttons .btn_gplus {
    background: #df4a32;
}
.tbn_horizontal_sharebar .Share_buttons .btn_gplus:hover {
    background: #be3f2b;
}
/*--Pinterest---*/
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    background: #cd1c1f;
}
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst:hover {
    background: #ae181a;
}
/*--linkedin---*/
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
    background: #2554BF;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin:hover {
    background: #224EB4;
}
/*---Total Share----*/
.tbn_horizontal_sharebar .Share_buttons .share.h6 {
    font-size: 10px;
    font-weight: bold;
    text-shadow: none!important;
    text-decoration: none;
    text-align: center;
    color: #000000;
    border-top: 3px solid #FFF600 !important;
    border-bottom: 0;
    padding: 0px !important;
    padding-top: 5px!important;
    margin: 0 !important;
    line-height: 8px;
    border-radius: 75% 0;
}
.tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible !important;
    width: 95px !important;
}
.tbn_horizontal_sharebar .Share_buttons .share .count.h4 {
    font-size: 18px;
    font-weight: bold;
    text-shadow: none;
    text-decoration: none;
    font-family: sans-serif;
    text-align: center;
    color: #FF0000;
    line-height: 15px;
    margin-top: 0px;
    margin: -4px 0px 2px 0;
    min-height: 15px;
    padding: 0px;
    border: none;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn {
    position: relative;
    color: #C3C3C3;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    float: right;
    min-width: 12px;
    font-family: sans-serif;
    padding: 0px 5px;
    background-color: rgba(0,0,0,0.28);
    border-radius: 0px 0px 0px 15px;
}
 @media only screen and (max-width: 979px) {
 .tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
  width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn
 {
 display: none !important;
}
}
 @media only screen and (max-width:768px) {
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    font-size: 11px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    min-width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    width: 30px;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
   margin: 1px 3px;
}
 @media only screen and (max-width:479px) {
 .tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible!important;
    width: 80px!important;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    width: 25px !important;
    margin: 2px;
    border-radius: 50px;
    border: 2px solid rgba(0, 0, 0, 0.14);
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    display: none !important;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    width: 25px !important;
}
}
</style>
</b:if>

Now you are done with adding CSS part so moving on to next step.

Step 4)  Now you need to add the HTML part to your template. Below I am going to provide both the ways to add these buttons either below posts titles or in the post footer so please carefully read the steps and follow accordingly (needs not to mention, I am always there to help your out if anything goes wrong).

Add Social Media Buttons Below Post Titles
Find out this HTML code line <div class='post-header-line-1'/> in your template and just below that, paste the whole HTML part as it is. You may find the above code line twice so in that case, just paste the code after the second appearance of the above code line.

Add Social Media Buttons to Post Footer
Find out this HTML code line <div class='post-footer'> and just below that code line, paste the whole HTML code as it is.
If you did not find the above code line then try finding <div class='post-footer-line post-footer-line-1'> and paste the HTML just below it. Again if the code line appears more than one time then paste the HTML after second appearance.

Important Note:- If you're using my previous Floating Social Media Share Buttons Bar For Blogger then please it is my humble request not to use the same JavaScript code of Shares Count API.
Just delete the JavaScript API code and only use the HTML part because the previous JavaScript code will work fine with it. If you did not get it then please let me know.
JavaScript Code is highlighted in red color text.

HTML code:-
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('https://count.donreach.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>

<div class='tbn_horizontal_sharebar'>
<div class='Share_buttons'>
  <ul>
  <li class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'></div>
        <div class='share h6'>SHARES</div>
  </div>
  </li>
  <li class='btn_fb'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
<div class="wrap1"><i class="fa fa-facebook"></i> </div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='facebook'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @TwistBlogger - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-twitter'></i></div>
  <div class="wrap">Tweet</div>
  <div class='share-btn' data-service='twitter'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-google-plus'></i></div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='google'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_pntrst'><a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-pinterest'></i></div>
  <div class="wrap">Pin</div>
  <div class='share-btn' data-service='pinterest'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_linkdin'><a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-linkedin'></i></div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='linkedin'>
        <div class='count'/></div>
  </a>
  </li>
  </ul>
  </div>
  </div>
</b:if>
</b:if>

Editing Part:- All you need to edit in the above HTML part is my twitter username  @TwistBlogger so just replace it with your own Twitter username and you're good to go. Now just save your template code and visit any of your blog post to see it live.

If it did not appear on your blog even after following all the steps correctly then please let me know, I'll personally help you out for sure.

Also please let me know your feedback on the design and responsiveness. Does it work correctly? Appearing same as on this blog? Your feedback will help me to make it better if there are any bugs.

So this is all in this article and I hope you guys have liked it. If you liked it then surely your buddies would also like it if they using blogger platform. Let them know by sharing it on at least one social site you actively use. :)

Thanks and stay blessed!

How to Create a Sticky Post on Homepage in Blogger

Have you got anything happening which you want to stick on your Homepage? It could be anything a giveaway, list of discount coupons freebies and etc. Recently one of our readers asked us, how to create a sticky post in blogger. In WordPress, it is quiet easy to stick your post on Homepage, but in blogger you need to apply a trick which today we are sharing with you.  Today in this article, we will show you how to create a sticky post on homepage in blogger.
Read more »

Make Embedded Videos Responsive in Blogger - Add Elegant Frames

Make Embedded Videos Responsive and Add Responsive Frames
Videos are used widely along with text content in blog posts and today's article is all about how to make those embedded videos responsive plus display them inside elegant frames of your choice.

Making videos responsive is the easy task to accomplish but along with that, displaying those videos inside beautiful frames was little tedious for me.

I am going to share two different frames where first one is a image frame of blank MacBook so it appears as if video is playing inside it.

Second frame is what I have designed with pure CSS and added some cool shadows effect in the bottom using pseudo elements. I hope you'll like it.

So what will you get in this post?
1) Making Embedded Videos Responsive without adding any frame.
2) Display Video Inside Responsive Frame Made of Pure CSS.
3) Display Video Inside Responsive Image Frame of a Blank MacBook.

So choice is yours, they all are responsive. :)
(Note:- You don't have permission to copy and share my code on your blog)


1) Make Embedded YouTube Videos or Vimeo Videos Responsive

When you get the code to Embed your video from YouTube or any other video hosting site, your code will contain a fixed height and width properties. So when someone visits your site from small resolution devices like as mobile or a tablet, then your embedded video will not re-size itself according to the screen size.

It will always contain its height and width to the original values despite the screen size. So it will either make a scrolling bar on small screen sizes or else it will hide the video part which is overflowing (If overflow: hidden; property is used for the content wrapper). You can not make them responsive like the way you can do with images.

If the scrolling bar is appearing then that particular page will also show an error in your webmaster tools account if you will check it for responsive design (Bad for SEO?).

I wrote that all just because I wanted to to tell you about how important is it to make your embedded videos responsive.

So how to do it?

It is simple enough to do with the help of CSS. So follow the steps given below and be responsive. :D

CSS Part

<style>
.video_outer_wrap {
    width: 100%;
    max-width: 560px;
    margin: 15px auto;
}
.video_wrap {
    position: relative;
    padding-bottom: 56%;
    padding-top: 0px;
    height: 0;
    background-color: #000 !important;
}
.video_wrap iframe,
.video_wrap object,
.video_wrap embed {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
}
</style>


HTML Part

<div class="video_outer_wrap">
 <div class="video_wrap bottomshadows">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerR2lFU" frameborder="0" allowfullscreen></iframe> </div>
</div>


How to use it?

CSS:- Copy the above CSS Part first then switch to HTML Mode of your blogger post editor and paste the the whole CSS code as it is  (Will work for WordPress too).

(Note: You can also paste the CSS code inside your blogger template skin so that you don't have to paste the CSS code every time in any of your blogger post. If you want to paste the code inside your template then copy the CSS code without the <style> tag and paste it just before ]]></b:skin> and save your template.

HTML:- Copy the HTML code and Paste inside your post editor after switching to HTML mode. You have to paste the HTML where you want your video to be appeared in  your content. Now for adding your video, just replace the code highlighted in yellow color with the embed code you got from your YouTube or Vimeo video.

(Note:- To get the embed code for your video on YouTube, just right click on the video player and select Get embed code. You will get your code in the middle of your video screen so copy it from there.)

If you followed all the steps correctly then you will have your video which is fully responsive. You can check it live by re-sizing your browser window easily.

Now I am going to share those two other ways along with live demo for adding cool frames and the process of using the code will be same as explained above so I am not going to re-write it again (except few changes).

2) Add A Beautiful Frame to Embedded Videos Using Pure CSS

I love this one because it is made with pure CSS and loads as fast as you know. :) It has got really cool design and shadows effect in the bottom.

I have also disabled the Video title Info which appears on the top of it and the related videos which appear in the end of video.

Watch the live demo given below.



CSS Part for it

<style>
.tbn_css_frame_wrap {
    width: 100%;
    max-width: 560px;
    margin: 30px auto;
}
.tbn_css_frame_wrap_inner {
    position: relative;
    padding-bottom: 53%;
    height: 0;
    background-color: #000 !important;
    border: 15px solid #CACACA;
}
.tbn_css_frame_wrap_inner iframe,
.tbn_css_frame_wrap_inner object,
.tbn_css_frame_wrap_inner embed {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
}
.bottomshadows
{
  position: relative;
}
.bottomshadows:before, .bottomshadows:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 0px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
.bottomshadows:after
{
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  right: 10px;
  left: auto;
}
@media all and (max-width: 400px) {
.tbn_css_frame_wrap_inner {
    border: 7px solid #CACACA !important;
}
.bottomshadows:before, .bottomshadows:after {
    bottom: 9px !important;
} }
</style>

HTML Part for it

<div class="tbn_css_frame_wrap">
 <div class="tbn_css_frame_wrap_inner bottomshadows">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerR2lFU?rel=0&theme=light&hd=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

Editing Step:- Please take note that this time you need not to paste your embedding code from YouTube as it is so instead just replace the Video id which is highlighted in the yellow color above. You can easily get this id from the address bar of your browser. See the example:

https://www.youtube.com/watch?v=LxuVerR2lFU
This is the web address of my intro video on YouTube I have uploaded so I have highlighted the unique video id in the yellow color. Copy it in the same way for your video and replace in the above HTML. Ask me in comments if you did not get it.

For Vimeo videos, just replace the whole code starting with  <iframe> code.

Common Problem - Shadows are not appearing as shown in the live demo? Just add this little CSS code to your template skin or inside your blog post with along with above CSS code given below:

.post-body {
    position: relative;
    z-index: 1;
 }

So did it work for you? Let me know if it worked or not. I will definitely help you. So moving on to the image frame.

3) Displaying Embedded Video Inside a Responsive Image Frame

This is the frame of a blank MacBook. I used the border-image: property to display the image frame instead of adding the image frame with background-image: property.

This is all because I wanted to make it fully responsive. When I used the image with background-image: property then I could not make it fully responsive.
Video appeared to be overlapping the frame between different screen resolutions and I did not like it at all.
So I decided to go with border-image: property instead which makes it neat and clean. You can use your any other image but you need to adjust the border width and border image values accordingly.

(Note:-  No Browser support for IE10 and below, works well with others browsers, even with old versions with browser specific prefix. I just hate IE)

See the live demo given below.



CSS Part

<style>
.tb_outer_wrap {
    width: 100%;
    max-width: 650px;
    margin: 15px auto;
}
.tb_video_wrap_macbook {
    position: relative;
    padding-bottom: 43%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    -webkit-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtHcok_wWEXFRlPLsBvfgR3A36yDu44g7n0YLhkMogOgHOXjAowsC0ez0X-drIhDEOkP7mkP24w9NJUWQejcMeaAtXLyp7MFNI2C7jTo_37L-IVSCVrgmayuBNcEYUrDUemjtrwzmy14/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    -moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtHcok_wWEXFRlPLsBvfgR3A36yDu44g7n0YLhkMogOgHOXjAowsC0ez0X-drIhDEOkP7mkP24w9NJUWQejcMeaAtXLyp7MFNI2C7jTo_37L-IVSCVrgmayuBNcEYUrDUemjtrwzmy14/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    -o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtHcok_wWEXFRlPLsBvfgR3A36yDu44g7n0YLhkMogOgHOXjAowsC0ez0X-drIhDEOkP7mkP24w9NJUWQejcMeaAtXLyp7MFNI2C7jTo_37L-IVSCVrgmayuBNcEYUrDUemjtrwzmy14/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtHcok_wWEXFRlPLsBvfgR3A36yDu44g7n0YLhkMogOgHOXjAowsC0ez0X-drIhDEOkP7mkP24w9NJUWQejcMeaAtXLyp7MFNI2C7jTo_37L-IVSCVrgmayuBNcEYUrDUemjtrwzmy14/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    border-color: rgba(0, 0, 0, 0);
    border-width: 27px 76px 55px 76px;
    border-style: inset;
}
.tb_video_wrap_macbook iframe, .tb_video_wrap_macbook object, .tb_video_wrap_macbook embed {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
}
@media (max-width: 500px) {
.tb_video_wrap_macbook {
    border-width: 20px 62px 40px 62px;
}
@media all and (max-width: 400px) {
.tb_video_wrap_macbook {
    border: none !important;
}
}
</style>

HTML Part

<div class="tb_outer_wrap">
 <div class="tb_video_wrap_macbook">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerR2lFU?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe>
 </div>
</div>

Editing Step:-
Replace the highlighted part with your video ID for YouTube and for Vimeo videos, just replace the full <iframe> code.

So this is it for now and I hope you guys like it. Please let me know your feedback via comments whether your liked it or not.

Recommended:- How to Create Landing Pages or Squeeze Pages on Blogger/Blogspot

If you're facing any kind of problem or I could not make things clear then please let me know. I will try my best to help you out.

You can help me too by sharing this post or connecting with me on social networks. :D
Thanks and stay blessed!

10 Best Responsive Blogger Templates of 2016


You all must know that design plays an important role in blogging as it is the key aspect which attracts your readers and make them to stick with your blog. Therefore, it is thoroughly suggested to use some of the best and appealing design for your blog. Are you also eager to know about the best blogger template of 2016? Today I am going to share the 10 best blogger templates of 2016. You may go through the list to choose any of the best blogger templates for your blog too.
Read more »

Win 3 Premium WordPress Themes From ThemeFuse Giveaway

If you have a blog or website, you no doubt already use WordPress, but maybe you haven’t chosen a premium theme yet or you haven’t been able to afford one that does everything you want. Well, you’re in for a real treat because the 3 lucky winners of this giveaway will get their choice of the finest premium WordPress themes in the industry. Peruse ThemeFuse’s catalog of amazing themes and see what you’ve been missing and what you could get if you’re chosen to be one of the 3 lucky winners!
Read more »

19 Useful Keyboard Shortcuts for Blogger Post Editor

Bloggers always look for new tricks and tweaks related to blogging and we keep on helping you in that by sharing some of the awesome tricks and tweaks of Bloggers. Keeping the same trend on, we are sharing some useful keyboard shortcuts which not only save your time but would make the job lot easier. These keyboard shortcuts will help you out in easing your work and you can perform different sort of task in seconds with the help of these keyboard shortcuts. In this article, we will show you 19 useful keyboard shortcuts for Blogger post editor.
Read more »