Blogger

WordPress Like Facebook Popup Like Box Widget For 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 For Blogger

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.

How To Remove Showing Posts With Label From Blogger Label Pages

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!

Top 5 Best Free Premium Blogger Templates 2014

top5-blogger-template-2013
There is thousands of blogger templates out there. But when I create this blog I really search hard for a cool and unique blogger template. But unfortunately all are sharing same templates with little bit of customization’s.  After searching for a week I figure out some of the best free premium blogger templates. Hope you all will like my collection

1. MaxMag Blogger Template

MaxMag Blogger Template
Demo      Download

MaxMag is the best responsive template that perfectly  suites for blogs based on Technology, News, Blog,  Fashion, Multimedia, Magazine, Entertainment categories. Maxmag is a wordpress theme bloggerized by templateism, one of the best blogger template design team. This template have Sticky Multi Drop Down Menu that scrolls throughout the site, Featured Content Area, Featured Ads Spot:Though, Author Bio Widget, white and green color Scheme, threaded commenting system, related posts, Ads ready, SEO Friendly and much more.

2. Metro Modern Solar

Metro Modern Solar
Metro Modern Solar template uses windows 8’s Metro interface and its own unique enhancements for it.  This template is suitable for gadget review websites, technology, news, magazine and all other content sites. This blogger template have metro style multi-level customizable menu bar, Features post widget, Carousel Slider Widget, Metro Social Widget, Page Navigation and much more.

3. ShoutMeLoud Premium Blogger Template

shout-me-loud-blogger-template

ShoutMeLoud is a technology blog, they have a eye catching theme. But unfortunately that blog is on WordPress but I have found a duplicate entirely copied template for blogger. ShoutMeLoud blogger template have unique menu bar, ads spot, seo optimized, 4 column footer and much more.

4. Olympia Blogger Template

Olympia-Blogger-template
Demo       Download

Olympia Blogger Template is a clean and simple wordpress to Blogger converted blogger Template. This template have 1 Right Sidebar and 3 Column Tabs Widgets and 3 column widgets area Under the Header, Social icons and search box etc. This Olympia Blogger template suitable for design And Personal Quality Blogger Base Blog’s.

5. Portfolio Blogger Template

portfolio-blogger-template

Portfolio Blogger Template is a gallery style premium blogger template. This blogger template have 1 Right Sidebar and 3 Column Footer. This template is for who loves simple and clean templates.

If you like above collection don’t forget to comment and share this post Open-mouthed smile

How To Remove Powered By Blogger From Blogger Blog

How To Remove Powered By Blogger
First of all backup your Template (Template- Backup/Restore- Download Full Template) before removing Powered By Blogger. This helps to revert to the original template when something goes wrong while editing your template. To Remove Powered By Blogger from your blog, follow instructions:
  • Click on the Template link in the left navigation menu.
  • Click on the Edit HTML button
  • Select the Expand Widget Templates checkbox
  • Search (Ctrl+ F) for “attribution”, we can find

[code type=codetype]<b:widget id=’Attribution1′ locked=’true’ title=” type=’Attribution’/>[/code]

  • Remove above code from template.
  • Sometimes, this method will not work, If it’s not working change true to false in the above code.
  • Now save and close the edit HTML and go to Layout. Find the widget named Attribution. Click edit and Click on the Remove button. Save Layout.

Now you successfully removed ‘Powered By Blogger’  Attribution widget from your Blog. Also check below posts

How To Insert Text Box In Blogger Post

Insert-Text-Box-In-Blogger
This post will help you to put text box in Blogger Posts. You can use this text box to highlight HTML codes, Important texts, etc. Just enter “Edit HTML” while creating post and paste below codes into desired location.
Tip: Just enter “xxx” in compose mode where you want to insert Text box and switch to HTML mode. After that find (Ctrl+F) “xxx” and replace it with below code.

Normal Text Boxes For Blogger

  • To Create Editable Text box

[code type=codetype]   <textarea rows=”3″ cols=”10″>Your Text Here textarea>[/code]

  • To create Read only text box

[code type=codetype] <textarea rows=”5″ cols=”20″ name=”Privacy Policy” readonly=”readonly”>

Your text here </textarea>[/code]

  • To Create Link Text box

[code type=codetype]<textarea rows=”5″ cols=”20″ name=”Link To Blog” readonly=”readonly”>Your HyperLink Code Here </textarea>[/code]

Text Box With Custom CSS  For Blogger

The above text box doesn’t look good, huh! So if you want a good-looking text box with stitched border, shadow and hover effect add below codes to your template. This text box developed by Gurwinder Singh from Infozguide.com. This is a CSS modified text box, so you need to edit your template this time.

Custom CSS Text Box Live Demo Here

  • Goto  Blogger Dashboard > Template > Backup/ Restore > Download Full Template.
  • Now edit your HTML by going Template > Edit HTML
  • Press Ctrl+ F and search for

[code type=codetype] ]]></b:skin>[/code]

  • Now paste the below code above that code.

[code type=codetype] .IGtextbox { color: white; background-color: black; width: 500px; margin: 5px 60px; padding: 20px 20px 20px 20px; border: 2px dotted lightgrey;

border-radius: 10px; box-shadow: -1px -1px 12px 2px gainsboro; transition: background-color .777s; -webkit-transition: background-color .777s;

-moz-transition: background-color .777s; -o-transition: background-color .777s; -ms-transition: background-color .777s; } .IGtextbox:hover { background-color: CornflowerBlue ; } .IGtextbox:active { background-color: darkgreen ; }[/code]

  • Click on Save Template.

Now onwards you can add this search box directly to your blogger posts. When you create a new post, then write your article and now wherever you want to add this text box just mark ‘xxx‘ and switch to HTML view. Now search (Ctrl+ F) for ‘xxx’, you can replace it with below code:

[code type=codetype]

monospace;”>Your Text/Code Here

[/code]

Publish or preview your post, you can find awesome text box. If you need any customizations comment here below.