Connect with us

BlogSpot

10 BlogSpot Layout Customizations for a Attractive & Pro Blog

Published

on

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

As a new blogger, 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, backup 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 a 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 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.
 <style>
 #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('https://lh5.googleusercontent.com/-VcJYqlKOTp8/UfNG4476czI/AAAAAAAABE0/fHz5wMzQ75M/s1600/ElkeesMedia.png') 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;}
 </style>
 <ul id="ElkeesMedia">
 <!-- RSS Start -->
 <li><a target="_blank" href="http://feeds.feedburner.com/elkeesmedia" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li>
 <!-- RSS End -->
 <!-- Google+ Start -->
 <li><a target="_blank" href="https://plus.google.com/113836155041422970884" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span></li>
 <!-- Google+ End -->
 <!-- Facebook Start -->
 <li><a target="_blank" href="http://www.facebook.com/elkeesmedia" class="icon facebook">Like us on Facebook</a><span>Like us on Facebook</span> </li>
 <!-- Facebook End -->
 <!-- Twitter Start -->
 <li><a target="_blank" href="https://twitter.com/elkeesmedia" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li>
 <!-- Twitter End -->
 <!-- YouTube Start -->
 <li><a target="_blank" href="http://www.youtube.com/elkeesmedia" class="icon ytube">Follow us on YouTube</a><span>Follow us on YouTube</span> </li>
 <!-- YouTube End -->
 <!-- Pinterest Start -->
 <li><a target="_blank" href="http://www.pinterest.com/elkeesmedia" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li>
 <!-- Pinterest End -->
 <!-- LinkedIn Start -->
 <li><a target="_blank" href="http://www.linkedin.com/elkeesmedia" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li>
 <!-- LinkedIn End -->
 </ul>
  • 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 default commenting system.

Also see: Add Star Ratings to your Blogger Blog Posts.

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 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 schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<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>
</b:if>        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<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>
</b:if>        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>
  • Replace the above-searched code with the below code. It will show full posts instead of an excerpt in blogger.
<data:post.body/>

4. 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 little tough for anyone to spam out.

You may also like: Remove Subscribe to: Posts (Atom), Newer, Home, Older Posts Links from Blogger.

But here, one more step needs to be taken; forcing blogs to open all blog comment links in new window. 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='https://code.jquery.com/jquery-latest.js'/>
<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 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.

Recommended for you: How to Embed PDF, Word Doc, Xcel XLS & PPT Files in Blogger Post?

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(http://ani.cursors-4u.net/cursors/images12/cur1103.gif),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.
<style>
#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); }
</style>
<center><div id="social">
<!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" 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="https://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" 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="https://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" 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="https://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" 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="https://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png"/></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="https://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon-->
</div><br/>
<!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="https://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" 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 – http://www.facebook.com/elkeesmedia 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.

You may like: Publish Blog Post Directly from Word to Blogger.

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=""/>');
</SCRIPT>

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;);
</script>
</b:if>

Now visit your blog and see the popup alert message box in action.

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 & ElkeesDeals.com

Continue Reading
Click to comment

Share your Views / Comments / Suggestions ✍

Trending