Posts

Showing posts with the label HTML

How To Add Meta Description To Blogger ?

Image
So, what you are blogging about on your Blogger blog? Describing this in 150 characters is called Meta Description . Meta description is also displayed on search engines below your Blog link. Meta descriptions are invisible to visitor on your blog but are crawled by search engines. Meta descriptions play an important part in Search Engine Optimization( SEO ) of your Blogger blog. How To Add Meta Description To Blogger  The first thing you have to do is going to your Blogger dashboard and from there, go to Settings > Search  preferences > Meta Tags > Description and click on Edit Meta Description. The screenshot below defines how will it look: How To Add Meta Description To Individual Post On Blogger  Its as easy as you can do it in 5 seconds, Just go to Blogger dashboard then go to the post or page you  want to edit and click on the Search Description setting, and there you enter the text and save by clicking  the Done button. Now you are don...

What is Robots.txt file in terms of SEO

A robots.txt file determines which pages of your blog must be indexed and which should not be indexed. All  search engines use a web crawler robot to crawl and index your pages, with robots.txt file you can tell them which pages you want to index and which don't. According to Wikipedia - When a site owner wishes to give instructions to web robots they place a text file called robots.txt in the root of the web site hierarchy (e.g. https://www.example.com/robots.txt). This text file contains the instructions in a specific format. Robots that choose to follow the instructions try to fetch this file and read the instructions before fetching any other file from the web site. If this file doesn't exist, web robots assume that the web owner wishes to provide no specific instructions, and crawl the entire site. - http://en.wikipedia.org/wiki/Robots.txt The robots exclusion protocol (REP), or robots.txt is a text file webmasters create to instruct robots (typically search engi...

How To Change The Color Of Scrollbars Using CSS ?

Image
So you have made all of your template with two cool colors of your choice, added one of you favorite web font and now only one thing is annoying you that is your browser's scroll bar color. And the question arising up in your mind is how can i change the scrollbar color. Can i change the scrollbar color ? ... and the answer is yes you can, with newest CSS3 and -webkit- it is possible to change the scrollbar color,style and background. How can i change the scrollbar color ? 1. For chrome and safari you can change the scrollbar colors using - /* Chrome, Safari */ ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece  { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } 2.But I have found another solution to this with adding some styles to it - 1. Rounded corners : ::-webkit-scrollbar {width: 6px; height: 4px; background: #ffffff; } ::-webkit-scrollbar-thumb { bac...

Create Rounded (Circular) Images With CSS3 And HTML

Image
Playing with CSS and HTMl I found how to create circular images using CSS3.It is just awsome thing to make images circular without photoshoping them. You may use them for any purpose or just for fun. So let's do it in real time. 1. The image below is a normal image. 2. Now we will add HTMl and CSS HTML <div class="rounded"></div> CSS .rounded { width: 300px; height: 300px; border-radius: 200px; -webkit-border-radius: 200px; -moz-border-radius: 200px; background: url(http://link-to-your/image.png) no-repeat; } RESULT If you dont want the image as background and want to use image as img tag ypu can add these html and css. HTML <div class="rounded"></div><div class="circular"><img src="http://link-to-your/image.jpg" alt="" /></div> CSS .rounded{ width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: ...