Spot.IM Social Network Integration Widget for Blogger and WordPress Blogs

Spot.IM is the creator of the first “everywhere” social network, empowering website owners and publishers to turn their websites into a social network driven by their own content where members can chat, share links, photos etc.





Within 5 minutes, you can host on your blog, a vivid, live community with almost zero effort just by integrating the spot.im widget.

Once you successfully create your spot and integrate your blog with Spot.im, the widget will appear at the corner of your site, via which your blog readers can easily join, start talking about your site content and get to know each other in live conversation. Two users can also have private conversation by making use of the "directSpot" feature.



Once you’ve created a Spot you are automatically assigned as the Spot’s host. As the host of the community, you can delete a user’s message or kick a user out of your spot. Spot.IM also provides the option of blocking all external links (links not leading to pages on your site) on your Spot.



Users can  also report a message or another user, after 4 reports the message will be automatically deleted or the user will be automatically kicked.



Spot.im app for Android and iOS allows spot hosts to converse with their users on the go. So, if you really want to keep up with happenings in your spot, ensure you download and make use of the spot.im mobile app.

How To Integrate Spot.im With WordPress and Blogger Blog

To get started, you need to go to www.spot.im, click on the Get Spot.IM now button  and sign in to Spot.IM via your preferred social network to create a user profile.



Thereafter, choose your Spot’s name and design it according to the branding of your website. With a logo and color to match, a category that best describes your Spot and so on.



Once completed, you will be presented with a code you can embed on your site.



For blogspot users, copy and paste the code in HTML/Javascript gadget and you're good to go.



For WordPress users, install the spot.im WordPress plugin. You will have to enter your spot id in the settings of the installed plugin. You will get the id by clicking on the "For Wordpress users" button on your spot management dashboard.



Once it's live on your site, you can edit and moderate your spot via your spot management dashboard. You can also make use of the Spot.im app for Android and iOS  to converse with their users on the go.



You can see sample spot live at : www.mobilitaria.com



What's your take on this?

Read More

Want to Add Free Notification Bar at The Top Of Your Website For eMail Opt-Ins? Try ManyContacts

ManyContacts is a simple and efficient drop-down website notification bar that sits at the top of your website, making it easy for your site visitors to take action on your website. If you want to generate more leads or grow your email list, ManyContacts is what you need. It is a product of online marketing experts from Woorank.





By making use of ManyContacts bar, you can offer a giveaway - such as an ebook, coupon code, a test, a course - without creating extra landing pages as it allows you to add a link to a file or offer in your "Thank You" message.

People that have used your ManyContacts bar will be added to a list in your Contacts Manager for later reference. Leads generated are data enriched, qualified and displayed conveniently in the Contacts Manager. When you gain a new contact an email notification will also be sent to you to facilitate a prompt follow-up.



The form closes for everyone that previously filled the form and it can be closed manually by everyone.



Adding ManyContacts bar to your site is easy. First, create an account and start customizing your bar. When you are happy with your bar, you will get a piece of notification bar html code that you will need to paste in your web page’s source code just before the </body> tag.



It works on any CMS as long as you have access to your source code. There are also ManyContacts bar plugins for Wordpress and Joomla.



I've added it to one of my sites and integrated it with madmimi. So, if anyone fills the form on my site, such contact will be automatically added to an email list on my madmimi account. It also integrates with mailchimp.



It is FREE and you can create as many as you want and paste the code on each page that you want to see the bar appear.



Get it at : www.manycontacts.com



Do you know other tools for adding a notification bar for email opt-ins and promos ??

Read More

Codes for Google+, Twitter and Facebook Follow Buttons

Adding the Google+, Twitter and Facebook follow buttons to your Blogger or WordPress blog will make it easy for your blog visitors to easily follow you on those social networks without having to leave your blog.



The Facebook Follow button lets people subscribe to your public updates on Facebook. It is not for Facebook pages.



Below is what the buttons will look like on your blog:

If you want to add the buttons to your blog, copy the code below in HTML/Javacript gadget (if Blogger) or a text widget (if WordPress).

<div class="fb-follow"
data-href="https://www.facebook.com/jideogunsanya1"
data-colorscheme="light" data-layout="button_count"
data-show-faces="false"></div> <p>

                                       
<a href="https://twitter.com/jide_ogunsanya"
class="twitter-follow-button" data-show-screen-name="false">Follow
@jide_ogunsanya</a></p> <p>

<div
class='g-follow' data-annotation='bubble' data-height='24'
data-href='//plus.google.com/100475476355251995300'
data-rel='author'/>

 </div></p>

Replace the Facebook username, Twitter handle and Google+ URL with yours.


NB: If you've not added the Facebook SDK and Twitter script on your blog, the buttons might not display.



I hope this works for you. 

Read More

Awesome Sidebar Feedburner Email Subscription Form For Blogger and Wordpress Blogs

While googling for awesome opt-in-forms yesterday, I stumbled on an attractive Feedburner Email Subscription Form. I copied its code from the blog post, made some changes to the code and embedded it on the sidebar of my blog. I'm loving it and I decided to share it with you.

You can place the Feedburner Email Subscription Form on the sidebar of your Blogger and Wordpress blogs. All you need to do is to edit the code below, copy and paste it in HTML/Javascript gadget of a Blogger blog or Text widget of a Wordpress blog.

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700" rel="stylesheet" type="text/css"></link>

<div id="Subscription">

<div class="heading">

Sign Up in Seconds</div>

Sign up with your email address to receive latest updates straight in your inbox.

<div class="emailsub">

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify? uri=secretinfos-ogbongeblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input name="email" placeholder="Your Email" type="text" /><input name="uri" type="hidden" value="SecretInfos-Ogbongeblog" /><input name="loc" type="hidden" value="en_US" /><input class="button" type="submit" value="Sign Up Now!" />

</form>

</div>

</div>

<style type="text/css">

#Subscription { width: 300px; height: 200px; border: 1px solid #51C0F9; border-radius: 5px 5px 0px 0px; }

#Subscription .heading { padding: 10px 20px; line-height: 20px; font-size: 20px; font-weight: 600; font-family: open sans; color: rgb(38, 38, 38); text-align: center; text-shadow: 0px 1px rgba(255, 255, 255, 0.75); background: none repeat scroll 0% 0% rgb(81, 192, 249); }

#Subscription p { font-family: open sans; font-size: 13px; color: rgb(12, 12, 12); line-height: 25px; padding: 5px 15px 0 15px; margin: 0; }

#Subscription .emailsub { padding: 0px 20px 10px 20px; }

#Subscription .emailsub input { color: rgb(170, 170, 170); padding: 10px; margin-top: 10px; font-size: 15px; font-family: open sans; width: 92%; border: 1px solid #ccc; border-bottom: 2px solid #ccc; border-radius: 5px; transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; }

#Subscription .emailsub input:focus { border-color:#F4836A; outline: none; box-shadow: 0 0 2px 1px #F4836A; }

#Subscription .emailsub .button { background: #F4836A; color: white!important; border:none; outline: none; border-bottom: 3px solid #B3614E; transition:background .4s linear; width: 90%; margin-right: 5%; margin-left: 5%; font-weight: 600; cursor:pointer; }

#Subscription .emailsub .button:hover{background: #DD7761;}

#credit {margin: -5px 0 0px 15px!important;text-shadow:none; opacity:.6;}

</style>

You can customize as desired if you have basic knowledge of html and css.



Ensure you carefully REPLACE the "secretinfos-ogbongeblog" in the code with your blog feedburner ID. You can get it via feedburner.com. Click on your feed, then click on "edit feed details". It will be displayed as seen in the screenshot below:

Do you like the email subscription form?

Read More

How To Create a Blog on Blogger For Testing Templates and Codes

I recommend you create a blog on Blogger for testing templates and codes before making changes to your live blogspot blog. By doing this, you won't mess up with your blog by uploading a corrupt template. I always use test blogs when testing templates, scripts and other hacks before implementing the changes on my blog.



Since text blogs are used only for experimental reasons, I set them up in a way different from the way I set up my main blogs. First of all, I ensure that they are not listed in public listing of blogger, not visible to search engines; not appear in my Google+ or blogger profile page. Atimes, I also set them up in a way that no one else can view it except me.



Luckily, Blogger allows us to set up any number of blogs for FREE and also makes it easy to create a Blog on Blogger with the settings highlighted above.



How To Get Started



==> Go to www.blogger.com and sign in with your Google account details.

==> Choose a name for your test blog e.g My Test Blog 1

==> Next you will need to choose your blog address (something.blogspot.com). Try to use an address which is unlikely to be used by other Bloggers

==> Choose one of the default templates and create your blog.



The next screen invites you to make your first post. This is actually quite important as having a few posts in your test blog will be of great benefit in seeing how your experiments will work when you try them out.



I recommend you change a few settings as explained below, before adding posts to your test blog.



1. Go to Settings tab.

2. Go to Basic sub-tab.

3. Add description for the test blog eg a test blog for testing templates and scripts.

4. Via "Privacy", Set 'No' for Add your blog to our listings? option and also Set 'No' for Let search engines find your blog? option as seen in the screenshot below:

After configuring these settings, neither your test blog will be indexed by search engines, nor it will be displayed in public search listings of blogger blogs.

How To Restrict Readers From Viewing the Test Blog

1. Go to Settings tab.

2. Go to Basic sub-tab.

2. Scroll down to Permissions.

3. In Blog Readers section, select the "Private - Only blog authors" option.

After configuring this option, no one can view your blog except you.

Disconnecting Test Blog From Google+ Profile

If you've linked your Google+ profile with your Blogger account, you can follow the steps below to disconnect your test blog from auto-sharing the posts on your test blog on Google+ :



==> Go to Google+ tab of your test blog

==> Scroll down and click on "Disable Google+ Link"

If you're still using Blogger Profile instead of Google+ profile, go to your dashboard, click "edit profile", select blogs to display and uncheck your test blog from the listing.

So, How Do I Add Posts To My Test Blog?

For posts in your first test blog, you can copy some individual posts (eg 10 posts) from your main blog making sure each post has at least an image in it. Also ensure you add at least one label to each post. The images and labels will be useful when testing templates with featured images and label widgets.



When creating more test blogs, you can simply import posts from your first test blog to the new test blogs.



You can also easily generate a paragraph or two of dummy text using the Lorem Ipsum generator but ensure you add images and labels to the posts.



Now you can use your test blog for whatever experiments you choose! You can upload your existing template to test new modifications, try out your scripts or codes, or even try a new Blogger template you've downloaded somewhere!



When you have finished using your test blog, you can easily delete it by going to Settings > Other and choosing the "Delete blog" option. Once you do this, the blog will be deleted forever. Also the blog url will be released and available for others to use instead.



Do you use test blogs ? If not, how do you manage the modifications done on your Blogger blog?

Read More

You Can Now Purchase Domain Name Right From Blogger Settings

Last year, I announced the launch of Google Domains;  a new domain registration service which will enable businesses to search, find, purchase and transfer the best domain for their business - whether it’s .com, .biz, .org, or any of the wide range of new domains that are being released to the Web.





Fast forward 2015, Google has announced the integration of Blogger directly with Google Domains, allowing Blogger/Blogspot users to purchase a custom domain for their blogs right from Blogger with just a few clicks, thereby making it so easy to connect their blogs to custom domains.

So, if you want to change from .blosgpot to .com, you can grab a custom domain for your blog via Google Domains via the Publishing section of your blog's Settings tab.



According to the source, if you purchase a new domain from Google Domains, it’s also easy to create a new blog for that domain right there.

What's your take on this?



NB: I can help you change to .com here if you can't do it yourself.

Read More

How To Add Facebook Mobile Comment Form To Blogger / Blogspot Mobile View

If you've enabled custom Blogger mobile template, you can customize the mobile view of your blog as you desire. You can add and remove whatever you like in as much as you know how to go about it. Today, I have decided to share with you, how to add Facebook mobile comment form to Blogger or Blogspot mobile view.

To get started, I recommend you enable Custom Blogger mobile template. If you don't know how to do that, sign in to your blog, go to "Template". Click the icon under "Mobile". Select "Yes. Show mobile template on mobile devices". Select "Custom" from the drop down box and SAVE.



Next is to get your blog's Facebook APP ID handy. If you know the ID, copy it somewhere and if you've forgotten it, you can check the Facebook apps page. If you can't find it on the apps page, then you need to read how to get Facebook application ID for your blog here.



Next is to log in to your Blogger dashboard, back up your template and go to "Template" > "Edit HTML"



==> Click inside the HTML and use CTRL F to find : <body

==> Directly below it, paste <div id='fb-root'/>

==> Open a new tab on your browser and go to www.freehtmlparser.blogspot.com

==> Copy and paste the code below inside the box on the page

<script>(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/sdk.js#xfbml=1&appId=1569785879914041&version=v2.0";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

==> Carefully replace the highlighted appID with the Facebook app ID of your blog

==> Click "Encode"



==> Go back to the browser tab where you have your blog HTML



==> Copy and Paste the encoded script directly below the  <div id='fb-root'/>



==> Now, your HTML should look similar to the screenshot below:

==> Click "Save Template"



==> Click inside the HTML and use CTRL F to find :

<b:if cond='data:top.showMobileShare'>

==> Carefully find the ending </div> as seen in the screenshot below:

==> Directly below it, copy and paste the code below:

<p align='center'>

<span style='font-size: 15px;font-weight:bold;'>Facebook Comment Box </span>

</p>

<div style='text-align: center;'>

<fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' mobile='yes' numposts='10'/>

</div>

--> Click SAVE Template.



View one of your blog posts and the comment box should appear on the mobile view,  above the Blogger comment form.



Try this and let me know if it works for you. Also leave your comments if you've questions to ask.



Note: You might not find in your template if you are using a third-party template.

Read More

Custom Permalink Feature in Blogger. How Do I Use it?

When you write a blog post, Blogger automatically generates a permalink (a URL that links to a blog post) from the title of the post. if you prefer to customize the link, you can do so with the custom permalink feature in Blogger. It was one of the suite of SEO features integrated into Blogger in 2012 to enable users effectively customize their search preferences.





I use it alot every-time I compose my posts. It makes it possible for me to generate URLs that provide readers with more information about my posts when scanning search engines results. Atimes, when you fail to use it, Blogger might end up auto-generating a URL that might not really make sense for your blog post.

How To Use Blogger Custom Permalink

To create your own URL for a specific post, go to the Compose page and enter a title for your blog post.



Click on "Links" in the Post Settings box.

Allow Blogger to auto-calculate the permalink. Once completed, click on the 'Custom Permalink" option.



You should see the editable permalink generated by Blogger



Edit it as desired. You can also delete all and retype whatever you want there.



Click DONE.



That's all.




NOTE



==> Separate each word with -

==> Avoid words like "of", "the", "is", "from" etc

==> The shorter, the better.

==> Each blog post must have a unique permalink.

==> You can't edit permalink of an existing post. It's only for new posts. 





I hope this helps.

Read More

Blogger Comment Form Not Showing On Mobile View? Try This Solution

I've been receiving mails lately from co-bloggers, complaining that their readers are finding it difficult to comment on their blog posts simply because the Blogger comment form won't display on mobile even after clicking the "post a comment" link.





This is mostly experienced on blogs that have switched to Blogger custom mobile template. Although, I don't really know what causes the problem but there is a solution, which I've decided to share with you in this post.



To fix the problem, you only have to add the css below to your Blogger blog's html. If you view your blog posts after saving the changes to your html, you should see the comment form displayed directly below each post even if the post has zero comment.

.mobile .blogger-iframe-colorize {

display: block !important;

}



.blogger-iframe-colorize {

display: block !important;

}

How Do I Add the CSS Code To My Blog?



==> Sign in to www.blogger.com and click on your blog in the dashboard

==> Back up your template. Very Important!

==> Click "Template" > "Edit HTML"

==> Click inside the HTML

==> Use CTRL F to find ]]></b:skin>

==> Paste the CSS code directly above it as seen in the screenshot below

==> Click "Save Template"



That's all.



Try it and let me know if it works for you or not.



Cheers!

Read More

How To Upload A New Template To Blogger

Although Blogger allows users to easily make changes to the design of their blogs by making use of the Template Designer, there might be occasions you may prefer to download and install a Blogger template sent to you by someone or the one downloaded from sites that offer custom Blogger templates eg btemplates.com.





Just as with WordPress themes and Joomla templates, you need to be careful about using free Blogger templates found on the web because they might include malware or spam links to other sites which might harm your blog SEO. If the source is trusted, no cause for alarm.



For you to install a template successfully, it must be in the .xml format that is compatible with Blogger. Most sites where you can download free Blogger templates package the .xml file and some other files in a zip file. Hence, you will have to unzip the file before you can upload the .xml file to your Blogger blog. If you upload the .zip file directly to Blogger, you will likely get a blogger template upload error.

How To Install New Blogger Template

Now, let's assume you have the .xml file of the template you want to upload. Just follow me through the steps below, to install it to your Blogger blog:



==> Sign in to www.blogger.com and click on your blog in the dashboard

==> Back up your blogger template.  Very Important!

==> Click on "Template"

==> Click the Backup/Restore button located at the upper right corner of the screen

==> A popUp similar to the screenshot below will appear

==> Click "Browse". Select the .xml file of the template you want to install

==> Click "Upload".



Preview your blog and if everything is fine, hit the 'Save Template' button.



If upload is successful, you should notice the changes once you view your blog in your browser.



That's all.



Don't Know How To Unzip The Zip File You Downloaded?



In Windows and Linux, you can right-click the Zip file and select “Extract All…” Extract All will allow you to set a path for the extracted folder to go.



Select the location for the extracted folder. You will see the .xml file of the template in the folder.



I hope this helps.

Read More

BackUp Blogger Template and Restore It In Easy Steps

Saving a backup of your Blogger template to your PC before making changes to it, is highly recommended. This is simply because if you are not satisfied with changes you apply to your template and feel like reverting it back to its previous condition, all you need to do is to restore the back up.



Your Blogger template back up will also be handy in situations whereby you want to revert your blog back to an old design after uploading a new template.





Blogger makes it very easy to back up templates of Blogspot blogs. Just follow me through the steps below:



==> Sign in to www.blogger.com and click on your blog in the dashboard.

==> Click on "Template"

==> Click the Backup/Restore button located at the upper right corner of the screen

==> A popUp similar to the screenshot below will appear.

==> Click on "Download Template"

==> Choose where you want to save the file on your computer and then click the “Save” button.



You can rename it to include the date you created the backup and you can upload it to the cloud eg to dropbox, Google drive etc so you can always access it from anywhere whenever you need it.

How To Restore Your Old Blogger Template

If after making changes to your Blogger template, you decide to revert back to its previous condition, all you have to do is to restore the most recent back up you saved to your PC.



To restore, follow the same steps above but when the pop up appears, click on the "browse" button to select the Blogger back up file on your PC, then click "Upload".



That's all.



NOTE: This will only back up the look of your blog and not the posts and comments. You can read how to back up blogger posts.



Happy Blogging!

Read More

Anonymous Comments On Blogspot Blogs Requires You To Enter Confirmation Text? Here Is How To Avoid It

Since yesterday, I've been receiving emails about how anonymous commenters are now finding it hard to drop comments on Blogspot blogs, hence making some bloggers to lose comments on their blog posts. Below are some :

Jide oooooo!

Goodmorning...:(, peeps are complaining that it's hard to comment on the blog cos it's showing them a pop up box asking them to confirm if they are robots or not.

Please how do i get it off :(

Hello Jide, some readers are complaining when they want to drop comments as anonymous, it tells them to prove they are not robots. I've gone to comment settings and it's been on No for word verification. I refreshed it and the people still say it's still showing the same thing. But one said when she is logged on to Gmail on her phone, she can comment with anonymous, but as soon as she signs off, she has to do the word verification.

Well, if you're also experiencing same, don't bother yourself googling how to make the word verification go away. This is because it seems to be a new way Blogger is fighting comment spam.



Looking closely at The word-verification option page at Blogger Help, you will notice where Blogger states that even if you don't have word verification turned on, anonymous commenters might be asked to enter some text before they can leave comments on your blog.

So, it's obvious that it's a new way Blogger is protecting Blogspot blogs from abuse.



If you own a Blogspot blog, you can edit the "Comment Form Message" via "Settings" > "Posts and Comments" to inform your readers to sign in if they want to comment anonymously without having to enter the verification code.



If you are not satisfied with this new feature at all, you can move to wordpress where you can tweak your blog commenting system as desire. :)

How Can I Avoid Solving Capthca Before I Comment Anonymously On Blogger Blogs?

If you always love commenting anonymously on Blogspot blogs and you don't want to be entering th verification text everytime you want to post a comment, follow the steps below:



==> Type your comment and select "Google account'

==> Click "Publish".



You will be redirected to a page where you can sign in



==> Sign in with your Google account credentials



The blog post page will reload.



==> Select "Anonymous" from the "comment as" drop-down box.



==> Re-Enter your comment and Click "Publish".



Thereafter, you can post anonymously on any Blogger blog without having to enter the verification code, in as much as you remained signed in to your Google account.



That's all.



What's your take on this?

Read More

How To Add Read More To Feedburner Blog Posts Feed

Feeds are a way for blogs to distribute their content well beyond just visitors using browsers. Feeds permit subscription to regular updates, delivered automatically via a web portal, news reader, or in some cases good old email. If you have a website, blog, audio/video content, or even photos, you can offer a feed of your content as an option.





If you are using a popular blogging platform or publishing tool like TypePad, Wordpress, or Blogger, you likely publish a feed automatically. You can manage your blog feeds, using the free services been provided by Feedburner. FeedBurner's services allow publishers who already have a feed to improve their understanding of and relationship with their audience.



By default, subscribers to your blog's feed will likely be able to read the full content of your blog posts without visiting your blog. Well, if not satisfied with this, you can offer a short summary of your hyperlink-free content and direct your subscribers to your Web site for the rest of the story.



If you've burned your post feed with FeedBurner, there is a 'summary' setting which, if enabled, may affect the display of your feed for the Until Jump Break option. To activate it, sign in to feedburner, go to the "Optimize" tab, click "Summary Burner" and activate the service.

How Do I Add Read More To The Feed of My Blogger Blog?

If you are using Blogspot/Blogger as your blogging platform or publishing tool, even without burning your feed with Feedburner, you can change your feed settings via the Blogger dashboard.



To change your the feed settings of your Blogger blog,



==> Sign in to www.blogger.com

==> Go to "Settings" > "Other".

Here, you can select how much of your content you want to syndicate.



"Full" will put the entire content of each post in your site feed, while "Short" only includes an excerpt from the beginning of each post. Select "Until Jump Break" to show all post content before your jump break. The "None" option turns your site feed off entirely. For more advanced options, you can select "Custom."

Hence, to add read more, select the "Until Jump Break" option. This will make your posts to be displayed as seen in the screenshot above, with a read more link, which when clicked, will take your subscribers to your blog.



Yiu can confirm the change via your browser (Mozilla Firefox recommended) at : http://www.ogbongeblog.blogspot.com/feeds/posts/default?alt=rss (Replace ogbongeblog.blogspot.com with the URL of your blogspot blog).

Read More

How I Make Adsense Appear In Middle Of Blogger Posts (New and Old) Without Using Post Template Feature

In my previous post, I explained how to easily place Adsense ads in middle of Blogger posts using the Blogger "Post Template" feature. Although the trick is very easy to implement and automatically displays ad in desktop and mobile view, the trick doesn't display the ads in old posts.





If you want the ad to display in the middle of all posts (old and new), you will have to hack your blog's html and add some codes to it. I stumbled on the trick here, implemented it and works fine on my blog. I even use the trick to make Adsense ads appear in the middle of posts on Blogger mobile view.



This script in the trick actually looks for number of <br/>  (line break) tags inside your post and display ad unit.

How To Get Started



==> Generate your Adsense ad code from www.google.com/adsense

==> Parse the Adsense ad code at www.freehtmlparser.blogspot.com (paste and click "Encode")

==> Login to your Blogger dashboard and back up your template ( Very Important! )

==> Go to "Template" > "Edit HTML"



==> Use CTRL F to search your HTML for the JQuery script below:

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

If it exists, move on to the next step. If not, copy the script above and paste directly above </body> in your blog's html



==> Use CTRL F to find </body> again and directly above it, paste the code highlighted below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script>

 $AdCode = $("#AdCode").html();

 $("#PostBody br:lt(1)").replaceWith($AdCode);

 $("#AdCode").remove();

</script>

</b:if>

==> Save the Template



==> Go back to "Template" > Edit HTML. Use CTRL F to find <data:post.body/> . Replace it with the code below:

<div id="PostBody">

 <data:post.body/>

</div>





<div id="AdCode">

<div style='margin:5px 0;text-align:center;clear:both;'>

 <!-- Paste PARSED Ad Unit Code Here -->

</div>

</div>

==> Save the template



NB: Your template might have 2 or more <data:post.body/> codes. You have to identify correct one by using "try and error" trick. The 2nd or 3rd instance works in most templates though.



==> Go to "New Post" > "Options". Ensure you select "Press Enter for line breaks".

That's all.



To make it appear on mobile view, find <b:includable id='mobile-post' var='post'> in your HTML and replace the <data:post.body/> under the line as explained above.



I hope it works for you.



If it doesn't work for you, you can simply revert the changes by uploading the back up you created before implementing the trick.

Read More

How To Put Affiliate or Adsense Advert In Middle of Blogger Blog Post

There are series of tutorials online on how to place Adsense below Blogger post title and at the end of Blogger post but you will hardly see tutorials that will explain how to easily place adsense or affiliate advert in the middle of a Blogger post. This is simply because it's not something you can easily achieve by copying and pasting your ad code in your blog's html.





Although, there exists an advanced hack you can implement to insert an ad in the middle of a Blogger post but I'm sharing with you in this post, a trick that simply involves the use of Blogger's "Post Template" feature.



Post template helps save you time by pre-formatting the post editor. You can use it to format your posts in a certain way. Hence, you can also use it to automatically display your adverts in the middle of your posts.



How To Get Started



==> Get your Adsense code or advert code ready

==> Log in to your Blogger dashboard and go to Settings > Posts and comments, then click Add next to Post Template.

==> Paste your ad code in the box and save. (No need to parse the code).

That's all.



When next you need to compose a post, click on the "HTML" tab of the post editor to see your ad code.



Type your post content above and below the ad code, so that the advert will be in the middle.



When you are through with typing the content, you can click on the "Compose" tab to easily add links etc to your post.



When you are done, publish your post, view and you should see the ad in the middle of the post.



NB: The ad will not display in old posts but automatically displays on the Blogger mobile view.



Try it and let me know if it works for you.



Cheers!



Recommended: How I Make Adsense Ads Appear Automatically In Middle of New and Old Blogger Posts Without Using Post Template Feature.

Read More

How to Easily Setup Twitter Cards for Your Blogger Blog

Few days ago, I wrote an article on the 3 Easy Steps to Setup Twitter Cards for Your WordPress Blog but I had the intention of doing the same for Blogger blogs immediately. I was just reminded of that by a commentator on the post. If your blog is on the blogger platform, you will find here how to easily setup Twitter Cards for your blog.

Twitter cards is one of the ways you can use to generate more views for your blog and your blog posts. With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a few lines twitter meta tags to your blog, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.



There are 7 types of Twitter Cards



Summary Card: Default Card, including a title, description, thumbnail, and Twitter account attribution.

Summary Card with Large Image: Similar to a Summary Card, but with a prominently featured image.

Photo Card: A Card with a photo only.

Gallery Card: A Card highlighting a collection of four photos.

App Card: A Card to detail a mobile app with direct download.

Player Card: A Card to provide video/audio/media.

Product Card: A Card optimized for product information.





You can setup any of the Twitter Cards the same way. You just need to select which one you want while setting the Twitter cards.







Here is an example of the Twitter Card for this post.

Here is how to easily setup Twitter Cards for your blog.



1. Edit your template to add the Twitter card metadata. 

Login to your Blogger account and go to Template > Edit HTML 

2. Click within the Template Editor and press Ctrl + F to search within the template for </head> and paste the below code just above that . You will have to modify the @mmonigeria in the below code with the name of the twitter account you use for your blog. The second @mmonigeria should be changed to the name of the blog author’s twitter account. Make sure you save your template after pasting.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

    <b:if cond='data:blog.postImageThumbnailUrl'>

      <b:if cond='data:blog.metaDescription'>

        <meta content='summary' name='twitter:card'/>

        <meta content='@mmonigeria' name='twitter:site'/>

        <meta content='@mmonigeria' name='twitter:creator'/>

        <meta expr:content='data:blog.pageName' name='twitter:title'/>

        <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

        <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>

        <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>

      </b:if>

    </b:if>

</b:if>

3. Configure and validate your Twitter Card on the Twitter Validation Page



- twitter:card -> should be the type of Twitter Card you want

- twitter:site -> The Twitter username of the owner of this card’s domain.

- twitter:title -> The title of your content as it should appear in the card.

- twitter:description -> A description of the content in a maximum of 200 characters.

- twitter:creator -> If the content of this card was authored by someone, include their Twitter username here.

- twitter:image:src -> A URL to the image representing the content.

- twitter:domain -> your blog’s domain name.





4. Click “Update Preview” after inputting the above twitter settings. If all looks fine, apply for approval by clicking on the “Validate & Apply” tab. Enter the URL of the post and click on “Go”. After validation, you can then request for the final approval for your card. You will get email when Twitter approves your request. This can be immediate or can take like 48 hours.





This is all you need to do to setup Twitter cards for your blog. You can monitor the traffic generated by the Twitter card via your Twitter analytics. Once approved, all your posts which have an image and description will start showing twitter cards when you or anyone else shares your post to twitter. So, it is important that while making a blogger post, you should add a "Search Description" and an added an image to the post. If you don’t do any of these, the post won’t display a twitter card.

If you need assistance with this, you can ask using the comment box provided further below.

Yours,

Adesoji Adegbulu

www.mmo.ng

Read More

Solution to TEMPLATE ERROR: Invalid data reference bl: No dictionary named: '' in: ['blog', 'skin', 'view']

Problem



==> TEMPLATE ERROR: Invalid data reference bl: No dictionary named: '' in: ['blog', 'skin', 'view'] displays in the header section when blog is viewed on PC and on mobile devices.



==> The "Live On Blog" and Mobile Template previews display looks broken as seen below:

Cause



I found out that the problem started when I added the codes below to the head section of my Blogger blog's html




        <meta expr:content='data:blog.pageName' name='twitter:title'/>
        <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
        <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
        <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>



Solution



==> Sign in to Blogger dashboard

==> Go to "Template" > "Edit HTML"

==> Use CTRL + F to find the codes above, delete them and SAVE the template.



That's all.



I hope it works for you.

Read More

Make Background Image Of Your Blog Clickable With This CSS Tweak

UPDATE:  

+Kanyi Okeke alerted me via comments that once you implement it on a Blogger blog, it automatically links anything on the page to the link in the code above.I will find a solution to this and update this post asap.





Earlier today, +Temi Baby  asked me how to make the background image of her blog clickable and probably link to an external website, while also ensuring that the link opens in a new tab/window. Initially, I thought such won't be possible on a Blogger blog but after making some research, I realized it's possible and can be achieved with css.



You can see a demo at www.wizkid-download.blogspot.com. Clicking on the background image on desktop and mobile view of the blog takes you to blogger.com + it opens in a new window/tab without taking you away from the blog page.



So, let me assume you've already added a background image to your blog.



==> Log in to www.blogger.com, go to your blog dashboard, click "Templates" > "Edit HTML"



==> Click inside the HTML editor, press CTRL F on your keyboard to find < body



==> Directly under < body, paste the code below:



<a href="http://www.nairaforsms.com" id="blogbackground-link" target="_blank"> </a>



==> Replace www.nairaforsms.com with the link you want the background to open when clicked.



==> Click "Save Template".



==> Click inside the HTML editor again and use CTRL F to find ]]></b:skin>



==> Paste the css code below, directly above ]]></b:skin>

#blogbackground-link {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1;

    height: 4000px;

}

==> Click "Save Template".



View your blog, click on the background image and it should open your link in a new tab/window.



That's all.



Don't know how to add background image to your blog?



Paste the css code below, directly above ]]></b:skin>

body {

    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZzrYFRT3Q5EN5iiH6dYI1r-QXKRmJgS5Nz0e3V9k1xHVj3aSECswVeD4BiLMIeDdej_UaobYdmXPkNaf0GjDI-NQpDyjncS3uR9CnJ25YSe9In5VLZf27n-PO4zn2k2ii0CYCUpyBPjY4/s1600/Nairaforsms-300x250AD_optim.jpg');   

    background-position: top center;

    z-index: 1;

    background-attachment: scroll;

    background-repeat: repeat-y;

    background-color: grey;

}

Carefully replace the highlighted link; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZzrYFRT3Q5EN5iiH6dYI1r-QXKRmJgS5Nz0e3V9k1xHVj3aSECswVeD4BiLMIeDdej_UaobYdmXPkNaf0GjDI-NQpDyjncS3uR9CnJ25YSe9In5VLZf27n-PO4zn2k2ii0CYCUpyBPjY4/s1600/Nairaforsms-300x250AD_optim.jpg with the link to your background image.



That's all.



NB: If you are a WordPress user,  copy and paste the code below, directly below the <body tag.



<a href='http://www.nairaforsms.com' id='blogbackground-link' target='_blank'> </a>



Thereafter, you can paste the css code in your custom css file.



==> Replace nairaforsms.com with the link you want to use



I hope it works for you. Let me know via comments, if there are challenges.

Read More

How To Create and Add Responsive Adsense Ad Unit to Blogger Blogs

Responsive web design is the trend these days as more and more people are browsing the internet through their smartphones and tablets. If your Blogger blog is responsive, you can consider adding responsive ad units to the blog to maximize your Adsense earnings.



Adsense responsive ad code automatically serves different ad sizes based on the space available and also has support for ad size changes after a screen orientation change  (e.g., when a tablet or phone goes from portrait to landscape).



By using a responsive ad unit, you can control the size of the ads on
your page, in line with how you control the layout of the rest of your
page across devices. 





If your blog design is responsive, all you need to do is to generate responsive ad code and add it to your blog's html.

How To Generate Code for Responsive Adsense Ad Unit  

==> Log in to www.google.com/adsense

==> Click the My ads tab and click +New ad unit

==> Provide a unique name that will help you find this ad unit later

==> Select “Responsive ad unit (BETA)” from the Ad size drop-down

==> Click Save and get code.

==> In the “Ad code” box that appears, select the recommended "Smart Sizing" mode from the Mode drop-down.

==> Place the ad code on your site.

How To Place Adsense Code On Blogger Blog

==> Log in to www.blogger.com

==> Go to "Layout"

==> Click on "Add a gadget"

==> Select "HTML/Javascript" from the options

==> Paste the ad code in it and Save.



That's all.



Once you’ve placed your ad code,I recommend that you test your ads on different devices and screens to make sure that the responsive behavior is working correctly. You can also use the free online Responsive Web Design Testing Tools for the test.

Read More

How To Back Up Blogger Blog Posts and Comments

Backing up your Blogger blog even if it is once in a week is highly recommended if you really care about your blog. Although Blogger blogs are not easily hacked but Blogger can disable or delete your Blog without warning you. Mind you, Blogger automated classification system can disable your blog without you doing anything wrong. I experienced this recently.





If such happens and you have a back up file of your blog, you can easily create a new blog and restore the content of your old blog. Besides, if you decide to move to Wordpress, the .xml back up file is all you need to restore your blog posts and comments to the Wordpress blog.



Backing up your Blogger blog is very easy. You can get it done easily using the "export" feature of Blogger. The Blogger tool lets you save a copy of your blog on your hard drive. The export tool will not back up your Blogger template though, just your posts (including drafts) and comments.





STEPS



    ==> Sign in to www.blogger.com

    ==> Click on the Small arrow beside the "view blog" button

    ==> Click on "Settings" > "Other"

 



    ==> Click on the 'Export blog" link under Blog tools.

  

    ==> Click on 'Download blog"

    ==> Save the .xml file to your PC



That's all.



You can rename it to include the date your backup and you can upload it to the cloud eg to dropbox, Google drive etc so you can always access it from anywhere whenever you need it.



The total number of posts and comments will determine the size of the export file.



Remember, your data is very important. So, DO NOT download your back up on public computers.



You can use Google TakeOut to back up all the blogs in your Blogger dashboard and if you want to back up the design/look of your Blogger blog, read how to back up Blogger template.



When last did you back up your blog?

Read More