How to Add Facebook Graph Search on your Blog

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>