☰ Menu

Blogger

Facebook Popup Like Box Widget For Blogger

I searched the whole web many times for a professional Facebook popup like box widget for my blogger blog. At last I found a professional looking blogger popup like box widget created by  James Morgan. The best part of this Facebook like box widget is it only displayed once every 30 days for a visitor. You can find a live demo of  WordPress Like Facebook Popup Like Box from here.

How To Add  WordPress Like Facebook Popup Like Box To Your Blog?

You can add this widget to your blogger blog using add widget option in the layout tab or  directly into  blog template . If you are a newbie go for first option or if you know editing template using template editor go for second one. It is always better to add html codes directly into your template because it speed up your website loading time.

Code

[code type=codetype]

 


[/code]

 

1. Installing Using Layout Tab In Blogger

  • Goto Blogger > Layout> Add a Gadget
  • Select HTML/ JavaScript
  • Copy and paste above code and hit save.

2. Installing Blogger template Editor

  • Goto Blogger > Template > Edit HTML (Before doing anything backup template)
  • Search (Ctrl+ F) for </body> and paste given code just before it.
  •  Now save your template.

How To Customize This Widget?

  • Search for http://www.facebook.com/brieftutorials and replace it with your site’s Facebook page URL.
  • Popup every time the page loads  :  By default, the like box widget only shows up the first time the user visits your page. If you would like the Facebook box to popup every time the page loads, then remove this line of code:
[code type=codetype]$.cookie(‘popup_user_login’, ‘yes’, { path: ‘/’, expires: 7 });[/code]
  • Control  Time Delay  By default:  By default WordPress Like Facebook Popup Like Box  widget pops up 20 seconds after the page finishes loading. Search for the code below and change the number 20000 to a greater or lesser number.  

1 second = 1000. 10 seconds = 10000. 60 seconds = 60000.

[code type=codetype].delay(20000)[/code]

By default, this WordPress Like Facebook Popup Like Box Widget  is only displayed once every 30 days for a user. You may need to clear your browser cookies or test your site in  Incognito windows if you would like to see it again. Also you can  display this widget every time a user visits your site deleting the code in “How to Customize” section above.  If you’re still having trouble with the popup widget, please comment below, I am happy to help you!

Facebook-Like-Button-Slider
I found an awesome Facebook Like button slider widget for blogger while browsing internet. But it’s named little weird, so  we can’t find it by doing a simple Google search. So I decided to share the html and css code here.  It’s a slide out social subscription box which contain Facebook like & twitter follow button. This widget come out smoothly  when you scroll page down. So lets add this cute Facebook Like button slider to our blogger blog.  View A Live Demo Of ‘Facebook Like Button Slider’ Here.

How To Add  Facebook Like Button Slider To Blogger?

  • Goto your Blogger Dashboard > Layout > Click on Add a Gadget link as shown in below picture.

Facebook Like Button Slider

  • Add HTML/JavaScript as shown in below picture

Facebook Like Button Slider

  • Copy Below code and paste it in HTML/ JavaScript box
[code type=codetype]  

[/code]

 

  • Replace  brieftutorials  with your Facebook  and twitter user name.

Customize  Facebook Like Button Slider:

  1. You can remove jQuery script () if you already have it in your template.
  2. Replace ‘Don’t forget to join our community!’ with your preferred text like ‘Like Us On Facebook’.

Recommended Posts For You:

If you want to change this widget colour or position comment below with your Facebook and twitter page url. I’ll provide you a completely customized html code for your website.

remove showing post with label
Blogspot blogs have some unnecessary widgets and features. When a user click on one of your labels, blogger filters your posts tagged with that particular label and display a box saying Something like “Showing Posts With Label (label name). Show all posts”. But we don’t need this box!! This box ruins your website design and add an unprofessional touch.

So, if you want to remove showing posts with label, follow me. First backup your blogger template by going template Backup/Restore-Download Full Template. Then go to Blogger Dash Board-> Template -> Edit HTML -> Tick Expand Widget Templates and find the following part of code:

[code type=codetype] <b:includable id=’status-message’> [/code]

After you found it, click on the sideways arrow next to it, to expand the rest of the code.

Remove-Showing-Posts-With-Label-in-Blogger
Below is this code that you need to remove – along with the first one, as well:
[code type=codetype]

<b:includable id=’status-message’>

<div class=’status-msg-wrap’>
        <div class=’status-msg-body’>
<data:navMessage/>
</div>
<div class=’status-msg-border’>
<div class=’status-msg-bg’>

<data:navMessage/>

</div>
</div>
</div>
<div style=’clear: both;’/>
</b:if>
includable> [/code]

Remove-Showing-Posts-With-Label-in-Blogger
Replace the above code with this one:
[code type=codetype]<b:includable id=’status-message’>
<b:if cond=’data:navMessage’>
<div>
</div>
<div style=’clear: both;’/>
</b:if>
</b:includable>[/code] 

Now Save the template and view your label pages, no more “Post With label Message box there!

1 of 3 1 2 NEXT LAST