The Next Blogs

Facebook Plus Twitter Share Button Using CSS and Javascript

2014-09-18T09:29:00.000-07:00

Are you looking for Facebook and Twitter share button like most to the site are using, in today's post i will explain you on how to create a Facebook and Twitter share button using CSS, HTML and Javascript. Most of the top site have already started using this feature to share their post. You need to add just add few lines of code in your template.

CSS Code
Add the CSS Code inside the ]]></b:skin> tag of your blog template.

.facebook-sharing {
background: #3b5998;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 1em 2em;
-webkit-border-radius: 6px;
border-radius: 6px;
font-family: sans-serif;
margin: 0;
text-align: center;
}

.twitter-sharing {
background: #57cff4;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 1em 2em;
-webkit-border-radius: 6px;
border-radius: 6px;
font-family: sans-serif;
margin: 0;
text-align: center;
}

HTML Code
Now add this code where you want the share button to appear on your blog.

<div class="twitter-sharing" data-tnb="twitter-share">Share on Twitter</div> <div class="facebook-sharing" data-tnb="facebook-share">Share on Facebook</div>

Javascript Code
Add the Javascript Code before the </body> tag of your blog template.

<script type="text/javascript">
var twitterShare = document.querySelector('[data-tnb="twitter-share"]');

twitterShare.onclick = function(e) {
e.preventDefault();
var twitterWindow = window.open('https://twitter.com/share?url=' + document.URL, 'twitter-popup', 'height=350,width=600');
if(twitterWindow.focus) { twitterWindow.focus(); }
return false;
}
</script>
Add the Facebook script after the above script.
<script type="text/javascript">
var facebookShare = document.querySelector('[data-tnb="facebook-share"]');

facebookShare.onclick = function(e) {
e.preventDefault();
var facebookWindow = window.open('https://www.facebook.com/sharer/sharer.php?u=' + document.URL, 'facebook-popup', 'height=350,width=600');
if(facebookWindow.focus) { facebookWindow.focus(); }
return false;
}
</script>

Note:- You can change the share button color by changing the background color code in CSS.

Add Scroll Back to Top Button to Blogger

2014-09-11T16:43:00.001-07:00

A scroll to top button in blogger is really helpful for readers if your blog has lots of posts on homepage plus comments on post page and if there is no sticky navigation plugin. In this post we are going to show you how to add back to top button which will appear when users scroll down reading your post.

Before Editing Backup Template

Always create a backup of your template before editing CSS or HTML in blog.

Adding Scroll To Top Button To Blogger

1. Go to Blogger > Layout > Add Gadget > Add HTML/Javascript Gadget now copy and paste the below code inside it.

<script type="text/javascript">
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.tnb-back-to-top').fadeIn(duration);
} else { //thenextblogs.blogspot.com
jQuery('.tnb-back-to-top').fadeOut(duration);
}
});
jQuery('.tnb-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

2. Next step got to Template > Edit HTML and find ]]></b:skin> tag. Once found paste the below code above it.

.tnb-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}

3. Now lets add the HTML tag in which you can use image or text for this go back to gadget part and paste the code.

<a href="#" class="tnb-back-to-top"><img src="IMAGE URL"alt="Back To Top"></a>

Now add the image url or replace with text and save template.

Google Blogger 404 Infinite Scrolling Background Page

2014-09-10T08:32:00.004-07:00

Do you use Google Blogger then you must have a 404 Error page for your blog, or else it may affect in your organic search results, 404 error page describes the page or post you are looking for which does not exists and is very important. In today's post we are going to explain on how to add a 404 infinite scrolling with background error page in a simple way.

Step 1
Go to blogger Settings => Search Preferences.

Step 2
Click on Edit and copy the below code inside the text box.

.effect{
position:fixed;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_oUTPnXRchqW6NdT6vOj0Y4ntxgT7VVpOeHH5iRChj3M4JbUzZChnBHA3ykAIqhP7Lb5Rvk6u3fO5g2aCNQu2OUE9ewf1C1B-CHUte11AYaWLclvaeIELJuSpPDwUNEoybcJVBnX_V7UG/s1600/tnb-404.png) repeat-y center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

-webkit-animation:100s scroll infinite linear;
-mozo-animation:100s scroll infinite linear;
-oi-animation:100s scroll infinite linear;
-mstnb-animation:100s scroll infinite linear;
animation:100s scroll infinite linear;
top:0;
left:0;
width:100%;
height:100%;
}

h1{
text-align:center;
color:skyblue !important;
margin-top:10%;
font:60px Muli;

}

h2{
text-align:center;
color:orange !important;
margin-top:10%;
font:30px Muli;

}
@-webkit-keyframes scroll{
100%{
background-position:0px -3000px;
}
}

@-mozo-keyframes scroll{
100%{
background-position:0px -3000px;
}
}

@-oi-keyframes scroll{
100%{
background-position:0px -3000px;
}
}

@-mstnb-keyframes scroll{
100%{
background-position:0px -3000px;
}
}

@keyframes scroll{
100%{
background-position:0px -3000px;
}
}

Step 3
Copy the HTML code and add it below the CSS code.

<div class="effect">
<h1>404 ERROR PAGE</h1>
<h2>Created By Frinton R Madtha</h2>
</div>

Step 4
Click on Save Changes as shown in the image below.

Toggle Navigation Bar Using CSS, HTML and Javascript

2014-09-06T03:33:00.001-07:00

Navigation bar are used in all blogs and website and is very helpful for visitors better to click on a certain label than searching them on the whole blog for a particular label, mostly normal navigation bar in blogger are not responsive to mobile designs so we have created one which is responsive to mobile design with drop down on click.

Advantages of Adding Navigation Bar

Adding toggle navigation in blog may result two best ways responsive for mobile plus on desktop and better to function. It also makes your site or blog look clean in mobile form as in normal navigation you need to slide to left right zoom or double tap to click on a link or even you can't see label on the nav. The fact is all the top sites and blog use this navigation toggle function.

This toggle navigation bar is created using CSS, HTML and Javascript code. The first part is to add the CSS then HTML and lastly Javascript code in you template.

Note:- Backup Your Template Before Adding Code

Lets Add Navigation Bar in Your Template

Step 1. Go to your Blogger dashboard select your blog.

Step 2. Now click on Template > Edit HTML

Step 3. In the Template Editor search for ]]></b:skin> tag

Step 4. Before the ]]></b:skin> tag add the code

/*TNB-Style*/
.tnb-style {
background: #f7f7f7;
border-bottom: 1px solid #808080;
margin-bottom: 1em;
overflow: hidden;
}

And below it add this CSS

a.menu-link {
float: right;
display: block;
padding: 1em;
}
nav {
clear: both;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.tnb nav {
overflow: hidden;
max-height: 0;
}
nav.active {
max-height: 15em;
}
nav ul {
margin: 0;
padding: 0;
border-top: 1px solid #808080;
}
nav li a {
display: block;
padding: 0.8em;
border-bottom: 1px solid #808080;
}

@media screen and (min-width: 48.25em meaning for the best response) {
a.menu-link {
display: none;
}
.tnb nav {
max-height: none;
}
nav ul {
margin: 0 0 0 -0.25em;
border: 0;
}

nav li {
display: inline-block;
margin: 0 0.25em;
}
nav li a {
border: 0;
}

Now lets add the HTML code below the <body> tag in your blogger template.

<div class='tnb-style' id='tnb-style'>

<a class='menu-link' href='#menu'>Menu</a>
<nav id='menu' role='navigation'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>TOC</a></li>
<li><a href='#'>Policy</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav></div>

The last part to add in your template is the Javascript code to add this you need to find the </body> tag and before it add the Javascript code.

<script>$(document).ready(function() {
$('body').addClass('tnb');
var $menu = $('#menu'),
$menulink = $('.menu-link');

$menulink.click(function() {
$menulink.toggleClass('active');
$menu.toggleClass('active');
return false;
});});
</script>

Now save your template and you are all done.

Professional CSS Live Demo Button for Blogger

2014-09-04T09:53:00.001-07:00

Buttons are the most important thing in blog, giving a link to other site or download specially it should look better to blog's having Live Demo button so we have created professional CSS live demo button which is different from what you use in your blog.

Add Professional Live Demo Button

Go to your Blogger Dashboard then click on Template now Backup your blog template first and then click on the Edit HTML button now press Ctrl + F if windows for Mac users click Command + Fand find the below code.

]]</b:skin>

Now before the ]]></b:skin> paste the code below code

tnb{
margin-top: 2em;
}

.live-button {
display: block;
margin: auto;
text-align: center;
border-radius: 4px;
background: #69c773;
background-color: #69c773;
font-size: 20px !important;
padding: 15px 20px;
width: 250px;
color: #FFF;
}

.live-button:hover {
color: #51A65F;
}

Now save your blog template

Adding The HTML Tag In Post

Now go to posts paste the tag given below

<a class="live-button" href="#">Live Demo</a>

Now change the hash tag and add url instead of it.

Simple Twitter Profile Card Using HTML and CSS

2014-09-04T05:54:00.003-07:00

We all know about Twitter card and today we have created a simple profile twitter card with HTML and CSS code you can add this profile card wherever you want it to appear in you blog. This card may mostly be used for music and entertainment blogger's as they can show their tweets, followers and following on their blog.

This Twitter profile card is built using CSS and HTML code. You just need to change the profile pic, total number of tweets, followers and following in the HTML code, This is simple version 1 twitter card.

Adding Simple Twitter Profile Card for Blog.

Step 1. Go to your Blogger dashboard then go to your blog

Step 2. Then go to Template > Edit HTML

Step 3. Now add the CSS code in the ]]></b:skin> of your blogger template

ADD FONT FACE TAG HERE

.tnb-card{
height: 175px;
width: 500px;
position: absolute;
bottom: 15%;
left: calc(50 - 250px);
border-radius: 5px;
overflow: hidden;
}
.profile-pic{
height: 100%;
width: 35%;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6tMqcuGIFMKsaj7V4LEgYd3EGvArNPv1qzGodbWHgEWmrdv9YNbjCeOicS-qvShGFmxPpJKnbAxB5tBOpvqoxnPWiR_jj3Wft-sUr3ISFJj_Zm3wUhObkTnhVECGujdFghshtkxijWgD/s1600/Frinton1.jpg');
background-size: cover;
float: left;
position: relative;
}
.text{
height: 100%;
width: 55%;
top: -15%;
float: left;
position: relative;
padding: 10px;
}
.title-name{
font-size: 22pt;
color: #f7941e;
}
.tagline-desp{
font-size: 14pt;
color: #666;
}
.tnb-stuff{
position: relative;
top: 70%;
left: -20px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.twitter-tff{
position: absolute;
width: 100%;
bottom: 15%;
}
.twitter-tff li{
margin-left: 3%;
float: left;
width: 30%;
text-align: left;
}
li{
color: #0099cc;
font-size: 10pt;
}
li tnb{
color: #666;
font-size: 8pt;
text-transform: uppercase;
}

After adding the code you need to save your template.

Step 5. Now you need to add the HTML tag in your template or gadget. If you want to add HTML tag in your template you need to copy and paste the code below the <body> tag in your blog or else go back to Layouts add HTML/Gadget and paste it where you want the gadget to appear.

<div class="tnb-card">
<div class="profile-pic">

</div>
<div class="text">
<div class="tnb-stuff"></div>
<h1 class="title-name">Frinton Madtha</h1>
<h2 class="tagline-desp">Blogging at TheNextBlogs</h2>

Add Twitter Profile Button Code Here if Needed

<div class="twitter-tff">
<ul>
<li>1,355 <tnb>Tweets</tnb></li>
<li>1130 <tnb>Following</tnb></li>
<li>113 <tnb>Followers</tnb></li>
</ul>
</div>
</div>
</div>

Now save it and you are done view your blog to see the Twitter profile card

How to Add CSS Code to Blogger Template

2014-09-03T16:28:00.000-07:00

Some of you may have difficulties while adding CSS code in your blogger templates so i came up with a short guide on adding CSS (Cascading Style Sheets) which will be easier to customize on your blogger blog.

Some of the blog readers complaint that they find difficulty installing CSS code and locate in the ]]></b:skin> tag. So this tutorial explain an easy way to add the CSS code.

Add CSS to Blogger Template

Step 1. Go to your Blogger Blog

Step 2. You can go to the Customize button click on it and then click on the Advanced Tab.

Step 3. In Add CSS add the CSS code inside it or copy and paste the code then click on the Apply to Blog Button on the top right.

Now you are all done.

Another Method to Add CSS code in Template.

In your blog go back and click on the Edit HTML button then in your template before the </head> tag and after the ]]></b:skin> tag add this code <style type="text/css">Place the code</style> Now between the text place your CSS code and click on save template.

This is the simplest way adding CSS code to your blog.

TNB Notification Style Using HTML, CSS and Javascript

2014-09-02T09:36:00.000-07:00

I would like to share a simple and clean notification message style for adding it on your blog or website. There are a lot of ways to shown notification message to users but this notify shows the message and disappears within second. This notification is created using CSS, Javascript and HTML code.

How it works: Everytime you reload the blog the message will popup at the side of your navbar or header, In my blog i have added text to it Welcome to TheNextBlogs you can add your own text to it some of the advantages using TNB notification are you can even remove the text and add Facebook, twitter or google+ button script to it.

Adding The TNB Notification In Template:-

Go to your Blogger Blog > Templates > Edit HTML

Find the ]]></b:skin> tag and before it add the TNB notification CSS style.

#Tnb-Notification {
display: block;
position: fixed;
top: 10%;
left: -50%;
margin: 0;
z-index: 999;
}

#Tnb-Notification b {
position: relative;
top: -5px;
padding-top: 5px;
padding-left: 16px;
padding-right: 8px;
padding-bottom: 8px;

color: $basecolor;
font-family: $basefont;
font-size: 1.5em;

background-color: $green;
}

#Tnb-Notification span {
padding: 10px;
vertical-align: top;

color: $dark;
font-family: $basefont;
font-size: 1.2em;

background-color: $basecolor;
box-shadow: 8px 5px 20px -5px rgba(0,0,0,0.5);
}

*, *:before, *:after {
box-sizing: border-box;
}

Next step lets add the HTML tag after the <body> tag in your template or anywhere you want it to appear.

<div id='Tnb-Notification'>
<b>! </b><span>Welcome to TheNextBlogs!</span>
</div>

The last and the final part is to add the Javascript code. You can add this before the </head> or </body> tag in your template.

<script>
//Tnb-notification
$(document).ready(function() {
$("#Tnb-Notification").delay(2000).animate({
"left":"0px"
});

$("#Tnb-Notification").delay(4000).animate({
"left":"-50%"
});
});
</script>

Now save your template and reload you blog to see how it works and you are all done.

How to Directly Add Javascript Code in Blogger Template

2014-09-01T15:12:00.002-07:00

I was just adding a javascript code in my Blogger template and was getting errors while adding it. So i want to share a small quote when adding Javascript to your template. This code helps from prevent the XML errors in blog while saving your template. This is a tag inside it you need to place the JS wrap code and will not show you any errors.

This tag should be place before the </head> tag or you can add it before the </body> tag in your blogger template.

<script type='text/javascript'>
//<![CDATA[
// ADD Copy or Past your javascript code here..
//]]>
</script>

After adding it with the code Save your template.

Facebook Open Graph Meta Tags for Blogger

2014-09-01T10:26:00.001-07:00

Well today we are going to see on how to add Facebook Open Graph tags on your blog. This is really very simple and easy trick to add meta tags in your blog template. You just need to follow the steps below on adding it:

Lets Start Adding Facebook Open Graph Meta Tags:

1. Go to Blogger Blog > Template > Edit HTML [First Backup up your template before adding meta tags.]

2. Find the <head> tag in your template and below it paste the meta tags given below.

<meta property='og:title' expr:content='data:blog.pageTitle'/>
<b:if cond='data:blog.pageType == "item"'>
<meta property='og:type' content='article'/>
<b:else/>
<meta property='og:type' content='website'/>
</b:if>
<meta property='og:url' expr:content='data:blog.canonicalUrl'/>

<b:if cond='data:blog.postImageUrl'>
<meta property='og:image' expr:content='data:blog.postImageUrl'/>
<b:else/>

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta property='og:image' expr:content='data:blog.postThumbnailUrl'/>
<b:else/>

<meta property='og:image' expr:content='data:blog.blogspotFaviconUrl'/>
</b:if>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
<b:else/>
<meta property='og:description' content='{{DEFAULT SITE DESCRIPTION GOES HERE}}'/>
</b:if>
<meta property='og:site_name' expr:content='data:blog.title'/>

<meta property='fb:admins' content='{{Your FB ADMINS}}'/>
<meta property='fb:app_id' content='{{Your APP ID}}'/>

3. Add your own description, fb:admins and app id which is in bold color. Save your blog template and you are all done.

This is the simplest way adding Facebook Open Graph to your blog. Now write a post and share to see how the fb meta tag works.

If you like are tutorials, Stay connected and Keep Subscribed to our blog for more Tutorials.

Drop a comment below if you have any problem regarding this post.

Google Style Logo Using CSS for Blog

2014-08-31T06:59:00.001-07:00

Google has many types of logo for its site and keeps on updating some of the logo with its doodles, if you search for Google logos on search you may find different types of logos in images. Logos are created using images mostly on all the websites but some use CSS codes to add the logo one of which we have created it using the CSS adding font face and the <tnb> tag.

To add this style in your site or blog is very easy. Go to your blogger dashboard, Template > and click on Edit HTML after that find the ]]></b:skin> tag in your template and before it add the CSS code inside it.

@font-face {
font-family:tnb;
src: url(add you font face tag here);
}

.logo {
font-family:google;
font-size:0px;
white-space:nowrap;
}

.logo tnb {
font-size: 10vmax;
}

.black { color:#000000; }
.orange { color:#ffa500; }
.green { color:#32CD32; }

Go to google font face and add your custom tag in the src url and change the 10vmax to your custom number. Now lets add the tag to show up the logo in your site using <div> tag add this code should be added in the body tag of your template.

<div class="logo">
<tnb class="black">The</tnb>
<tnb class="orange">Next</tnb>
<tnb class="green">Blogs</tnb>
</div>

Note you can the the color code of your choice or you this as default. After adding the code save your template and you are all done.

How to Add Facebook Graph Search on your Blog

2014-08-28T10:04:00.002-07:00

We all know about Facebook graph search which helps us discover a lot of thinks like find friends, movies, game etc and today we have created a simple graph search like Facebook for blogger. Our graph search doesn't work like the Facebook one but it simply created to search blog post and we call it the version 1 graph search or Blogger graph search. This is just a simple one with blog post search but next time we will include additional things to it.

The above image show's how the graph search will look like after you add it in your blog. To add TNB graph search in your blog you need to follow the step below. This search is created using the CSS HTML and Javascript code.

Let Add Facebook Graph Search in your Blog.

1. Go to your Blog Template and Edit HTML.

2. Find the ]]</b:skin> tag in the template

3. After finding the tag add the below CSS code before it.

.profile
{
float: right;
color: #ddd;
cursor: pointer;
font: normal 17px 'Open sans',sans-serif;
margin: 7px;
margin-top: 10px;
opacity: 0.5;
}
.pic
{
float: right;
width: 30px;
height: 30px;
cursor: pointer;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi22MFkPJW0VOXXbuVN0cj_y4fuZp_03CTbSO3ZuLwcPFOScJHRk1dhiN6MwIvrfN9FoUHCo2sq-yXh4eVS8-tYEimOJbNplbq-he_3TLuxht0ryHEyVMU3pKKuUc-5R5MGduYvCfq1-vDg/s1600/frinton.jpg) no-repeat ;
margin: 7px;
margin-right: 100px;
}

*{
-webkit-font-smoothing:antialiased;
box-sizing: border-box;
}

.tnb-container{
width:1280px;
height:42px;
display:block;
background-color:#4c66a4;
position:absolute;
top:0;left:0;
}

input{
height:32px;
width:640px;
margin-top:3px;
margin-left:10%;
background-color:#4c66a4;
border:none;
font-family:'Helvetica Neue', Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:1.2em;
font-weight:300;
color:white;
line-height:24px;
position:relative;
display:inline-block;
}
::-webkit-input-placeholder {
color: #cdd9f1;
}
:-moz-placeholder {
color: #cdd9f1;
}
::-moz-placeholder {
color: #cdd9f1;
}
:-ms-input-placeholder {
color: #cdd9f1;
}
input:focus{
outline:none;
content:"";
}
:focus::-webkit-input-placeholder {
color: #6779bc;
text-shadow:0 -1px 0 rgba(0, 0, 0, .2);
font-size:1em;
}

#tnb-icon{
width:25px;
height:21px;
position:relative;
top:5%;
left:9.6%;
z-index:2;
border-box:1px solid black;
background:WHITE;
border-radius:3px;
padding-right:2px;
text-align:right;
font-size:0.6em;
font-family: Klavika, 'lucida grande', 'lucida sans', sans-serif;
font-weight:bold;
overflow:hidden;
color:#4c66a4;
display:inline-block;
}
#tnb-search{
background:url('#');
background-repeat:no-repeat;
width:25px;
height:21px;
position:relative;
display:inline-block;
left:9.4%;
top:3%;
z-index:0;
opacity:1;
}

The above CSS code show profile and pic on the right you can add you own pic using 30 x 30 image and change the name with your own name in the HTML tag.

4. Now find the <body> tag in your template and paste the below code after it for the graph search to appear on your blog header

<div class='tnb-container'>
<div id='tnb-icon'>TNB</div>
<form action='/search' id='tnb-search' method='get'>
<input id='s' name='q' onfocus='if (this.value == "Search for Tutorials, Templates and posts") {this.value = ""} ' placeholder='Search for Tutorials, templates and posts' type='text'/></form>
<div class='pic'/><div class='profile'>Frinton</div>
</div>

5. Search for </body> tag and add the below script before it in your blog template, the Javascript code works for the fading work in the search box

<script type='text/javascript'>
$(function(){
$("input").hover(
function(){
$('#profile').fadeIn(400);
$('#icon').fadeOut(400);
$('#search').fadeIn(400);
},
function(){
$('#search').fadeOut(400);
$('#profile').fadeIn(400);
$('#icon').fadeIn(400);
}
);
});
</script>

Now save you template, reload your blog to see the Blogger graph search appear.

Live Demo

Add Print Friendly Button to Blogger

2014-08-27T16:14:00.001-07:00

I have been seen lot of blogs like entertainment, fashion, technology and cooking adding a print button to their site so that users can print articles in just one click. Adding the print button gives a lot of help to users, say cooking site to print recipes form the site and help users who don't regularly use internet.
Its a very simple and is created using HTML a Javascript code. To add this in you blog you need to find the </head> tag in your blogger template and add the code before it.

<script type='text/javascript'>
function printDiv(div) {
var newWin = window.open("", "printwin");
newWin.document.write(div.innerHTML);
newWin.print();
newWin.close();
}
</script>

After placing the script find for <div class='post-header'-line-1> and paste the below code before or after it as you wish you can even add the code anywhere in you template.

<div style='text-align: right;'><a href='javascript:;' onclick='printDiv(this.parentNode.parentNode);' style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpBQ6bS_mJCgJqZq2TEldgWAqDYEEfjNeJfVFzyMUN26sJmZ3UuLFBCajXN4TcmuGlcAFWxTYB5wWx4XuEYq95bRanINiEtRci86yik0P6hSgEgOeyqzdvV7l5o-CKwH99QGMjgoOW1eo/s16/printer.png) left no-repeat; padding-left: 18px;'>Print</a></div>

You can change the print icon by removing the image and adding your own print mage.

How to Embed Flipboard Magazine on your Blog or Website

2014-08-27T06:57:00.002-07:00

You may have noticed Flipboard magazine widget in our blog which we recently added it so that we can share our article on it using the flip button. This is quite good to gain visitors from Flipboard to our blog and read our post.

The Flipboard magazine is available to everyone and can be easily added to your blog or sites using the IFRAME tags, Thinks to know before adding magazine to your blog

1. Flipboard has just come up with its desktop widget and is still no optimized for mobile devices yet.

2. The Flipboard widget is too big enough to add so you can use Pages or can add it before the footer of your blog or site.

Lets add it:- Step by Step to your blog:-

1. Add the <div> tag in your template or gadget where you want the Flipboard magazine to appear.

<div id="flipboard"></div>

2. Lets add the Javascript in your template for this you need to go to your blog template and before the </body> you need to place this code.

<script>
(function () {
var width = 0,
flipboardtnb= document.getElementById('flipboardtnb');
width = flipboard.getBoundingClientRect().width ? flipboard.getBoundingClientRect().width : flipboard.offsetWidth;
if (width > 300) {
flipboard.innerHTML ='<iframe width="100%" frameborder="0" height="250px" marginheight="0" marginwidth="0" scrolling="no" src="https://flipboard.com/section/the-next-blogs--__YXV0aC9mbGlwYm9hcmQvY3VyYXRvciUyRm1hZ2F6aW5lJTJGemdoV1V4WklTSkMyTEhJVkY3V2hNQSUzQW0lM0ExNTg5NTg0MjY"></iframe>'
}
})();
</script>

Note:- You need to replace the in blue with your own, we have even changed the width and height of the magazine.

Add Custom Navigation Menu for Blog

2014-08-26T06:22:00.003-07:00

Do you use Pages, link list or your own custom header menu for labels as its very important and used by all blogs and site we too have created a custom top header menu which is simple and looks clean for your sites. If you still don't have one and don't like to use pages or waiting for a simple header menu then we have it for you. This top header menu is created using CSS and HTML code.

Adding Custom Nav Header Menu:-

1. Go to your Blogger Template

2. EDIT HTML and Find ]]></b:skin> tag in your template

3. You need to add the below CSS code before the </b:skin> tag

#top-header div.menu {
min-width: 1000px;
display: block;
height: 2.5em;
margin: 0;
padding: 0;
background-color: #162336;
}

#top-header ul.menu {
width: 1000px;
margin: 0 auto;
display: block;
}
#top-header ul.menu li {
font-weight: bold;
float: left;
margin: 0;
padding: .65em 0;
list-style-image: none;
list-style: none;
}
#top-header ul.menu li a:hover {
text-decoration: none;
color: #80c8e5;
}
#top-header ul.menu a {
padding: 0 .94em;
color: white;
font-size: 93%;
border-right: 1px solid #2A3659;
}
.container {
overflow: hidden;
width: 100%}

.menus {
border-left: 1px solid#2A3659;
}

4. Now find <body> tag in your template and add the HTML code below it or you can go to Layout Add HTML/Javascript gadget and paste the below code inside it.

<div id='top-header'>
<div class='menu'>
<div style='margin:0 auto; width:1000px;height: 2.5em;'>
<ul class='menu'><span style='color:skyblue'><li><data:blog.pageTitle/></li></span>
<li><a class='menus' href='URL 1' title='Blogger-Tutorials'>Tutorials</a></li>
<li><a href='URL 2' title='Tips'>
Tips</a></li>
</ul>
</div>
</div>
</div>

5. Now save your template and your done.

Note:- Backup your template before adding code, Change the URL with your link to add more label use the <li> tag add add more labels to your menu.

How to Add 9GAG Style Social Media Buttons for Blog

2014-08-25T13:14:00.001-07:00

Today i am going to add some interesting CSS style code which you may have seen on 9GAG funny site header, the slogan and social love button. Some of you blog owners may be waiting to add this cause you may have a lot of gadgets on your blog or site sidebar cause the like box takes a lot of space in the sidebar and adding all the social link in one line on the top make it easy for people to follow and like your blog or site which even make it look clean.

I have added only three social link on my blog you can add as you wish. This was originally created by +Frinton R.Madtha (me) using CSS and HTML code you can too add this on your blog.

Adding Social Love on Blogger

Note:- Backup your blogger template before adding any code.

1. Go to your Blogger Templates

2. Click on the "Edit HTML"

3. Search for ]]></b:skin> tag

4. Find it add the below code above it or you can use the <style> tag for adding it

#socialwrap-fm {
float: left;
width: 100%;
height: 35px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
}
.social-tnb {
width: 970px;
margin: auto;
}
.slogan {
float: left;
margin-top: 9px;
margin-bottom: 9px;
font-family: open sans;
font-style: italic;
}
.social-love {
float: left;
margin-top: 8px;
}
.social-love ul {
margin: 0px;
padding: 0px;
}
.social-love li {
display: block;
float: left;
margin-left: 20px;
}

5. After adding this code you can go to Layout > Add HTML/Javascript and add the below code or you can add the code below the <body> of you blog template. I have added this below the <body> tag in my blog.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='socialwrap-fm'>
<div class='socialtnb'>
<p class='slogan'><b>The Next Blogs</b> is the best source for knowing blogs tutorials.</p>
<div class='social-love'>
<ul>
<li><span class='facebook-like badge_facebook_render'><fb:like action='like' colorscheme='light' height='40' href='https://facebook.com/#' layout='button_count' show_faces='false' width='240'/></span></li>
<li><span class='twitter-follow'><a class='twitter-follow-button' data-show-count='false' data-show-screen-name='false' href='https://twitter.com/#'>Follow @funsgag</a></span></li>
<li><span class='google-plus-follow'><div class='g-follow' data-annotation='none' data-height='20' data-href=' http://plus.google.com/#' data-rel='publisher'/></span></li>
</ul>
</div>
</div>
</div>
</b:if>

6. Change the blod color links with you page links i have added hashtag so you can simply add your page name even change the slogan too.

Now save you template and your done. Just visit your blog to see the social love button appear on the header.

Add Adsense Ad Right After  Tag

2014-08-25T07:39:00.001-07:00

In today tutorial we will learn about multiplying your click through rate by adding the Adsense tag or any other ads. After focusing a lot about writing this week we came across some blogs adding ads above the post footer, or in the middle of the paragraph (Post Summary) or even right after the read more (Jump Break link). This will tell the browser to show the Ad zone using a div, right after the read more tag. If you are adding the tag right after the HTML "" tag, you will need to place a (460X60 Adsense content Ad) to make it look clean.
Step by Step Lets Start Adding the Script on Blogger.

1. Go to Blogger Blog> Templates
2. Need to Backup your template
3. Click on the "Edit HTML"
4. Search for the <head> tag
5. Add the JQuery code in your blog, Note:- If you are already having JQuery no need to add on your blog

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

6. Next add the following code just before the closing </head> tag

<script type='text/javascript'>
$(document).ready(function(){
$('a[read="more"]').before($('#TNB-ads').html());
$('#TNB-ads').html('');
});
</script>

7. Now search for the this tag in your template

<data:post.body/>

8. Next paste the below code just after it:

<b:if cond='data:blog.pageType == "item"'>
<div style="display:none;">
<div id='TNB-ads'>
<br/>
<center> -centering the ads in middle
ENCODED ADSENSE CODE HERE ADD IT HERE
</center> close tag
<br/>
</div>
</div> </b:if>

Note:- Replace the bold tag with Adsense code or any ad code.

9. Save you blog template and you are all done!
View your blog and click on the read more tag to see your ad appear after it.

How To Customize Facebook Like Box Layout with CSS

2014-08-24T08:53:00.000-07:00

Facebook like box are used by all blogs and websites now a days but many site have the default fb-like box some even remove borders, faces and even change the background of the box. In this tutorial the Facebook like box is just the same as the default one but we have just added some Fancy CSS Effect to it.

See the above image how the Facebook like box really looks after adding CSS style to it.

Note:- As we said in the older post first thing is to backup your blogger template before adding the CSS code to your blog.

First you need to go to your blog template EDIT HTML and find the ]]></b:skin> tag. After findING the tag add the below code above it.

/*Facebook-Likebox-CSS-TNB
----------------------------------------------- */
.fb-wrapper {padding:5px;
margin: 10px auto;
width: 276px;
height: 360px;
border-radius: 0px;
position: relative;
z-index: 90;
background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1px solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;
}
.inner {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}

.ribbon-wrapper-blue {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}

.ribbon-blue {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #306EFF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#306EFF), to(#3BB9FF));
background-image: -webkit-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -moz-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -ms-linear-gradient(top, #306EFF, #3BB9FF);
background-image: -o-linear-gradient(top, #306EFF, #3BB9FF);

color: #fff;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-blue:before, .ribbon-blue:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}

.ribbon-blue:before {
left: 0;
}
.ribbon-blue:after {
right: 0;
}

Next save your blog template, Go to Layout click on Add Gadget and then add HTML/Javascript inside it add the below code.

<div class="fb-wrapper">
<div class="insiderr">
<div class="ribbon-wrapper-blue">
<div class="ribbon-blue">
Facebook</div>
</div>
<center><iframe allowtransparency="false" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/thenextblogs&width=240&colorscheme=light&show_faces=true&border_color=%23eeeeee&stream=false&header=false&height=335" style="background: trasparent; border: 0px solid #222; height: 335px; overflow: hidden; width: 240px;"></iframe></center>
</div>
</div>

Now change the link with your Facebook page url, Finally click on the save button and click view blog all done.

Adding Blog Post Label On Image

2014-08-23T07:47:00.002-07:00

I have seen a lot of professional blog design and top website having post labels on image, while normal blog and custom templates show their post labels below post footer or below the post title. If you are one of them finding to add label on image don't worry we have created one, this is been created using CSS and HTML code.

To add this in your template you need to follow the step below:-

Every first step while adding code in blogger is to backup your blog template. Let move further, go to Blogger Template > Edit HTML > and find the ]]></b:skin> code.

Now add the CSS code before the </b:skin> tag in your template given below this will show full post label tag.

For example:

.post-label a{color:#FFF;font-family:georgia;font-style:italic}
.post-label{display:inline-block;background:#65CCE3;position:absolute;left:-2%;top:25px;z-index:10;padding:7px 20px}
.post-label:before{position:absolute;display:block;bottom:-8px;content:'';left:0;border-color:#3D3E3F rgba(0,0,0,0) rgba(0,0,0,0);border-style:solid;border-width:8px 0 0 8px}

Now you need to add the child n+2 tag which only display one post-label tag add the below code to the above code.

.post-label a:nth-child(n+2)important{display:none}
To change the color and adding margin add this code.
.post-label{background:#FFA53D}

You can change and add you own color to the label background.

Next step is to find

<div class='post-footer'>

And then add the below code above it.

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
</b:loop>
</b:if>
</div>

Finally save you blog template and reload your blog to check the effect.

Note if you already have post labels on your blog you can remove from you template or search for post-footer-line-2 in blog and remove the code and you are done.

Make Blogger Navigation Bar Transparent + Hover On Post Image

2014-08-22T14:39:00.001-07:00

I have got a few emails and questions from bloggers about the navigation bar which i am been using on my blog, how did't you make it transparent. So i will so you a tutorial on how to add this effect to your blog + Hover on Post Image .

How To Make Your Navigation bar Transparent.

In this tutorial if your using a PageList gadget you need to find that in your Blogger template. Go to your Blogger Template > Edit HTML and search for Page List after finding check which kind of number is added to normal its PageList1.

After you find the code check for the number in this it's 1, Now go to the ]]> </b:skin> and before it paste this code.

Custom
#PageList1 { opacity: 0.65;
filtering: alpha(opacity=50);

if
#PageList2 { opacity: 0.65;
filtering: alpha(opacity=50);}

or
#PageList3 { opacity: 0.65;
filtering: alpha(opacity=50);}

If you are using your custom navigation bar than you can change the PageList and add your custom navigation name.

Adding Element to Image of Post

This is an additional example if you need to make your dark header image little more transparent or adding effects to post images. Search for header and next to it add img:hover for adding hover post copy and paste the below code before the </b:skin> in Blogger.

.post-body img {
opacity: 2.0;
filter: alpha(opacity=100);
}

.post-body img:hover {
opacity: 0.2;
filter: alpha(opacity=30);
}

Check out the DEMO

Show Bigger Image Into Half on Blogger

2014-08-22T09:37:00.000-07:00

I have seen funny sites like 9GAG and much more which only use images in their site show long images into half on homepage and displays full image on post page. After learning about how this is done i found a simple trick to add this in blogger blogs. If you are having a funny blog you can add this to make long image into half. For any question leave them below.

The main part every time when you add some codes in your blogger blog keep a backup of your template.

1. Adding code to your blogger template

You have to add this code before the </b:skin> tag in your blogger template using the hide/gadget tag.

#TNB{
height:600px;
overflow:hidden;
}

Now save your Template and go to create Posts.

Next step is to add the code while you are creating a post on blogger the code is given below you can check the image on how to add this code.

<div id="TNB">
Your Image
</div>

Now Publish your post and enjoy.

Image:- TNB

Custom CSS Footer For Blogger

2014-08-21T06:28:00.002-07:00

Do you use blogger with its custom template and still you don't have a footer or your using the Attribution gadget instead of footer now you don't need to worry as today we are going to add a footer which can be used in blogger custom template as well as your own modified template.

We are going to create this footer using the CSS and HTML code which is simple to add in you blogger template so lets starts adding the footer.

1. First of all you need to backup your blogger template.

2. Next step is to find the </b:skin> tag in your template after you find the tag just add the below code above the this tag.

/* Footer
----------------------------------------------- */
#footer-wrapper a{
font-weight:normal;
}
#footer-wrapper {
background-color: #F6F6F6;
color: #999999;
margin: 30px 0 0;
padding: 20px 0;
}
.footer-inside {
margin: 0 auto;
width: 840px;
}
.copyright {
margin: 0;
}
.copyright span{
float: right;
}

3. Moving on to the third step is to add the HTML tag this should be added before the </body> of your template.

<div id='footer-wrapper'>
<div class='footer-inside'>
<p class='copyright'>
© Copyright 2014. Powered by <a href='#'>Blogger</a>. <span> <a href='#/'>TNB by Frinton</a></span>
</p>
</div>
</div>

Change the link which are in bold to your own link.

Finally save your template and you are all done!

Image:- TNB

Google Translate Widget Version 2

2014-08-20T14:52:00.000-07:00

We have found out users are using flag style translate script in the their blog while Google has got its own translate, bloggers who are using Google translate know Google translator has 3 different styles Vertical, Horizontal and Dropdown while there is a lot.

Today we have created and customize the Google translate with our own style which is made with an arrow submit button, and it made of HTML and JavaScript code you just need to copy and paste the code where you want it to appear in you blog.

<style type="text/css">
#translator-wrapper {
display:block;
width:200px;
border:1px solid #0A340A;
background-color:white;
overflow:hidden;
position:relative;
}
#translator-wrapper select {
border:none;
background:transparent;
font:normal normal 11px Tahoma,Verdana,Arial,Sans-Serif;
width:100%;
color:black;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-appearance:none;
cursor:text;
padding:5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
display:block;
background-color:#0A340A;
border:none;
color:white;
margin:0 0;
text-decoration:none;
position:absolute;
top:0;
right:0;
bottom:0;
cursor:pointer;
width:30px;
}
#translator-wrapper a:before {
content:"";
display:block;
width:0;
height:0;
border:5px solid transparent;
border-left-color:white;
position:absolute;
top:50%;
left:13px;
margin-top:-5px;
}
#translator-wrapper a:hover {background-color:#0A2C0A}
#translator-wrapper a:active {background-color:#082408}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
border:none;
outline:none;
cursor:pointer;
}
</style>

Style tag ends here
<h3>Translate page to:</h3>
<div id="translator-wrapper">
<select id="translate-language">
<option value="en" selected="selected">English</option>
<option value="id">Indonesian</option>
<option value="af">Afrikaans</option>
<option value="sq">Albanian</option>
<option value="ar">Arabic</option>
<option value="hy">Armenian</option>
<option value="az">Azerbaijani</option>
<option value="eu">Basque</option>
<option value="be">Belarusian</option>
<option value="bn">Bengali</option>
<option value="bg">Bulgarian</option>
<option value="ca">Catalan</option>
<option value="zh-CN">Chinese</option>
<option value="hr">Croatian</option>
<option value="cs">Czech</option>
<option value="da">Danish</option>
<option value="nl">Dutch</option>
<option value="en">English</option>
<option value="eo">Esperanto</option>
<option value="et">Estonian</option>
<option value="tl">Filipino</option>
<option value="fi">Finnish</option>
<option value="fr">French</option>
<option value="gl">Galician</option>
<option value="ka">Georgian</option>
<option value="de">German</option>
<option value="el">Greek</option>
<option value="gu">Gujarati</option>
<option value="ht">Haitian Creole</option>
<option value="iw">Hebrew</option>
<option value="hi">Hindi</option>
<option value="hu">Hungarian</option>
<option value="is">Icelandic</option>
<option value="id">Indonesian</option>
<option value="ga">Irish</option>
<option value="it">Italian</option>
<option value="ja">Japanese</option>
<option value="kn">Kannada</option>
<option value="ko">Korean</option>
<option value="la">Latin</option>
<option value="lv">Latvian</option>
<option value="lt">Lithuanian</option>
<option value="mk">Macedonian</option>
<option value="ms">Malay</option>
<option value="mt">Maltese</option>
<option value="no">Norwegian</option>
<option value="fa">Persian</option>
<option value="pl">Polish</option>
<option value="pt">Portuguese</option>
<option value="ro">Romanian</option>
<option value="ru">Russian</option>
<option value="sr">Serbian</option>
<option value="sk">Slovak</option>
<option value="sl">Slovenian</option>
<option value="es">Spanish</option>
<option value="sw">Swahili</option>
<option value="sv">Swedish</option>
<option value="ta">Tamil</option>
<option value="te">Telugu</option>
<option value="th">Thai</option>
<option value="tr">Turkish</option>
<option value="uk">Ukrainian</option>
<option value="ur">Urdu</option>
<option value="vi">Vietnamese</option>
<option value="cy">Welsh</option>
<option value="yi">Yiddish</option>
</select><a id="translate-tnb" href="#" title="Translate!TNB"></a>
</div>

Adding The Script Tag
<script type="text/javascript">
(function() {
var mylang = "id", // Your website language
anchor = document.getElementById('translate-me');
anchor.onclick = function() {
window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
return false;
};
})();
</script>
Script Tag Ends

Go to blogger and add it in your HTML Gadget our you can add it using Edit HTML. Then click save, view blog and see the results.

Image:- TNB

Add Author Box Below Posts in Blogger

2014-08-20T07:07:00.000-07:00

The big think today in blogger and website are article writer's and people find them on Google+ Twitter they even follow them on Facebook or add them as friends now what we have figure out, is adding author posted customize.

In custom blog's and designed template there is nothing more than by the author or written by this author with an description In today post i have created a simple author style with Google+ and Facebook follow button.

To add author style below your blog post you need to follow the steps below.

First go to you Blogger template and Edit HTML.

Then you need to find this code.

<div class='post-footer-line post-footer-line-1'>

in your template after you find this code add the below code and change the Facebook follow link to your follow link.

<div class='article-author media'>
<div class='media-image'>
<img alt='FrintonM' class='avatar avatar-60 photo' expr:src='data:post.authorPhoto.url' height='50' itemprop='image' width='50'/> </div>
<div class='author-body'>
<div class='article-author-name'><a expr:href='data:post.authorProfileUrl' rel='author'><span class='vcard author'><span class='fn'><data:post.author/></span></span></a></div>
<div class='fb-follow' data-colorscheme='light' data-href='https://www.facebook.com/' data-layout='button_count' data-show-faces='false'/>
</div>
</div>

Step three you need to add the CSS part to add this CSS you need to find </b:skin> in your template and paste the below code above it.

.article-author{text-align:left;font-family:"FF Tisa",Georgia,serif;color:#a6abaf;font-style:bold;line-height:1.4;padding-left:1em;border-left:1px solid rgba(217,224,226,0.4);margin-left:1em;float:right}.article-author .author-body{display:inline-block}.article-author .avatar{border-right:2px;margin-top:3px}.article-author a{color:#ff3c1f}.article-date{font-size:.875em}.article-author.media-image{margin-right:10px!important} .article-author-name a{color:#ee2e24;font-family:'Frank Light','Fjalla One';margin-left:2px;text-transform:none;letter-spacing:inherit;font-style:inherit}.fb-follow a{margin-left:2px}

Or you can use <style> tag to add it after adding save your template and view your blog.

Image:- TNB

Add Facebook Like Sidebar Ads to Blogger

2014-08-19T07:23:00.002-07:00

You all have seen Ads on Facebook on the right sidebar. Today i am going to teach how to add Facebook ads on your blog with CSS code

You can add your website link and your own custom text to it by just changing the code so lets start the tutorial on how to create Facebook ads bar.

1.Adding the first part.

<div id="TNB" style="width:234px;background-color:#ffffff;height:290px;position:relative;"><div style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#f2f2f2;color:#333;font-size:11px;line-height:20px;text-align:left;font-weight:bold;border:none;border-bottom:1px solid #d9d9d9;border-top:1px solid #d9d9d9;width:234px;height:20px;text-indent:4px">Ads</div><div onclick="document.location.href = 'http://thenextblogs.blogspot.com';" style="margin:0px;padding:0px;text-decoration:none;border:none;border-bottom:1px solid #E9E9E9;width:234px;height:120px;padding-bottom:16;margin-top:8;margin-right:4px;margin-left:4px;background-color:#ffffff;line-height:14px;text-align:left;cursor:pointer;"><a class="TNB1" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#3B5998;font-size:11px;line-height:13px;text-align:left;font-weight:bold;cursor:pointer;">Sponsred </a><br/><a class="TNBgs2" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#808080;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;margin-bottom:5px;cursor:pointer;display:inline-block">http://thenextblogs.blogspot.com</a><br/><a class="TNBgs3" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#333333;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;cursor:pointer;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbnW5DnQYYzRjeSTSseaNN4BbABS3ftQ2oiONDzsBHzcRn4gN7tzq8cL0VIb1N56Vncreg6DzSyhj6MUf5wTCGW2cNAxIqdhdMODMEDNp40zhT-9Hv1J_aXdrqQuN5Kd3HHjq9xQiMsNzR/s1600/chrome.jpg" style="margin:0px;padding:0px;width:80px;height:80px;float:left;margin-right:8px;margin-top:3px;cursor:pointer;border:none !important"/>Show your ad here..</a></div><div onclick="document.location.href = 'http://thenextblogs.blogspot.com';" style="margin:0px;padding:0px;text-decoration:none;border:none;border-bottom:1px solid #E9E9E9;width:234px;height:120px;padding-bottom:16;margin-top:8;margin-right:4px;margin-left:4px;background-color:#ffffff;line-height:14px;text-align:left;cursor:pointer;">

2. Lets add the second part of the ads tag

<a class="TNBs1" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#3B5998;font-size:11px;line-height:13px;text-align:left;font-weight:bold;cursor:pointer;">Free </a><br/><a class="TNB2" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#808080;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;margin-bottom:5px;cursor:pointer;display:inline-block">funsgag.blogspot.com</a><br/><a class="TNB3" style="margin:0px;padding:0px;text-decoration:none;font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#333333;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;cursor:pointer;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGiwnpqmLEGM52ZPnLb9dJg_JsUl4PyEUpalqxft07SbjZfb1RhFL2KBwHGFGv0jQmNl5YQjmoMu-0LNpXwdekqD04bKmPOOQfF6FaVCwQbXMVGEU4aZD6Cv4dUm80Rnam46S4LrlradYk/s1600/mom.gif" style="margin:0px;padding:0px;width:80px;height:80px;float:left;margin-right:8px;margin-top:3px;cursor:pointer;border:none !important"/>Show your ad here</a></div><a href="http://thenextblogs.blogspot.com/" target="_blank" style="position:absolute;right:0px;bottom:0px;border:none;padding:0px;margin:0px;"><img style="padding:0px;margin:0px;background-color:transparent;border:none;height:14px;float:right;" src="http://www.comlaw.gov.au/WebResource.axd?d=8pcqcqQZtBvWE0Pgj9As_C7Ht5ZJK7NoZqRP7fLtGnCnQNTDP0aFZHxque8-5vmKr7haiaUYPVwlSXVoO_IkrUpGj9AViXEG_qllcuqnsN-GJBkJ0&t=634605906709717464" /></a></div>

3.The last and the final part is to add the css need to add this CSS using <style>
tag in your blogger template.

TNB:hover{font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#3B5998;font-size:11px;line-height:13px;text-align:left;font-weight:bold;text-decoration:underline !important;cursor:pointer;}.TNB2:hover{font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#808080;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;display:inline-block;text-decoration:none;cursor:pointer;}.TNB3:hover{font-family:Lucida Grande,tahoma,verdana,arial,sans-serif;background-color:#ffffff;color:#333333;font-size:11px;line-height:14px;text-align:left;font-weight:normal !important;text-decoration:none;cursor:pointer;}

Add that all reload you blog and check how Facebook ads works, it recommend you to add this all tags in you HTML gadget and not in your blogger template.

Image:- TNB