How To Hide a Page from Showing In Blogger Navigation Menu

If you've added the Blogger Pages widget to your blog, anytime you create a new page (NOT post), a new tab automatically appears in the navigation menu by default. The title of the page automatically displays on the tab.



Sometimes, you might want to create a Page but won't want it to appear as a tab in the navigation menu. Well, it is possible and that's exactly what I want to explain in this tutorial.



My guest post submission, post sponsorship and custom domain set-up pages were all created using Pages and NOT posts; and if you look closely at the Ogbongeblog's navigation menu on PC, you will hardly find the tabs linking to those pages there.



STEPS



Let me assume you've already added the PAGES gadget to your blog's header section to generate navigation tabs for your blog.



To hide a PAGE already existing as a tab in your navigation bar,



==> Log in to your Blogger dashboard at blogspot.com



==> Go to "Layout" and click the "edit" link next to the "Pages" gadget

==> After clicking "edit", you should see something similar to the picture below:









==> UNTICK the Page you want to hide



==> Click SAVE.



That's all.



If you check your Navigation menu, the tab for the hidden Page will no longer be there.



NOTE



==> If you want to hide a new page, create the page and hide it as explained above.



==> You can UNTICK the "Automatically add new pages when they are published" to change the default setting.



I hope this helps.



Feel free to check out how to create Blogger Pages and how to add navigation tabs to Blogger blogs.

Read More

NIIT Nigeria Scholarship 2013: How To Apply

The 14th NIIT Nigeria scholarship test is going to take place on the 13th of July, 2013. Registration for the 2013 NIIT test is still on at niitnigeria.com. So, if you desire to become a certified professional in Information Technology, this is an opportunity for you to enroll in professional IT programmes at a reduced fee.



NIIT (National Institute of Information Technology) is a leading Global Talent Development Corporation, building skilled manpower pool for global industry requirements. NIIT's Individual Learning Business offerings include industry-endorsed programs for students seeking careers in IT. NIIT established its presence in Nigeria in 1999 and since then affirmed its support to prepare the youth in the country for lucrative IT careers.

Since 1999 NIIT has been involved in creation of skilled ICT manpower and has launched several initiatives in Nigeria. NIIT Now has more than 19 operational centres in different regions of Nigeria - Abuja, Ajah, Asaba, Lokoja, Makurdi, Eket, Ibadan, Ikeja, Ilorin, Kaduna, Offa, Onitsha,Osogbo, Otta, Owerri, PHC, Surulere, Uyo.



NIIT Nigeria conducts the IT Scholarship exam every year to help identify meritorious students that can be trained to seek a career in the IT sector and be a part of the global skilled IT Talent pool. I took the test in 2009 during my NYSC service at Onitsha. I performed excellently in the scholarship test which qualified me to enroll in Java programming at a reduced fee.

You can apply for the 2013 NIIT scholarship test at NIIT website. Just fill the form on the site and make sure you select NIIT study centre that is close to you. You can check the address of NIIT centres in Nigeria here.



NOTE: 2013 NIIT test holds on 13th of July while registration ends on 12th, July 2013.

Read More

Blogger Contact Form Widget Installation Guide

Recently, Blogger announced the addition of  Contact Form widget to the list of official Blogger gadgets that can be added to Blogger blogs. Hence, if you don't know how to embed Google-docs generated and third-party html contact forms, you can add the widget to your blog to receive feedback easily from your blog readers.



As at the time of publishing this post, the Blogger contact form widget does not support uploading files or sending of anything other than plain text. No captcha either and contact message will come from no-reply@blogger.com although you will see the email of the sender in the contact message. For now, the widget has no configuration options.



The widget is simply a contact form generator for Blogger blogs. Once you install it to your blog, it generates: 

• Field for Name


• Field for Email


• Field for Message and


• Send Button.

How To Add Contact Form Widget To Blogger Blogs

==> Log in to your blogger dashboard at blogger.com

==> Go to "Layout" and click on "Add a gadget" link on your sidebar or footer section.

==> Click on "More Gadgets"

==> Click on "Contact Form" and Save.

==> "Contact Form" will be the title by default. You can change it. The form will automatically adjust to the size of your sidebar of footer column.

That's all

NOTE: To add the Blogger contact form to a Blogger Page, you will need to modify your blog html which I will explain in another tutorial. If you need a more sophisticated online contact forms for Blogger blog, read: "How I Create Contact Form For Blogger Using Google Drive Forms".



Cheers!

Read More

Create Horizontal Navigation Bar From Blogger Link Lists

Adding a navigation bar (menu bar) to your blog will make it easier for your blog readers to discover some important pages of your blog.  You can add it to the header section, the sidebar or down the footer section of your blog.


Right on this blog, I have explained how to make a navigation bar using Blogger Pages gadget and also shared html code for navigation bar. Today, I am sharing with you, how to convert Blogger Link Lists to make an horizontal navigation bar for Blogger blogs.

If you are finding it hard to hide some Blogger Pages from the navigation tabs you created using the Pages gadget, then creating your navigation bar from Link Lists is highly recommended.



Why?



Simply because you can easily add ANY link to a Blogger Link List gadget and you can easily arrange the links anyhow you like. If you access Ogbongeblog on a PC and scroll down the page, you will see the horizontal navigation bar I created using this method.

How To Get Started

==> Log in to your Blogger dashboard  at blogger.com

==> Go to "Layout" and click "Add a gadget" anywhere you want the horizontal menu bar to appear

==> Choose “Link List” gadget, add your links, arrange them using the arrows and save. (No title)

•  The "New Site URL" is where your menu item will link to while the "New Site Name" is what will appear in the navigation bar.

==> Now is the tricky part. You need to get the widget ID of the
LinkList. Go to "Layout" and click on the "edit" link next to the
LinkList.



==> Click inside the address bar of the new window that pops up and move the cursor to the end of the URL. You will see the widget ID e.g LinkList3

==> From the snapshot aboove, we know that this Link List in this example has been assigned an ID "LinkList3".

==> Now, you need to style the LinkList with css to make it appear horizontally. Go to "Template" > "customize". This will launch the Blogger Template designer.

==> Click on "Advanced" and click "Add css".

==> Copy and paste the code below:

#LinkList3 li{
display:inline;
}

==> Ensure you use the exact ID of your LinkList in the code above.

==> Click "Apply to Blog"


==> View your blog and you should see the LinkList appearing as an horizontal navigation bar on your Bloggger blog.

I hope it works for you.

NOTE: You can also do the same for your Blogger Labels. Get the ID of the Label gadget and use css to style it the same way as explained above. Will explain better when next I write on Blogger tips.

Read More

Scorecard in Adsense Dashboard Lets You Understand and Improve Your Site Performance

Google has announced in a post on Google’s Inside AdSense blog, the introduction of a new benchmarking feature called "scorecard" which can be found on the "Home" tab of Adsense accounts. According to Google, it will provide Adsense publishers with a summary of how well their content, ad settings and pages are performing, compared to those of other AdSense publishers.



The scorecard is organized into three categories: revenue optimization, site health and Google+, each of which can be scored on a scale of one to five blue dots. A lower score in a category means that you have potential areas for improvement.



Below is a what Adsense scorecard looks like:

The scorecard categories are made up of one or more items. For example, if you expand the “Site Health” category, you’ll see that it contains the “Page speed performance” item. Each item might be flagged by a green, a red or yellow exclamation mark. Green check-mark indicates excellent; yellow exclamation mark indicates "improvements suggested" while red exclamation marks indicates that the flagged item needs improvement.



Google encourages Adsense publishers to address any item that they see with a red or yellow exclamation mark, as fixing them may help to increase traffic and/or revenue. For help with fixing an item, publishers are expected to expand the item by clicking its right arrow which will open up the item description and a link to either fix the issue or learn more about it.



As Google notes, the company won’t take any action and punish a site that has a low score in any of these three areas and scores will be computed daily, though it might be several days before the effect of a change made by a publisher will reflect in the publisher's score.



Have you checked your scorecard? What's your performance like?

Read More

PlayStation 4 Price in Nigeria

At a press conference, earlier last week, Sony announced the upcoming release of Play Station 4 (ps4), which would allow used games, disc sharing and not require any sort of online check-in.



The new Sony Playstation four console which looks a bit larger than the current ps3 design looks sharp in matte black with an angular design and comes with a redesigned DualShock 4 controller. It looks a bit like two separate slabs of plastic fused together asymmetrically. The system's USB ports, as well as its power and eject switch, are hidden, thereby giving the console a sleek, modernist look.

The new Dual Shock 4 controller has a touch pad, a headphone jack, and a camera to track the position of the controller. It also has a "share button" so ps4 gamers can broadcast their gameplay to their friends in real-time. Ps4 games can be suspended and started by tapping the power button of the controller.

According to the hands on review of the ps4 at techradar, the play station 4 dualshock 4 controller has handles that are ergonomically curved with a grippy, contoured pattern that makes it easy to hold onto. The newly integrated touchpad at the center, adds an extra level of control and interaction with games and on-screen menus.



Sony is allowing players to stream any Play station 4 game to test it, share it with friends if they like it, and then download it from the Internet; and if gamers want to play games from the PlayStation 3 console they'll have to stream them—the discs won't work with the new machine; according to Julia Boorstin's blog post on CNBC. 

So, What is the Price of Sony Play Station 4?

The ps4 release date is still unknown as at the time of publishing this post. Sony didn't reveal pricing details at the conference but there are speculations that it will be around $400. So, that means hopefully, you might buy the ps4 in Nigeria between N70, 000 - N80,000 if not a bit more.



The console will ship with one controller, and extra controllers will likely cost extra money as well as the Playstation camera.



If you are interested in where to buy play station games and consoles in Nigeria, you can check Jumia Nigeria store.

Read More

Facebook Hashtags in Status Let You Group Updates

Facebook has officially announced the launch of clickable Facebook hashtags in a bid to bring conversations on Facebook more to the forefront, making it easier for users to see the larger view of what's happening or what people are talking about.



Similar to other services like Instagram, Twitter, Tumblr, or Pinterest, hashtags on Facebook allow you to add context to a post or indicate that it is part of a larger discussion. When you click on a hashtag in Facebook, you'll see a feed of what other people and Pages are saying about that event or topic.



The hashtags can also be used informally to express context around a given message, with no intent to actually categorize the message for later searching, sharing, or other reasons. This can help express humor, excitement, sadness or other contextual cues, for example, "Just found out my dad is my Chemistry teacher. #awkward" or "Thank God, it's Friday!! #excited"

According to Facebook, now you can:



• Search for a specific hashtag from your search bar. For example, #BBATheChase.

• Click on hashtags that originate on other services, such as Instagram.

• Compose posts directly from the hashtag feed and search results.



For instance, if you add #BBATheChase at the end of your status update, your friends that search for #BBATheChase, just to follow conversations about Big Brother Africa (The Chase) will see your update and probably join the conversation.



If you search for #BBATheChase using the search bar on Facebook, you'll get a list of updates related to the TV show, thereby making it easier for you to discover what others are saying about the Big Brother Reality TV show and participate in the BBATheChase public conversations. What you won't get are updates that say "I am watching BBATheChase" because "BBATheChase" isn't preceded by the hash tag (#).



Remember, any combination of characters led by a pound sign (#) is a hashtag, and any hashtag, if promoted by enough Facebook users, can "trend" and attract more individual users to join conversations using the hashtag.



Facebook promises to continue to roll out more features in the coming weeks and months, including trending hashtags and deeper insights, that help people discover more of the world's conversations.

Read More

Colorpicker.com: Get Color Codes Online

When you are working with colors while editing your website/blog HTML/CSS for colour matching combinations, you might need to enter the hex code of the color you want to use instead of just the color name.



Getting the hex code of colors is something that gets easier if you have a colour chart or picker you can use. There are online html color pickers as well as the ones you can use offline. I once shared an offline color picker download on this blog and today, am sharing with you a color picker you can access on the internet.



Colorpicker.com is a website where you can quickly get the color codes you would like to use in your website/blog or applications. The website simply generates hex codes for you by just clicking anywhere in the colour chart on the site.

To choose a color, you can click on the color chart and the hex code will be displayed at the top of the Color Picker site. There is also a bar you can move up and down for more color combinations. All in all, it's fairly easy to use and am sure you will find it helpful.



Do you know color picker addons or color wheel websites that can be useful in blog/web design? please, let me hear from you via comments.

Read More

How To Create "Advertise Here" Banners Online at bannerFans.com

Earlier today, I published a tutorial on how to place "Advertise Here" banners on blogs. In the tutorial, I only shared "advertise here" banner codes for "125x125" and "300x250" banners. So, in this tutorial, I want to explain to you how to create custom "advertise here" banner of any size online, for free at bannerfans.com.



At BannerFans website, you can generate banners which you can use for your "Advertise Here" banners without the need for Adobe Photoshop. You can also make an advertising banner which you can use to promote your blog, website or business on other sites or on advertising networks.



Let's assume you want to create a 160x600 "Advertise here" banner similar to the one below.

Follow the steps below:



==> Go to www.bannerfans.com



==> Click on "Layouts" tab. You will see "select your banner size".



==> Select "Preset", click on the drop down arrow and click on "160x600 Wide Skyscrapper"



==> Click on the "Text & Fonts" tab



==> Delete the text in "line 1" and enter "Advertise Here". You can change the Font face, Font size, font color if you want to.



==> Delete the text in "line 2". You can replace with your phone number or email (Optional)



==> Click "Update my banner"



Once your banner has been updated, you might notice that the "Advertise Here" is wider than the banner size.



==> Click on the "Text & Fonts" tab



==> Delete the "Advertise Here" in "line 1" and replace with "Advertise"



==> Delete whatever is in "line 2" and replace with "Here". You can set the font size to "26px"



==> You can add your phone number or email to "line 3" if you want to.



==> Click "Update my banner"



==> Drag the "Advertise" and "Here" to the center of your banner



==> Click "Update my banner"



==> You can make other adjustments to your banner till you are satisfied. After making changes, always click  "Update my Banner" to view your latest changes.



==> Once satisfied, click "Download Banner". Save it to your PC.



To use it on your Blogger blog,



==> Log in to your blog dashboard, click on LAYOUT. Click "Add a gadget" on the sidebar

==> Select the "Image" gadget.

==> Browse your computer for the image you saved to your PC and upload it

==> Enter the URL of the Advertise/contact page of your blog in the  "Link" box

==> Click "Save"



View your blog.



NOTE: Easier if you generate an "Advertise Here" banner size that will fit perfectly with the width of your sidebar especially if you don't know how to use css to center the banner. You can read: "How To Adjust Widths of Entire Blog and Sidebars" if you don't know how to adjust the width of your blog sidebar.











I hope to write on how to make an advertising banner and some advertising websites soon.

Just make sure you subscribe to this blog for you not to miss the posts. 

Read More

How Can I Place 'Advertise Here' Banner On My Blog?

Selling ad spaces on your blog is one of the blog monetization methods you can use in earning money online from your blog. By advertising websites, blogs, businesses etc on your site, you can easily make money online from banner advertising.



There are many advertisers online willing to place banner ads on websites and blogs using direct advertising without third party programs like Google Adwords. Hence, if you are willing to rent an ad space for such advertisers on your blog, you need to add "advertise here" banners to your blog. It can be as simple as having two 125×125 banners in the sidebar or just one 336x280 "Advertise here" banner.



Before placing "Advertise Here" banners on your blog, you should consider creating an "advertise" or "contact" page where you explain how to place ads on your website to advertisers i.e the terms, cost etc. You can check out the advertise page of my blog for ideas.



More so, you must ensure that the width of your blog sidebar is greater than the width of your banner. For example, if you want to place a 336x280 banner on the sidebar, the width of your sidebar must be greater than 336. If you want to place two 125x125 banners lying side by side, the width of your sidebar must be greater than 250 (125 + 125, for two banners).



You can read: "How To Adjust Widths of Entire Blog and Sidebars" if you don't know how to adjust the width of your blog sidebar. 

How To Add "Advertise Here" banner To Blogspot Blogs

Though there are many advertising banner sizes you can place on your blog but in this example, I am sharing with you how to place 125x125 and 300x250 "advertise here" banners on a blogspot blog. Just follow the steps below :

• Go to Blogger Dashboard >Layout


• Click on "Add a Gadget"


• Select HTML/Javascript gadget


• Copy and paste the advertise here banner code below in it and SAVE.

<a href="http://www.ogbongeblog.com/p/advertise.html" target="_blank"><img border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwl6rtP9xqS3Qlqv6xG_9AaTcqT2xAMpNRiRnHPDOxqhItzSyJmiyeSFJodbOK-zOquzwtWNAMLdNLdDGorcb-VzxrXwXSoOeA_TctH-V8zypwdMcFIN8P9BoCEZY_JL9lserYOOU96Bmw/s1600/advertise+here.png" width="300px" height="250px"/></a>



After adding above code you need to replace http://www.ogbongeblog.com/p/advertise.html with the url of your advertise or contact page.



The code will generate 300x250 "advertise here" banner below on your sidebar.

If you want to change the image of the advertisement banner above, replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwl6rtP9xqS3Qlqv6xG_9AaTcqT2xAMpNRiRnHPDOxqhItzSyJmiyeSFJodbOK-zOquzwtWNAMLdNLdDGorcb-VzxrXwXSoOeA_TctH-V8zypwdMcFIN8P9BoCEZY_JL9lserYOOU96Bmw/s1600/advertise+here.png

with the URL of your advertisement banner.



==> If you prefer a 125x125 "advertise here" banner, use the code below:



<a href="http://www.ogbongeblog.com/p/advertise.html" target="_blank"><img border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6GZdZb5r1aX6A64gHmVKE6mV3hPn7G-v1emwuuiejJ4N4j7X96nALMd_NW4Oxnb8HG9bgZAvlfNn0cguacHjiKL9O6J0IoertzpEmtqgd7oUfFft4FYNLTpDKyzQwKod27PbUt4cILc/s1600/ad_6_125x125_gif.gif" width="125px" height="125px"/></a>



The code will generate 125x125 "advertise here" banner below on your sidebar.

If you want to place two 125x125 banners lying side by side, just copy and paste the code below in the html/javascript gadget:



<a href="http://www.ogbongeblog.com/p/advertise.html" target="_blank"><img border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6GZdZb5r1aX6A64gHmVKE6mV3hPn7G-v1emwuuiejJ4N4j7X96nALMd_NW4Oxnb8HG9bgZAvlfNn0cguacHjiKL9O6J0IoertzpEmtqgd7oUfFft4FYNLTpDKyzQwKod27PbUt4cILc/s1600/ad_6_125x125_gif.gif" width="125px" height="125px"/></a>

<a href="http://www.ogbongeblog.com/p/advertise.html" target="_blank"><img border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6GZdZb5r1aX6A64gHmVKE6mV3hPn7G-v1emwuuiejJ4N4j7X96nALMd_NW4Oxnb8HG9bgZAvlfNn0cguacHjiKL9O6J0IoertzpEmtqgd7oUfFft4FYNLTpDKyzQwKod27PbUt4cILc/s1600/ad_6_125x125_gif.gif" width="125px" height="125px"/></a>



That's all.



View your blog, click on the generated banner to ensure the banner takes you to the advertise/contact page on your blog. 



I hope it works for you.



If you prefer to create custom banners of other sizes, read: "How to create "Advertise Here" banners online at bannerfans.com"



Before this week runs out, I will share with you how to place advertisement on blogspot blogs, how to create advertisement banners, ad banners of different sizes you can place on your blog etc. Just make sure you are subscribe to this blog for you not to miss the posts. 



You can check out a website that lets you buy and sell direct Ads on your blog.

Read More

AdSense 10 Challenge: Increase Your AdSense Income

In few days time, AdSense will be 10 years old. To celebrate this, Google is organizing a challenge that would help AdSense publishers increase their income. The challenge is open for all AdSense publishers but if you are one, you'll need to register for this.



The challenge is the form of a training class Google refers to as "masterclass". The training is going to  be for 10 weeks and it is free for all. The masterclass is designed to help you become an AdSense expert and grow your revenue. The AdSense 10 Challenge, starts on June 25th and ends on August 30th and you should participate in it if you want to increase your AdSense income.





Over the course of 10 weeks, AdSense will equip you with the tools and insights you need to make the most out of your online business with AdSense. They'll cover a range of topics and show you ways to increase your revenue, uncover new information in your reports, and set up experiments to determine the best layouts for your site. You’ll meet members of the AdSense community like optimization specialists and experienced AdSense publishers. In addition, your various questions about AdSense will be answered.



Here is the schedule of the AdSense challenge.



Week 1, 6/25 - 7/1 - Welcome to the AdSense 10 Challenge

Week 2, 7/2 - 7/8 - Understanding Your Performance Reports

Week 3, 7/9 - 7/15 - Optimization Opportunities

Week 4, 7/16 - 7/22 - Make Better Decisions with Google Analytics - part 1

Week 5, 7/23 - 7/29 - Make Better Decisions with Google Analytics - part 2

Week 6, 7/30 - 8/5 - User Experience: Understanding Your Users

Week 7, 8/6 - 8/12 - User Experience: Engaging Your Users

Week 8, 8/13 - 8/19 - User Experience: Testing What Works Best

Week 9, 8/20 - 8/26 - Mobile: The Time is Now

Week 10, 8/27 - 8/30 - Grow and Engage with Google+



Where do I sign up?



To sign up for the AdSense challenge, you will need to fill and submit the AdSense 10 Challenge Registration Form



Sign up today and get set for the training. The training will be done over the internet via Hangout on Air every Tuesday, Wednesday and Friday. So, after registering, you need to prepare yourself to attend the 10 week training. I have already signed up and I'm going to be participating in the challenge. Will you?





This update was brought to you by Adesoji, who writes for Make Money Online Nigeria The update is via Inside AdSense and Learn with Google

Read More

Download 2go on Google PlayStore for Android Phones

Recently, I published how to install 2go on Tecno Android phones by downloading 2go apk files. This is no longer necessary as the 2go team has announced the launch of an official 2go Messenger for Android which is now available for download at the Google Play Store.



As the largest mobile social network in Nigeria, and with over 10 million active users on feature phones, 2go has extended their app to smartphone users on Android. The team spent a long time refining the product to ensure that it matches, and hopefully surpasses the high quality, intuitive user experience of the feature phone old version of 2go.



The latest 2go version 1.0.9 now includes push notifications and a sleek user interface, which is intuitive and easy to use. Hence, 2go users using Android smartphones can now easily message each other for free, meet new people and share updates and photos with friends and family.

“Version 1 of 2go for Android is a good first step and we have received great feedback from users. But you can expect much more from us in the next few months as we refine the app and add functionality”, says Ashley Peter, who founded 2go with Alan Wolff.

Where to Download 2go Free for Android

==> Download 2go here from Google Play Store.



NOTE: Requires Android 2.2 and up



You can read how to download 2go for PC here and also read how to chat with Facebook friends on 2go here.

Read More

Codes To Activate Airtel Unlimited Facebook Bundles

Airtel Nigeria has introduced an innovative data plan called Facebook Bundle which offers FaceBook-specific value for money! A customer can now buy a value bundle for use in daily, weekly or monthly variants on FaceBook alone i.e Customers can now take up a data bundle JUST for their FaceBook needs!





The Airtel Facebook bundles have their respective validity periods and data volume. The bundles can be accessed by any device that is data enabled or data capable and all Prepaid & Postpaid customers with data capable handsets are eligible to take up any of the plans.

Below is the list of all the Airtel Facebook bundles; their activation codes and retail prices.

Airtel Daily FaceBook Bundle

==> Price = N50



To activate, dial *688*1# or text dfb to 688

Airtel Weekly FaceBook Bundle

==> Price = N200



To activate, dial *688*2# or text wfb to 688

Airtel Monthly FaceBook Bundle

==> Price = N500



To activate, dial *688*3# or text mfb to 688



Other codes



==> Dial *688*0# or text "status" to 688 to check the validity period and the remaining MB of your Airtel Facebook bundle.



==> Text "help" to 688 for help message.





NOTE:



==> All other internet activity outside Facebook will be charged from a customers' main account or from the data bundle account balance.

==> Subsequent to expiration or complete consumption of a FB bundle, customers will be charged at PAYU rates of 5kobo per kilobyte for further internet activity.

Read More

Download Hangout For PC, Android and Apple Devices

Recently, Google announced the launch of the Google Hangouts app, which is a cross-platform messaging system replacing Google Talk, Google+ Messenger, Google+ Hangout video chat, and pretty much everything else.





Hangouts chat messenger supports one-on-one and group chatting across desktop, Android and Apple devices and includes photos, emoji, and video calls. It allows you to turn any conversation into a video call with up to 10 friends; then add apps and effects to put a smile on your face.



You can have a group Hangout with up to 100 people for sending and receiving messages but video calls can have a maximum of 10 participants and there's a 150 minute check-in to make sure you're still there. Hangouts stay in sync across devices so you can start or continue them across devices.

You can see when friends are on Hangouts, if they’re currently typing, and if they’ve seen your messages. Using Google+ Circles, you can select specific friends or a whole group to start a chat with.  If you’re offline, Hangouts will store your messages until you return.



Hangouts app works on computers, Android and Apple devices, so you can connect with everyone, and no one gets left out.



If you want to download Hangouts plugin to your computer, visit the Hangouts website using a chrome browser and click on the "Available for Computer" link. The plugin will be added to your PC and you can start chatting with it asap.



You can also download Hangouts app on the AppStore and also get it for Android from Google Play.



If you want to hangout with me, add me; +Jide Ogunsanya to your Google+ circle.



Have you tried the new Hangouts app yet?

Read More

Opon Imo : Osun State Tablet of Knowledge

The Osun State Government, in its effort to enhance learning process in secondary schools across the state of Osun in Nigeria, has launched a tablet of Knowledge "Opon Imo", designed in the form of a mini iPad, to be distributed to the Senior Secondary School students free-of-charge.



Opon Imo is a portable touchscreen Android powered e-learning device, the first of its kind in Nigeria provided by the state government to equip students with knowledge and make it easier for them to pass school leaving certificates examination. It is a standalone, educational, multimedia e-learning content platform that comes with pre-loaded applications for WAEC and JAMB approved text books.

The Opon Imo tablet provides 3 major content categories; Text Books, Tutorials and Practice Questions which include audio voiceovers and video tutorials. It delivers compelling self- paced standalone courses, conducted in a highly interactive computer- based learning environment and synchronized to a library of relevant e-books and a computer- based testing environment.

The Android 4.0 PC Tablet has a Dictionary, Bible, Koran and Health book. It also has development games such as chess, Sudoku and Tetris. It has 512MB of RAM and an internal storage capacity of 32GB according to the specs published on the Opon Imo website. The current version of Opon Imo has Internet deactivated to prevent the distraction this may cause to students at this level of education.

According to the Governor of the State of Osun, Ogbeni Rauf ARegbesola,  Opon Imo will ease the students of carrying loaded backpacks of books and will help ease the challenge of external examination.



This is a very impressive development. Isn't it?

Read More

Horizontal menu with sub-tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.

The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:

• Tab 1 Title Here
• Tab 2 Title Here
• Tab 3 Title Here
  • Sub Tab 3.1
  • Sub Tab 3.2
  • Sub Tab 3.3
  • Sub Tab 3.4
  • Sub Tab 3.5
  • Sub Tab 3.6
• Tab 4 Title Here
  • Sub Tab 4.1
  • Sub Tab 4.2
  • Sub Tab 4.3
  • Sub Tab 4.4
  • Sub Tab 4.5
  • Sub Tab 4.6
• Tab 5 Title Here
  • Sub Tab 5.1
  • Sub Tab 5.2
  • Sub Tab 5.3
  • Sub Tab 5.4
  • Sub Tab 5.5
  • Sub Tab 5.6
  • Sub Tab 5.7
  • Sub Tab 5.8
• Tab 6 Title Here

Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section.

• Click on the "Add a Gadget" link just under your header image
• From the Gadget's List, select "HTML/JavaScript" option.

STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the "Title" section of this widget blank.

<div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a # sign where it says http://YOUR URL HERE.com

You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:

<li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</li>

STEP 3: Now let's go a step further and add the CSS style in our Template

• Go to Template > Edit HTML

• Click on the sideways arrow next to <b:skin>...</b:skin> 

• Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]></b:skin> tag and just above ]]></b:skin> add this code:

/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGOFbabp9V8_KkorWRqHI9Dyn0iCJOBoFIDOyl1YQzx3fFsjyLi39LLk4Ey6aruxx1Ut2rV0URAourlSIz3dYkoVZv0TsD9eeI6_kF92cShvkhAYBrHpowhd9_BCND73KbglguM-khvMo/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

• Now find (CTRL + F) this line:

/* Tabs

• It will also have some little lines beneath:

/* Tabs
----------------------------------------------- */

• And just below these little lines, delete the code below until you reach at:

/* Columns
----------------------------------------------- */

• Instead of the code that you have removed, add this one:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

See this screenshot for more info:

STEP 4: The final step is to Save the Template and you are done!

Visit your blog to see a beautiful navigation menu just below header.
If you have any questions or need help, leave a comment below.

Read More

Fade In/Out Page Loading Effect On Blogger Posts

A very common effect in jQuery is the fade effect that hides or shows an element by fading it, and we can use it in many ways as for example in the blog's navigation. The following script does just that, by loading the page with a fading effect when we browse on internal links that are in the blog, such as post titles, labels links, archive, navigation links, etc..

You can see an example in this demo blog, click on the title of any post and see the fading effect when the page is loading.

How To Implement the Fade In Loading Effect

1) To put this fading effect on your blog, go to your Template > Edit HTML :

2) Click anywhere inside the code area and search for the </head> tag using CTRL + F keys:

3) Then, just above </head> add the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #F2F2F2; /* Color fading */
}
</style>

4) Save the changes and that's it. In green you can see where to change the color that fades on a loading page.

The original script hides the body of the page while loading, I prefer to change that property with a negative z-index to avoid problems with the search engine robots that may effect the positioning.

Problems?

Consider that such effects could increase the blog loading time, so I recommend using it only when your blog loads fast and does not have too many scripts.

If you already use another version of jQuery remove the other, leaving only this which will be readed first.

If you are using Mootools or Scriptaculous, then you have to make some modifications to the code in order to be compatible.
If you have another script with a fade effect, then it could interfere with this and you might not see anything on the page except the color fading, in such cases it is better without this script.

You can also use this effect only on some links, for example, if you want to appear only when you click on the post titles in the navigation links (older posts and newer posts), and on the top tabs, then replace this line:

$("a").click(function(event){

With this:

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){

In some cases, the page can load for a second and then load with the fade effect, this may be "normal" because the browser is slow to read the script on page load.

Apart from these drawbacks, I think it's a very elegant way to load blog pages while browsing them, don't you think?

Read More

Using the :before and :after Pseudo Elements on Sidebar Titles

This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an explanatory title and the right, a related link.

The idea of generating Adobe-like Arrow Headers was actually discussed by css-tricks and adapted to Blogger.

How to Add Adobe-like Headers to Blogger

Step 1. Log in to your Blogger dashboard > go to Template > Edit HTML, then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag:

</head>

Step 2. Just above it, copy and paste this code:

 <style>
.module h2 {
  background-color: #D5D5D5;
  border-radius: 20px 0 0 20px;
  color: #FFFFFF;
  font-family: Verdana;
  font-size: 14px;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;
}

.module h2 a {
    border-left: 5px solid #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
  padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
    content: &quot;&quot;;
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

.module.blue h2 a {background-color: #A2D5EC;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}

.module.green h2 a {background-color: #bada55;}
.module.green h2 a:hover {background: #C7E176;}
.module.green h2 a:after {border-right: 6px solid #bada55;}
.module.green h2 a:hover:after {border-right-color: #C7E176;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

Step 3. Save the Template.

Screenshot:

Step 4. Now go to Layout and Add a new HTML/JavaScript Gadget with one of the codes below for each of the widget title:

Background in blue:

<div class="module blue">
<h2>Title in <a href="Link URL">Blue</a></h2>
</div>

Background in yellow:

<div class="module yellow">
<h2>Title in <a href="Link URL">Yellow</a></h2>
</div>

Background in green:

<div class="module green">
<h2>Title in <a href="Link URL">Green</a></h2>
</div>

Background in red:

<div class="module red">
<h2>Title in <a href="Link URL">Red</a></h2>
</div>

Note: Change "Title in" text with your widget's title and Blue, Yellow, Green and Red with the text on the right, then add a Link URL to it.
Step 5. After you saved the HTML/Javascript gadgets containing the codes above, drag and drop them just above the widgets you want to show... and Save the Arrangement.

DEMO

You can see how the sidebar titles has been replaced with some cool header bars on this demo blog.

Read More