How To Add Alexa Widget In Blogger Blog | Blogger Tricks

How To Add Alexa Widget In Blogger Blog

• How Important Is Alexa Ranking ?

The algorithm according to which Alexa traffic ranking is calculated, is simple. It is based on the amount of traffic recorded from users that have the Alexa toolbar installed over a period of three months. This traffic is based on such parameters as reach and page views.

User Also Read :> 5 Free Ways to Improve  Alexa Rank

In This Tutorial, You Will Learn How To Add Alexa Widget In Blogger Blog. You Can Show Your Blog’s Alexa Rank On Sidebar Or Footer By Adding Small Javascript Code. Follow Steps Below To Install Alexa Widget It In Your Blog.

• Login To Blogger Account.
• Click Blog Title → Layout → Add a Gadget → HTML/Javascript.
• Copy/Paste Following Code In Content Box.

<script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/t/a?url=sayyadgraphic1.blogspot.com'/>

• Replace sayyadgraphic1.blogspot.com With Your Blog URL.
• Click Save Button And You Are Done.

Benefits Of Adding Alexa Widget

• This Widget Will Count Every Visit To Your Blog Like Alexa Toolbar And Help You To Boost Alexa Ranking.
• These Days Most Advertisers Check Alexa Rank. So, This Widget Will Help You To Attract Advertisers.

Note: Check Demo Of This Widget In Footer Of Blog.

• Screen Shoot :

How to add Background Music to Blogger Blog

Learn How to add Background Music to Blogger Blog

Hi,everyone! My name is Mehwish Hayat And Today I want to tell you "How to add Background Music to Blogger". Adding a background music to your blogger blog has a great advantages. By doing so you can attract huge amount of visitors, infact it looks cool too. Not only by adding background music to your blogger blog leaves a good image of your blog to the visitor’s mind hence it helps you to gain more and more traffic. I found it cool and awesome So finally today, I Decided to share my technique with you all lovely guys. So that you can also Add Background music to your blogger blogs. If you own any blogger blog then surely its helpful for you. What are you waiting for? just Go ahead read below steps and Add background music to your blogger blog

How to add Background Music to Blogger

So here we are discussing about How to add Background Music to Blogger. So just follow the simple steps given below :

• Go To Blogger Dashboard then navigate to Layout.
• Click On “Add Gadget” and look for HTML/Javascript.
• Now Copy the Below script and paste in HTML/Javascript dialog box.

<EMBED STYLE=”WIDTH:1PX; HEIGHT:1PX; VISIBILITY:HIDDEN” AUTOSTART=”TRUE” LOOP=”TRUE” SRC=”URL HERE”/></EMBED>

• Save the Gadget and visit your Blog and Listen Music While Surfing on Your Blog.
• replace Your Song’s URL With URL HERE

We hope you like our new updated post to add background music to your blogger blog easily 2016 ( Script Updated )

• Search Keywords:
• How to add music to your blogger blog
• How to add music to my blogger blog
• How to add music to blogger background
• How to add music to blogger post
• Add Music to blogspot blog
• How to add Music to Blogger Blog
• Add Background Music to Blog
• How can i add music to my blog?
• Add music Player to blogger
• add song on blogger blog
• listen song on blogger blog

Add Facebook Like Box Below Every Post In Blogger

Learn How To Add Facebook Like Box Below Every Post In Blogger

This Facebook Like button will allow visitors to Like your post and share it to their Facebook friends. In this post we will see how we can add a Like button for each individual Blogger post, and not a Facebook fan box for the entire blog (which is also a good idea to have in your sidebar). Having a Facebook Like button below your post titles makes easier for Facebook users to like specific posts on your blog, which in turn displays the liked content on their profile (and potentially on their friend's feeds).

If you want to add the Facebook Like Button below your blogger post title, then follow these steps:

How To Add Facebook Like Box Below each blog post

• Step # 1

Go to blogger dashboard –> Template –> Edit Html ( Tick the expand widget option).

• Step # 2

Find For <data:post.body/> and paste the following code just below it.

<b:if cond=’data:blog.pageType == &quot;item&quot;’><iframe allowTransparency=’true’ frameborder=’0′ scrolling=’no’ src=’//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsayyadgraphic&amp;width=590&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false’ style=’border:none; overflow:hidden; width:590px; height:180px;’/></b:if>

• Step # 3

Replace sayyadgraphic with your Facebook page username.

• Step # 4

Replace width=590px and height=180px with your desired width and height to fit well on your blog.

Add Open Graph Meta Tags for Blogger Blogs

Learn How To Add Open Graph Meta Tags for Blogger Blogs

The Facebook open graph meta tags enables web pages to integrate into social graph and provide ability to treat your page like Facebook page and also helps your +1ed web page to be integrated into social graph if you have added plus one button on your blogger blog.

Social networks like Facebook,Google+ can collect structured information about your blog posts and pages by adding open graph meta tags to your blog.

Add Open Graph Meta Tags to Blogger

• Step # 1

Go to your blogger dashboard –> Template –> Edit hmtl.

• Step # 2

Find for <html and add xmlns:og=’http://ogp.me/ns#’ at the closing end of this tag like this.

<html……………………………..xmlns:og=’http://ogp.me/ns#’>

• Step # 3

Now find <head> and add the following code just below it.

<b:if cond=’data:blog.pageType == &quot;item&quot;’><meta expr:content=’data:blog.pageName’ property=’og:title’/><meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/><meta content=’article’ property=’og:type’/></b:if><meta expr:content=’data:blog.title’ property=’og:site_name’/><b:if cond=’data:blog.postImageThumbnailUrl’><meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/><b:else/><meta content=’http://www.your-bloglogo.jpg‘ property=’og:image’/></b:if><b:if cond=’data:blog.metaDescription != &quot;&quot;’><meta expr:content=’data:blog.metaDescription’ name=’og:description’/></b:if><meta content=’Your-App-ID‘ property=’fb:app_id’/><meta content=’Your-Facebook-Profile-ID‘ property=’fb:admins’/>

• Change the text in Pink with your configuration.
• NOTE:- use Facebook Lint Tool to verify your Open graph meta tags.

How This Open Graph Work ,,,,,,,,,!

(Think you are sharing a post of your blog on facebook)

• #1

<b:if cond=’data:blog.pageType == &quot;item&quot;’><meta expr:content=’data:blog.pageName’ property=’og:title’/><meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/><meta content=’article’ property=’og:type’/></b:if>

This IF condition code structure instructs facebook to fetch your blog post title and post url is you are sharing a post of your blog.

• #2

<meta expr:content=’data:blog.title’ property=’og:site_name’/>

This instructs facebook to fetch your blog title as site name while sharing.

• #3

<b:if cond=’data:blog.postImageThumbnailUrl’><meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/><b:else/><meta content=’http://www.your-blog-logo.jpg‘ property=’og:image’/></b:if>

This IF condition code structure instructs facebook to fetch your post image as thumbnail if you are sharing a post and instructs to fetch your blog logo as thumbnail when sharing your blog home page.

• #1

<b:if cond=’data:blog.metaDescription != &quot;&quot;’><meta expr:content=’data:blog.metaDescription’ name=’og:description’/></b:if>

These tags instructs facebook to fetch your blog description stored in meta tags while sharing your blog.

Official Facebook Recommendations Bar for Blogger Blog

Official Facebook Recommendations Bar for Blogger Blog

Hi Friends ..........! My name is Sayyad Miskeen .Today i waana Show You how to  add " Official Facebook Recommendations Bar In  Blogger Blog " You know Facebook introduced a brand new plugin called Facebook recommendations bar plugin and this plugin takes place like a slider on your blogger blog. It is still in beta version but its really an inspiring plugin. This plugin shows recommended posts of your blog inside it with a like button included and let us give a try to this awesome plugin. This plugin really looks very official and sleeky. You can view a live demo of this plugin at the right corner of this blog post after expanding the read more hack.

Add Facebook Recommendations Bar widget in Blogger

• Adding Open Graph Tags

• Step # 1

Firstly you need to add Facebook open graph tags for this widget to work or else this widget will show bug.
(I found a very simpler and reliable open graph tags on Git Hub gist and i really thank Pathawks for this. .)

1. Go to blogger dashboard –> Template –> Edit HTML(Tick the Expand Widget Template Option). 
2. Find(CTRL+F) for <head> and add the following open graph tags just below it. 

<!– Begin Open Graph metadata –><b:if cond=’data:blog.pageType == &quot;item&quot;’> <meta content=’article’ property=’og:type’/> <meta expr:content=’data:blog.title’ property=’og:site_name’/> <meta expr:content=’data:blog.pageName’ property=’og:title’/> <b:if cond=’data:blog.postImageThumbnailUrl’> <meta expr:content=’data:blog.postImageThumbnailUrl’property=’og:image’/> </b:if><b:else/> <meta expr:content=’data:blog.title’ property=’og:title’/> <meta content=’website’ property=’og:type’/></b:if><meta expr:content=’&quot;en_US&quot;’ property=’og:locale’/><meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/><!– End Open Graph metadata –>

This widget may show errors without open graph tags.

Creating Facebook App

• Step # 2

If you have already created your Facebook app then move on with step 4. If not, Go To Facebook Apps Page.

1. Choose Create An App button. 
2. Enter your blog title in app name field and click on Continue. 
3. It will ask for word verification. Enter the text displayed and click on submit button. 

• Step # 3

1. You will be taken to your app page. 
2. Note down your App ID. 
3. Enter your blog Url in App Domains field and also in Website with Facebook Login field. 
4. Click on Save changes button. 

• Now your App is completely Set.

Official Recommendations Bar widget code

• Step # 4

You need advanced JavaScript SDK for this. Copy the following Javascript SDK code and paste it just below the <body> tag in your template.

<div id=’fb-root’/><script>//<![CDATA[(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID“; fjs.parentNode.insertBefore(js, fjs);}(document, ‘script’, ‘facebook-jssdk’));//]]></script><b:if cond=’data:blog.pageType == &quot;item&quot;’><div style=’z-index:999999; position:absolute;’><fb:recommendations-bar action=’like’ max_age=’0′ num_recommendations=’2′read_time=’25’ side=’right’ site=’http://www. sayyadgraphic1.blogspot.com ‘ trigger=’40%’/></div></b:if>

source: Facebook developers

• Step # 5

Replace YOUR_APP_ID with your newly created App ID.

• Step # 6

Replace http://www.sayyadgraphic1.blogspot.com with your blog Url. 

• Customizations
• data-read-time=“25” –> Number of seconds the plugin will wait before it expands. 
• data-action=“Like” –> type of action (Like or Recommend). 
• data-num-recommendations=“2” –> Number of recommendations to be displayed. 
• data-side=“right” –> The position of plugin. 

• Step # 7

Finally Save your Template.

• Step # 8

View Your blog and you can notice the official recommendations bar plugin on your blogger blog posts without any bugs or errors.

Sleek Social Media Sharing Buttons With Css3 Tool Tips

Sleek Social Media Sharing buttons with Css3 Tool tips

Hello Friendz ! My name is Mehwish Hayat .today I have come up with one of the beautiful, sleek and most used social sharing widget with tool tip effect on mouse hover for blogger blogs.

I’m not going to eat your head by giving brief introduction to this widget and I will judge the rating of this widget in a single word saying ‘Mind Blowing‘. 

The live demo of this widget is already available at the bottom of my blog posts and kindly take a minute to share my blog posts with your social friends if you found any of my blog posts real helpful.

How To Add Sleek Social Media Sharing buttons with Css3 Tool tips

• Part # 1

Go to Blogger dashboard –> Template –> Edit Html (Tick Expand widget template option).

• Part # 2

Find for ]]></b:skin> tag and place the following peace of code just above it.

/* www.sayyadgraphic1.blogspot.com */

ul.BTbiz-social {list-style:none;display:inline-block;margin:10px auto;padding:2px;}ul. BTbiz -social li {display:inline;float:left;background-repeat:no-repeat;}ul. BTbiz -social li a {display:block;width:50px;height:50px;padding-right:10px;position:relative;text-decoration:none;}ul. BTbiz -social li a strong {font-weight:400;position:absolute;left:20px;top:-1px;color:#fff;z-index:9999;text-shadow:1px 1px 0 rgba(0,0,0,0.75);background-color:rgba(0,0,0,0.7);-moz-border-radius:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5);padding:3px;}ul. BTbiz -social li.TBI-facebook {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCTklnbtYRia_f5RP0ZmjnqusLc8PSjyMPjAuWH09A8e0yb1f5UGbjE4OQp_Whz07ZFPG54IAyhUYgHk1se_M62VO4KJ-d2ABPPtW4eTg5UByeWa7x81wzKcTQbgrd1W_aaw6xRg2c8VE/s50/facebook.png);}ul. BTbiz -social li.TBI-twitter {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjZErPFIbldjsW8DDuomfO8HUKz98nnE-_ozuW8vZwl7YTK2nc1Y1soQf8Z8ZXftqbwBTUiYyar6qNqeAyoZDPTP94B-uPUpaNzlzoM8ocT3IbMQI_diPRRtAAtq4MkbZ60c3nSqL4K2U/s50/twitter.png);}ul. BTbiz -social li.TBI-googleplus {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb8g5qWeZY-XJerljjfZOt74heRMv8IG0bfrkfEPJbaSJHjWRWeccyGiUeeXYsSIfbEUrXOgvyfrVRQvg20wAhGtm2oT7lUERP5Ypt7f4DUlogxjSdg5Xb0g3Q4DCJOuGxZVK5uF2ZboE/s50/google%252B.png);}ul li. BTbiz -pinterest {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCwQppR9glcVvu-w_8zrJ8E4INp6Cq4aENYWp9U1tCtGDEKwDLC87TMA55SOJLLe4ZORE3jVEkhoRKey2ASsKYBomr9zDLuuzCJkbvj7QlvjDv1p2TtXIWkkuewpsXk7lZNDxc0uj60Qo/s50/pinterest.png);}ul. BTbiz -social li.TBI-stumbleupon {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgph3iBKto9LXMF3mNGANRKTmAekBlUXyQT8w5OHvF1H1HL1jKe687FVttfwb8_ivfxpRzZ8yVrwWRwAUBeH5LnOFbMBeqobTyCSjF7-L2sl_fcXOnWRHytUP92t4ok_N_8Ss6Pm4AbUV8/s50/stumbleupon.png);}ul. BTbiz -social li.TBI-delicious {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHu6hWjgNC35BH8W-DH1GioPGrURXw2vzuRqQUnr3fjs_hH4QuqBpp6l8G85d6MB3Q9-tWidldKgjIqL3SrM45tn2VAvXnRrRyyB7Oyi9BruVd4Ak2sYJ29dhnMdKwqhxcVUweC5m-vg/s50/delicious.png);}ul. BTbiz -social li.TBI-linkedin {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7Bf9tmpE655n049GsMWVjG_L-XxJE7COgWmDWHecx9WfUh7QCl3ry32MHGR8BWgcOD6V9vzmKwOmx3yX102buz5x7H0y5W7-7J47gn9du8kLr3cvk1vF-EGTlN0WR_nwb9Yu-PAJ4Es/s50/linkedin.png);}ul. BTbiz -social li.TBI-reddit {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxqomVylXtl8lcc9wxRCwHkUKoC0yv3XbpMXVdaEV1AGUumZRclKI-yn48dWg1-pJc5Zt96thujTAHalGS_Kgp-CngKWhgYH50Fyk4pOmRFwLCaTtLmF7UcTtk-Y8lwN7j0RQ_yX4dQfs/s50/reddit.png);}ul. BTbiz -social li.TBI-technorati {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDVKVedTuwQ6wpaVsxY3SkEZZ9R2t-CAtqFpCFJe4e1yPHDDqdO2xgOrg_U7Dv3udZ9CGzE2Q6lTzr8fK7mMdbTeoZsqmZVFp5ROFysUmEqG3T66pSk1AHeT1S1D8kwhF5MReaVPiphSQ/s1600/technorati.png);}# BTbiz -cssanimation:hover li {opacity:0.2;}# BTbiz -cssanimation li {-webkit-transition-property:opacity;-webkit-transition-duration:500ms;-moz-transition-property:opacity;-moz-transition-duration:500ms;padding:2px;}# BTbiz -cssanimation li a strong {opacity:0;-webkit-transition-property:opacity, top;-webkit-transition-duration:300ms;-moz-transition-property:opacity, top;-moz-transition-duration:300ms;}# BTbiz -cssanimation li:hover {opacity:1;}# BTbiz -cssanimation li:hover a strong {opacity:1;top:-10px;}

Sleek Social media sharer widget code

• Part # 3

Now find for <data:post.body/> and place the following peace of code just below it.

/*www.sayyadgraphic1.blogspot.com*/<b:if cond=’data:blog.pageType == &quot;item&quot;’><div style=’font-size: 22px;’><b>You Like It!? Then kindly share with your Friends.</b></div> <ul class=’BTBIZ-social’ id=’BTBIZ-cssanimation’> <li class=’BTBIZ-facebook’> <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,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;’ rel=’nofollow’><strong>Facebook</strong></a> </li> <li class=’BTBIZ-twitter’> <a expr:href=’&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; — &quot; + data:post.url ‘ rel=’nofollow’ target=’_blank’><strong>Twitter</strong></a> </li> <li class=’BTBIZ-googleplus’><a expr:href=’&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url’ onclick=’window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;’ rel=’nofollow’ target=’_blank’><strong>Google+</strong></a> </li> <li class=’BTBIZ-pinterest’><a href=’javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute (&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());’ rel=’nofollow’ target=’_blank’><strong>Pinterest</strong></a> </li> <li class=’BTBIZ-stumbleupon’> <a expr:href=’&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ‘ rel=’nofollow’ target=’_blank’><strong>StumbleUpon</strong></a> </li> <li class=’BTBIZ-delicious’> <a expr:href=’&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ‘ rel=’nofollow’ target=’_blank’><strong>Delicious</strong></a> </li> <li class=’BTBIZ-linkedin’> <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;’ rel=’nofollow’ target=’_blank’><strong>LinkedIn</strong></a> </li><li class=’BTBIZ-reddit’> <a expr:href=’&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ‘ rel=’nofollow’><strong>Reddit</strong></a> </li> <li class=’BTBIZ-technorati’> <a expr:href=’&quot;http://technorati.com/faves?add=&quot; + data:post.url ‘ rel=’nofollow’ target=’_blank’><strong>Technorati</strong></a> </li> </ul> </b:if>

• Part # 4

4. Save the Template.

• Note

As this is a social media sharer widget, there is no part of adding your social media profile links here. I reminded this because few bloggers previously asked Me about adding their social media profile links in a sharer widget. This widget buttons shares the blog post which the user is sharing from.

How To Disable Right click on Blogger Blog

How To Disable Right click on Blogger Blog

Hello Friends ! My Name is Mehwish Hayat and today i wanna telling you "How To Disable Right Click on Blogger Blog", If you Want to Disable Mouse Right Click Button on Blogger Blog?. So this is a tutorial about how to add mouse right click Disable script to your blog ( protect your work to be get copied by some copycats ). Everyone wants his/her work to be protected by thief so I thought of sharing this......!

You guys have may notices that some sites don’t allow their users to copy their content from that web page. They dont allow their users to use Mouse Right Click Button, this is what they have done they just Disable Right Click in Blogger Blog so that copycats cant copy their content. This not only disables the right click but helps you to protect your work, your content from some sort of thiefs or copy-cats.

So today in this article I decided to share my views on Disable Mouse Right Click Button on Blogger Blog, we are sharing the latest and updated javascript that will protect your work from copycats..

How To Disable Mouse Right click on Blogger Blog

• Step #1 

Go to Blogger dashboard –> Layout –> Add a gadget.

• Step #2

Choose Html/JavaScript gadget and paste the following peace of code just inside it.

Right click disabling JavaScript code

/*www.sayyadgraphic1.blogspot.com*/<script language=JavaScript><!–//Disable right mouse click Scriptvar message=”Function Disabled!”;///////////////////////////////////function clickIE4(){if (event.button==2){alert(message);return false;}}function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}document.oncontextmenu=new Function(“alert(message);return false”)// –></script>

• Step #3

Save the gadget.

• Step #4

Save the layout.

Enjoy ......................! and Share with Your Sweet Friendz ........!

How to Add a Facebook Page Popup box Plugin in Blogger

How to Add a Facebook Page Popup Footer box Plugin in Blogger

Recently, one of our user asked us about how to add a Facebook Page popup footer box in Blogger. Therefore, we decided to develop a plugin for Facebook Page that only appears when you scroll to the end of a web page. It is a smart way of increasing your Facebook likes and building a strong fan base. Today in this article, we will show you how to add Facebook Page popup footer box plugin in blogger.

What is Facebook Page Popup Footer Box?

It provides a good way to get user friendly attention for your Facebook Fan page. It does not interrupts the user friendly experience and does not distract the user while browsing. 

When a user reaches the very end of a webpage, the scrolling Facebook Page popup box appears on the bottom right of the screen. Users have the freedom to either keep the scrolling popup footer box or they can close it using the cross (X) icon.
Before we get on to the tutorial, you can check the demo of this widget here.

How to Add Facebook Page Popup Footer Box in Blogger :

The very first thing you need to do is to go to Blogger >> Template >> Edit HTML. In the template codes, search for the ending </body> tag. After finding </body>, just above it paste the following piece of code:

<link href="http://mybloggerlab.com/StyleSheet/MBL_FBPOP.css" rel="stylesheet" /><script src="http://mybloggerlab.com/Scripts/MBL_FBPOP.js"></script><script type="text/javascript">$('body').popscroll({ channel:'https://www.facebook.com/sayyadgraphic', msg:'Become our FAN', bgcolor:'#89B399', textcolor:'#ffffff', triggerpoint:6000, network: 'facebook', fb_hide_cover : false, fb_show_posts : false,});</script>

Now, you need to customize the widget according to your needs. Just follow the below instructions and make changes to the above code:

1. Replace https://www.facebook.com/sayyadgraphic with your Facebook Page URL.
2. Replace #89B399 with any other color that you want to see as background of this widget.
3. Replace #ffffff with any other color that you want to see as the text color of this widget.If you have coding knowledge, then you can customize it even further but for a no-technical person the above customization are pretty much it.

Now after customizing the widget, save the template by pressing "Save Template" button located at the top of your screen.

We hope this tutorial have helped you in learning "how to add a Facebook page popup footer box plugin in blogger". Let us know what do you think about this new unique widget in the comments below. 

How to Add a Full Screen Search Overlay in Blogger

How to Add a Full Screen Search Overlay in Blogger

Why to add Full Screen Search Overlay?

The full screens search is becoming one of the significant parts of a website. With an increase in the number of mobile users, people are slowly inching towards full screen search as it dramatically improves the searching experience of mobile users. Since, mobiles are happen to be small in size, adding a full screen search would make it easier to type and search your website.


On the other hand, it makes searching simpler and interesting as it provides a pleasing interface to users.

For those who are still not sure about full screen search, they can go to this demo site, to see it in live action.

Installing Full Screen Search Overlay in Blogger:

The very first thing you need to do is to go to Blogger >> Template >> Edit HTML. Now in the blogger template editor, look for the ]]></b:skin> tag and just above it paste the following CSS Code.

/*===www.sayyadgraphic1.blogspot.com===*/.dialog-box button[type="submit"] { margin-top: 20px; padding: 0.8em 2em; background-color: #10b765; color: #fff; border: none; text-transform: uppercase; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}.dialog-box input[type="text"] { padding: 0 20px; font-size: 13px; letter-spacing: 0.1em; color: #888; height: 50px; line-height: 1; background-color: #fff; border: 1px solid #ddd; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; box-sizing: border-box; width: 100%;}.dialog-box h2 { margin: 0; font-weight: 400; font-size: 24px; padding: 32px 0 25px; text-transform: uppercase;}.dialog-box { max-width: 520px; min-width: 290px; background: #fff; padding: 20px; text-align: center; position: relative; z-index: 5; margin: auto;}.overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(55, 58, 71, 0.9); }.overlay .overlay-close { width: 30px; height: 29px; position: absolute; right: 0px; top: 0px; border: none; background: #10B765; float: left; color: #fff; outline: none; z-index: 100;}.overlay .dialog-inner{ text-align: center; position: relative; top: 50%; height: 60%; -webkit-transform: translateY(-50%); transform: translateY(-30%);}
.overlay-mbl { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; z-index:100;}.overlay-mbl.open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;}.dialog-box button[type="submit"]:hover,.overlay .overlay-close:hover { background: #212121;}
#trigger-overlay { cursor: pointer; float: left;}#trigger-overlay { background: #10b765; color: #fff; padding: 10px;}#trigger-overlay a { color: #fff; text-decoration:none;}#trigger-overlay:hover { background: #111;}

If you are good with CSS, you can always customize the CSS codes as per your needs to suite your template design and color scheme.

Now we need to install jQuery files of Full screen search. In the template code, look for the</body> tag and just above it paste the following jQuery files.

<script src="http://mybloggerlab.com/Scripts/modernizr.custom.js"></script> <script src="http://mybloggerlab.com/Scripts/fullscreen_search.js"></script>

Now after adding the CSS and jQuery files, we need to add the full screen search HTML code that will appear upon clicking the search button. Search for <body> and just below it paste the following code.

<div class="overlay overlay-mbl"><div class="dialog-inner"><div class="dialog-box"><h2>Enter your keyword</h2><form method="get" action='/search' class="search-popup-inner"><input type="text" name="q" onblur='if (this.value == &#39;&#39;) {this.value = &#39;Search the site&#39;;}' onfocus='if (this.value == &#39;Search the site&#39;) {this.value = &#39;&#39;;}' value='Search the site' /><button type="submit">Search</button></form><div><button type="button" class="overlay-close">X</button></div></div></div></div>

Adding Full Screen Search Overlay in Blogger:

After adding the both CSS and jQuery files, you are almost done with adding a full screen search in blogger. However, you need to display a search icon, link or button that upon clicking opens up the search box and covers the entire screen.It’s up to you where you would like to place the search icon, you can add it anywhere as per your template design. To add the search icon in the sidebar of your blogger site, go to Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the following search button HTML code in the HTML text area

<div id="trigger-overlay" ><a><i class="fa fa-search"></i> SEARCH</div>

Once everything is done, save your widget. Now go to your site and enjoy the new way of searching your site.
We hope this tutorial may have helped you in learning how to add full screen search overlay in blogger. If you have any suggestions about this plugin, please write back to us through Facebook, Google+ or comment below.