Create loading bar design like Gmails loading bar

The famous and eye pleasing design of Google has took over and the designs of Google is getting better and better, recently Google made changes to it's Gmails homepage and the loading page and the most amazing design was of the loading bar, the blue loading bar with moving image in it makes it look more professional, now let's see how to make it. 

Remember that i am only going to show how to make such design with CSS, the rest of the JavaScript coding should be done by you or someone else, i am just showing how to design it.

There's two parts to make this design, the first is a </div> element and the other is CSS style which is required to make the design. The CSS codes can be customized but only play with it of you have knowledge about it. 

First of all create a div element, class attribute's value should be same on both HTML div element and CSS styles. 

<div class='loading-bar'></div>

So this is the HTML for the loading bar, if you are sure how to use it dynamically to sync with a loading event then you might just add the CSS by classing it. Your HTML may differ as on your needs but CSS should match the class name.     


Now the most important part of the tutorial to make it really work, you are allowed to modify the CSS if you are sure about what you are doing or might just leave it. But to create a bar like exactly you want, you have to make changes, so i will tell what changes can you make in the CSS.

.myname
{
color: white;
border: 1px solid gainsboro;
border: 1px solid rgba(0, 0, 0, 0.1);
text-transform:uppercase;
padding:10px;
width:600px;
text-align:center;
text-shadow:1px 1px white;
font-size:18px;
cursor:pointer;
-webkit-transition:all 0.8s;
-ms-transition:all 0.8s;
-moz-transition:all 0.8s;
-o-transition:all 0.8s;
transition:all 0.8s;
height: 100%;
background-color: #6188F5;
background-repeat: repeat-x;
background-position: 8px 0px;
background-size: 40px 20px;
background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent);
-webkit-animation: pb 0.8s linear 0 infinite;
-ms-animation: pb 0.8s linear 0 infinite;
-o-animation: pb 0.8s linear 0 infinite;
-moz-animation: pb 0.8s linear 0 infinite;
}

@-webkit-keyframes pb { 0% { background-position:8px 0px; } 100% { background-position:120px 0; } }
@-ms-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }
@-moz-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }
@-o-keyframes pb { 0% { background-position:10px 0px; } 100% { background-position:-100px 0; } }

This is the CSS that will be needed to design the Bar like this from a basic div element, but it's important to change background-position property if you are going to change the width and height of the element. 

So for your ease we have updated this on JSFiddle , just find it on the Demo Link, play with the CSS code there and if you find something better then please comment. 

DemoPlay with it

Print your blog to a Book

Most people blog about their daily life, babies, marriage photos and more other things that they want as a memory, these types of Blogs are just like a diary that's everyone to read, but reading it online and on a book is a huge difference. Even internet is a modern tool for modern generation but people yet love Books more. 

Whatever your blog for but printing it as a book is great, you can share your memories with your children and their children, with books and anyone would love to print their blog as a book.

Blog2Print is a great tool/service for Printing a Blog as Book, it's affordable and very easy to use. Enter your blog address in the the input area and start with the first step to Print your BlogBook 

Click on Print My Blog button to get started, now it will open a page where you have to make all required settings to print your blog to a Book, you can set your own photo on cover and backcover pages and Continue.

The price is affordable, if we compare the printing quality we will find the prices very low, the price is $14.95 for 20 Pages book and extra pages are 35 cents. Who don't want to get their blog into a book, you will have all your memories in your book and you can show it to anyone, anytime.

Hope you liked this post, do share and comments. And if you want regular updates then please subscribe to the blog.
   

ww4(dot)strongdxgsoft(dot)com Another referrer spam site: Beware !

These days referrer spams are coming up in a huge number, we are strictly against it and want it to be down, but not even Google can do anything about it, but writing has the power to anything, so here's my another post about Referrer spam. Here i am experiencing it myself, so i really really want to write about this. 
One of my post in past was found very helpful for users regarding Referrer spam, ww4(dot)savegco-anitvir(dot)com was a headache to everyone who saw the site in their referrer sites in stats, and innocent people clicked on the link to see where they are getting visitors from but they found nothing there and was attacked by a virus or Malware. But some people were all fine because they didn't clicked on the link. 


The main points of these referrer spam sites are to get a place in your stats so that you would click on their link with curiosity. These referrer spam sites don't refer any visitors in real, it's just their own computer system increasing your pageviews to get a place in your stats so that you will click it, never click these links, it might be dangerous. 


You would be thinking why i wrote another post when i already written it in past, although i was not getting any pageviews from a referrer spam sites, but today a new referrer spam site ww4(dot)strongdxgsoft(dot)com started to show in my stats ! Ok, i didn't clicked on the link but yet i am worried as it's not good to see them in stats, so now beware of ww4(dot)strongdxgsoft(dot)com. 

Please beware of this new site of the referrer spam site kind, no one wants to be affected by these spams, from our last post, hundreds of people were saved by these referrer spam sites. There are yet many sites that are unknown but dangerous.  

Here's a list of referrer spam domains that we know 

1. www4(dot)savegco-antivir(dot)com/
2. www4(dot)safe-vochecker(dot)com/
3. hoodiastock(dot)com/
4. domar(dot)ru/ 
5. ww4(dot)strongdxgsoft(dot)com

See the full list at here 

As we can't list all the referrer spam sites, doesn't mean that sites that's not in our list is not a referrer spam, recognizing them is easy, they have very complicated links such as '?4u0i...  ' in the URL, you can check the photo, it can be recognized easily, but some don't have these. Only click on links that you know is ok to go on and you know the site is ok. But if you think you have nothing to do with the site in your stat's then just Google it, you will find resources that may help you.

Related Post  

1. Beware of referrer Spams
2. Posts on Blogging (Topic)
3. How to display different cursor for links in Gadgets of Dynamic views template Blogger
4. 10 Reasons to use Infolinks
5. White Mysterious blank box on your website ? Fix it

How to make thumbnail and post excerpts display on homepage

This post will show how how to make post thumbnail and post excerpts (summary) on homepage to give your visitors more detailed view about your post, the post excerpts here are more beautiful and well designed in CSS, and your visitors will fall in love with these compact and cool looking thumbnails + excerpts. 

Adding pagebreak to every post is little difficult, everytime you have to set a page break for post to show a summary of post contents on homepage. But if you want it to be done automatically then you have to a little bit of hard work here also. As this post is going to make you play with lots of codes, so i will keep my sentences short.  


There was a time when i also used the page break to only show the summary of my posts on the homepage, but as i learned more about coding and some other web languages, i was able to sort it out and make it easier to show the summary of posts on homepage without adding the page break, but i yet add page breaks because i can't figure out how to run my code on Archive pages and whenever someone access my Archive page, they see post summary that is selected by me with the pagebreak option in the Post Editor.

Let's start

*Before we start, Backup your Template, that if anything went wrong you will have the working Template in your Desktop

*I have only used steps that can be used in New Blogger Interface, so please switch to New Blogger Interface if you don't want to get confused.

This is only the start, I will show you what and where the codes you have to put. We will first start with the HTML that will be used to display post summary.  Remember, if you have already messed up your code without even knowing what you doing then this might not work for you. So only use this tutorial if you have a clean template that's never been tampered. 

Go to your Blogger Dashboard > Template tab > Edit HTML > Proceed >

Now check mark on Expand Widgets Template.Now find press CTRL+F to open a browser inbuilt search bar and search for this line

<data:post.body/>

Now replace the above code with this code

<b:if cond='data:blog.pageType != &quot;index&quot;'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

Now save your template and check your Homepage once, if you have some post showing on your homepage, then it will display the excerpts and the thumbnail, but there might also be some post which will not show thumbnail, because pictures smaller than 300*300 dimension don't display with this code. 

Adding CSS to style the thumbnail

We will have to style it with CSS to make it look more like mine on my blog's homepage.

By adding the HTML code, we can only achieve to show thumbnail and post summary, now we will do more with it. We will add styles to make it look more professional.

Add this CSS to your Template - Go to Blogger Dashboard > Template > Customize > Advanced > Add CSS > In the input area paste this CSS and hit Apply to blog. 

.Image  
{
background: none repeat scroll 0 0 white;
border: 1px solid #CCC;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0,0,0,0.15);
padding: 0px 0px 0px 0px;
float: right;
margin-left: 20px;
height: 72px !important;
-webkit-transition: background 1s;
}
.Image 
{
width: auto 9;
max-width: 100%;
height: auto;
}

Even now if you think it's not looking well, then you might check this post about how to remove existing shadow from pictures in Blogger 

Now refresh your blog homepage again to check if it's working or not. Check the below section if you want to do more with the thumbnail.

Link the thumbnail to the post

I have myself not used it but some people asked me how to do it and i asked them to wait for a post about it, so here it is. General Blogger users don't know about many of Blogger features, because it's not in GUI (graphical user interface) it's all in code and i love to work with these to experiment new things on Blogger.
How to make it work ? We just need to add some HTML code in the HTML code that we used first. Check this, we have just added an Anchor tag around the img tag to make that Image thumbnail a link to it's Blog post.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
               <a expr:href='data:post.url'>
                <img expr:src='data:post.thumbnailUrl'/>
               </a>        
              </div>
          </b:if>
            <data:post.snippet/>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>

Just add the tag and done, every thumbnail of all post will link to it's posts automatically adding this tag to the HTML.

Now Enjoy your fully customized post thumbnail and give your visitors a good and pleasant experience that they will like to visit your site again. Good design is important but content is king.

If you want more tutorials from us then you can subscribe us on Feed, follow on GoogleFriend connect etc. Check the right sidebar to subscribe to Email Newsletter.

Related Post 

• How to remove shadows from Pictures in Bloggers Template
• What Apple should change in their site
• Beware of ww4(dot)savegco.antivir(dot)com
• Blogger finaly shows Quick Edits on Country Specific Domains too !
• Access Edit HTML in Dynamic Views Template

How to remove shadows from Pictures in Bloggers Template

Some templates in Blogger such as 'Simple Template' have shadows around pictures, some might be ok with it, but some wants their picture to be without the shadow and pictures, so this tutorial is useful to those who want shadow to be removed.   

This can be done easily with CSS, you just have to copy and paste this add to your template.

Copy this CSS code

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Click to know how to add CSS - Go to your Blogger Dashboard > Template > Customize > Advanced > Add CSS > In the right text area, paste the CSS code you copied above. 
Hit on Apply to Blog and refresh your blog page to see effects. 

If you are not seeing any change then, try clearing your caches and then restart and browser and check yoru blog.  


Related Posts

• How to Backup your template 
• Check who +1 your blog post on Google+
• Show different cursor for links of Gadgets in Dynamic Views
• 10 Reasons to use Infolinks for you site
• Beware of ww4(dot)savegco.antivir(dot)com

What Apple should change in their site

A short post to give advice to Apple that what they should change in their website, i know the people there are more experienced than me, but it's just an advice that Apple would love reading.

Apple, the leading company in terms of Technology and Gadgets, is the best in every field, no doubt. The apples official site is well designed and looks great with all they have on their website. 
But one minus point of Apple's site is that it takes too much time to load as compared to other sites. Apple uses image in place of fonts to display a gradient type font,but if we use CSS3 in place of image we can get same result with less load time and that's the advantage of using fonts designed with CSS3.


Here you can see what Apple.com uses for font, this image which is 3.4kb in size, which currently Apple use for fonts in their site.

Now if Apple uses this as font on their site then the browser have to download a 3.4kb image, but if we are talking about CSS3 then it will only have to load up 100 Bytes text to create the same effect with the texts, as you can see below.

Resolutionary

Ok, it's not all same, but little more edits from Apple web masters and they can achieve it. Using it is more easy than making photos just for words. The CSS i used is this

div
{
font-family: 'Dosis', sans-serif;
font-size: 90px;
-webkit-background-clip:text;
background-image:-webkit-linear-gradient(top,gainsboro,grey,black) !important;  
color: white;
-webkit-text-fill-color: transparent;
}

The font-family just have to change, as i was not able to find the exact font like the Apple's font, and it's sure that page load speed will be improved.  


This was just a small suggestion from me to Apple about what they can change to make a better experience for the visitors. 

Sonicgang - A good website for kids

These days kids are seeing what they shouldn't, i mean they are yet to learn many things, but they waste their precious time online doing useless thing such as online chatting and etc. Which can endanger the future of a child. 

Finding good sites for a kid is quite difficult, because you aren't yet sure what the site is exactly and what information they ask the kid for, that's what puts you in tension. So what now ? Leave your kid to do whatever online ? No you can't compromise with this at all.

Sonic TV is a TV channel is totally safe for a kid to see and can enjoy it. It plays old and classic kids shows such as Are you Afraid of the Dark, Kung Fu Panda, Power Rangers and more shows from which any kids can learn something good, and that's what the most important, learning.

Shaktiman used to be the only show we watched on TV, nowadays even cartoons aren't safe for children as the shows uses inappropriate language that's not good a kid at all. Shaktiman, is a great show that's teach us to fight with the evil and save the truth and if your kid watch this they will understand and always take side of truth, these shows gives us moral teaching and it's very important for a kid to learn.

Contests

Contest is a good way to keep kids engaged with the site and learn more, there are many good competition on Sonicgang.com for kids and also teenage like me, because everyone likes to play competition and they giveaway iPads and other gadgets as awards. So it's safe for kids and the kids may use sonicgang.com to find kids with similar interest and interact with their whole new world on sonicgang.