Showing posts with label Basic. Show all posts
Showing posts with label Basic. Show all posts

Wednesday 11 December 2013

Take Screenshot In Windows Without Any Software

Today I'm sharing a very basic, but a very useful trick with you all. Most of us bloggers have a screenshot software on their devices, but they're just a waste of space as you can easily shot your screen with one click! Here's how to do it:


Press PrntScr key and Windows captures the entire screen and copies it to its clipboard. Now start “Paint” or any other software where you can paste an image. Hold CTRL and press V and Windows pastes the screenshot, which is in the clipboard, into your document. Now just save your image!

Tuesday 11 June 2013

How To Use PHP On Blogger

We love Blogger, probably because it's free and is a Google Product. In April, I posted an article about some reasons why we should choose Blogger as our blogging platform, as I never miss a chance to promote my old articles.

As I noted in that article, Blogger is not a really good choice for a php developer, as it only supports html, css and javascript. However, there is a possible way to use your php files on Blogger, which is quite easy.

First we need a php hosting to host our php files. There are tons of free sites for php hosting, here are some:
awardspace.com
zymic.com
000webhost.com
Click here for more...

So just create an account on one of these free php hosting sites, and upload your php files in it. Now it's type to put your php files into your blog by iframing it or by using this code:

<object data="http://your-file.php" height="500" type="text/html" width="600"></object>

Now just replace red text in above code with your php file's link and publish it or post it on your blog.

That's the only possible way to do this... :)

Friday 26 April 2013

Configure Windows Live Writer For Blogger


Windows Live Writer is a great WYSIWYG authoring software, and is currently compatible with Windows Live Spaces, SharePoint blogs, Blogger, LiveJournal, TypePad, WordPress, and all blogs that support RSD.

With WLW (Windows Live Writer), you can easily write and publish your posts to your blogs. WLW's post editor is very smooth, easy, and flexible to use. In this post, I'll teach you how to setup your Blogger hosted blog with WLW. It's easy, just follow these simple steps:

  • First visit this link and install Windows Live Writer on your device. It's fast and easy!
  • After installing, open Windows Live Writer, which may look something like this:


  • To configure your Blogger blog, click on "Other blog service" option on your Live Writer (As Image above), and click on Next.


  • On next window, put your blog's web address, your Blogger username, and password. You can also put your free Blogger blog address there. Click on Next.
  • After clicking on next, it'll take a bit time to configure your Blogger (Based on your connection). After loading, you'll see following confirmation screen:


  • Enter your blog's nickname, which is nothing more than your blog's name. Finally, click on Finish button and it's done!

Now, you'll see Windows Live Editor's post editor, and you can start posting now! Don't forget to leave your responses in the comment section below...

Saturday 13 April 2013

Easy Way To Create CSS Sprites



Idea of a sprite, a sprite is basically multiple graphics compiled into one image. It makes your website really fast. For example, CSS sprites compile an icon set into a single image, which saves a lot of space.

For newbies, it's really hard to create CSS sprite, so here is a service which makes it easy. Even professionals use this service to save their time, since photoshop takes much time to create sprites.

SpritePad is your free and easy-to-use web app for creating CSS spritemaps. With SpritePad you can create your CSS sprites within minutes seconds. Simply drag and drop your images and have them immediately available as one PNG sprite + CSS code.

You can visit SpritePad by clicking here.

Friday 5 April 2013

Picasa Storage Limits


All Google +, Picasa, and Blogger users uses Picasa as their primary image storage. Now we can upload virtually all photos to our accounts without going over the storage limits. Same stands for videos 15 minutes or under. Please keep in mind the following account limits:

  • Maximum photo size: Each image can be no larger than 20 megabytes and are restricted to 50 megapixels or less.
  • Maximum video size: Each video uploaded can be no larger than 1GB in size and 12 minutes in length.
  • Maximum number of web albums: 20,000
  • Maximum number of photos and videos per web album: 1,000
  • Total storage space: Picasa Web provides 1 GB for photos and videos. Files under certain sizes don't count towards this limit. If you're a Google+ user, photos up to 2048 x 2048 pixels won't eat up your storage space. For non-Google+ users, the photo size limit is smaller: 800 x 800 pixels.

Hope this information will help you in future.

Wednesday 13 March 2013

Styling Tables With CSS


Styling dinner tables in not so easy unlike HTML tables. Using CSS to style a table is easy, and greatly simplifies the markup. Seriously, for the first time it looks a bit hard, but it's just too easy. At times it seems that tables are a little misunderstood in modern web development. A have one suggestion for you, "don't use tables" "don't use tables for layout."

Anyways, Before we dive into the CSS, let’s consider the key structural elements of tables you will need to style clearly:

  • Table headings
  • Table data cells
Here is our basic HTML mark-up:

<table>
<tbody>

<tr>
<th>Name</th>
<th>Nickname</th>
<th>Finisher</th>
</tr>

<tr>
<td>John Cena</td>
<td>The Champ</td>
<td>Attitude Adjustment</td>
</tr>
<tr>
<td>CM Punk</td>
<td>Best In The World</td>
<td>Go To Sleep</td>
</tr>
<tr>
<td>The Undertaker</td>
<td>Dead Man</td>
<td>Tombstomb Piledriver</td>
</tr>
<tr>
<td>Shawn Michaels</td>
<td>HBK</td>
<td>Sweet Chin Music</td>
</tr>
<tr>
<td>Edge</td>
<td>Rated R Superstar</td>
<td>Spear</td>
</tr>

</tbody>
</table>

Without CSS, it will something like this:

Name Nickname Finisher
John Cena The Champ Attitude Adjustment
CM Punk Best In The World Go To Sleep
The Undertaker Dead Man Tombstomb Piledriver
Shawn Michaels HBK Sweet Chin Music
Edge Rated R Superstar Spear

The first decision is how wide to make the table. The browser default is the same as setting table { width: auto; }, which results in the table extending to the width of the content. Our tables are going to be 500px. Here is first design:

Name Nickname Finisher
John Cena The Champ Attitude Adjustment
CM Punk Best In The World Go To Sleep
The Undertaker Dead Man Tombstomb Piledriver
Shawn Michaels HBK Sweet Chin Music
Edge Rated R Superstar Spear

Above style is very simple and stylish. Our table has black background with 500px width, td has 5px padding, here is full CSS of above table:

table {
    background:black;
    width:500px;
}

td {
    padding:5px;
}

th {
    background:grey;
    color:white;
}

tr {
    background:whitesmoke;
}

It was simple... :) Now it's time for second style:

Name Nickname Finisher
John Cena The Champ Attitude Adjustment
CM Punk Best In The World Go To Sleep
The Undertaker Dead Man Tombstomb Piledriver
Shawn Michaels HBK Sweet Chin Music
Edge Rated R Superstar Spear

The simplest way to accomplish zebra stripes is to add a class to alternate table rows, then use a contextual CSS selector to style the cells in those rows. First, the classes "odd" and "even" are added to the table rows, like so:

  ...

<tr class="odd">

  ...

<tr class="even">

  ...
But wait, Beben Koben shared a great way (in comments) to style even/odd elements without changing our mark-up. We're going to use :nth-child(even) and :nth-child(odd) to style them:

Here is full CSS of this table:

table{
    width:500px;
    border:2px black solid;
}

td {
    padding:5px;
}

th {
    background:grey;
    color:white;
}

table tr:nth-child(even) {
    background-color: whitesmoke;
}

table tr:nth-child(odd) {
    background-color: lightgrey;
}

It's time for our final table, which is not created by me. It's from W3Schools. Here we go:

Name Nickname Finisher
John Cena The Champ Attitude Adjustment
CM Punk Best In The World Go To Sleep
The Undertaker Dead Man Tombstomb Piledriver
Shawn Michaels HBK Sweet Chin Music
Edge Rated R Superstar Spear
It looks awesome, isn't it? W3 Schools chose some great colors to create this table. Here is our CSS:

table{
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(195, 195, 195);
    border-collapse: collapse;
    width: 500px;
}

th {
    background-color: rgb(229, 238, 204);
    border: 1px solid rgb(195, 195, 195);
    padding: 3px;
    vertical-align: top;
    text-align: left;
    font: 14px/20px Arial,Verdana;
}

td {
    border: 1px solid rgb(195, 195, 195);
    padding: 3px;
    vertical-align: top;
}

That's it for this time...hope it was helpful :) And I just realized that thumbnail of this article is not featuring our second table (Fixed IT). Also, just wanted to inform you that I used WWE related names and all in table because I'm a huge fan.

Thursday 28 February 2013

10 Stylish CSS Blockquotes For Blogger


Blockquote element defines "a section [within a document] that is quoted from another source". Earlier today, I spent several hours to find and create these 10 stylish blockquotes. Some are created by me and rest are from bunch of sites. Demo and download of this project is available at this link.

How To Add Blockquote Styling On Your Blog:

Before I post styling, you should know how to replace these stylish blockquotes with your template's default one.

Go To Blogger > Template > Edit HTML > Search for following code:

.post blockquote

 or

.post-body blockquote
Now replace whole CSS with our custom styles, you can find them in next heading. Here is an example of your template's default blockquote:

.post blockquote {
 Some CSS HERE
}

10 Stylish Blockquotes:

Below are our 10 CSS blockquotes examples and their code, which is quoted in it:

.post blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid lightblue;
}

.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 5px solid #fce27c;
background-color: #f6ebc1;
}

.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 10px dotted white;
background-color: #f6ebc1;
}

.post blockquote {
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}

.post blockquote {
border: 2px solid rgb(255, 204, 0);
padding: 8px 10px;
font-size: 120%;
color: black;
font-weight: bold;
background-color: rgb(255, 255, 153);
border-radius:20px 20px 0 20px;
}

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
color : #484848;
border: 5px dotted #fff;
}

.post blockquote {
background-color: white; color: #845424;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_jnDnBoyZDiWmuYBXmkI2_KKm57rxsFD7H1NRVivHFhIw30uuj9gkzvht_ZJIzKNcX1CXw5RrrcqrE8YzePhkLKswF6UnhP9aJKjBgqFjyIHi-1A90LAHlpbWAsP4kQNqwbFLKMQo-do/s1600/Orange.gif);
background-position: 0% 10px;
background-repeat: no-repeat repeat;
border-width: 2px;
margin: 0px 20px;
min-height: 30px;
padding: 20px 20px 10px 45px;
vertical-align: baseline;
}

.post blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI_W6dLh-v_qgQPO2Xx_hhesEVf6mSv8FvTKJMEOWZEwTYjtddxuDlljJWzdoQmZAnNeYKpOx-WYMhLH8_UujrTdXldh8lnX9S4SzAmYCcYyX3fnldQhG3jKxk5xPkNFjRWBZfZf1Bfzg/s1600/green-black-side.gif) ;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}

.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxZ0tc4O01L8FHeBD7XO5CSG1-FIUgh9SCrszkweGWKCCkKy0B4ZIGsZysn0N9UhoU1A-Nl02_kWS6hS2zHntob85sPFBuBW-WOyGNpv8qPjEGCIbg8kyLhkeDzCZ6xLZxXLhGJYP8eR4/s1600/blockquote.png) no-repeat scroll 0px 0px transparent;
border: medium none;
margin: 5px 5px 50px;
padding: 25px 30px 5px 70px;
color: rgb(153, 153, 153);
font-style: italic;
}

.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3eAY10jiNGHiJ542LdD3eCpfZQdyVCWYyDcfKBNyhSWj5LxaHcOB0F3H4qP7mk785JV97m7Io0gwlKgWL_P0QdrvUYaYzAXYqdrboRYzZwkEhLYLdTXijb5x1AzBuTUQX5OFO3MxGI74/s1600/note.png) repeat-y scroll 0 0 transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-moz-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-ms-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-o-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
margin: 10px 13px;
padding: 21px 45px 14px;
line-height: 1.65em;
font-famliy:georgia,sarif;
font-size:13px;
}

Saturday 2 February 2013

Remove Attribution Widget From Blogger Mobile Template


In our last post, we discussed how to remove attribution widget from blogger. In this post, we'll discuss how to remove attribution widget from blogger mobile template.

In previous post, we showed you how to remove attribution widget from your blog but that widget can still be viewed by visiting your mobile template (If you're using). After searching on Google for hours i found nothing about this topic, so i invented my own way to do this.

In last trick, we removed this widget, now we'll hide'em. Without wasting any time, let's get started:

  • Go To Blogger > Template > Edit HTML > Proceed
  • Find and remove following code from your template:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

  • Find </body> in your template and just above it paste following code:

<div style='display:none;'>
<b:section class='hiddenbar' id='hiddenbar' preferred='no'>
<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>
</b:section>
</div>

  • Save your template, it's done.

Let me explain this, instead of removing attribution widget, we hid this widget with css. If you only add mobile='no' property in your attribution, instead of this code, it'll only remove this widget from your mobile template. If you're copying this tutorial, then don't forget to give us a backlink on your post. Also, don't forget to leave a comment.

Remove Attribution Widget From Blogger


Today I'll show you how to remove attribution (Powered by Blogger) widget from your blog. It's always hard for newbies to remove this widget but don't worry about that.

In this tutorial, you'll learn about removing locked widget from your blog, just like Attribution widget. Not much to explain, let's get started:

  • Go To Blogger > Template > Edit HTML > Proceed:
  • Find following code in your  template:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

  •  Now, just replace locked='true' in above code with locked='false'. Save your template.

Now your attribution widget in unlocked. If you want remove, then you can remove it from your layout section. In next post, i'll show you how to removing attribution widget from your mobile template.

Thursday 31 January 2013

Display Your Feed On A HTML Page


About every blogger now is using feedburner to publish their feed. By using feedburner, you can get realtime stats and subscriber count. You can even use a custom domain with feedburner. You can display your feedburner feed on Blogger with a simple feed widget but you can't use that widget on your html site. Don't worry, you can still display your feed on a static html or your website by using BuzzBoost. Here we go:

Go To FeedBurner > Click on your feed:


Click on the "Publicize" tab, and then click on "BuzzBoost" in the list at the left side of the screen (see image below). At this point BuzzBoost will give you a number of different options. Choose your preference and click on "Active" button. If you’ve already activated BuzzBoost you’ll see the option to save instead of activate.


Once you choose your settings and activate BuzzBoost you will be provided with the piece of code. Copy the code provided by FeedBurner and paste it into your page wherever you want it to be displayed. You're completely free to use my feeds on your blog:

<script src="http://feeds.feedburner.com/WidgetCraft?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/WidgetCraft"></a><br/>Powered by FeedBurner</p> </noscript>

It's done, you can also style this code by using some css:

.feedTitle {
background: none repeat scroll 0% 0% whitesmoke;
padding: 10px;
text-align: center;
font-size: 20px;
font-weight: bold;
border: 1px solid rgb(81, 104, 59);
}
.feedburnerFeedBlock ul {
margin-left:0;
padding-left:0;
list-style-type: none;
}

.feedburnerFeedBlock ul li {
padding: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E0E0E0;
}

.feedburnerFeedBlock ul li span.headline a {
color: #990000;
text-decoration: none;
display: block;
}

.feedburnerFeedBlock ul li span.headline a:hover {
color: #535353;
}

#creditfooter {
display: none;
}

Saturday 19 January 2013

Blogger File Hosting Solution


Unlike WordPress, Blogger doesn't provides file hosting. You can only upload images on your blog via Picasa. Every blog owner needs some kind of file hosting to host their scripts, projects, documents and all. In this post, I'll discuss upload several sites, which provides free file hosting. All sites are powered by Google.

Picasa: Picasa is Google's official image hosting website, where you can host all your images. It's totally free and it works via Blogger's image uploader. Your blog's all images are hosted in Picasa.

YouTube: YouTube is Google's video hosting website also world's #1 video hosting website. You upload and embed your videos on your blog via YouTube. It's a great way to promote your blog with your videos. It's totally free, and you can also earn some money via YouTube.

Google Code: Google Code is best place for all developers. You can host your js, css, html, swf, zip, images, txt and bunch of more files formats on Google Code. Google Code is also totally free and it provides 4GB space. You can learn about hosting your files on Google Code on our site.

Google Sites: Google Sites is a free and easy way to create and share webpages. You can also hosts your files on Google Sites. It supports css, js, zip, swf, images and bunch more files formats. It provides 100MBs of free storage per site. You can create unlimited sites on Google Sites. Best part of Google Sites is that you can use your custom domain.

Google Drive: Google Drive is a file storage and synchronization service by Google. Google Drive gives all users 5 GB of cloud storage to start with. A user can get additional storage, which is shared between Picasa and Google Drive, from 25 GB up to 16 TB through a paid monthly subscription plan. It supports images, videos, html, js, css and more. You can learn more about Google Drive's supported file formats at this link.

Tuesday 1 January 2013

Using Google Web Fonts In Blogger


Every blog needs some perfect fonts to match their content. There are lots of websites where you can get some free and paid fonts, but Google Web Fonts are totally free to use and it's hosted in Google's Server. From this tutorial you'll learn how to use these fonts on your blog, website or anywhere.

Here We Go

First go to Google Web Fonts and select your favorite style by clicking 'Quick Use.'


Now scroll down a bit and you will see a link tag code , copy this code and also copy #2 text (Web Font Family Name) as shown in image below:


Now Go To Blogger > Template > Edit HTML and paste Font Style Sheet just below <head>:


Now search and add the CSS to use this font, just before the ]]></b:skin> tag :

h1 {
font-family: WEB-FONT-NAME ;
}

Replace WEB-FONT-NAME with your web font name which we copied earlier. In this font our web font name is 'Freckle Face', cursive. So make this code like:

h1 {
font-family: 'Freckle Face', cursive;
}

Thursday 4 October 2012

How To Install A Blogger Template


Blogger offers to so much free template but they don't look professional at all so when it comes to use a custom blogger template first question comes into a new blogger's mind is how to do that so here we're going to explain you :

  • First go to your favorite blogger template resource and download your favorite template or you can also create your own template.
  • Your download will contain a .xml file so we have to install this .xml file in our blog.
  • Go To Blogger > Template > Click on 'Backup/Restore' :




Now take a deep breath and eat some cookies because we're moving to next step which was easy as hell so just read carefully :

  • After clicking on Backup/Restore button a pop-up will appear. Now choose your .xml template file and click on upload just like this :



Now after clicking on Upload it'll take several seconds to upload your template (Depends on your net connection and template size) and after completing loading your new template is ready to use.....Enjoy

Sunday 9 September 2012

Adding Disqus Comment Box On Blogger


With a few quick steps, you can turn your old comment system into a new way to engage your visitors.

Why Choose Disqus ?

From small blogs to massive websites, Disqus is the easiest way to build active communities. It's free to use and works with virtually any type of website.

Disqus comment box is one of the most used comment box around the web which makes commenting really easy. It's totally free and if you have a large fan base or big number of visitors then you can also earn some revenue with it , we will discus that in another post.

Disqus gives your visitors to log in and comment via all major social networks including Facebook and Twitter which makes it easy to sign in. If you're a big publisher then you can also add your site's log in option to disqus.

With Disqus your visitors can also attache images with their comment and it's easy for site owner to moderate spam comment.

Disqus also gives you option to reply comments and stay connected with your commenters.

Installing : 

  • Go To Disqus > Create a new account by clicking on 'Get this on your site'


  • Fill the sign up form just like shown below :


Choosing a username is also an art so choose something creative.

  • Now Click on 'Continue' > Choose your platform Blogger/Wordpress/Other... 

You can also use this comment box in other platform with this tutorial because installing in all platforms are totally same.

  • Now in next page click on 'Add Your Site To Blogger' > Add this anywhere on your layout and it's done.
Well it was easy , make sure your blogger comment box isn't disabled otherwise it won't work. After installing you can customize settings of your comment box and disqus will notify you when a user comments your site/blog.

We will discus more features of Disqus in our next posts including making money with Disqus.

Thursday 6 September 2012

Sending HTML Emails From Gmail


Gmail is more than just an ordinary email service. It's the most used email service all over internet which provides you lots of services and it's easy to use

Just like other services Rich Text Editor is most advanced mail editor but the fact is that we can't send HTML emails with it but in this post we're going to find a solution of this problem.So the question is how to send HTML emails with Gmail and after doing some research i found that it's not that hard of complicated all you need is HTML knowledge.

For this we just need a WYSIWYG HTML editor just like Blogger provides so you can use Blogger's post editor for this. So now what we have to do is just create our HTML Email in Blogger post editor or any other WYSIWYG HTML editor , you can also use this editor by clicking here.

Now create your full Email in that editor and after creating press CTRL+A to select all content you created on that editor and copy it by pressing CTRL+C and now all we have to do is just go to Gmail and click on Compose Email (In new interfere) and paste all content by pressing CTRL+V and send it to your friends or any one you want.

I know it was easy if you got some basic HTML knowledge.

Sunday 2 September 2012

Styling A Select Box Using CSS3

I often use select box in my html documents and i was wondering if i could style them with CSS3 and i searched it on google and found out. So today i'am gonna teach you how to style html select box :

Here is our simple select box/list :



This is the HTML code:

<select>
<option> Everything </option>
<option> Widgets </option>
<option> Tutorial </option>
<option> CSS3 </option>
<option> jQuery </option>
</select>

Very simple , basic and boring. There are certain elements of a select box that we can style such as the font, border, color, padding and background color:



But that annoying drop down arrow always stays the same. There is no direct way to do style it, but the workaround is pretty simple.

First we need to surround our select box element with a div container like this:

<div class="styled-select">
<select>
<option> Everything </option>
<option> Widgets </option>
<option> Tutorial </option>
<option> CSS3 </option>
<option> jQuery </option>
</select>
</div>

Now we'll add some CSS in it :

<style>
.styled-select {
width: 228px;
height: 34px;
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_JRz-bgAc-hcLVTK4jrgxxU5Vns_75MO_7pJ27Rcr3H2hHftuOzsxi4jeLTeb6jpZ_ZrY5x98VuwX2rvalWy7GbqrqfK3Ww475TgzfqsE3-qOJDljwGMa6oOxu1NnR2v1QV0O-YkUqQM/s1600/Select.png) no-repeat ;
border-radius: 10px;
}
.styled-select select {
background: transparent;
width: 228px;
padding: 5px;
border: 1px solid #CCC;
font-size: 16px;
height: 34px;
font-weight: bold;
outline:0px;
-webkit-appearance: none;
border-radius: 10px;
}
.styled-select option {
background: lightgrey;
width: 228px;
padding: 5px;
border: 1px solid #CCC;
font-size: 16px;
height: 34px;
outline:0px;
-webkit-appearance: none;
}
</style>

This will look like :


Knowing this little workaround will make it a whole lot easier to style your select box exactly how you want it to be styled using nothing but CSS.

Blogger Limits


Just like every website blogger has some user friendly limits.Blogger is one of the best blogging platform after wordpress and it's 100% free but blogger has some user limits (Per Account) which are listed below :

Account limits

  • Number of blogs: 100 per account.
  • Profile Interests and Favorites: 2,000 characters in each field.
  • Number of blogs to follow: 300 blogs per account.
  • Profile "About Me" info length: 1,200 characters.
  • Image uploaded via post editor: 1600px wide. Larger images can be uploaded but it will be scaled down to 1600px wide while preserving the aspect ratio.Image (for background) uploaded via Template Designer > Background page: No limit
  • Image uploaded via post editor: 8MBImage (for background) uploaded via Template Designer > Background page: 300kB.
  • Uploaded via Blogger Mobile: 250KBCapacity of image hosting (on Blogger partner Picasa Web Albums): 1024MB per account.
  • Bandwidth of image hosting: No limit.
Blog Limits

  • Length of blog title: 90 characters.
  • Length of subdomain name (as in http://SUBDOMAIN.blogspot.com): 37 characters.
  • Length of blog description: 500 characters.
  • Number of members: 100 member invitations per blog.
  • Number of readers (for a private blog): 100 per blog.
  • Number of posts: No limit. (However, currently the Edit posts list maxes out at 5000 posts, which could make some older posts inaccessible for editing. Blogger is working on a fix).
  • Number of posts displayed on multiple-post pages (homepage, archive etc.):
  • Blogger will attempt to display the number of posts as set in Settings > Formatting > Show At Most provided the posts’ file size does not exceed the Blogger auto-pagination file size cap of 1MB.
  • Bigger posts may cause fewer number of posts to be displayed.
  • Number of static pages: 10 per blog.
  • Number of labels: 5000 unique labels per blog.
Post Limits

  • Length of individual post: No limit.
  • Size of individual post: No limit, but very large posts may run you up against the multiple-post page size limit (see above).
  • Number of labels: 20 unique labels per post.
  • Number of comments: No limit.
  • Length of post filename: 39 characters (auto-generated from post title, truncated to length).
Other Limits 

  • Label length: 200 characters per label.
  • Comment length: 4,096 characters per comment.
  • 1,000 images per Picasa album.
I hope this will help you in future and if you see any mistake then please comment to let me know. :)

Thursday 30 August 2012

Hosting Your JS Files On Google Code



Main problem of using Blogger as your blog platform is hosting because Blogger don't offer files hosting (Except Images and Videos ) . So today i'am gonna show you how to host your .js files on Google Code and it's 100% free. And also in next tutorials i'am also gonna teach you how to host your CSS and HTML files on Google Code which is way different then this. Let's get started :
  • Go To Google Code > Click On 'Create A New Project' > Fill The Form Just Like Below
In Version Control System choose SubVersion and Source Code license will be Mozilla Public License 1.1 and fill other fields as you want now time for next step :
  • Now Go To Source > Browse > Choose either Create or Upload option as you prefer and create/upload your JS script.
Now after upload/creating this page will appear :

Right click and copy raw file url which will look something like this http://your-project-name.google.com/svn/your-file-name.js and it's your js file url now you can use this in your widgets or projects.

Having any problem then please leave a comment :)

Learn More: How To Host HTML And CSS Files On Google Code

Wednesday 29 August 2012

Create A Privacy Policy For Your Blog


As Google have changed the Terms and Conditions of their Adsense program, one of the requirements now is that all Adsense publishers should have a "Privacy Policy" on their websites.

You must have and abide by an appropriate privacy policy that clearly discloses that third parties may be placing and reading cookies on your user’s browser, or using web beacons to collect information, in the course of ads being served on your website. Your privacy policy should also include information about user options for cookie management.

You can read more about the DoubleClick DART Cookie on the following link ... https://www.google.com/adsense/support/bin/answer.py?answer=100557&sourceid=aso

Now you can create privacy policy for your blog/site with our Privacy Policy Generator (For Google AdSense Publishers)

Monday 27 August 2012

How To Track Google Adsense Payment Check


Most of bloggers including me use Google Adsense to monetize their blog and earn some cash for their good work , Once your monthly earning reached to $100, Google sends the money through check on your name. Sometimes it takes a bit longer to received your check but it's not a matter if worrying because i'am gonna tell you how to track your Adsense payment check.
  • Just log in to your Adsense account
  • Enter 'my account payment history'
  • Click on the detail link of your payment
  • You can now see all of your account history payment and even the last month.
  • If you can see 'Payment Issued' then it’s on the way.
  • Note down 'Payment Number'
Here is an example of your payment statement :

According to above model of payment statement 063333333 is our Payment Number and now it's time to track it :
  • Now “Select the shipment type” and “Enter your tracking number” that you have noted before.
  • Choose Ref No. and enter your payment number after removing first '0' from it and press Go.
You can track your payment 4-5days after it was issued from Google. It took 15days for me too track my first payment so be patient and try to track daily because some times it took a little bit.

Here is an example of what you'll find after entering your Payment No.:



Tracking Payment With Waybill Number :

You can also track your payment with your Waybill number, You'll receive your waybill number after approx 15days.All Indian payments comes from Hyderabad so it takes i little bit time.

Reason for Adsense Payment Delay :

There may be many reasons why your adsense payment has been delayed. The main reason could be wrong address. In that case bluedart immediately return the check to Google. It does happen if you are receiving your first adsense check. If it happens with you, then you can Request for reissue adsense check payment. You have to wait for at list 2 weeks to get your earning credited back on your account.

I would suggest you to use bluedart location finder to find whether their service is available in your area or not. So that you can easily contact them before they return your check to Google. 

Popular Posts

 
Powered by Blogger.