Blogging Prince - Blogger Widgets, Templates, Tips, SEO Blogging Prince - Blogger Widgets, Templates, Tips, SEO

Welcome

Glad To Unveil The NEW lOOK!

bringing more quality posts, widgets and themes to the blogging community.

Be the First To Join My Newsletter

Get free access to tips, themes and tricks on the go!

Subscribe

How To Properly Add Google Font To Blogger Without Affecting PageSpeed

Adding google fonts to a blogger blog the wrong and unoptimized way can drastically reduce your blog page loading speed which in turn will...
Adding google fonts to a blogger blog the wrong and unoptimized way can drastically reduce your blog page loading speed which in turn will cause your SEO ranking to drop.
How To Properly Add Google Font To Blogger Without Affecting PageSpeed
Today, I am going to show you the proper way to add any google font to your blogger BlogSpot blog without having an impact on the loading of your blog. The fonts are going to be loading just like every other CSS code.


Effect Of Slow Loading Fonts On Your Blog.

All fonts loaded externally are generally slow when being loaded especially when it shows up in the above fold (first visible section). Fonts act as external rendering blocking CSS and if not properly optimized, Google fonts will prevent your blog from loading properly.

Steps Required

1. Visit Google Font And Select A Font
2. Get the optimized code
3. Add it to blogger the right way
4. Enjoy a fast loading blog.

Selecting A Font

Visit www.fonts.google.com and select a font based on your choice but noting key factors such as readability and basic usage.
how to select google font

Step 1
Choose a font by clicking the "plus icon" attached to each font. You can select more than two at ones.

Step 2
Upon clicking, a dark colored box should show at the right bottom corner ( Family Selected), click on it to get the font details.

Get Optimized Font Code

Now you have options to Embed & Customize. Below this, you will find "STANDARD" and "@IMPORT".
get font URL
Step 1
Copy the link under the STANDARD section. The link is highlighted in the image above.

Example
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Step 2
Paste and load it in your address bar. It is also shown in the image above. This will reveal the actual CSS code behind the google font your have select.
copy google font css
Using CTRL + A highlight and copy the entire code.


Add Google Fonts To Blogger The Right Way

All we needed was the actual CSS of the font. Now we have it. To add it to your blogger blog.
add google font to blogspot

Go to Themes >> Edit HTML >> Using CTRL + F search for ]]></b:skin>

Paste the copied code above ]]></b:skin> as shown in the image.

What Next?
If you have previously added any google font to your blog, without using this procedure, you have to remove the codes and add it again using the above procedures.

How To Declare Google Fonts Using CSS.

After successfully adding the font script to your blog, it only requires a little knowledge of CSS when declaring the font. Assuming, I wanted to set the font on all blog items (e.g post body, headers, sidebar text etc).

All you need to do is add the below CSS above ]]></b:skin>

body {font-family: Roboto} - Depending on the name of the font you imported.
using google font in blogger

Essentials Features Of Google fonts.

There are certain features of a font that lets you customize it. The important ones are listed below
  1. Font Size (declared as font-size:16px;} -  Increase or reduce size
  2. Line Height (declared as line-height:1.8;) - Increase or reduce spaced between fonts horizontally.
  3. Font Color (declared as color:black;} - Changes the color of the font.
  4. Font Weight ( declared as font-weight:bold;} - Darken or lighten the text.

How To Verify If It Worked.

The best way to know if any font is acting as a rendering blocking CSS is by using Google PageSpeed Insights.

Visit https://developers.google.com/speed/pagespeed/insights/ add your blog URL and you should see what is affecting your blog loading speed. Fast blogs have higher SEO advantages over slow loading blog, it is recommended you speed up your blog.

More Topics On Increase Blogger Blog Loading Speed.

How To Upload Songs (MP3 Files) On A Blogger Blog With Download Button

Uploading downloadable mp3 or music files is not directly possible in the blogger platform, but using google sites, you can upload songs t...
Uploading downloadable mp3 or music files is not directly possible in the blogger platform, but using google sites, you can upload songs to a blogger blog with a download button for free without having to pay for extra hosting.
How To Upload Songs (MP3 Files) On A Blogger Blog With Download Button
With Google Sites, a BlogSpot music blogger can upload media files such mp3, songs etc. online for free and place them on a blog for downloading using plain links or download buttons. You can also accomplish this using dropbox.

Steps Required

These simple steps will guide you to uploading your songs to blogger and also offer them for download using download buttons.
  1. Create A Free Google Site Account
  2. Create A Music Forder
  3. Upload Files And Copy Link
  4. Add Download Button.


Create Google Site Account

Google site is a free hosting service created and managed by Google. You can upload mp3 files, video files, PDF, images and any other type of file you desire to save online.
upload mp3 files to blogger
Visit www.sites.google.com using your Gmail account.

Step 1
On the homepage, click  "CREATE" >> "In Classic Sites".

Step 2
Select "Bank template" >> Choose a name (e.g bloggingprinceMP3) >> Add site location (URL) >> Add Site Description. - No need to select a theme. >> Verify that you are human >> finally "Create".

Create Music Forder

A folder is a folder everywhere. It helps to organize your files in one place. If you are a blogger that want to upload videos, songs, and PDFs online then you should create different folders for each file type.
create music folder for blogger
Step 1
On the blank page, Locate "Create Page" at the top. It has an icon that looks like a folder with a plus at the middle.

Step 2
Fill in the name and leave every other option as default. >> Hit Create.

That is all for creating a google site with an option to upload Songs. Next is to start uploading your music files.


Uploading Music Files

On the new page, you will see an option to "ADD FILES" hit it and upload your music file from your computer. 
upload song to blogspot
After uploading, locate the download icon next to the delete icon. Right click on it and "copy link address". To test it, paste the link in a browser and it will start downloading the music file immediately.

Now paste the link in a notepad.

What will I do with the link? - continue reading!.


Add Music File With Download Button

You can easily add the download link directly to your blogger post editor using plain links. But download buttons look better.

Adding Download Button CSS

Go to Themes >> Edit HTML >> Using CTRL + F search for </head> and paste the below CSS code just above it. Save when done.

.BPdownloadbutton{display:inline-block;border-radius:4px;background-color:#000;border:none;color:#FFFFFF;text-align:center;font-size:28px;padding:20px;width:200px;transition:all 0.5s;cursor:pointer;margin:5px;vertical-align:middle;text-decoration:none}
a.BPdownloadbutton{cursor:pointer;display:inline-block;position:relative;transition:0.5s}
a.BPdownloadbutton:hover{padding:25px;box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)}
.Bpdownload{width:210px!important;height:84px!important;margin:0 auto!important;margin-top:10px;margin-bottom:10px}

Method 1 Of Adding File To Blogger

Go to post editor, switch to HTML, paste the below code inside the box.

<div class="Bpdownload">
<a class="BPdownloadbutton" href="MUSIC LINK" target="_blank">Download mp3</a>
</div>

Replace MUSIC LINK with the link you copied earlier. Publish the post and you should see it working.


Method 2 Of Adding MP3 File To Blogger

In your post editor, at the sidebar locate "Options" >> "Compose mode" >> Tick "Interpret typed HTML".
blogger download button
Paste the below line of codes anywhere in the post body, and don't forget to replace MUSIC LINK with the link you copied earlier.

<div class="Bpdownload">
<a class="BPdownloadbutton" href="MUSIC LINK" target="_blank">Download mp3</a>
</div>

What Next?
Whenever you want to upload song files to blogger, go to www.sites.google.com and you would see your google site name shown>> after clicking, on the next page, select your folder >> You would see all your uploaded media files.

Locate "Add File" click it and upload your songs.

This is one of the easy ways to upload media files, music files, songs files or MP3 files to blogger with a download button. If you find it hard to understand, leave a feedback below.


Sharing is caring!.

PlainShare - Social Media Share Buttons For Blogger Blog

It's been a while since I last posted on bloggingprince.com , and I know many of my followers missed my juicy themes and widgets . Plain...
It's been a while since I last posted on bloggingprince.com, and I know many of my followers missed my juicy themes and widgets. PlainShare - Crafted and created with simplicity plus functionality in mind, social sharing is a great way to increase daily pageviews and having share buttons on each post is essential for a blog.
PlainShare - Social Media Share Buttons For Blogger Blog

Blogger BlogSpot has default built-in share buttons but these share buttons are too ugly except for the ones with the new themes. Therefore nearly everyone wants to change to a stylish share button that performs better than the default buttons.



See Demo
Preview Buttons


These rounded stylish on hover share button widget designed by me is meant to fill up the gap which blogger refused to fill. Other cool share buttons will be posted soon including share buttons with animations and share buttons with a counter.


Features Of This Share Button

1. Fast Loading

For a set of share button built plainly on HTML, CSS and FontAwesome then you don't expect it to ever slow down your blog. Fast loading blogs have an SEO percentage over slow blogs, this is the reason while these rounded share buttons bring you super fast user experience.


2. Works With AMP.

I have tested these share buttons on my new AMP blogger theme and it worked great with AMP. it passed the verification test for all pages it was placed. This tells you that this share button can work anywhere. It is simple but extremely functional.


3. Well Timed Animations

You might have noticed the new web moving towards animations, material designing, and awesome theme graphics. Let your site not be left out! PlainShare social media sharing widget brings in awesome on hover animations. Loads fast and it gets a delayed animation.

If you have knowledge of CSS3 then you will understand what I mean by delayed on hover animations.
blogger share button

4. Place Anywhere.

PlainShare can be used anywhere in a blogger blog. You can place it below post title, above post title, below every post. on the homepage and virtually anywhere you feel you need share buttons. Simply add the codes and see it work.

5. Easy To Install.

It is just a work of CSS and HTML, therefore, placing it in your blog will be very easy. Only a few lines of codes the share buttons will start working instantly. Works on mobile, laptops and anything that has a screen and can surf the web.


FallBacks Of PlainShare

1. No Customization Option

The colors in PlainShare are static or fixed, you can not change it unless you have knowledge of CSS. Though the default colors look great, there might be a need to make a customization to the colors which you can not do, but I will try to explain below how you can get it done.

How To Setup PlainShare Share Buttons On Blogger

First thing first is to install the CSS.

Adding PlainShare CSS

Go to themes >> Edit HTML >> Using CTRL + F search for "]]><b:skin>" and paste the below code just above "]]><b:skin>".


/* PlainShare By BloggingPrince.com*/
.share-buttons{display:inline}
.fb-share,.lk-share,.tw-share,.gp-share,.print-share,.wp-share,.pin-share{vertical-align:middle;transition-duration:1s;width:40px;height:40px;border:1px solid #ddd;color:rgba(0,0,0,.44);border-radius:50%;cursor:pointer;text-align:center;display:inline;padding:5px;margin-right:5px;font-size:18px}
.fb-share{padding-left:11px;padding-right:7px;padding-top:6px}
.tw-share{padding-right:7px;padding-left:8px}
.gp-share{padding-right:2px;padding-left:9px}
.print-share{padding-right:8px;padding-left:8px}
.wp-share,.pin-share{padding-left:8px;padding-right:8px}
.fb-share:hover,.tw-share:hover,.gp-share:hover,.wp-share:hover,.print-share:hover,.pin-share:hover{color:#000;border:1px solid #000}
.print-share a{transition-duration:1s;color:rgba(0,0,0,.44)}
.fb-share a:hover,.tw-share a:hover,.gp-share a:hover,.wp-share a:hover,.pin-share a:hover,.print-share a:hover{color:#000}
.fb-share a,.tw-share a,.gp-share a,.lk-share a .print-share a,.wp-share a,.pin-share a{color:rgba(0,0,0,.44);transition-duration:1s}
.lk-share .fa{color:rgba(0,0,0,.44);padding-right:4px;padding-left:4px}


Add PlainShare Below Every Post

In the same Editor, search for <div class="post-footer"> . Paste the below code just below <div class="post-footer">.


<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='fb-share'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook!'><span><i class='fa fa-facebook'/></span>
  </a></div>
<div class='tw-share'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @ObhiabaBlog - &quot;' rel='nofollow' target='_blank' title='Share on Twitter!'> <span><i class='fa fa-twitter'/></span></a></div>
<div class='gp-share'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Google Plus!'> <span><i class='fa fa-google-plus'/></span>
  </a> </div>
<div class='pin-share'><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' rel='nofollow' target='_blank' title='Pin it!'><span><i class='fa fa-pinterest'/></span></a></div>
  </b:if>

Add PlainShare Below Post Title

In the same Editor, search for <div class="post-header">. Paste the below code just below <div class="post-header">.


<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='fb-share'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook!'><span><i class='fa fa-facebook'/></span>
  </a></div>
<div class='tw-share'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @ObhiabaBlog - &quot;' rel='nofollow' target='_blank' title='Share on Twitter!'> <span><i class='fa fa-twitter'/></span></a></div>
<div class='gp-share'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Google Plus!'> <span><i class='fa fa-google-plus'/></span>
  </a> </div>
<div class='pin-share'><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' rel='nofollow' target='_blank' title='Pin it!'><span><i class='fa fa-pinterest'/></span></a></div>
  </b:if>


Customization

Replace via @ObhiabaBlog with your twitter username.

What Next?

Save the code in the Editor and visit your blog to see the share buttons displaying. Works on both mobile and desktop themes. If you wish to show it on Mobile themes, read my guide on showing any widget in mobile theme but first, make sure you switch to Custom or responsive theme.

Tips For Branding Your Blog - Make It Professional

Building a professional blog which people can easily trust and rely on requires having some certain criteria. Blogging is a brand and if ...
Tips For Branding Your Blog
Building a professional blog which people can easily trust and rely on requires having some certain criteria. Blogging is a brand and if you want to be respected as a blogger, then you need to take it to that state.

There are some things needed to make your blog look like one of the professional and money making blogs. The truth here is, I can't trust you if I think you are beggar trying to make money from blogging.

It is simple. For those into affiliate marketing, it is easier to convince readers when you have used that product and you had a great experience with it. If not you would find it very difficult.

Same apply to branding a blog. You first need to look and act like a professional before your readers will see and accept you as one even though you are not.

1. Get a custom domain name

Buying yourself a domain name is a good step to building a professional blog. Nobody has full trust on bloggers who use a free platform such as .blogspot.com or .wordpress.com. A custom domain name which describes what you do is what you need.

There are some many custom domain names you can purchase at cheap and promo rate. Get one for yourself and start building a brand on the internet.

2. Personalised Email

Though not everyone recognizes this, it still remains cool and of great importance especially when you want to run business deals with big companies. You can not just ask someone to email you at yourname@gmail.com, I think yourname@blogname.com sounds better.
personalized email address
By doing this, you no longer need to preach to customers that you know what you are doing and also you are dedicated to it. There several ways you can get a personalized email address both free and premium versions.

3. Not Spamming Social Platforms.

Stop being a kid and grow up. Sharing your posts to millions of platforms will bring traffic but that is not the real deal here. Am not saying you should not share rather am saying be matured about it and stop spamming others.

If I click on your link from a platform like Facebook which you spammed, then I would mostly treat you as a spammer that you are. Share your posts to related groups only.

If you blog about blogging, SEO etc then blogging groups would be a great place to start sharing your articles. Sharing such articles on entertainment sites is referred to as spamming and you should not get involved in such cases.

4. Matured Theme and Post Format

Remove all those fancy and attracting buttons and icons from your blog. Work more on your blog posts and the simplicity of your theme. Many persons just fill up the sidebar with ads.

Every minute you see Ads popping up etc. The truth which you still have not realized is, too many ads will bring you less money. but How?

  1. It will drive your blog readers
  2. Reduce page speed (increased bounce rate)
  3. make your conversion rate low
  4. kill your blog search ranking etc

Be matured about your work, place fewer ads. It is all about placing ads in strategic places, not on every part of it. Use free tools like Ezoic to test the performance of your ads and also increase your blog revenue with few ads placement.
best blogger template


5. Don't Recommend What you have not used.

This is tagged at affiliate marketers. If I have eaten fried rice at The Spot (Jerusalem), it is easier and better to recommend it than to recommend MrBiggs which I have not been to.

A product which you should recommend is a product you have used not a product you just read about. Be sincere about your reviews and don't super hype products just to get a commission.

Rounding Up.

If you are only thinking about the money, then you won't make the money rather think about the health of your blog. Give it a good name and don't miss out of being a professional blogger.

If you wish to get a domain name, you can get one at an affordable rate at garanntor. Am not advertising them, I am only recommending what I use and I think their service is worth a try.

5 Nightmares Of Switching To Custom Domain Name In BlogSpot

Using custom domain is every young blogger's intention but often times, we decide to use the free domain provided by BlogSpot for some ...
Using custom domain is every young blogger's intention but often times, we decide to use the free domain provided by BlogSpot for some time before we finally get a custom domain name and this is where we get it all wrong!.
5 Nightmares Of Switching To Custom Domain Name In BlogSpot
If you are still waiting for a few more minutes, seconds or hours before you switch to using custom domain on BlogSpot then you are probably making the worst mistake of your life.

5 NightMares Of Switching To Custom Domain On Blogger.

If you are just going to start with a custom domain name, do so and if you just wish to use a  free domain name for life, do so and don't ever go back on that decision.

1. Losing Ads Partners Approvals

If you got so lucky with your .blogspot.com URL and you were approved by Ads media such as AdSense, Media.Net, InfoLinks e.t.c Switching to a custom domain will require you losing that account and have to apply again. And you know how difficult that is.

When I moved from ObhiabaBlog.com.ng to bloggingprince.com, I had to forfeit a lot of things and one of this thing was my media.net approval among other Ads Platform.

drop seo ranking


2. Goodbye to all your ranking.

Someone somewhere who wants you to buy a domain name will assure you of not losing rankings but the plain and simple truth is, you will lose all your rankings with your blogspot.com URL.

I said above, if you are just going to start with a custom domain do so or else don't ever think of switching. If you have to spend any money in purchasing links, then those backlinks become a secondary strength for your new domain name.

You Alexa ranking will be zero and you would need Google and other search engines to start crawling your blog all over again. Back to square one.

reduced search traffic

3. Super Reduced Blog Traffic

If your blog depended on a search engine for its daily traffic then to some extent you are going to get fewer clicks and pageviews a day. Since you would have to resubmit all your URLs for crawling and indexing.

Google webmaster takes nothing less than 1 month to index all your posts. During this period your blog is going to experience the dry season. A situation where only social media users visit your blog.

This experience can be really annoying and you have nobody to complain to.


4. Increased Ranking Competition

I know your major reason for wanting to switch to a custom domain, is so as to get better ranking and search traffic. You experience might give that a check mark later as you keep on blogging.

Switching to a custom domain, practically opens to your blog posts to more competitions. Blogs you would easily outrank using domain age and power would knock down your blog on search results.

For the first few months of using your new domain name, it is going to be like this. Even most of the times, your new post will hardly get indexed on time sometimes not at all.

blogger free https


5. No More Free HTTPS (SSL Certificate) For You.

Using blogspot.com domain name extension gives you a free HTTPS certificate which is worth real money and also of great important. An SSL certificate can improve your site SEO ranking and customer trust.

Getting a custom domain name for your blog would require you forfeiting that certificate and its importance. But hopefully, Blogger will provide SSL for it's custom domain users, for now, there is no such thing for custom domains.


Rounding Up

If you are still thinking of moving your blogspot.com to a custom domain name, you better think fast, because every second you waste thinking is wasting your valuable efforts.

Never you buy backlinks when you are still on a free platform. All those backlinks will only go to a waste. If you want to start a strong blog online, you should do that from the very beginning.

Quick Help!

Having issues? Need quick fix? simply email me or call me

Learn more

Write For Us

Submit a guest post and see it get published real quick

Learn more

Advertise Here

Place relevant banners, links, and sponsored posts at affordable rate.

Learn more