'Ifza' - 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.

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%" /]

Display YouTube Video Thumbnails in Blogger

We 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 BlogSpot blogs 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 show 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)

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

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

 

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

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

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

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

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! :)

Why New Content Should be a Part of Your SEO Strategy

While some business owners wonder, what is online marketing and how can I utilize it efficiently, others are already ahead of the curve implementing full-blown strategies that include content generation.

Why is content such an important part of SEO?

Because content is still king online.
Read more �

STCnetwork's New Letterheads and Business Cards

By the time we developed our mini software firm STCnetwork and started recruiting more and more developers, it came a point where giving attention to every single office stationary became mandatory. We first started the trend of Business cards for bloggers back in 2012, we are next promoting the new trend of Letterheads for small online businesses to better portray themselves to local clients. Presentations count for 30%-50% of your business deals and contracts. The more professional you act and sound the better the rate of return on investment (ROI).

Business Card Design Changes

Company designs should be kept identical at all times without any major changes because after all keeping your identity same at all times is the whole concept behind a business logo. We have made slight changes to the web domain and email domain address. We simply replaced the blog domain address with company website URL inside the new design. We also changed NETWORK to lowercase and made the blue color a little brighter rest all things are kept the same. 

The cards are printed at both sides, matt laminated and match the size of a credit card 310g². Went through 3 + 2 color printing with dye cutting. Its designed by keeping MBT's parent design in mind, utilizing the same blue and black color combination.  The front of the card contains details about the network administration, logo and some contact details whilst the back contains my favorite quote i.e. "I blog for living"

We printed a total of 1000 copies this time:

Our previous design:

Letterhead Design Specifications

As a business, every single time you reach out a customer,  whether through an invoice, contract or offer � you�re saying something about who you are. Letterheads leave your trademark on all documentations and business correspondence that takes place. Thus a unique form of marketing that further boosts your authenticity and credibility in the eyes of customers.

Letterheads can be used for both offline and online correspondences. You can print anything inside them using a inkjet or laser printers just like you do on any A4 size paper.

We have kept the design both comprehensive and yet simple in concept. The header consists of the company logo and office address while the footer contains the company web address. We have also inserted a large faded logo inside the center-left of the paper to make things more eye catching.

These letterheads will also be used as certificates in our coming workshops and conferences. The paper consists of a thick layer of 150 g² matt paper with tri color printing

Your views?

How important do you think are letterheads for a business and have you planned designing VC and letterheads for your blog? If yes then do share the design with us by using the following shortcode inside comments:

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

Our Cards and Letterheads are designed and printed by Waqas Haider from Al - Rehman Enterprises. Waqas is a great friend and an excellent designer without doubts. I would recommend his services to anyone home or abroad. 

Do give us your feedback on this latest development and let us know what could be done to make the cards even more better. Peace and blessings buddies! =>

Resize the Default Resolution of Thumbnails in Blogger

As promised in part9 we are sharing today the trick to resize Blogspot thumbnails. Blogger stores media thumbnails in dimensions of 72 x 72 pixels in size. All pictures that you upload inside your blog posts are stored inside JSON feed and XML feed with 72px width and 72px height. The thumbnail images are saved originally in small square sized snapshots which if stretched out using CSS distorts the original resolution of the pictures and as a result they are displayed in poor quality resolution. In this tutorial we will fix this problem by changing the original dimensions of the picture in its URL using simple JavaScript technique and using the Recent Posts widget code that we have been using so far. It is just a one liner code and quite easy to implement.

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

Topics List

Fact

The default resolution of Blogger thumbnails can never be changed using just CSS. It requires JavaScript to modify the actual URL structure.

URL structure of Thumbnails in JSON feed

You clearly know now that thumbnails are stored inside the media$thumbnail node and have the following URL structure:

If you observer the URL closely you will notice that each URL is assigned a parameter /s72-c/. Because of this parameter each thumbnail is assigned a default size of 72px by 72px i.e. Square image and cropped due to the parameter -c. The thumbnail thus gets a smaller size which when stretched using CSS gives a low quality image as shown below:

Our task is to replace this parameter with a custom variable so that the image size can be resized dynamically to any resolution we want by maintaining the aspect ratio. This will auto create a HQ thumbnail with clean and clear resolution.

The thumbnail will then appear in its original dimension with no forced width or height sizes.

The images are cropped due to the parameter  ( -c ), we will remove this to make sure the blogger thumbnails are not cropped and shown in full width.

Lets now get straight to interesting but simple coding!

Resizing Blogger Thumbnails

We will use the exact same code for recent posts widget that we shared in Part#9. All the modifications made are highlighted in pink.

<!-- ######### Writing Callback Function ############# -->
<script type="text/javascript">
//----------------------------Defaults
var ListBlogLink = window.location.hostname;
var ListCount = 5;
var TitleCount = 70;
var ListLabel =" ";
var ChrCount = 80;

var ImageSize = 100;

//----------------------------Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)
{

//-----------------------------Variables Declared
var listing= ListUrl = ListTitle = ListConten = ListContent =ListImage =thumbUrl =sk = "";
//----------------------------- Title URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//----------------------------------- Title Stirng
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}

//----------------------------------- Content Check

ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substr(0, ChrCount);

//------------------------------------ Thumbnail Check

if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;

sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}

// Support For 3rd Party Images
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}

else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Xls_A_gbqigYi5YM8CxeGHF_OswaM4V8CRMpbl70LPgcOTzGh7OTONcWx3u_WQe3E3RzCPYnacLuxJ6wq9vHr6z_CwFtDUIjZXPXAM1L2p1hqDVHWR7gJBE70Hk8SW6Wrvt1aEeoveM/s200/Icon.png'";
}

//----------------------------------- Printing List
var listing = "<li><a href="
+ ListUrl+
  "><img src="
+ListImage+
"/></a><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a><span class='icontent'>"
+ListContent+
" ...  <a href="
+ListUrl+
" class='imore'>�</a></span></li>";
document.write(listing);
}
document.write("</ul>");
}
</script>
<!-- ######### Invoking the Callback Function ############# -->
<script>
ListBlogLink = "http://www.mybloggertricks.com";
ListCount = 4;
TitleCount = 70;
ListLabel = "Announcement";
ChrCount = 150;

document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
</script>
<!-- ######### Styles for Look ############# -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style>
.mbtlist {list-style-type:none;overflow:hidden}
.mbtlist li {margin:0px auto 20px auto; clear:both; color:#666; font-family:Helvetica; font-size:12px; border-bottom:1px dotted #ddd;padding-bottom:10px;}
.mbtlist .mbttitle {font-family:oswald; font-size:16px; color:#0080ff; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover {color:#00A5FF;}
font-family:georgia; font-size:15px; font-weight:bold}
.mbtlist div span{margin:0 10px 0 0; display:inline-block;}
.mbtlist span {display:block; margin:5px 0px 0px; padding-right:5px;}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666; line-height: 0.7em;}
.mbtlist img {float:left; margin:0px 10px 10px 0px; border:6px solid #fff; padding:0px; width:80px; height:65px; box-shadow:-1px -1px 4px #777; }
.mbtlist .icontent {text-align:justify;}

</style>

How it works?

1.  We first declared a variable ImageSize  to dynamically adjust the image size parameter from /s72-c/  to /s100-c/. 100px here means /s100-c/ i.e. 100px X 100px.

Note that image size can easily be changed using CSS as well like we have done (i.e. width:80px; height:65px). The CSS image size must always be less than or equal to ImageSize but not greater than it else the resolution will collapse. Normally thumbnails are displayed in size of 100px by 100px, if you want much larger thumbnails you can surely increase the value for ImageSize. and then customize the width and height using CSS like we did.

2. We then declared another variable sk and set it to null.

3. The third most important step is:

sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");

Here we first used the JavaScript replace () method to replace s72-c with ImageSize. We then saved this new Image URL inside sk. We also removed the parameter -c to prevent images from getting cropped.

4. Finally we removed the parameter ?imgmax=800 from the Image URL inside sk using the replace method and saved the new clean URL inside ListImage. 

Normal Size

 

Custom Size

I made these changes:

• set ImageSize to 150px
• set width to 130px and height to 90px

See no loss in image quality even if you stretch it to 500px!

Update: Prevent Cropping of Images

To make sure images are not cropped we removed the parameter -c from /s72-c/. The thumbnails will now look like this:

Need Help?

Let me know if you need any assistance till this part of the tutorial series. Do post your questions and let us know if you found any part confusing. In our coming tutorials we will cover Dynamic sliders, carousels and all sorts of animated widgets and much more. This is just the trailer! =>

Peace and blessings buddies! :)

Display Recent Posts With Third-Party Thumbnails Support

Every picture that you upload in Blogger editor gets saved in Picasa Web album. Only uploaded images are stored inside the { }media$thumbnail Object in the JSON feed. This is one reason why many recent posts widget work well when your posts contain images that you have uploaded to blogger from your computer but the same widget fails to display a thumbnail when you have embedded a YouTube video or image (hosted externally) inside your blog post. This tutorial helps you understand how to extract the thumbnail URL for both Picasa hosted images and 3rd Party images from Blogspot json feed.

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

Topics List

Path of Media Thumbnails in JSON Post Feed

There are two ways to extract the Blogger Thumbnail URL from JSON.

1. Extract the Picasa Hosted Thumbnails

By Picasa hosted images I refer to images uploaded inside blogger editor. When you upload a picture from your computer to Blogger, that image is stored inside Google Picasa Image hosting service.

Note: The Image that you add to the beginning paragraph is often picked as your post thumbnail or featured image.

All these images gets an exclusive space in JSON feed because they are assigned a separate object node by the name media$thumbnail inside the item entries i.e. [ ] entry as shown below:

The image link is stored inside the node url as shown below:

The path would therefore be:

json.feed.entry[i].media$thumbnail.url

Which means Go To json > feed > entry array > media thumbnail > finally url

2. Extract 3rd-Party Images as Thumbnails

If in case you have not uploaded an image from your computer to blogger and instead you have embedded an image which is hosted on some third-party hosting service then it means Blogger will not be able to recognize your Featured Image or Featured Thumbnail, as a result the media$thumbnail node will contain no value at all and it will simply disappear. In this case, we will need to search for a thumbnail using the Post { }content node which contains the entire HTML of your post body i.e. <data:post.body/>.

 

Therefore we will instead search for the 3rd-Party image inside the Post content node as shown below:

The benefit that we get here is that you can display images as thumbnails from any hosting platform online, whether your images are hosted on your server or on some free image hosting service like Flickr, photobucket etc.

Our json path would thus be:

json.feed.entry[i].content.$t

Display Featured Thumbnails in Recent Posts Widget

Now comes the coding part. We will use the exact same script that we have shared in part 8. Major modifications made have been highlighted in Orange with white text.

<!-- ######### Writing Callback Function ############# -->
<script type="text/javascript">
//----------------------------Defaults
var ListBlogLink = window.location.hostname;
var ListCount = 5;
var TitleCount = 70;
var ListLabel =" ";
var ChrCount = 80;

//----------------------------Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)
{

//-----------------------------Variables Declared
var listing= ListUrl = ListTitle = ListConten = ListContent =ListImage =thumbUrl = "";
//----------------------------- Title URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//----------------------------------- Title Stirng
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}

//----------------------------------- Content Check

ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substr(0, ChrCount);

//------------------------------------ Thumbnail Check

if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
ListImage= "'" + thumbUrl .replace("?imgmax=800","") + "'";
}

// Support For 3rd Party Images
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}

else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Xls_A_gbqigYi5YM8CxeGHF_OswaM4V8CRMpbl70LPgcOTzGh7OTONcWx3u_WQe3E3RzCPYnacLuxJ6wq9vHr6z_CwFtDUIjZXPXAM1L2p1hqDVHWR7gJBE70Hk8SW6Wrvt1aEeoveM/s200/Icon.png'";
}

//----------------------------------- Printing List
var listing = "<li><a href="
+ ListUrl+
  "><img src="
+ListImage+
"/></a><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a><span class='icontent'>"
+ListContent+
" ...  <a href="
+ListUrl+
" class='imore'>�</a></span></li>";
document.write(listing);
}
document.write("</ul>");
}
</script>
<!-- ######### Invoking the Callback Function ############# -->
<script>
ListBlogLink = "http://www.mybloggertricks.com";
ListCount = 4;
TitleCount = 70;
ListLabel = "Announcement";
ChrCount = 150;

document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
</script>
<!-- ######### Styles for Look ############# -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style>
.mbtlist {list-style-type:none;overflow:hidden}
.mbtlist li {margin:0px auto 20px auto; clear:both; color:#666; font-family:Helvetica; font-size:12px; border-bottom:1px dotted #ddd;padding-bottom:10px;}
.mbtlist .mbttitle {font-family:oswald; font-size:16px; color:#0080ff; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover {color:#00A5FF;}
font-family:georgia; font-size:15px; font-weight:bold}
.mbtlist div span{margin:0 10px 0 0; display:inline-block;}
.mbtlist span {display:block; margin:5px 0px 0px; padding-right:5px;}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666; line-height: 0.7em;}
.mbtlist img {float:left; margin:0px 10px 10px 0px; border:6px solid #fff; padding:0px; width:80px; height:65px; box-shadow:-1px -1px 4px #777; }
.mbtlist .icontent {text-align:justify;}

</style>

Here are important points that make the magic work!

   1. First we declared two variables ListImage and thumbUrl  assigned their values to empty.

   2. Then we ran the first loop:

if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
ListImage= "'" + thumbUrl .replace("?imgmax=800","") + "'";
}

The loop first checks if the media$thumbnail node is present or not. If present it runs the command else it will pass the pointer to the next loop that I will discuss in step 3. First we fetched the thumbnail URL from the node and stored it inside the variable thumbUrl . Next we removed the parameter value (?imgmax=800) from the image URL in order to prevent the fixed resolution and instead pick the highest/original resolution URL of the thumbnail. We stored the final URL value inside ListImage

Note:

In our next tutorial, we will discuss how to resize the default 72x72 resolution of thumbnails to a high quality resolution so we could customize the dimensions of the images.

   3. If in case no featured image hosted at picasa was found, the script will run another loop to look for a thumbnail inside the content node:

else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}

else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Xls_A_gbqigYi5YM8CxeGHF_OswaM4V8CRMpbl70LPgcOTzGh7OTONcWx3u_WQe3E3RzCPYnacLuxJ6wq9vHr6z_CwFtDUIjZXPXAM1L2p1hqDVHWR7gJBE70Hk8SW6Wrvt1aEeoveM/s200/Icon.png'";
}

Here first we will check if an image exists inside the post content or not. If it does exist the script will continue running sequentially and scan the entire post for images which matches the following extensions: .jpg, .gif, .png . We have done this using the JavaScript match method:

 match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1]

The array value [1] at the end of this method means that the script should pick only the first embedded image from the Post body and ignore other images. Thus we can extract the Featured Thumbnail

If no image was found inside the post then a default image will be considered as the thumbnail.

4. Next comes the printing part. The image code is inserted inside the printing variable as shown below:

<a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a>

The image is linked to the Post URL i.e. ListUrl

5.  We then finally added some CSS styles to make the Thumbnail float to the left of the list and look out standing!

The end result is a List of your Blog's recent Posts with thumbnails and specified Label:

OUTPUT:

Need help?

Let me know if you need help in any part of this tutorial. This tutorial series is for learning purpose only and we are trying our best to make it as simple as possible. It is not a copy-paste process or some widget trick. It is a comprehensive guide to Blogger JSON API that is first time shared online Alhamdulillah to help you excel every art of Blogspot Blogs and help you build better gadgets and templates.

In our coming tutorials we will add support for YouTube thumbnails and Custom Image size. Stay tuned, there is more to come buddies! :>

5 Major Disadvantages of using HTTPS in Blogger

Now when Google has provided the option of HTTPS encryption for blogspot blogs with non-custom domains, are you ready to turn on HTTPS on for your blog? But before that it is really important to understand the risks, complexity and SEO costs involved in switching to HTTPS. In our last post we discussed the differences between http and https and we also explained that less than 0.1% of all sites in internet has gradually adopted using https, though it sounds less but sites which are serious about a slight ranking boost in their search results are accepting to make this SEO shift. Lets discuss 5 major reasons why we recommend that you should not switch to HTTPS at this time and if 'enabling HTTPS' could effect your BlogSpot Search Ranking.

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

Topics List

5 Major Disadvantages of turning on HTTPs in Blogger

Following are some of the solid reasons that makes me think twice before advising someone to switch on HTTPs for his blogspot blog.

1. Blogspot Images have absolute paths and not relative

UPDATE: Blogger heard us finally! They have now introduced Relative URLS for blogger blogs.

All images that you upload in a blogger blog are stored inside Picasa web album. Before Google announced the use of HTTPS on its servers, Picasa was using the non-encrypted HTTP protocol for all its URLS. Though Picasa now has an SSL certificate and has enabled HTTPS encryption for itself but Picasa http URLS are not auto redirected to https in Blogger. All images that you upload are instead saved in http protocol which is the biggest SEO mistake and makes https useless for blogspot blogs because your visitors will continue getting http errors on your site unless you manually change each http to https in all your posts one by one! Which I know is hectic and time consuming. But no easy solution other than this.

Even if you have enabled HTTPS, your visitors will continue seeing the following http error in their address bar which can frighten them! =) It is caused mainly due to image links stored in http:// instead of https://

This issue could have easily be handled if blogger used relative URLS for storing images instead of absolute as shown below:

In Relative URLS case you don't need to change the URLs from http to https because the image src will pick the current Domain URL structure of your site no matter how many times you change it.

For example if your URL is

http://example.blogspot.com

then your Images would then be stored at

http://example.blogspot.com/-/image.png

Now if you have changed your URL to

https://example.blogspot.com

then since you are using a relative path for images which is not changed, all your image URLS will automatically get the correct https URLs as shown below:

https://example.blogspot.com/-/image.png

Now since all your picasa images are stored with absolute paths then in this case your image URL will not be switched to https unless you manually do it as shown below:

If your Image has the following URL inside a post:

http://lh6.ggpht.com/_7wsQzULWIwo/Srn4c3EpmaI/AAAAAAAAB24/rq9_CVED8is/s800/Animated%20Picasa.gif

now if you decide to switch your .blogspot.com domain to HTTPS, your image URL will not change and will remain the same as shared above unless you manually edit the post and replace http to https. The image will work with both http and https protocols. Test below:

https://lh6.ggpht.com/_7wsQzULWIwo/Srn4c3EpmaI/AAAAAAAAB24/rq9_CVED8is/s800/Animated%20Picasa.gif

This issue has been first time highlighted online and If someone from official blogger team is reading this post then I request them to fix this redirection problem the sooner possible.

2. HTTPS is not 301 redirected to https

Google treats https and http versions of your blog as two different sites. Because the http version of your blogspot blog URL is not 301 redirected permanently to the https version. This is the same problem that we discussed for Picasa images.

If you have enabled HTTPS for your blog then you will observe that you can access your blog with both http:// and https:// . You will notice that when you type http://yourblog.blogspot.com in the browser address bar, your blog will not be redirected to https://yourblog.blogspot.com!

This is a serious SEO mistake and can cause your blog get penalized with Panda penalty for promoting duplicate content. Because all your posts will appear twice in search results once for the http:// version and once with https:// encryption.

3. HTTPS can effect your Google PageRank

Due to poor configuration of 301 redirection, you will loose all PR juice of your backlinks for the HTTPS version of your blog URL. Sites which have linked to the http:// version of your blog URL, will pass the PageRank juice only to the http version and you will get no share in the HTTPS version of your site which is your ultimate URL!

In short that https version of your blog is a complete new site unless blogger 301 redirects the HTP protocols correctly.

4. HTTPS can reduce your AdSense earning

If you are a AdSense publisher, then you may see your earnings reduce significantly. Google itself says that sites with HTTPS pages earn less than those with HTTP pages because AdSense will restrict your ads to those that are SSL-compliant and will not shows ads on your site which are using HTTP! =)

HTTPS-enabled sites require that all content on the page, including the ads, be SSL-compliant. As such, AdSense will remove all non-SSL compliant ads from competing in the auction on these pages. If you do decide to convert your HTTP site to HTTPS, please be aware that because we remove non-SSL compliant ads from the auction, thereby reducing auction pressure, ads on your HTTPS pages might earn less than those on your HTTP pages.

5. HTTPS can make widgets stop working on your blog

All your social plugins which have scripts hosted at HTTP will prompt http errors to your visitors unless you manually replace the http with https:// inside your blog template for all these plugins, and gadgets which uses JavaScript so that you may get rid of the mixed content issue. 

With HTTPs disabled the FB plugin was working correctly:

With HTTPs enabled the FB comments count stopped working:

 

Willing to Turn on HTTPS?

If after reading all these points you still wish to switch to HTTPS then follow these steps:

To enable HTTPS:

1. Go To Blogger > Settings > Basic > HTTPS Settings.
2. In HTTPS Availability, select Yes.

To disable HTTPS, follow the steps above and select No for HTTPS Availability.  

If you disable HTTPS, visitors will be redirected to the unencrypted HTTP version of your blog. However all bookmarks to your blog will continue to work.

In our coming posts we will discuss how to fix the mixed content issues linked with https and fix all such https errors inside the blogger template.

Have Questions?

This was my deep research on this new trending topic amongst blogspot users. I tried to be as much clear as possible and inform everyone about the SEO and revenue risks involved with HTTPS. Since https encryption is yet not available for blogs hosted on a custom domain, we will therefore wait and see if we can choose to switch to HTTPS. So far I am strongly against turning on HTTPS due to the above reasons that I explained, unless blogger provides an easy migration tool, it is almost impossible to edit each post manually and replace the http protocols yourself in order to get rid of the mixed content issue which is caused mainly by images and scripts inside your template and posts.

What are your views on this topic, have you planned to setup HTTPS for your blog? If yes then why haven't you yet decided to first buy a Custom domain for your blog and then take this step?