Saturday, November 21, 2015

Use Human Readable "Date Format" in Blog Posts

Use Human Readable "Date Format" in Blog Posts

Link to My Blogger Tricks

Use Human Readable "Date Format" in Blog Posts

Posted: 21 Nov 2015 07:16 AM PST

Change Date Format of Posts in BloggerThis is probably the most request posted on blogger Timestamp and Date header format. This simplest trick of converting date formats in Blogger blogs is thus first time shared online using Data Layout Tags. The date inside BlogSpot posts are displayed in the format "MM/DD/YYYY" which is a non-readable formatting for mentioning the publishing time and date of an article. If you see the date format in MBT posts (i.e. Nov 21, 2015) you will observe that the formatting is done in a more human readable and visual way where Month and Day are comma separated from Year ( i.e. Month Day, Year ). The month is written in short abbreviated way followed by day and then year. A reader gets a clear idea of when the post was published by looking at the date at a glance instead of getting confused with the Western and Asian Date formatting of "MM/DD/YYYY" and "DD/MM/YYYY" respectively. In this tutorial we will use the simple technique of replacing the Timestamp layout tag inside posts with Date Header tag. In our JSON Tutorial series we will discuss a more advanced JavaScript approach to better control the styling of each element in the date formatting.

Before:

non-readable Date format

After:

Readable Date Format

Change Blogger Date Formatting inside Blog Posts

Follow these easy steps:

1 Go to Blogger > Template > Backup your template

2 Click Edit HTML

3 Search for this layout tag

<data:post.timestamp/>

4 The above code will appear twice. Once for mobile view and once for desktop view. Replace it twice with this layout tag:

<i class='fa fa-clock-o'/><data:post.dateHeader/>

Note: The yellow highlighted code will show a clock Icon next to the date, if you don't want this FontAwesome icon then simply remove the yellow code.

5 Save your template and you are almost done!

6 Next go to Settings > Language and Formatting > Formatting

From the drop down menu next to the Date Header Format select the first option i.e. Nov 21, 2015:

Post Date Formatting in blogger

You can choose any formatting of your choice, the last two options are also good. In our case we chose the format: Nov 21, 2015

Date header formats

7 Click the "Save Settings" button and you are all done!

Need Help?

What we did was a simple solution to the existing problems faced with Post Date formatting. In our JSON tutorial we will adopt a JavaScript technique to give more advance control over the structure of Date. With that tutorial you will be able to style Month, Day and Year elements separately using CSS classes. The current solution is the easiest way for non-techy users. I hope this helps most in better displaying the Publish Timestamp on their blog posts. Do ask me any question you may have.

Peace and blessings buddies :)

Friday, November 20, 2015

'Ifza' - Our New Baby Blogger!

'Ifza' - Our New Baby Blogger!

Link to My Blogger Tricks

'Ifza' - Our New Baby Blogger!

Posted: 20 Nov 2015 06:16 AM PST

Our New Baby Blogger!

How wonderful does it feels to hold your baby girl for the first time in your arms while she smiles at you! It was the best experience of my life ever! Your brother is finally a father to a little princess from heavens Alhamdulillah and gifted with the most beautiful responsibility of raising a kid. We named her "Ifza" meaning "Protective Angel" so her official name thus becomes "Ifza Mustafa". Ifza is an Arabic name having a synonym 'Hifza', so people often confuse the names because of the same syllable sounds. Since I take the blogosphere community as part of my life, let me introduce this soon-to-be baby blogger with all of you!

Ifza is 15 days old now!

Ifza was born this month on 5th November, 2015 at "Aga Khan Hospital", Karachi. She weighed about 3.6 KG at the time of her birth which equals approximately 8 Pounds.   MashAllah she was the most healthiest kid born that day in Aga khan, after all she is a Pathan kid. :0

Just today I had her hair's cut. Her head is much cleaner now and fully bald. :D Will share the new photos very soon.

Ifza has given us a tough time throughout her mother's 9 months and 10 days of pregnancy and if she is reading this post after some 9-10 years inshAllah then she must know that she barely lets me sleep at night! She sleeps during day time but it takes me hours to calm her down at night. Surely nurturing and feeding a kid requires a lot of hard work not just only for the mother but also for the father. Since a week both Ifza and her mother are at my mother-in-laws house and I am so much at peace now! I am so thankful to God that I can finally take out some time to write this post! =p

Will she be a blogger?

Yes of course why not! But first she will be a Lady Doctor inshAllah!

God is surely the best planner and with our trust in Him, I pray to be a great affectionate father and to provide her with the best love and compassion she needs. After having seen how much intense hard work is done by a Lady Gynecologist and nurses inside a hospital, my respect for them have increased three fold. No doubt cure (Shifa) is in God's hand but medical science is the major resource (Waseela) to it provided by God Himself. 

I am a Computer Engineer and blogger by profession but I always wished to study medicine and serve the humanity. This dream will be fulfilled by my little baby girl one day inshAllah.

Ifza Mustafa
This Picture was taken the next day she was born i.e 11/6/2015.

My community unfortunately lacks lady doctors and women here rarely gets a chance to complete their studies after primary education. The major reason behind this is illiteracy, early marriage and not understanding the Islamic rights of a woman in its true essence.

Woman has a great place in Islam and she is the mother, daughter, wife and sister who makes up a family. My sisters and I am educated today thanks to my parents who are educated themselves. My eldest sister is an assistant Dentist in California, USA and she is still supported by my parents with her academic goals in life. 

Ifza will inshAllah lead the row and will become amongst the very few Lady M.B.B.S doctors in my tribe. By the time she gets 10 years of age, I will teach her how to blog and will mentor her on how to share her knowledge with the world outside. Blogs on medicine educate millions of people online to better take care of their health. This is one reason why I respect blogging so much. It's the only diary where you share nothing but knowledge!

Need your prayers!

Do share your prayers so that by the time Ifza gets at least 10 years old, she could read all your comments and know how much people loved her here! :)

Do not forget to share the cutest photo of your newly born baby in the comments box below by using the shortcode below:

[img src="Insert your Baby Photo Link here" width="50%" /]

Tuesday, November 17, 2015

Display YouTube Video Thumbnails in Blogger

Display YouTube Video Thumbnails in Blogger

Link to My Blogger Tricks

Display YouTube Video Thumbnails in Blogger

Posted: 17 Nov 2015 06:11 AM PST

Extract YouTube Video ThumbnailsWe have reached the stage of our Blogger JSON tutorial series where we will learn how to extract thumbnails from a YouTube video and display these featured thumbnails inside recent posts widget. YouTube Data API is an excellent way to create 3rd party applications for users that could help them to search for YouTube videos, upload videos to YouTube, and update existing videos. It also helps you to retrieve playlists, favorite videos, and do much more. Since discussing YouTube API is beyond the scope of this tutorial therefore we will only discuss the thumbnails which are stored inside the tags <media:thumbnail/>. Understanding YouTube Video Feed is not our concern for this tutorial series. In this part we will first discuss the Thumbnail basic URL structure and will learn different techniques of embedding these thumbnails inside blog posts but in our next tutorial we will discuss how to dynamically display featured YouTube thumbnails inside the recent comments widget via JSON feed by retrieving the Thumbnail from the YouTube Iframe.

Note: Click the Button below to see full list of topics under discussion.

Topics List

Extract Thumbnails from a YouTube Video

Every YouTube Thumbnail has the following URL structure:

http://img.youtube.com/vi/VIDEO ID/IMAGE NUMBER.jpg

  • There are a total of 4 thumbnails available through YouTube API for each video. Each image is numbered in this sequence: 0, 1, 2, 3. Represented by IMAGE NUMBER
  • Each video has its unique ID represented by VIDEO ID.

I once uploaded a Facebook Timeline video to my YouTube channel. This video is located at

https://www.youtube.com/watch?v=tcw10SeE_VQ

Where  tcw10SeE_VQ is the video ID. This is the exact same URL structure for all videos on YouTube.

YouTube Data API stores around 4 thumbnails for each video. 3 small and one large. The thumbnails stored for the above video are located at:

http://img.youtube.com/vi/tcw10SeE_VQ/0.jpg

1st largest Full size Default thumbnail Image with dimensions 480 x 360 (pixels)

Full size YouTube Thumbnail

http://img.youtube.com/vi/tcw10SeE_VQ/1.jpg

2nd Small thumbnail Image with dimensions 120 x 90 (pixels)

 

Small YouTube Thumbnail

http://img.youtube.com/vi/tcw10SeE_VQ/2.jpg

3rd Small Default thumbnail Image with dimensions 120 x 90 (pixels)

Default YouTube Thumbnail

http://img.youtube.com/vi/tcw10SeE_VQ/3.jpg

4rth Small thumbnail Image with dimensions 120 x 90 (pixels)

Small YouTube Thumbnail

Embedding YouTube Thumbnails in Blog posts

Now lets suppose you want to publish a video post and you want to display the thumbnail Image of your YouTube video as the featured Image of your blog post in a SEO friendly manner. For this all you need to do is to use the following image code:

<img src=http://img.youtube.com/vi/VIDEO ID/0.jpg  width="400px" alt="Image Description"/>

  • You just need to replace VIDEO ID with the ID of your YouTube video URL
  • Note that I have selected the 1st Thumbnail image (i.e. 0.jpg) to display the largest thumbnail.
  • You can customize the width of your image by simply editing 400px. Note that the 1st thumbnail has a width of 480px.
  • Replace "Image Description" with Image Title

Display Thumbnails Dynamically

For simplicity we have only discussed the static method of embedding thumbnail images in blog posts but in our next tutorial we will discuss a JavaScript technique to extract YouTube Video Images dynamically from the blogger JSON feed and will display Video thumbnails automatically next to each post containing a video Iframe.

At present we are only sharing the technique for YouTube videos but if you guys would love to know how to extract Dailymotion or Vimeo video Thumbnails thumbnails also then let me know so that I may share those scripts with all of you.

Stay tuned for the next part which involves some interesting yet easy JavaScript programming. Peace and blessing buddies! :)

HostGator Best Hosting Plans For Bloggers

Posted: 17 Nov 2015 03:22 AM PST

Hostgator is surely the biggest giant today with excellent 24/7 customer service and largest collection of sites hosted. This review discusses reasons for which Hostgator has become the first choice for pro bloggers and internet marketers.
on
Note: This post has been updated with new changes made in 2015

No matter whatever blogging platform or content management system (CMS) you may be using, the topic today will discuss reliable and affordable web hosting plans that you can purchase to kick start your blogging career. Advertisers and direct sponsors have started giving more value to blogs which are self hosted and produce quality content. Here we will discuss how to transfer your current domain to HostGator and at the same time buy a reliable hosting plan. We will also answer some frequently asked questions to keep things clean and clear.

Why HostGator?

For this I have written a detailed article that you can read here:

I wont tell you any technical details here like unlimited bandwidth, Disk space, sub domains etc. I would only highlight their excellent customer service. You always need active real support from your web hosting company so that in times of technical need you may not feel helpless. Whether you are a customer or just a passing visitor the agents there are always available to give free help and suggestion.

Web Hosting companies are examined and tested by Online testing organizations and critics every year. HostGator has amazingly moved ahead of everyone in the world of web hosting for speed, reliability and support for over 9 consecutive years. You can Read the long list of awards they have achieved so far at their homepage.

I must tell you that these awards matter a lot because they are reviews collected after detailed research and they are not paid reviews. Therefore their authenticity is always respected and can't be ignored.

I researched for almost a week before choosing our web hosting company. Almost every professional blogger, designer and developer that I came across used HostGator as his web host. I read their reviews and read several forums before making my mind to choose HostGator to provide us with a storage space where we could save our resources and tools. Its one month now since I first joined HostGator and the experience so far has been outstanding. I am learning and experiencing new technologies and can easily apply them to the blog because all latest web technologies and development tools are fully supported by HostGator Control Panel.

They also provide free SEO software to monitor and track performance of your blog along with free $100 Adword and $100 Yahoo Ads campaign if you live in USA.

What can I create after buying a hosting plan?

You can create almost anything using the softwares found in HostGator control Panel (Cpanel)

  1. Blog Software  eg: Wordpress, LifeType
  2. Forum Software
  3. Gallery Software
  4. Guestbook Software
  5. Website Builder
  6. Mail Software  eg: xyz@mybloggertricks.com
  7. Social Networking Software   eg: Facebook, mySpace
  8. Wiki Software
  9. Survey Software
  10. Billing Software
  11. Chat Software
  12. Directory Software
  13. eCommerce Software

I am using Free Blogger, How would it effect me?

You can continue using blogger the same way you did before. You will write and access your posts from blogger.com dashboard as you normally do. Everything would remain the same except that now you don't need to save your style sheets, scripts and web pages on third party servers. You will have your own allocated disk space at HostGator which you can use to create unlimited numbers of sub domains like a Blogging Forum, tool or services Page. Your blog would load much faster than before and would grow more popular amongst the readers and daily visitors.

You can create a separate webpage for any purpose you may like. For example: You can create a uniquely designed webpage for each of your Ebook promotion or any other product promotion. You can do everything that pro bloggers have been doing so far.

I am using Free Wordpress, How would it effect me?

You can easily transfer your posts to your self hosted Wordpress blog with the help of agents. HostGator guys provide great support for Wordpress and the community is always more  helpful in your case. You will have all the privileges that I explained for a blogger user.

Note: Incase you needed premier help in redirecting your Free Wordpress to Paid Wordpress without losing traffic and ranking then you may please contact us via our Services Page

Will Domain Migration Effect my Ranking or Traffic?

Surely not! You can migrate your domain from your current registrar to HostGator within a week and during this time your website would work just normal. It wont stop working or show a no server found error. The transfer never effects your traffic or ranking. Since you are not changing your domain address and just the company who owned your domain therefore all your backlinks will still point to you and you can continue enjoying the PageRank Juice.

However if you are using Blogger.com then your website will go down for just 24 hours till your DNS settings are propagated successfully. We had informed our readers when MBT was about to Go down for a day. Luckily things proved more easy then we expected thanks to the sincere help of HostGator Agents.

How much will it cost me?

It will cost you less than $100 per year! Imagine you waste more than $100-$200 per month on your stomach and accessories, a small budget can build your entire future career. I have share below discount Coupon codes that you can use to get up to 25% discount on your hosting plan.

 

Ready To Become a Webmaster?

 

If you have made up your mind just like me and wish to start experiencing the lifestyle of a webmaster for less than $100 per year then the details below is what you must understand and apply the sooner possible:

HostGator Hosting Plans

There are three business plans that HostGator offers which are:

1. Hatchling Pan

  • Single Domain
  • UNLIMITED Disk Space
  • UNLIMITED Bandwidth
  • Shared SSL Certificate
  • Starting at $6.71/month   Which means $107 per year   This will decrease further after applying our 25% discount coupon

2. Baby Plan   (The plan that we use)

  • UNLIMITED Domains
  • UNLIMITED Disk Space
  • UNLIMITED Bandwidth
  • Shared SSL Certificate
  • Starting at $8.96/month  which means $143 per year. Would further decrease with Discount coupon

3. Business Plan  (Obviously Not for bloggers)

  • UNLIMITED Domains
  • UNLIMITED Disk Space
  • UNLIMITED Bandwidth
  • FREE Private SSL & IP
  • FREE Toll Free Number
  • Starting at $12.71/month  which means $203 per year. Would further decrease with Discount coupon

I used Hatchling plan for running this blog and I will highly recommend it if you are planning to run just one domain on a single HostGator account. If you have more than one blogs/domains than Baby plan is a much profitable hosting plan for you. We are planning to launch a new blog so we will be upgrading to baby plan because we can run two blog networks on a single account for less than $76 per year which is just amazing. This amount will further decrease thanks to discount coupons.

Update: We are using baby plan now!

Conclusion:

Use Hatchling if you want to run just one Domain

Use Baby if you are planning to open more domains in future.

For How Many Years Should You Register?

Register your domain for no less than 3 years. If your register for Less than three years suppose 1 year or 2 years, then it would cost you more because higher discounts are given only when you register for a minimum of three years. We registered our blog for 3 years and I advise the same for you. Higher Discount Coupon codes do not apply for less than three years.

Once your registration expires after three years, you can then easily renew it. They wont terrify you with deadlines.

25% Discount Coupon Codes

If you register now using the coupon code below during the sign up process you will get 25% discount on any hosting plan you choose. You can enjoy free first 7 months with the following discount codes:

discount with coupon

Straight $26.85 Discount ! Apply for at least 3 years!

Click this link and try it.

123927819218

If you are buying a hosting for just one year then using the following coupon will give you $9.94 OFF.

Click this link and try it.

5153557876

We will make sure to share higher discount coupon codes in coming days.

How To Transfer Your Current Domain To HostGator?

Domain transfer is amazingly free. HostGator did not charged us for Domain transfer unlike other web hosting companies that charge around $28 for a domain transfer. You may confidently proceed for Hatchling or baby plan. During the process if you needed any help you can always contact us or post your relevant queries in the comment box below.

Wish you a happy blogging career. Peace and blessings pals. :)