A lot of people have been asking about how I customize my blogspot blog to make it more attractive, beautiful, stylish and professional. As a newbie blogger, I had also started my first blog on Google blogger platform, later on switched to WordPress blog with dedicated web hosting plan and branded domain name registration. Almost all new bloggers, starts blog with blogspot blogging free service and they always want to make their sub-domain based blog more attractive and beautiful via customizing the blogger layouts. So to help those new blogger, here in this blogger guide for beginners, I will show you 10 blogspot layout customization to turn your blogger blog into a pro blog.

Blogspot layout customization in a right way always do well in attracting new subscribers, however content is kind and they are also important in your blog success.

After reading this post, 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 new window, customize blogger labels widget and much more.

Before you begin, backup a copy of your blog template is recommended

Make sure to make a complete backup of your existing 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..

BlogSpot Layout Customization to Make Your Blogger Blog More Stylish and Professional

BlogSpot is the first choice of every newbie. BlogSpot blogging also know as Google blogger. And, there are a lot of bloggers who still use this free blogging platform for blog.

While posting great contents for your readers, blogspot layout customization is always required to get your blog out of the box.

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

#1 Add Beautiful Social Hover Expanding Widget on Blogger Blogs

Blogger has many in-build features and widgets, since it’s free but there are huge limitation of BlogSpot 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.

Social Hover Expanding Widget

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

How to Add Social Media Button on 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 effect your blog page loading time. This hover social widget 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 into your blog.

  • 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/JavaSript 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 a attractive social button on your blog. Try this blogspot layout customization 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 that will help you to show different background colors in blogger blogs in every minutes automatically.

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

Give a fresh look to your blog visitors every time they visit you site by showing them cool background colours. 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 your blog and colors are randomly selected as background colors. So if you want to add this background color change javascript on your blogger site, follow the steps below.

Change Background Color in BlogSpot

BlogSpot layout customization 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 below 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!! Thats all done. Now every visitor on your blogs, can see the animated background color patterns.

Now Save the changes and refresh your blog. If the blogspot layout customization doesn’t work, try visiting your blog after cleaning cache and cookies.

#3 Add Numbers in Blogger Comments Using CSS

Learn how to number comments on blogger with CSS. After many features and cool services of blogger, blogspot still lacks of some blogspot layout customization like default commenting system.

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

Thanks to pro-bloggers and blog designers as they keep on creating great CSS, JavaScript, JQuery and other blogspot layout customization to make 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 below 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}
  • That’s all done. 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 are you reading.

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

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

To show full posts or remove read more link / excerpt from your blogger template, you will have to add a simple HTML code into your blogger XML file, it will show full posts on homepage.

  • Log in 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 excerpt in blogger.
<data:post.body/>

4. Click on Save template.

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

#5 Open Blogger Comments Links in New Tab

Commenting on any website is the best place for building backlings, spamming your links and sniffing out the rank juice, but now almost all webmasters and bloggers are aware about these spamming things and 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 that is forcing blog to open all blog comment links in new window. So here you’re going to learn how to automatically open blogger comment links in new tab.

The requirement can be achieve 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 new tab on your website.

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

  • Log in to Blogger => Select your blog.
  • Click on Template => Edit HTML.
  • Search for </body> by pressing Ctrl + F button.
  • Now copy below script and paste it just before/above the searched tag.
<script src='http://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 on your blog template.

Comment backlinks increase the little web traffic of commentator that’s why bloggers & site owners always include their site link while commenting. But it looses the blog visitors, so by letting your blog visitor to go on commentator’s site by not leaving you site tool can be a little smart blogging technique.

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

Bloggers love customization and they keep on Google to find latest blogger tutorials and blogspot layout customization tips & tricks so that they can make their blog more and more beautiful and attractive.

Well, here I’m sharing another blogger tutorial on how 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 on 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 layout customization by showing 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. It will change blogger labels or category in simple grey box with easy CSS style coding. This blogspot label style adopted by many professional blogger.

It’s look 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 on the internet or other blog tutorials, you may have seen the changed mouse pointer on their web pages that makes 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 webpage you want to change mouse pointer cursor. It will quickly transform the default mouse pointer with 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, you can also 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 below 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 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 web script. It is so simple to change mouse pointer cursor. Well, follow below instruction to add this code in a WordPress blog.

  • Log in 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, add 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 includes – RSS feeds, Email RSS, Facebook, Twitter, Google+, Pinterest and feeds count.

How to Add 3D Social Media icons in BlogSpot

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

  • Log in to Blogger => Go to 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="http://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="http://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="http://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="http://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="http://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="http://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="http://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 in WordPress Site

  1. Log in to your WordPress admin area.
  2. Go to Appearance => Widgets.
  3. Now add a Text widget to the sidebar of your WordPress theme and 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 icons CSS 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, whenever 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 purpose 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 create 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 on 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 the below code 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 to 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 blogspot layout customization to help new bloggers to make their blog more attractive, cool, awesome and professional. Share your blogging experience and blog designing stories via comment below.

Share your Views / Comments / Suggestions ✍