Google Groups -Designers

Webdesig-Webmaster FREE RESOURCES

2010-09-13T08:14:00.000-07:00

NavBar horizontal menu

Download	Download
Download	Download
Download	Download

Vertical menu (Acordeon style)

Download

Tip:

custom background ->of the layer by changing the bgz.png image file.
custom colors -> open html file in wordpad or notepad and change the colors with your favorite ones. Example: #FFFFFF (white) change with #000000 (black) or transparent (no color).

Buttons

NEW ACCOUNT FORM (PRO DESIGN)

BONUS (CHANGE PASSWORD FORM)

Blogger basic template: I Design Purple by Agatha Purple

2010-09-08T09:48:00.000-07:00

Online demo
Download AgathaPurple_v1 [I Design Purple]
Description: A two-column, fixed-width
Colors: purple, white, black
Design by: Agatha Purple
2010

Blogger set of background 2 (big)

2010-09-07T19:43:00.000-07:00

Another set of backgrounds for blogger users (brown)

1500x900px

782x645px

6x645px

With easy steps you can transform your blog into a website

2010-09-06T10:17:00.000-07:00

A blog is a blog you may say . True !
But take a second and think: how your blog with look like if you customize and add some images, buttons in a stylish way?
Blogger platform is amazing when it comes to customize (adding some cute effects)

<table border="0" height="44" style="width: 540px;"><tbody>
<tr> <th background="http://i963.photobucket.com/albums/ae117/dexdesign2002/Images%201/nws_01.gif" height="44" scope="row" width="74">News</th> <td background="http://i963.photobucket.com/albums/ae117/dexdesign2002/Images%201/nwsa.png" width="528"><center><marquee direction="left" loop="-1" scrollamount="7" scrolldelay="112" style="color: white;">This is just simple marquee text <span style="color: #c6ff2b;"><b>marquee</b></span> c</marquee></center></td></tr>
</tbody></table>

It will look like this:

New	This is just simple marquee text marquee

Ok this is a template for all of you who want to play and learn
Download free template of NewsBar (HTML file, 2 images and a short tutorial)

This is how it looks like:

<-images used ->

hello world!

How to enable AdSense service on your blog?

2010-09-04T06:22:00.000-07:00

Hello bloggers, as you know by now Adsense is a good and trusted way to earn income. Monetize your blog.
First of all you need to have a Google account (ex: Gmail) after that, putting your blog to work it's much easyer then you think.

Google’s AdSense is a fascinating revenue-sharing opportunity for small, medium and large web sites. Some webmasters are designing brand new sites specifically for serving AdSense text ads, however it’s against the AdSense rules to design a site purely for AdSense, so you’ll want to include a few Affiliate links or sell your own product too.

Go to Dashboard and click Monetize text link (like in this image). A new window will pop-out. Follow new steps.

In this image I have already set-up AdSense service. Enable AdSense for Feeds and/or Amazon Associates.

Ok..now your AdSense is up and running. Optional you can set up where the ads will be displayed and how.
Go back to your Dashboard ....

The Edit will open another window, from there you can adjust many things.
One of them is Google AdSense sizes of the add and color

In the left image you can see how it looks like.
AdSense for Feeds is much easy just click the link. For Amazon Associates you have step-by-step procedure .

How AdSense helps my blog?

First of all, you make income from visitors who click your AdSense ads. See many successful stories where bloggers got rich, search Google for some stories.

Note: Read related topics about Google AdSense Take the Tour
IMPORTANT Note: Read Terms and Conditions

Blog Copy.com A Blogger's Secret Weapon.

2010-09-04T01:39:00.000-07:00

BlogCopy.com , a service monitoring your articles...You know how much efforts you have done to write a good article...now, with this service you can see who's stealing them, who copies and where.

BlogCopy monitors and analyses what your readers copy from your blog and share with their friends.

F.A.Q (direct copy from the site's service)

Question: What is BlogCopy ?

Answer: BlogCopy is a tool designed to monitor which texts and images readers copy from your blog. BlogCopy does not, however, copy entire posts or blogs.

Question: How can I install BlogCopy on my blog ?

Answer: Simply create an account on BlogCopy.com, then get the code snippet and insert it inside the HTML of your website.

Question: Is it possible to install BlogCopy snippet into a site built with PHP ?

Answer: Yes. Insert the code in your .PHP file in exactly same way you would with HTML, right before the </body> tag.

Question: How do I access my BlogCopy stats?

Answer: After you have created an account on BlogCopy, log in to access your dashboard. You will find your BlogCopy stats there.

Question: How often do my BlogCopy stats update ?

Answer: BlogCopy stats are updated near real-time depending on server load.

Question: I have multiple domains that I want to track. Do I have to create a separate account for each ?

Answer: No, that is not necessary. You can create a single account, and then use it to add unlimited website profiles.

Question: What user actions does BlogCopy monitor ?

Answer: Usually your readers copy text and images to share with their friends. BlogCopy traces these copy actions and analyses user retention and engagement, generating detailed statistics based on user behaviour.

Question: Does BlogCopy work with Google Analytics ?

Answer: BlogCopy could run in tandem with Google Analytics without any reported problems.

Question: How much does BlogCopy costs ?

Answer: BlogCopy is free of charge.

Question: What about user privacy ?

Answer: None of the data that BlogCopy monitors can be used to uniquely identify an individual user.

Great service I may add .

How to use Twitter services to promote your blog's content?

2010-09-03T10:40:00.000-07:00

First step is to create an account on Twitter.com
This service offers you a lot of resources and applications in order to help you promote your blog or site content.
This link provides all you need to do so : Twitter.com/goodies
Ok..but first let's see what kind of applications Twitter offers:

Tweet Button
Add this button to your website to let people easily share your content on Twitter and follow relevant accounts.

Widgets
Put your updates anywhere or create a live stream for an event. Compatible with Facebook, MySpace, Blogger etc.

Buttons
Promote your Twitter account by adding good-looking buttons to your website.

Don't you love this cute blue bird ?!
Now...let us talk about Tweet Buttons: why to use this Tweet button? the answer is quite simple: the purpose of the tweet button is to share the content; any visitors that find your article interesting, worth reading, tweets your content on Twitte. Only a part of your article will be tweeted plus the shorted url of the page where it is posted.

Widgets. Me..I just love them...why? ok..this is not a simple answer ...because the example widget from the right side of the blog displays current tweets in real time, and visitors have a preview of the content.

Buttons. The Twitter buttons are linked to your profile page ...all your tweets on your profile.

How to change blogger or blogspot template?

2010-09-03T04:12:00.000-07:00

Install the blogger template , easy as 1, 2 , 3....

First of all login to your Blogger account and choose your blog (if you have more than one), than click on "Template" section.
You will see a big input box with full of codes at "Template" section. Click somewhere in that box then hit your CTRL and A buttons together to select all text in the box. After selecting whole text, hit the DELETE button on your keyboard to clear old template codes.
Open your theme.txt (which comes out of your downloaded template archive package) with a text editor like notepad and again select all text by hitting CTRL and A buttons on your keyboard, then hit CTRL and C keys together (or right click with your mouse and select copy) to copy whole text to your clipboard.
Go to "Template" section, and paste your new template codes to the input box by hitting CTRL and V keys together (or right click with your mouse and select paste), then click "Save Template Changes".
After saving process finished, click "Republish".

Important!

I recommend you to backup your old template codes before deleting them in this step. In order to backup your old template select all codes in the template codes box (CTRL+A), copy (CTRL+C) and paste (CTRL+V) them in a new text file with appropriate file name.

Webmaster Resources: twitter Follow Me buttons

2010-09-02T16:40:00.000-07:00

Twitter.
Who didn't heard of Twitter? I can tell you for sure ...even greatest V.I.P-s know and use Twitter service, search on google how many stars use it....emmmm...and maybe if you search enough you will stumble on names like Stalone aka Rambo, Nicolas Cage, firms and brands like Coca-Cola, Toyota...and many many great names...are you there?
Now..this pack is created by dexdesign2002 and it's free for any use...

Download .rar

you need WinRAR to unzip the zipped folder, this link goes to the download page

Meta Tags. Where and how to insert meta tags in HTML code of my blog?

2010-09-02T13:24:00.000-07:00

Meta elements are HTML or XHTML elements used to provide structured metadata about a Web page. Such elements must be placed as tags in the head section of an HTML or XHTML document. Meta elements can be used to specify page description, keywords and any other metadata not provided through the other head elements and attributes.

The meta element has four valid attributes: content, http-equiv, name, and scheme. Of these, only content is a required attribute.

see definition on wikipedia

Some meta-tags ..all values can be changed to meet your needs:

<meta name="title" content="title of your blog">
<meta name="author" content="author of the blog">
<meta name="owner" content="the owner, here is the account name/ administrator name">
<meta name="subject" content="subject of your blog ">
<meta name="rating" content="general">
<meta name="description" content="descrierea website, blog, forum">
<meta name="abstract" content="on abstract meta tag you could insert the region (ex: NewYork. USA)">
<meta name="keywords" content="key words are very important, do not use words that does not have anything to do with your content, and not more then 14 (some search engines have trouble to index your site/blog)">
<meta name="revisit-after" content="10 DAYS">
<meta name="robots" content="INDEX, FOLLOW">
<meta name="language" content="english, EN">
<meta name="copyright" content="Copyright (C)2010 your name or blogs name">
<meta name="expires" content="never">

Where to insert meta tags ?
Good question....here!

Now, you know what meta-tags are, why are they necessary you may ask...and the simple answer is that they help you in SEO and helps search engines to index and display your blog/site on the web.
In this image you will see where in HTML/CSS cod of your template to insert meta-tags.

Statistics. Blogspot platform includes Stats as visitors statistic data.

2010-09-02T11:22:00.000-07:00

This is a very useful data provided by Blogspot, now you don't have to use 3rd party widgets to know how many visitors you had.

To access the stats tab, log in to your blogger account and you will see Stats link

This service is great when you want to know if you have traffic, how much, when, from where..and many other data. Cool if you use Google Adsense

I have a cute name for this service. I call it Blogspoter :) (and I love it)

Read this cool article on Buzz Blogger

Editing CSS in the Template Designer

2010-09-02T08:59:00.000-07:00

Blogger's Template Designer allows you to customize almost any aspect of your blog's appearance through the use of cascading style sheets (CSS). To add custom CSS snippets to your template, simply open the Template Designer and add your code to the field located in the Advanced | Add CSS tab. Changes you make will reflect instantly in a live preview beneath the editor.
Note: Editing CSS allows you to change the look and feel of your blog. For changes to the actual content of your blog, including the adding of gadgets or changes to the layout, please use the Edit HTML field located in the Layouts tab. Also remember that, like other customizations, your CSS will be removed if you change designs.
While CSS allows for an almost unlimited number of style customizations, here we'll just go over a couple of the most popular CSS tweaks so you can get a sense of how these changes can be made. For a more comprehensive list of various CSS tweaks, please see the 'What can I do with CSS' article in our Help Center.
The first CSS change we'll go over is how to center the header text on your blog. Head over to the CSS field located in the Advanced | Add CSS tab in the Template Designer. Once there, simply drop in the following lines of code:

 .Header { 

text-align: center; 

}

Once you've added the code, you'll notice that your header text image will instantly change to centered alignment. If you like what you see, just click the orange Apply to Blog button and your header image will be saved. If you ever decide to remove or change the header image at a later point, it's as easy as deleting or swapping out the image code from the field.
The second CSS change we'll cover is how to add your own background image to your blog. For the sake of being comprehensive, we'll assume that your image isn't already hosted on the web, and go over instructions for how upload your image to a filehost so you can link to it. Here are all the steps necessary to take your own image from your computer and use it as a background image for your blog:

Compress your image.

250K

Imgur

Upload your image to a filehost. In order for you to add a background image via CSS, you'll need a working link to your image. If it isn't already on the web, you'll need to upload it from your computer to a host which will serve the image. Picasa Web Albums, Imgur, and Photobucket are all reliable options for your image hosting. Simply navigate to the host of your choice, and follow their directions for uploading.
Add the image background CSS snippet. Now that you have a compressed, uploaded image you will be able to add the CSS for using it as a background for your blog. Here is the code:

.body-fauxcolumn-outer { 

background: url(http://www.example.com/image.png); } 

.body-fauxcolumn-outer div { 

background: none; 

}

Apply to blog! If you like what you see, go ahead and click the Apply to Blog button, and you're done! Of course, you can always come back and remove or swap out the background image code if you like.

Note: Templates with gradients (such as Simple #1) may slightly conflict in appearance with the use of a background image.

source of the article

Tips and Triks : Disable visual Navigation Bar from header area

2010-09-02T08:54:00.000-07:00

Users of this blogger/blogspot platform ask on internet how to remove the navigation bar from the header of the template/theme.
Why this nav bar is useful ? Emm...first of all it helps you to navigate from blog to blog, leaving comments, socialize, making new friends and why not just for reading a good material.

The code used to disable this visual navigation is simple:

#navbar-iframe {
display: none;
}

Insert this code in between <head> and <body> area

Extra buttons and how to link new pages with style

2010-09-01T15:03:00.000-07:00

An interesting problem to discuss is how to add buttons to a blogger
theme.
You have a blog, after you create additional pages (new pages,
not new posts) you want to add them to your theme like a horizontal
navigation bar (under the header).
The easiest way is to create your own buttons (same design as the
theme/template you use, to look nice) and simply link them to the
pages you have just created.
This is an example used on my friend's blog:
to see this example online, copy the code bellow into a txt file and
save it with .html extension

<div align="right"><a href="http://dany2011-s.blogspot.com/p/
imagini.html" target="_self" title="blogul lui dan prezinta: Sectiunea
Imagini"><img alt="blogul lui dan : sectiunea imagini" src="http://
i963.photobucket.com/albums/ae117/dexdesign2002/blogul%20lui%20Dan/
IMAGINI.png" /></a> | <a href="http://dany2011-s.blogspot.com/p/
anunturi.html" target="_self" title="blogul lui dan prezinta:
Sectiunea anunturi"><img alt="blogul lui dan prezinta: sectiunea Mini
anunturi" src="http://i963.photobucket.com/albums/ae117/dexdesign2002/
blogul%20lui%20Dan/ANUNTURI.png" /></a> | <a href="http://dany2011-
s.blogspot.com/p/sah-board.html" target="_self" title="blogul lui dan
prezinta: Sectiunea Sah"><img alt="blogul lui dan prezinta: sectiunea
jocuri online Sah" src="http://i963.photobucket.com/albums/ae117/
dexdesign2002/blogul%20lui%20Dan/SAH.png" /> </a> | <a href="http://
dany2011-s.blogspot.com/p/free-download.html" target="_self"
title="blogul lui dan prezinta: Sectiunea Free download descarca
gratuit"><img alt="blogul lui dan prezinta: sectiunea free download
descarca gratuit" src="http://i963.photobucket.com/albums/ae117/
dexdesign2002/blogul%20lui%20Dan/DESCARCA.png" /></a></div>

| | |

Background image

2010-09-01T14:58:00.000-07:00

As many of you know in Blogspot platform it's easy to change all
visual design elements from HTML/CSS mode (admin area) Ex: background
image and color, header, buttons, background image of the links,
widgets background etc. Or you could add your custom images in
different zones of your template/theme.
To do so, you need to know a little HTML/CSS and how to read XML file.
This is css code for backround image
body {
color: #333;
background: #f0f0f0 url(http:url of your image) repeat-x;

}

color- is the background color attributed in hex-color (hexazecimal
color) ex: #ffffff <- white / #000000 black
repeat-x - tells how to display the image (in this case, same image
in horizontal sequence )
repeat-y - same but in vertical sequence
no-repeat- the image is not repeating itself
top center - the image is posted in top and the center of your window/
theme

Home made widgets

2010-09-01T14:56:00.000-07:00

Ok, not all of us are web developers ... this tweak is for those who want to change the look of the side bar with twitter content for example.

Many of us are using twitter widgets or something like that...I use my own design and my own code for news widget like this one :

This is a marquee text
Easy to change and cute
I often use this method to
create "news spaces"
for my websites. It is easy
Using an marquee text with
this settings: direction->up
delay 140 or less, amount
of the text will pe set up to
4 times. Repeat: 4 times
behavior : scroll
Oh...by the way...
The links works fine
Google Groupe
and images also ;)
Have fun!

insert this code , change it to fit your needs.

<marquee direction="up" height="374" scrolldelay="140" scrollamount="6" behavior="scroll" loop="4" style="background-color:transparent;" id="Marquee1"><font style="font-size:13px" color="#8B0000" face="Arial">
<b>This is a marquee text<br>
Easy to change and cute<br>
I often use this method to <br>
create "news spaces"<br>
for my websites. It is easy<br>
Using an marquee text with<br>
this settings: direction->up<br>
delay 140 or less, amount<br>
of the text will pe set up to<br>
4 times. Repeat: 4 times<br>
behavior : scroll<br>
Oh...by the way...<br>
The links works fine<br>
<a href="http://groups.google.com/group/blogger_designers">Google Groupe</a></b></font><font style="font-size:11px" color="#000000" face="MS Shell Dlg"><br>
and images also ;)<br>
Have fun!</font></marquee>