Showing posts with label Design & Development. Show all posts
Showing posts with label Design & Development. Show all posts

Related Posts Widget with Thumbnail
Do you think related posts widget is one of the important widget that a blog should have? For me it is, let me tell you the reason why I think it is important. You probably drive traffic from search engines, social media and other sites, once your visitors saw what they are looking they might immediately exit on your blog without visiting another page. That effect of that is a high bounce rate on your Google Analytics. So, to avoid this kind of scenario we should install related posts widget that will surely reduce our bounce rate and it probably increases our page views.

sticky post
I've been looking at my blog's homepage to see what can I add to improve its design and user experience, suddenly, I can't generate any idea what to add, so, I visited some Wordpress site to see what features on Wordpress that's not available on Blogger. And I saw sticky post and I realize it is not available on Blogger yet. So I created a simple JavaScript function to create that Sticky Post, and today I will share it with you guys, we will create a sticky post that will be posted on our homepage.

blue subscription box

One way we can say that our blog is successful is when it already had a great amount of subscribers, as they are the one who can maintain the traffic and the income of our blog. I know it is difficult to obtain a huge amount of loyal visitors, especially when we're having many competitors competing to acquire the same type of audience we want. Is your blog is in this kind of situation? I believe in producing a quality content is always the key, however I believe also that is not the only thing we should consider. We should be more strategic in converting visitors, right?

HTML with Conditional Tags
Every year Google Blogger is able to make updates that can change normal blogging platform into a great potential tool for blogging. With this great blogging tool we are able to easily design our template, create articles and make money without giving any extensive efforts. We know that blogger is still in the development process, this includes its conditional tag which allows codes to function in different situation.

In the previous years, people from the web would prefer to contact a Blogger blog owner by manually sending them an email messages, since bloggers always make a contact us page to their blog having their main email address attached to it. Things were changed after Google Blogger released its official contact form. Since then, communicating with bloggers for asking questions, requests and advertising made easy and it invited blog’s visitors to speak what’s on their mind.

The idea of having a Blogger contact form on our blog is to check what information we want to receive from senders. An example for this is to require them to enter their name, email-address and subject matter of the message. With that we can easily track the messages coming from our visitors. Also, by using a Blogger contact form for our blog we can eliminate being scanned on the web and receive spam messages.

After Blogger launched its new contact form widget, many bloggers asking if there is a way they could embed the contact form on a specific page. And absolutely yes, there is a way and that was the main topic of this page. We will embed the default contact form on static page on our Blogger blog.

Elegant Contact Form on Blogger

Digital Clock that tells to make it fast
Having a blog with a good and responsive design is not only a factor we should consider in creating or customizing our own blog template. We should also make sure that our blog will load faster, so that our visitors will easily see a particular page of our blog and minimize the reduction in conversions.

Did you know that loading speed of our blog can be a ranking factor of Google? Page speed is really a big deal for all sites, especially for an e-commerce sites that is making money over $100,000 per day, because in a 1 second of the delay of their loading speed can loss $2.5 million in their sales yearly according to the study of kissmetrics. Also, according to them 40% of people will leave a site that takes 3 seconds to load.

Author Box for Blogger

If you visited a lot of quality blog you will notice that every post there is about the author widget below the body of content. It contains information about the author of the article or blog. You may also write anything on this widget that you think your visitors should know about you and allowing them to connect with you through social media sites that you are available.

If you are building an author box widget you are also building your personal brand which added to the total quality of your blog. Establishing a relationship between the author and visitors of a blog is always a must to increase the visitor engagement. There are more chances that people will comment and share your post if they like your content and when they know who wrote it. It is also a way to build trust and credibility of your own article.

Blogger Sitemap Page

Submitting your XML sitemap on Google Search Console is always a must in order our blog posts be indexed on Google, I hope you already did it. That sitemap allow Google crawlers to see and index all URLs listed on that page with specified date published or update. Example for this is my own XML sitemap http://www.internetsmash.com/sitemap.xml. XML sitemap contains URLs that are not clickable and difficult to understand due to its structure, it’s because it is only for web crawlers not for blog’s visitors. So it’s important to provide another sitemap page that can easily understand by our visitors.

Popular Posts Widget
The Popular Posts Widget is one of the most useful widgets that Google Blogger provides. It contains the list of the most viewed posts on our blog within a specific time range. So Popular Posts Widget is suitable in providing our visitors the list of all posts that are exceptional in getting page views this week, months or in all time history. It is something like we are feeding our visitors (especially new visitors) the nutritious contents that our blog had.

Responsive Design

The Mobilegeddon or the new algorithm of Google to rank a mobile friendly site is officially rolling out since April 21 2015. This new algorithm will affect search queries of mobile device and not for desktop and tablet device. So making our blogger template responsive is a call to action.

Applying the responsive design on our blogger template is not an easy task. We should know the basic of HTML and CSS to make things right on our blogger template. However, if you don't have any knowledge about HTML and CSS you can visit www.w3schools.com which is a good site to learn basic to advanced web development.

Floating Social media buttons
One of the most important widget on a blog is social media buttons. Because it allows our visitors to easily share our content on different social media sites to make our blog posts roll over on the web. Sharing our blog posts is not only for having a presence on social media sites and driving traffic to our blog, but according to studies of marketers, social media points or social shares will help a particular page to rank on the search engine despite of Google insisting that they are not included it in the ranking signal.

Structured Data markup on blogger website with Google logo

On January 15, 2015 Google updated the Structured Data testing tool to help webmasters to fix and improved their website markup. Google also said on their site that having Structured Data on your website helps your articles/posts appear on search result. So today I would like to teach you on how to put a complete Structured Data markup on your blogger website.

You need to check first your website here to see if your website already had a Structured Data markup.

Reminder: You should backup first your template before making any changes.

To put a Structured Data markup, we should edit our template.
Go to your blogger dashboard->>Template->>Edit HTML.

Adding root class name hentry

In order for us to implement the complete Structured Data hatom on our blogger website the first thing we need to do is to implement first the root class name hentry on our template. Do the things below to add it.

Find this code <div class='post'>, just add hentry after the text post. After that it will look something like this <div class='post hentry'>. In some cases you will find multiple <div class='post'> on your blogger template, just do the same thing, add hentry to all <div class='post'> codes.

Adding an entry-title

Find this code class='post-title. Similar we did on top, just add entry-title after the text title. Now it will look like this class='post-title entry-title'. The same on top you will find two or more class='post-title on your template just do the same thing we did.

Adding an entry-content

Find this code <div class='post-body then add entry-content right after the text body. Again you will find it multiple times so just do what we did previously.

Fixing errors on updated and author

Fixing Updated: To fix error on updated find first this code <data:post.timestamp/>. Just before that code you will find span class if none just copy the codes below for your refference.
<span class='updated'><data:post.timestamp/></span>
The important keyword on top codes is the updated. It will tell to Google crawler the date you update your post. You may also tell to Google crawler when you published your blog posts. Below is the complete codes for these.
<span class='updated'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></span>
Fixing Author: Find this code class='post-author, after the text author you must insert this text "vcard". After that it will look some thing like this class="post-author vcard". After that find this code <data:post.author/> then replace it with the codes given below.
<span class='fn author'><data:post.author/></span>
I know sometimes you can’t find the codes you need to edit because you have a different template. You are free to ask help on comment box, but make it sure you will add nofollow attribute if ever you need to put a link.


Google officially announced that the Google code project hosting service will be closed on January 15 2016. This announcement was posted through their blog post entitled Bidding farewell to Google Code. Google says in their blog post that most of the developer’s projects where move to another project hosting services like GitHub and Bitbucket bloom that’s why they decided to close the Google Code project hosting service. They also decided to move most of their open source projects to GitHub in order for developers can use them easily.

Adding a related post widget on blogger blog is one way of doing internal linking in our blog. Internal linking means building links on a page of a domain targeting another page of the same domain. It is one of the best SEO strategies that being used by most bloggers. It is a way of spreading the link juice throughout our pages which is good for SEO and in building site’s architecture. By doing this we also allow Google crawlers to see the different posts on our site.

Related Post Widget on Blogger Blog

Facebook Popup like box
Like Google, Facebook is also one of the successful internet companies that never fail in helping people in terms in making money through online business. Every blogger agrees that social media, especially Facebook are the best way to drive traffic to a certain blog. With a billion number of Facebook users, all bloggers must definitely take advantage on this social media site to acquire new audience on their blog.

In targeting an audience, it’s pretty important for us to know where most of their time spent on surfing so that we can easily reach them. In the month of February 2015 Facebook had a 1.3 billion active users and 890 million login to Facebook per day. With the average time spent on Facebook about 21 minutes per user per day.

My idea is stolen

The worst thing might happen when other blogger copied our content is when his copied article rank well in Google search engine compared to our original article. And when our newly published post is copied word by word and Google index it first.

In terms in indexing, we know that Google will not immediately index our blog post when we newly published it. Matt Cutts (head of Google's Webspam team) said on one of his videos on YouTube that one way how Google determine which one is the original post is through social media signal, if which post is shared first in social media sites like Facebook and Google+. It means Google implies to share our post on social media after we published it.

Responsive template
Browsing the internet using mobile devices is growing as the statistics is saying. With this, we can say that in the near future mobile devices will take over the internet surfing. Because of the increasing number of searchers that is using mobile devices the importance of a responsive design of a website template is now a must. This means every webmasters or website owners are now required to make their website template responsive as the leading search engine (Google) said.

Complete Social Media Profiles widget
I know it’s easy to get a code of button for your social media profiles to put on your blog. But the problem is, you will put only the codes of your different social media profiles in different widget.  So I want to present one widget that already contains a subscription box and three social media profiles including Facebook page, Twitter and Google plus account. I already optimized every group of codes of this widget so that it will load faster on any browsers. You are free to put this widget on your blog, just follow the steps below on how to implement it.

Subscription box below post
Today I would like to share a professional looks subscription box widget that appears on every post on your blog. This is a rectangular widget with a simple but professional looks design that can catch your reader's attention if they already done reading your post. This kind of widget is implemented also on this blog. Below is a screenshot of what the subscription box looks like.

Google Developer tools image
When I was starting a blog most of my time is used in fixing errors and designing my blog template. I’m sure newbie bloggers are doing this kind of thing too.  A lot of bloggers think that Google Chrome is used only in browsing a site.  But, Google extremely good by providing some tools to help blogger to easily customize their own blog template by using Developer Tools on Google Chrome.  By using this tool, we are able to edit some basic style on a site like alignment, padding, text-size, margin, background-color and many more without changing yet the original html code on our blogger dashboard.

You don’t need to become a web developer to design a great template on your blog you just need this developer tool and some basic knowledge in html coding to make your desired style on your template. I’m also using this tool to check what CSS code is used on a specific site on its template. On this page I’m going to teach you some basic tweaks to change some styles in my blog template using Google chrome developer tools. I hope you will enjoy it.

Changing Styles On My Header

Supposed we need to tweak my blog header style, first we need to open my blog on Google Chrome browser then right click the header part on my blog and choose inspect element. See image below.

Blog header widgets

You will see now the developer tools window where the html and CSS code is specified. If you try to click the <div id="header-wrapper"> on the developer tools you will see that the header part on my blog is highlighted and the its CSS code will appear on the right side of the developer tools.

Google Chrome Developer Tools

The #header-wrapper in CSS part in above image is my header div ID, if we try to add a background: #172044; on the CSS part in developer tools you will notice on my site that the background color on my header was changed. In developer tools you will notice also the square button in the right side part of the background attributes. Using that button you can automatically select a color without manually changing the color hex code of the header background. You can also add and edit some existing attribute in header CSS like its width, margin, height and padding.

Header background color added

After you add or edit something on your blog template using the developer tools the next thing you must do is to edit or add the CSS code to your blogger dashboard to finally change the style of your blog. To do this just go to your Blogger Dashboard->>Template->>Edit HTML. Just copy the ID in your CSS on the developer tools, in the above example its header ID is header-wrapper, then find it in your html editor on your blogger dashboard by using CTRL+F.

NOTE: You can't declare a new ID in CSS on the developer tools. For example, you want to add an ID #header-extension{width:50%; height:10%; background: #111111} it is illegal to declare something like this. You can add or edit properties only in developer tools if there are already declared an ID in CSS on the template of a site.