Connect with us


10 BlogSpot Layout Customizations for an Attractive and Pro Blog



blogspot layout customization

New bloggers always have a question; how can I customize BlogSpot Template to make my blog more attractive, beautiful and professional.

I had also started my first blog on Google blogger platform. Later, I switched to WordPress blog on a shared web hosting plan and free domain name registration with GoDaddy. Because GoDaddy allows hosting unlimited websites on a single hosting plan.

Well, almost all newbies start the first blog with BlogSpot – Google Free Blogging Service. And they always tweak to give their blogs a more attractive and beautiful look by customizing blogger layouts.

Therefore to help those new bloggers, I’m showing 10 killer ways for Blogspot Template Customizations. It’ll turn the default blogger blog into a pro blog.

Blogspot template customizations in a right way always do well in attracting new subscribers. However, content is the king and good posts are also important for a blog success.

In this blogger guide for beginners, you will be able to add social media icons to blogger (social hover expanding widget for blogger), automatically change background color in BlogSpot, comment numbering, open blogger comments in a new window, customize blogger labels widget and much more.

Note: Before you begin, back up a copy of your blog template.

Make sure to make a complete backup of your current blog template file. Just in-case you make a mistake or would prefer to roll-back the changes at a later time.

How to Backup Blogger Template?

To make a copy of your blog template file, go to Template => Edit HTML and click on Download Full Template link, available nearby the top of the web-page. Save the XML file to your computer for later use.

Customize BlogSpot Template to Make Blogger Blog More Stylish and Professional

BlogSpot (Google blogger) is the first choice for every new internet lover. A lot of bloggers using this free blogging platform for many years with setting up a custom domain either.

While posting great content for your readers, Blogspot template designing is always important to move your blog out of the box.

Following are some cool blogger tricks and tweaks that can help you to make a blog more beautiful.

#1 Add Beautiful Social Hover Expanding Widget on Blogger Blogs

Social Hover Expanding Widget

Blogger has many inbuilt features and widgets when it is completely free. But there are huge BlogSpot design limitations as compared to other self-hosted blogs such as WordPress, Joomla, etc.

To make your blog more beautiful and attractive, I always try to bring the latest blogger tutorials for you.

Here is another blogger trick by which you can add social media hover expanding widget in blogger blogs.

How to Add Social Media Button to BlogSpot?

This social hover widget has a lovely design and awesome look. It is just a combination of CSS and HTML coding.

It will not affect your blog page loading time. The hover social gadget includes Facebook, Twitter, Google+, YouTube, LinkedIn, Pinterest and RSS subscription link.

You do not need to edit your blogger theme template. Just add this hover widget to your blog with the help of new gadget.

  • Log in to Blogger => Go to Layout => Click on Add a Gadget => HTML/JavaScript.
  • Now simply copy-paste below social hover widget code in HTML/JavaScript widget.
 #ElkeesMedia {width: 260px;margin: 5px 20px;padding:5px;}#ElkeesMedia li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#ElkeesMedia .icon {background: #D91E76 url('') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #141414;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#ElkeesMedia span:hover {visibility: hidden;}#ElkeesMedia span {display: block;top: 15px;position: absolute;left: 90px;}#ElkeesMedia .icon {color: #fafafa;overflow: hidden;}#ElkeesMedia .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#ElkeesMedia .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#ElkeesMedia .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#ElkeesMedia .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#ElkeesMedia .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#ElkeesMedia .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#ElkeesMedia .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#ElkeesMedia li:hover .icon {width: 250px;}#ElkeesMedia li:hover .icon {background-color: #d91e76;}#ElkeesMedia li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#ElkeesMedia li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#ElkeesMedia li:hover .google {background-color: #A70000;background-position: 0 -94px;}#ElkeesMedia li:hover .pint {background-color: #C00;background-position: 0 -142px;}#ElkeesMedia li:hover .linked {background-color: #005772;background-position: 0 -190px;}#ElkeesMedia li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#ElkeesMedia li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#ElkeesMedia .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
 <ul id="ElkeesMedia">
 <!-- RSS Start -->
 <li><a target="_blank" href="" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li>
 <!-- RSS End -->
 <!-- Google+ Start -->
 <li><a target="_blank" href="" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span></li>
 <!-- Google+ End -->
 <!-- Facebook Start -->
 <li><a target="_blank" href="" class="icon facebook">Like us on Facebook</a><span>Like us on Facebook</span> </li>
 <!-- Facebook End -->
 <!-- Twitter Start -->
 <li><a target="_blank" href="" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li>
 <!-- Twitter End -->
 <!-- YouTube Start -->
 <li><a target="_blank" href="" class="icon ytube">Follow us on YouTube</a><span>Follow us on YouTube</span> </li>
 <!-- YouTube End -->
 <!-- Pinterest Start -->
 <li><a target="_blank" href="" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li>
 <!-- Pinterest End -->
 <!-- LinkedIn Start -->
 <li><a target="_blank" href="" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li>
 <!-- LinkedIn End -->
  • Replace the social URLs with your links highlighted in blue color.
  • Just Save the widget and visit your blog to see the lovely widget.

The above method will add an attractive social button on your blog. Try this blog spot gadget on your blog.

#2 Automatically Change Blogger Background Colour

Blogger is the best place to show your presence online and share your things with the world.

To make your blogger experience more powerful, this latest blogger trick can show different background colors in blogger blogs. The background color will change automatically every minute.

Recommended for you: How to Recover Deleted Blogger Blog Posts.

Give a fresh look to your blog visitors every time they visit your site by showing them cool background colors.

It’s a JavaScript trick that keeps changing the background colors automatically.

The script adds a new color HEX code every time a visitor refresh the blog. Colors are randomly selected as background colors. If you want to add this background color changer javascript on your blogger site, follow the steps below.

Change Background Color in BlogSpot

Customize blogger template to make blog background color change automatically.

  • Log in to Blogger => Go to Template => Click on Edit HTML.
  • Search for ]]></b:skin> < by pressing Ctrl + F.
  • Simply copy the code and paste it just above/before the searched tag.
body {
 animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
 -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
 -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
 -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
@keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }
 @-webkit-keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }
 @-moz-keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }
 @-o-keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }

Whoo!! That’s all. Now every visitor on your blogs can see the animated background color patterns.

Finally, Save the changes and refresh your blog. If it doesn’t work, try visiting your blog after cleaning cache and cookies.

#3 Add Numbers to Blogger Comments Using CSS

Learn how to number comments on blogger with CSS. With many blogger features, Blogspot still lacks some Blogspot theme customization like the default commenting system.

Thanks to pro-bloggers and blog designers. Hence, they keep on creating great CSS, JavaScript, JQuery and other Blogspot template designs to make the blog more professional and branded.

Well, using this CSS code, you can customize the numbering system in blogger. I have found this CSS on the web and decided to share with you.

  • Log in to Blogger => Go to Template => Click on Edit HTML.
  • Search for ]]></b:skin> by pressing Ctrl + F.
  • Simply copy the code and paste it just above/before the searched tag.
.comments .comment{counter-increment:number;position:relative}.comments .comment-content{margin-right:50px!important}.comments .comment:after{-moz-border-radius:100%;-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);-webkit-border-radius:100%;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);background-color:#0066B3;border:3px solid #3c3c3c;border-radius:100%;box-shadow:inset 0 1px 2px rgba(0,0,0,.7);color:#ccc;content:counter(number);display:block;font:italic normal 20px/40px Times,Serif;height:40px;position:absolute;right:10px;text-align:center;top:10px;width:40px}.comments .comment .comment-thread.inline-thread .comment:after{font-size:18px;height:30px;line-height:30px;width:30px}.comments .comment:hover:after{background-color:#04BDFA;border-color:#333;color:#FFF}.comments,.comments .comment .comment-thread.inline-thread{counter-reset:number}
  • Save the changes and refresh your blog to see the new round shaped comments numbering.

It will show how many comments are posted and which comment you are reading.

#4 Show Full Posts Instead of Read More & Excerpt Summary

Display or show full posts instead of reading more/excerpt summary on blogger blog’s homepage.

To show full posts or remove Read More link from the blogger template, you’ll have to add a simple HTML code into your blogger XML file. It will show full posts on the homepage.

  • Login to Blogger => Select your blog.
  • Click on Template => Edit HTML (be safe, take a backup before proceed).
  • Find something like below code in your blogger template.
    <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; +' itemprop='description articleBody'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; +'>
<script type='text/javascript'>
<div style='clear: both;'/>
<span class='rmlink btn btn-primary btn-large btn-block' style='font-weight:bold;padding:5px;text-align:center;'><a expr:href='data:post.url'>Read more ... </a></span>
</b:if>        <div style='clear: both;'/> <!-- clear for photos floats -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; +' itemprop='articleBody'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; +'>
<script type='text/javascript'>
<div style='clear: both;'/>
<span class='rmlink btn btn-primary btn-large btn-block' style='font-weight:bold;padding:5px; text-align:center;'><a expr:href='data:post.url'>Read more ... </a></span>
</b:if>        <div style='clear: both;'/> <!-- clear for photos floats -->
  • Replace the above-searched code with the below code. It will show full posts instead of an excerpt in blogger.
  1. Click on Save template.

It will show full posts instead of limited content on your blogger blog.

#5 Open Blogger Comments Links in New Tab

Commenting on any website is the best way for building backlinks, spamming the links and sniffing out the rank juice. But now almost all webmasters and bloggers are aware of these black hat SEO. They have a rel=”nofollow” attribute for all external links that makes it a little tough for anyone to spam out.

But here, one more step needs to be taken; forcing blogs to open all blog comment links in new window. Hence, So learn how to automatically open blogger comment links in new tab.

The requirement can be achieved by adding a simple HTML code <base target=’_blank’/> right above your </head> section. But keep in mind that it will open all links in the new tab on your website.

Just follow simple instructions to open all blogger comment links in new tab.

  • Login to Blogger => Select your blog.
  • Click on Template => Edit HTML.
  • Search for </body> by pressing Ctrl + F button.
  • Now copy the script and paste it just before/above the searched tag.
<script src=''/>
<script type='text/javascript'> jQuery (document). ready (function ($){$ ('. comments. comments-content. user a'). click (function (){window. open (this.href);return false;});});</script>
  • Click on Save template and its done.

Important: Don’t add the above read line (jquery) to avoid any conflict if you already have it in your blog template.

Comment backlinks increase the little web traffic that’s why bloggers & site owners always include their site link while commenting.

However, it loses the blog visitors. So by letting your blog visitor go to commentator’s site by not leaving your site is a little smart blogging technique.

#6 How to Add Colorful Label Widget to Blogger Templates?

Bloggers love customization and they keep on Google to find the the latest blogger tutorials and Blogger customization tips & tricks. In order to turn their blogs into a pro blog.

Well, here I’m sharing another blogger gadget to add flat colorful cloud label widget in Blogspot.

  • Follow instructions below to add multi-color label widget on your blog.
  • Log in to Blogger => Go to Layout => Click on Add a Widget => Select Label Widget.
  • Select only 8 labels to display and if Label widget is already added to your blog, then skip this step.
  • Go to Template from blogger dashboard and click on Edit HTML.
  • Search for ]]></b:skin> and copy-paste below code just above/before the searched tag.
#Label1 ul li a:hover{color:#fff;text-decoration:none}
#Label1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding-top: 10px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#Label1 ul li:first-child:after,
#Label1 ul li:first-child + li:after,
#Label1 ul li:first-child + li + li:after,
#Label1 ul li:first-child + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#Label1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#Label1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#Label1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#Label1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#Label1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#Label1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#Label1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#Label1 ul li:first-child + li + li + li + li:after{content:"5"}
#Label1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#Label1 ul li:first-child + li + li + li:after{content:"4"}
#Label1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#Label1 ul li:first-child + li + li:after{content:"3"}
#Label1 ul li:first-child + li{background:#ff764c; width:90%}
#Label1 ul li:first-child + li:after{content:"2"}
#Label1 ul li:first-child{background:#ff4c54 ;width:90%}
#Label1 ul li:first-child:after{content:"1"}
#Label1 ul{margin:0;padding:0px 0;list-style-type:none}
#Label1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
  • Click on Save template button and its done.

Now go to your blogger website and see how this colorful label widget looks like. Hope you will like this Blogspot gadget to show beautiful Blogspot labels.

#7 How to Change Blogger Labels in Grey Style?

Want to know how to change default blogger labels design in grey style using the CSS code? You can also say it a blogger labels in grey bricks style.

The below blogger widget CSS code will change blogger labels or category in a simple grey box. This Blogspot label style adopted by many professional bloggers.

It looks very attractive, simple and beautiful. Each blogger category or label shows in grey border color and looks very clear to navigate.

Change BlogSpot Label Design in Grey Style

Follow these steps to convert default blogger labels or category into a grey style. Let’s go through it.

Go to Blogger Dashboard => then Layout tab and click on Add Gadget. Now add Labels gadget and Unchecked “Show Number Of Post Per Label” and click on Save button.

Click on Template tab and search ]]></b:skin>. Now copy below CSS code and paste it just above/before the ]]></b:skin>.

.list-label-widget-content ul{ list-style-type:none; padding-left:0px !important; display:inline-block !important;}.list-label-widget-content li { display:inline-block; }
.list-label-widget-content li a {color: #777;font: 9px verdana;text-transform: uppercase;transition: border-color .218s;background:#f4f4f4;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));display: inline-block;text-shadow: 0 1px 0#fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s;background:#f3f3f3;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));border: solid 1px#ccc;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;margin: 0 4px 4px 0;padding: 3px 5px;text-decoration: none;}.list-label-widget-content li a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2pxrgba(0,0,0,0.15);}

That’s all you had to do. Simply hit the Save button and it’s done.

#8 How to Change Mouse Pointer Cursor in Website?

While surfing the internet or another blog, you may have seen the changed mouse pointer on their web pages that make that website pretty cool.

If you also want to change your blog’s mouse pointer, then learn how to change mouse pointer cursor in blogger blog or any web page.

You don’t need to be a code-savvy guy. Just add a simple CSS code on any web page you want to change mouse pointer cursor. It will quickly transform the default mouse pointer to a new cursor pointer.

To change mouse pointer cursor, you need a .cur / .gif or a .png file that should be hosted somewhere on the internet like Google Drive, Dropbox or any other file hosting server.

You can find the best mouse cursors on free mouse pointer websites like Cursors-4u. If you want to show Windows PC mouse cursor, find these Windows mouse cursors from your computer’s C drive (C: WindowsCursors).

How to Change Mouse Cursor Pointer in Blogger

Follow these steps to change mouse pointer in Blogspot blogs.

  • Log in to Blogger => Go to Template => Click on Edit HTML.
  • Press Ctrl+F and search for </head> tag.
  • Copy the code and paste it just above/before the searched tag.
<style type='text/css'>body,a,a:hover{cursor:url(,progress}</style>

Above highlighted red color link is the URL of the mouse cursor. You can change the above-highlighted URL with your own mouse cursor URL.

Make sure the mouse pointer cursor image should be any of these – .cur / .gif  or .png formatted.

  • Now click on Save template.

Change Mouse Pointer in WordPress or HTML Website

You can use the above CSS code on any website. It is quite simple to change mouse pointer cursor.

Follow below instruction to add this code to a WordPress blog.

  • Login to your WordPress back-end.
  • Go to Appearance => Editor.
  • From the right side templates, click on Header (header.php).
  • Press Ctrl+F and find </head> tag.
  • Copy-paste above CSS just above the </head> tag.

For any other web platform like HTML website, use the above code just above/before the </head> tag.

#9 Social Networking 3D Buttons With Rotating Spin Effects

3D social media icons

Beautiful set of 3D social media icons that rotate 360 degrees when you place the mouse pointer over these social icons. And automatically spin back 360 degrees when the cursor is removed.

It’s a combination of CSS and HTML code. These 3D social icons include – RSS feeds, Email RSS, Facebook, Twitter, Google+, Pinterest and feeds count.

How to Add 3D Social Media icons in BlogSpot

Follow instructions to add these cool social networking site icons on your site.

  • Login to Blogger => Layout.
  • Click Add A Gadget, then add HTML /JavaScript.
  • Copy below 3d social media icons code and paste in HTML/JavaScript gadget.
  • Now Save the gadget and Drag & Drop this gadget where you want to appear these 3d social media icons.
#social a:hover {background-color: transparent;opacity:0.7;}
#social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
<center><div id="social">
<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon-->
<!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon-->
<!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon-->
<!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon-->
<!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src=""/></a> <!--End Google+ Icon-->
<!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon-->
<!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="" style="border:0" /></a><!--End Feed Count Button--> </center>

Add 3D Social Media Icons on WordPress Site

  1. Login to your WordPress admin area.
  2. Go to Appearance => Widgets.
  3. Now add a Text widget to the sidebar of your WordPress theme. Copy-paste the above code into the Text widget.

Important: Don’t forget to add your social profiles links with the highlighted green lines in the above social media code.

Note: At the time of replacing the green color lines with your social profiles links, you need to put the complete hyperlink like – or else some of the social site URL will not work.

#10 How to Add a Popup Alert Message box in Blogger?

Check out this simple popup alert message box that can display urgent notification instantly each time a visitor opens an article or land on your blog homepage.

Popup alert messages can be used for many purposes like giving an important message to the blog visitors, show urgent notification and other needs such as greeting message, important updates, etc.

It’s a smart way to pass-out the messages to the visitors.

How to Create JavaScript Popup Alert Message Box in BlogSpot

Following are the steps for creating JavaScript Alert(pop-up alerts) in Blogspot blogs. Check it out.

  • Log in to Blogger => Select your blog => Click on Layout.
  • Click on Add a Gadget => Select HTML/JavaScript gadget.
  • Copy below JavaScript code and paste it into the “Content” area of the gadget.
<SCRIPT Language="JavaScript">
alert("Your Message Here");
document.write('<IMG SRC=""/>');

Add your message in the place of “Your Message Here“.

Now save the gadget and its done. The above code will render popup alert message box on all pages.

Display Popup Message on Blogger Homepage Only

If you want to appear the JavaScript popup box only on blogger homepage of your site, use this code instead followed by the above instructions.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
alert(&quot;Welcome to Elkees Media. Enjoy the latest updates!!!&quot;);

Now visit your blog and see the popup alert message box in action. In case you want to learn how to embed PDF and other documents in the blogger blog post, check this post.

Hope you like the above blogger template designing tricks and tweaks. I have compiled this list of top 10 ways to customize Blogspot template to help new bloggers to make their blog more attractive, cool, awesome and professional. Share your blogging experience and blog designing stories through comments.

Lalit Sharma is a professional blogger at Elkees Media and writes blogs related to latest technology, culture, trends, etc. He is also founder & chairman of Elkees Technologies &

Continue Reading
Click to comment

Share your Views / Comments / Suggestions ✍


How to Register the Free Domain Name for Your Website w/ SiteGround Hosting



get domain name free

How to get domain name free for my website? Millions of search query trend on the search engines all the times. Across the world, more and more businesses rapidly going online through adapting the world wide web technology.

Individuals, entrepreneur and other companies who still haven’t put their businesses on the web, they now start believing the power of a website.

And now, they start looking for an affordable solution to leave their footprint on the internet through their professional website.

Hence, In order to help new bloggers, startups and recently started private companies building their website, I am sharing a quick tutorial so that they can easily build a website with ease because it is not quite easy for newbies to decide a good web hosting company.

Here, I am going to introduce a way by which anyone can get the domain name free for life with a high-quality hosting service at a very low cost.

Even a non-technical person can start a website or/and blog with his/her own efforts; without hiring a web designing company.

Register domain name free is being very popular these days.

Similarly, thousands of queries for free domain registration and cheap web hosting and domain searches every day on search engines like Google, Bing, Yahoo, and DuckDuckGo.

Although, with each web hosting plan, you can register a free domain name with a most popular and high-level domain extension-COM, NET, ORG, BIZ, INFO, NL, US

Earlier, I have shared how to get free .net domain name with web hosting in India – free website promotion on Google.

However, today in this post, you will learn how to get a free domain name for life.

What is Free Domain Name Registration?

Although, getting the free domain name is just a keyword whereas, it defines so much itself.

To get a free domain name, you don’t need to pay anything for domain names.

While it costs up to $15 for 1 year when you buy domain name online and even more at the domain name renewal time.


I am not kidding. 🙂

These domain names are sold by domain registrars like GoDaddy & BigRock.

Domain registrar is a company that manages the registration of internet domain names under the registered license with Internet Corporation for Assigned Names and Numbers (ICANN).

ICANN is a nonprofit organization based in Playa Vista, Los Angeles, California, United States.

It’s responsible for coordinating the procedures and maintenance of various databases related to the namespaces of the internet.

The company also serves as an arbiter setting disputes between registrars and customers.

Recommended for you: Things to Consider When Choosing a Best Web Hosting Provider.

Generally, a top-level domain such as .COM or .NET costs $10 to $15 USD (Rs 600 – Rs 1000 INR) per year.

The domain registration prices vary from registrar company to company.

Many companies provide domain coupons to attract new clients and absorb some of the actual costs & ICANN fee involve purchasing domains.

Once you buy a domain name, it’s not a permanent purchase and only valid for the limited time.

And, when it reaches the expiration time, you will need to renew it.

Yeah! that’s true. 🙁

If you fail to renew your domain before it expires or during the grace period, you will lose it.

Any other user can opt your domain and as a result, you can’t buy it again until the current user releases it.

Get Domain Name Free for Life

Want to know how to get a domain name for free?

Of course, you want…

That’s why you are reading this post.

Free domain name booking is officially providing by SiteGround, a web hosting company.

SiteGround lets users register a free domain name for life. You don’t need to pay even a single penny to buy domain names while hosting is chargeable.

SiteGround is a popular web host offers this great deal to get the domain name free with its hosting plans.

The company is providing web hosting at the most reasonable rates of the regular price.

If you buy hosting through this article, you will also get a decent discount of flat 60% on each hosting purchase.

We highly recommend SiteGround hosting because of its powerful features like 1-click WordPress install, free domain registration for life, mobile-friendly WordPress themes & installation support, free site migration from, free website transfer from other web hosts, 99.9% server uptime and 24/7 quality customer support.

Steps to learn how to sign up for SiteGround to get domain name free.

Before you move on the procedure. First, you will have to consider a few things before choosing a domain name for the website and check domain name availability.

Once you decide a good domain name for your site, go through the instructions below:

#1 Choose Right Hosting Plan

Visit and choose a hosting plan for which you want to get the free domain name.

register domain name free

The image has taken from SiteGround for illustration purpose only.

SiteGround offers three different hosting plans – StartUp, GrowBig and GoGeek. Select a plan according to your hosting requirements.

  • StartUp plan is perfect for individuals and new bloggers. If you’re planning to create one website, it can be a perfect choice.
  • GrowBig plan is the most popular plan for medium-class businesses and web developers. This package allows hosting multiple sites on a single hosting account. It is also a perfect hosting plan for pro bloggers.
  • GoGreek plan is the best choice for sites getting high traffic & visitors as it can handle up to 100,000 monthly visitors.

After analyses, the plans as per your choice and come up with a final decision.

Finally, click on the GET STARTED button.

#2 Choose Domain Name

On the next page, here you have to choose a domain name.

Choose whether you want to register a new domain or will use your existing domain.

Type a domain name => choose a domain extension and click on PROCEED.

You can only get domain name free for life with extensions – .COM, .NET, .ORG, .BIZ, .INFO, .NL, .US

You may also like our most recommends SEO tools and hosting brands.

Next, you will get a message – Congratulations! Domain is available for FREE registration with your hosting account if domain typed by you is available to buy.

If the domain is not available or already taken by someone, you will have to search for another one.

On the Secure Sign Up for Web Hosting page, here you have to provide all accurate information.

#3 Review & Complete Your Order

Once you select the plan and domain name, furthermore, on the very next web page.

You will have to provide your contact information along with the payment & purchase information.

register free domain siteground

The image has taken from SiteGround for illustration purpose only.

3.1) Client Information

Enter your personal details like Country, Name, Company, Email ID, City, Street Address, Zip Code and Phone Number.

You need to provide these details in order to register your account.

3.2) Password Information

Type a password. You will use it to log in to your hosting account.

We suggest you choose a strong password with the combination of alphabets, special characters, and numbers.

And, your password should contain more than 8 characters.

Recommended for you: A definitive guide to building quality dofollow backlinks.

3.3) Payment Information

Here you have to provide the payment information.

Enter your Card Number, Expiration Date, Cardholder Name and CVV Code.

You must have a VISA or MasterCard powered Credit Card in order to complete the signup process.

3.4) Purchase Information

Verify your chosen Plan and select a Data Center (Location) from Chicago (USA), Amsterdam (NL), Singapore (SG) and London (UK). Also choose the hosting subscription Period from a 1-month trial, 12 months, 24 months or 36 months.

Selecting a higher hosting subscription term can save more money.

We recommend going with 36 months hosting period. It’s because of the discounted price only applies to the first invoice.

Once the initial period is over, regular renewal rates will apply.

The company also provides some Extra Services like Domain Privacy and HackAlert Monitoring.

If you don’t want to increase the billing costs, you may definitely like to exclude them by unchecking the boxes for additional services.

Make sure the information you provided is 100% correct to the best of your knowledge because it will use to verify your account details.

Finally, click on the PAY NOW button if everything seems okay. There is nothing to think twice. Hurry Now! Limited Time Offer!

Recommended for you: Bluehost Review w/ Discount Coupon & Free Domain Name.

It’s all you were needed to do to get a domain name free.

Finally, SiteGround will send you a confirmation email with your hosting account login details.

If you’re looking for any further technical support, go to the SiteGround support page.

They are available 24/7 for happy customer support.

Having any query related to this post on how to register a free domain name? Ask your questions via comments.

Note: The free domain names registration offer is valid for particular TLDs only. You can only take advantage of this deal if you request the domain name registration at the time of ordering a hosting account.

Get domain name free for life is not available for customers and resellers using hosting coupons with more than 80% discount.

Continue Reading


Ways to Recover the Deleted Blog Post on Blogspot



recover deleted blog post

Reached here from Google or any other search engine to find how to recover deleted blog post instantly? Well, you’ve come to the right place. By the end of this post, you would just say.

Yeah! I got my lost blogger posts 🙂

If you’re a professional blogger and work day and night to write quality blog posts, there may be a time in your blogging journey when you suddenly lost or accidentally deleted your blog post.

Rather, that’s the time when you feel very sad 🙁

Because it takes a lot of hard work and hours of continuous working to write SEO friendly blog post. So today in this post, I will show you how to recover deleted blog post if you randomly deleted one.

Well, it’s not important how many quality blog posts you publish every day to claim the #1 search engine position. But it is all about how many quality contents your website/blog has. Content writers & pro bloggers spend several hours online to post the quality content. And of course, they will never want to waste their hours of hard work.

Either you or someone who has access to your blogger account may have deleted your blog posts accidentally.

Currently, blogger interface doesn’t have a feature that allows users to recover deleted blog post. BlogSpot doesn’t have any trash folder to retrieve deleted the blog post yet.

Likewise, deleted blogger posts recovery officially is not available but here I will show you the ways to recover deleted blogger blog post and pages easily.

Easy Methods to Recover Deleted Blogger Blog Post

Here are 4 working methods that can help you to recover delete blog post and pages. Use the Google Page Cache, Blogger Draft Post, Google FeedBurner and Way Back Machine – Web Archive to recover a post.

These are several possible ways to recover deleted blog posts and undo the action but only if you are lucky enough.

Also see: How to embed PDF or any doc in the blogger blog post.

At least you should give the following ways a try. Let’s see how to restore deleted blogger blog post.

#1 Recover Deleted Blog Post with Google Cache

Whenever a webmaster publishes an article, Google automatically indexes and saves those pages as cache version. And, keeps update it whenever any changes made to that web pages.

Technically, this process called the search engine crawler system.

Maybe, your deleted blog posts should have crawled and indexed by the Google search engine to perform a deleted blogger post recovery.

How long does Google take to index a new page?

It depends upon the search engines crawl rate for a blog and which is something depends on robots.txt file.

If a blog gets many fresh contents on daily basis, there are high chances for a higher crawler rate.

And, newly published posts usually crawls and indexes within an hour or even in a couple of minutes. However, if you don’t release new articles daily, the crawl rate may be slower.

Find the Google Cache Version of Deleted Blog Posts

To recover deleted blog post from Google cache, you will be needed to find the webcache URL.

  1. Go to and type + deleted post title. If you know the post URL of the deleted post, then just type cache:DeletedBlogPostURL in the browser address bar to immediately view the cached version.
  2. For the search query of + deleted post title, Google will show the all possible indexed pages. Identify the deleted blog post from the list.
  3. Hit the tiny drop-down arrow button available in the right-side of the permalink and click on Cached to load the page in Google user content web cache.

    recover deleted blog post

    Using Google Cache to Recover deleted blog post.

  4. That’s It! If you found the erased blog post, that’s great. Copy the entire post content & images in Microsoft Office Word for future use. Follow the steps below to publish the cache version of the deleted blog post.

Publish the Cache Version of Deleted Blog Post

Using the above steps, you can simply copy and republish the post from Google cache. But practicing this rule, you can’t get your blog traffic and comments back to the stats you were receiving in the past.

To get back the search engine organic traffic and comments from the original blog post. Here’s the way-

You’ll be needed to restore deleted blog post with the same permalink it was earlier at blog deletion time.

Now it’s time to restore the deleted articles.

  1. Look inside the page-source using Ctrl+U or hit right-click and select View page source at cache version of the post.
  2. Once you enter to the page source window, press ctrl+f to find postID (looks like postID=4950781825632545210) and note it down.
  3. Login to blogger dashboard of the blog post you want to recover.
  4. Open new blog post and click edit to launch post visual editor.
  5. Find PostID in the browser address bar and replace it with the deleted postID you’ve noted in step 2.

    recover deleted blogger blog post

    Replace the highlighted PostID=59638357xxxx with your deleted Post ID.

  6. Hit Enter key and the post editor will show you the deleted post content in it.
  7. Finally, click the Publish button to recover deleted blog post and make it re-appear live on the internet.

You will certainly recover deleted blog post if you follow the entire steps carefully.

If the above method doesn’t work for you, you can try another method below.

#2 Recover Deleted Blog Post – Unpublished & Draft Post

This method lets you recover deleted blog post with the help of browsing history. But only if you have not cleared your internet browser history yet.

In order to recover deleted draft post, the following steps will be helpful.

  1. After deleting the post falsely, Press Ctrl+H or Shift+Ctrl+H to view your browser history.
  2. You will find your recent browsing activities. Now find your drafted blog post or edited post.
  3. Once you find the post, just open that post. It will bring all the post content and images back but you can’t publish or save it to draft. It will show you an error message if you perform this action.

To recover deleted blog post, you can copy the all content and images from HTML editor and use that to create & publish a new blog post.

#3 Restore Removed Blog Post with FeedBurner

If you’re using Google FeedBurner to reach the maximum audience, you can use it to retrieve the blog post.

Whenever a blogger post is published, the feed burner associated with it automatically creates another version of the blog post.

To recover deleted blog post, just visit the feed address of your blog.

Here you will find all the listed blog feeds with all post contents.

Note: This method will not work if you set your blogger feed settings to Allow blog feed to Short and Until Jump Break. With this settings, it makes impossible to recover deleted blog post and page.

#4 How to Recover Deleted Blog Posts from Way Back Machine – Web Archive

None of the above methods worked for you recovering your blog post?

No Problem!

You may still try your luck and this is the last way.

Search the delete posts on the Way Back Machine – A Web Archive directory. It’s a digital library that stores all internet files permanently. Visit and enter the removed post URL into the search field and click browse history. This archive website also has a ton of legal movies, books, and music, check out the list of 20 free movie download sites, legally.

You can give it a try to retrieve the deleted web pages.

Alternatively, you can use CachedView to view cached files of any web page on the Internet through multiple cached sources like Google Web Cache, Coral Web Cache, Cache & Live Version.

Hope this post will be proven helpful for you to recover deleted blog post and pages on BlogSpot. Share your stories how you recovered your deleted blog posts. Do comments!

Continue Reading


Add Source Link (Copyright Credit) Automatically to the Copied Text from your Website



copyright notice copied text

Content plagiarism has become a major problem for every webmaster & blogger. They try to rank and earn money with the copied text or complete post.

Content writers and authors work day & night to generate quality content for their website readers, blog subscribers. And of course, also for the Google Panda algorithm for a good user experience.

But some people try to take the shortcuts and want to become a successful blogger without doing any hard work.

They steal others copyrighted materials and publish that on their own sites, books, and magazines without giving any credit and backlink to the original author or/and page source.

Well, to fighting content theft, here I am going to show you that how to automatically append Attribution Link of source page or add Copyright Notice just below the copied text whenever somebody copies text from your websites or blogs.

Copied text and other materials from a website don’t help the plagiarism in gaining PageRank, visitors & readers, however, on the other hand, their sites might be penalized by Google algorithm updates for content theft and content duplicacy.

Technically, when someone uses copyrighted text, images, etc from any site, they should provide credit links to the source website.

However most of the people just ignore this and they get punished for deliberate plagiarism act by Google, Bing, Yahoo and other search engines.

Also see: Reveal Asterisk Password using the JavaScript.

You can’t stop anyone from copying content from your websites. I know it really feels bad 🙁

But you can use a professional content protector plugin like Smart Content Protector.

Pro WP Copy Protection by Envato Market sites.

About Smart Content Protector Plugin

Smart content protector is the WordPress plugin to protect your copyright contents – text and images. To avoid plagiarism, make sure the text and picture are not copying by anyone from your website.

Smart Content Protector

This is one of the best WordPress plugins to fight with content thefts and has numbers of key features like it disables keyboard shortcuts for Copy (Ctrl+C), Cut (Ctrl+X), Paste (Ctrl+V), Select All (Ctrl+A), Save as (Ctrl+S), Print Screen shortcut keys & Mouse Right Click.

Smart Content protector also disables image dragging and dropping, hence it protects link contains image extension. It supports popular operating systems – Windows, Linux, MAC OS X and internet browsers – Firefox, Chrome, Opera Mini, Internet Explorer.

Some other features of this WP plugin.

  • Automatic Image Watermark and append Copyright disclaimer to the copied text.
  • Advanced Image Protection via Responsive Lightbox.
  • Content protection based on User Level (Guests & Members) and Site Level.
  • Warning alert message options for the print screen (PrtSc, Alt+PrtScn & CTRL+PrtScn) and mouse right click.

Smart content protector plugin is the all-in-one solution for fighting Plagiarism. And it’s strongly recommended by many SEO experts and webmasters.

If you can’t afford the above premium plugin to protect your posts and pages from being the copy by someone, you can try free WordPress plugin such as WP-Copy Protect & WP Content Copy Protection & No Right Click.

Well, let’s come back to the topic of how to add attribution link or copyright notice to the copied text.

Above I have shared the best plugin to protect your text and images on your WordPress websites.

How to Append Source Link & Add Copyright Notice to the Copied Text?

While working on your online projects, you might have noticed that whenever you need to copy some of a headline or sentence from a website, a link of the source page gets automatically generated and copied to the clipboard.

And, when you paste the copied text, the original source link also gets paste along with the copied content.

There are many premium WordPress themes available that supports this feature.

However, if you’re website theme doesn’t have this feature, you probably want to know how to add a source link to the copied text automatically when someone copies text from your website and blog.

Here is how to add attribution link with a copyright symbol and copyright custom message using a JavaScript code. Let’s see how does this JavaScript works to append attribution link or/and add custom copyright message to the copied text.

I don’t know who is the developer of this JavaScript code.

However, I have copied this awesome script from

But seems, the script is the work of author: c.bavota and this JS is also mentioned in a post on StackOverflow.

<script type="text/javascript">
function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    var pagelink = "<br /><br /> Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br />Copyright &copy; c.bavota"; // change this if you want
    var copytext = selection + pagelink;
    var newdiv = document.createElement('div');'absolute';'-99999px';
    newdiv.innerHTML = copytext;
    window.setTimeout(function() {
document.oncopy = addLink;

The above JavaScript code works well in most internet browsers.

However, we are sorry for Internet Explorer users having IE below version 9. But works for IE 9 & above and Microsoft Edge.

How to Add JavaScript to WordPress or HTML Website?

Well, it’s pretty simple.

Just copy the above code and make appropriate changes according to your needs.

And, once you modified the code, just paste it into the footer template of your WordPress site.

Login to your WP Dashboard => Go to Appearance => Editor. Select the theme to edit => Click on Theme Footer (footer.php) and paste the copied JavaScript code just before the </body> and hit Update File.

If your WordPress theme has Theme Panel Options, you can also add this code to the custom code section. But only when this option is available in your theme.

For other platforms like HTML websites, edit the footer page via login through your FTP details.

For more information on how to add Copyright Notice to copied text, get in touch with your web designer or website designing company.

The best benefits of this JavaScript is; it helps bloggers to generate free high PR backlinks.

Whenever a content scraper copies your posts, this script will create source page backlink below the copied text.

But beware of such low-quality backlinks from new blogs.

Hope this tutorial to automatically append source link or add a copyright notice to the copied text is helping you.

If you’re facing any technical issue while implementing this JavaScript code on your website, you can ask us via comments.

Continue Reading