Embedding Youtube Video with AMP is a way to optimize loading in your web pages or blog. For this tutorial you are going to Embed YouTube Video with AMP Play OnClick and on Lightbox. By using this lightbox we can also make visitors focus more on the video content presented when clicking the play button or clicking on the video thumbnail image by extinguishing other content behind the lightbox overlay. There are two ways that we are going to use for this tutorial, by using BUTTON and video THUMBNAIL

1. Play amp-youtube on click using Button

Live Demo - BUTTON

Let us begin with the tutorial:

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.

Step #2: Click Theme --> Edit HTML.

Step #3: Find </head> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code above/before  </head> tag.

 JS
<script async="async" custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async="async" custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Step #5: For CSS find this tag: ]]></b:skin>, just above it add the code below.

 CSS
.center,.video-box{text-align:center}
.lightbox-video{background:rgba(0,0,0,.8);width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center}
.video-box{width:100%;max-width:800px;margin:0 auto}
.btn-play{color:#fff;background-color:#D32F2F;padding:10px 16px 10px 40px;position:relative;font:500 18px Roboto,sans-serif;line-height:1.3333333;border-radius:6px;margin-bottom:5px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;display:inline-block;background-image:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.btn-play:active,.btn-play:focus,.btn-play:hover{color:#fff;background-color:#C62828;border-color:#B71C1C}
.btn-play:before{content:"";color:#fff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAzP9d_P-EKKungS3AI6bx2sttoQYKtQeGCAW1Q-u5BsBMpt6-7O-aNWnHZ2jJCUtjXxYTLUCKamfZPtjiI06vwHdmRBd-DuexPBiU9CDqBA0_jECowo-ugI61BrNZQ2KOV7eUS35MU3Wv/s1600/play.png);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px}

For posting: Use the below code, paste in your blogger post editor.

 HTML
<amp-lightbox id="open-video" layout="nodisplay">
<div class="lightbox-video" on="tap:open-video.close,btn-play.show" role="button" tabindex="0" aria-label="Close Video">
<div class="video-box">
<amp-youtube id="video" data-videoid="Eng0tMkA6Y8" height="270" layout="responsive" width="480" data-param-controls="0" data-param-rel="0" data-param-showinfo="0" data-param-modestbranding="1" data-param-autohide="1" hidden></amp-youtube>
</div>
</div>
</amp-lightbox>
<div class="center">
<button id="btn-play" class="btn btn-lg btn-play" on="tap:video.show, video.play, btn-play.hide, open-video" aria-label="Play Video">Play Video</button>
</div>

Note: Change the red code with your Youtube Video ID.




2. Play amp-youtube on click with Thumbnail

Live Demo - THUMBNAIL

Let us begin with the tutorial:

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.

Step #2: Click Theme --> Edit HTML.

Step #3: Find </head> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code above/before  </head> tag.

 JS
<script async='async' custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script>

Step #5: For CSS find this tag: ]]></b:skin>, just above it add the code below.

 CSS
.video-box,.video-img{width:100%;margin:0 auto;text-align:center}
.lightbox-video{background:rgba(0,0,0,.8);width:100%;height:100%;position:absolute;display:flex;align-items:center;justify-content:center}
.video-box{max-width:800px}
.video-img{max-width:600px;position:relative}
.playonimage{cursor:pointer;margin:auto;width:56px;height:56px;-webkit-border-radius:50%;border-radius:50%;background-color:rgba(0,0,0,.2);background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7e_hvx_P6RezuDIzHAlecKPE3NNIHHLGAtHRdl_71w_DpoDKRAasKpq8qfDkNG1wWkdwPm92AnpKfCvI-PjFdjRChQxPia0ucPIlVcvcU6KZOGPYaKngJ2dXeGQ51YixftvzFapdqyZCV/s1600/play_circle_filled_white_48dp.png);background-position:center;-webkit-background-size:48px 48px;background-size:48px 48px;position:absolute;top:0;bottom:0;left:0;right:0}

For posting: Use the below code, paste in your blogger post editor.

 HTML
<amp-lightbox id="open-video" layout="nodisplay">
<div class="lightbox-video" on="tap:open-video.close,btn-play.show" role="button" tabindex="0" aria-label="Close Video">
<div class="video-box">
<amp-youtube id="video" data-videoid="Eng0tMkA6Y8" height="270" layout="responsive" width="480" data-param-controls="0" data-param-rel="0" data-param-showinfo="0" data-param-modestbranding="1" data-param-autohide="1" hidden></amp-youtube>
</div>
</div>
</amp-lightbox>
<div class="video-img" id="btn-play" on="tap:video.show, video.play, btn-play.hide,open-video" role="button" tabindex="0" aria-label="Play Video">
<amp-img alt="Video" src="https://i.ytimg.com/vi/Eng0tMkA6Y8/mqdefault.jpg" width="637" height="356" layout="responsive"></amp-img>
<div class="playonimage"></div>
</div>

Note: Change the red code with your Youtube Video ID.

Conclusion

Congrats !! You have made it. Now you have learned How to Embed YouTube Video with AMP Play OnClick in Blogger. Hope you liked this tutorial, if you enjoyed then please share it with your friends, please stay tuned with Us for more such awesome tutorials. Happy Blogging!

Learn more »

Pre code is used when you want to emphasize and organize codes in your blog post. Though you can used blockqoute but Pre code looks more professional and at the same time it gives your visitors the emphasis what kind of code you are sharing.

Pre code has unique feature such as, you can specify the kind of code your sharing e.g. CSS, JAVASCRIPT and HMTL, display in professional way and easy to select script by double click on Pre code block.

Adding Pre code in Blogger Site

This widget is powered by Font awesome version 4.3.0 so first we need to add font awesome file to your blogger template.

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.

Step #2: Click Theme --> Edit HTML.

Step #3: Find <head> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code below/after <head> tag.

 CSS
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Step #5: Now find ]]></b:skin>  by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #6: Copy and paste the below code above /before  ]]></b:skin>

 CSS
 
/* CSS Pre Code */
pre {
    background: #444444;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}
pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}
pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 80%;
    color: #3C99F9;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}
pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}
pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}
pre:hover::after {
    opacity: 0;
    visibility: visible;
}
pre.css code {
    color: #4899CE;
}
pre.html code {
    color: #EF662A;
}
pre.javascript code {
    color: #F4C22B;
}

Step #7: Now find </body>  by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #8: Copy and paste the below code above /before  </body>

 JS
<script type='text/javascript'>
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Step #9: save your template.

How to use Pre code in your Blog Post?

Note: Editor should be in HTML view..

 HTML
<pre class='code html'><label><i class='fa fa-html5 fa-lg'></i> HTML</label><code>
Add HTML code here
</code></pre>

<pre class='code css'><label><i class='fa fa-css3 fa-lg'></i> CSS</label><code>
Add CSS code here
</code></pre>

<pre class='code javascript'><label><i class='fa fa-code fa-lg'></i> JS</label><code>
Add JavaScript code here
</code></pre>

Conclusion

Congrats !! You have made it. Now you have learned How to Add Pre code in Blogger Site. Hope you liked this tutorial, if you enjoyed then please share it with your friends, please stay tuned with Us for more such awesome tutorials. Happy Blogging!

Learn more »

If your sharing download/demo in your blog, then you must use a fancy button to attract your visitors. This tutorial will give you the option to add fancy button. This button is purely CSS3 so it is easy for you to integrate in your blogger template. You can refer below for the demo button.

Demo Click here

Adding the CSS in the Template

Let us begin with the tutorial, simply follow the steps below:

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.

Step #2: Click Theme --> Edit HTML.

Step #3: Find </body> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code above/before </body> tag.

<style> .abt-button { margin: 50px auto; width: 200px; } /* Get this button at vblogger-templates.blogspot.com */ .abt-button a { background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent; color: white; display: block; font: 17px/50px Helvetica,Verdana,sans-serif; height: 50px; text-align: center; text-decoration: none; text-transform: uppercase; width: 200px; position: relative; z-index: 2; /*TYPE*/ color: white; font: 17px/50px Helvetica, Verdana, sans-serif; text-decoration: none; text-align: center; text-transform: uppercase; /*GRADIENT*/ background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */ } .abt-button a, .abt-button p { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); box-shadow: 2px 2px 8px rgba(0,0,0,0.2); } .abt-button p { background: #222222; color: #FFFFFF; display: block; font: 12px/45px Helvetica,Verdana,sans-serif; height: 40px; margin: -40px 0 0 10px; position: absolute; text-align: center; transition: margin 0.5s ease 0s; width: 180px; z-index: 1; /*TRANSITION*/ -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; transition: margin 0.5s ease; } .abt-button:hover .up { margin: -5px 0 0 10px !important; } .abt-button:hover .down { line-height: 35px !important; margin: -85px 0 0 10px !important; } .abt-button a:active { background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */ } .abt-button:active .up { margin: -20px 0 0 10px !important; } .abt-button:active .down { margin: -70px 0 0 10px !important; } </style>

Step #5: Click Save Template and your done.

Adding the Button

In adding the button in your post simply switch the post editor to HTML from Compose and add the below HTML.

div class="abt-button"> <a href="#">Download</a> <p class="up">click to begin</p> <p class="down">5MB size</p> </div>

Note: Simply change the words with red color of your own.

That's all for this tutorial. Feel free to comment below if you have any questions or suggestions.  If you like this post kindly share and even share us a beer! Thanks Happy Blogging!

Learn more »

Google Blogs provide the best blogging experience where you can invite up to 100 Team members on your blog as Editor. Which means that your blog can be authored by 100 different people.


In order at atleast to give credit or to acknowledge the author of the blog post, it is good to display its Bio or information after his/her post.

For the Demo, you can also refer on the Author Bio below this post.

Now this tutorial will give you the idea on how to add author box automatically in below post.

How To Add Author Box Automatically?

Just simply follow the steps below:

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard

Step #2: Click ->Template -> Edit HTML Note: Backup your Template

Step #3: Find ]]></b:skin> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below CSS code above/before ]]></b:skin> 

/* Author Box Code*/ .about-author {
width : 98%;
overflow : hidden;
margin:10px 0px;
border:0px;
}
.about-author img {
width:70px;
padding:3px;
border:1px solid #ddd;
margin:0px 5px 0px 0px;
}
.about-author h3{
font-family:verdana !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
}

Step #5: Now Search data:post.body

Step #6: Just below it paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;AUTHOR NAME&quot;'>
<div class='about-author'>
<h3>About Author:</h3>
<img align='left' src='IMAGE LINK OF AUTHOR'/>
<p>WRITE AUTHOR BIO HERE</p>
<p>Follow him @ <a href='BLOG LINK' target='_blank'>BLOG NAME</a> | <a href='TWITTER LINK' rel='nofollow' target='_blank'>Twitter</a> | <a href='FACEBOOK LINK' rel='nofollow' target='_blank'>Facebook</a></p>
</div>
</b:if></b:if>

Step #6: Save your template

Change all necessary information with color RED and everything is set.  Find Author name in Blogger Dashboard > Settings > Under permissions - Blog Authors.

That's all for this tutorials. To all visitors thank you for dropping by at vbt blog.

Happy Blogging!

Learn more »

Content writing takes every blogger a hard time from research down to posting it in their blog/website. But nowadays many new blogger simply doesn't want to do any research or to even write their own content, what they do is simply copy and paste other bloggers article. Which is of course a no no since copied content can now be penalized and when they try to apply for any monetization platform they will be disapprove especially when they will be applying for Google Adsense.

This is actually the reason why most blogger disable the text selection in their site. Now for this tutorial, you are going to learn How to disable text selection in Blogger excluding Blockqoute and Precode. We exclude Blockqoute and Precode because if your blog is about giving tutorials then it is expected that you will be sharing code and of course your visitors will get irritated if even the code you are sharing cannot be copied.

To begin with the tutorial, simply follow the steps below:



Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.

Step #2: Click Template --> Edit HTML.

Step #3: Find ]]></b:skin> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code above/before ]]></b:skin>

.post-body {
 -webkit-user-select : none ;
 -khtml-user-select : none ;
 -moz-user-select : none ;
 -ms-user-select : none ;
 user-select : none ;
}

This code will prevent the reader to select any text on your blog post including Blockqoute and Precode.

To allow the readers to copy the code inside your blockqoute and Precode, follow the step below.

Step #5: Paste the below code above/before ]]></b:skin>  and Save your template.

Blockqoute:

post-body blockquote {
 -webkit-user-select : text ;
 -khtml-user-select : text ;
 -moz-user-select : text ;
 -ms-user-select : text ;
 user-select : text ;
}

Precode:

pre {
 -webkit-user-select : text ;
 -khtml-user-select : text ;
 -moz-user-select : text ;
 -ms-user-select : text ;
 user-select : text ;
}

That's it for this tutorial. Happy Blogging!

Learn more »