Trick and Tips: websites

Showing posts with label websites. Show all posts

Friday, February 13, 2015

The Top 10 Websites to create free Logo for your Blog

Do you have a logo of your blog or website? Are you interested to create logo. If you don’t have it than this article can be so much useful for you. A logo is very necessary part of a blog or a website. It is the icon which symbolically represent your niche. From last two years I am in blogging field, in this time period I have visited so many blogs and websites. By my observation I have concluded that about 40 to 50% blogs and websites are without any logo.

Also read: Tips on How to Have Better SEO Results with Link Building

Let me explain the importance of logo design for a blog. Many bloggers neglect the value and importance of having a logo for there blog or website. Especially in blogosphere where there are numerous websites with same niche, in this situation logo is what will remind your visitors about your work. This is a scientific fact that, an image is so much easier to remember than any other information.

I am sure that after reading this post you will understand the importance of a logo design for a blog or a website. Nowadays there are so many websites that provides facility of logo design. You can easily create it as there is no need to have any special knowledge about designing. In this post i am listing out the 10 best websites to create a free logo for your blog (on my experience).

Also Read: Google Gravity: How to Hack Google Homepage (Funny Trick)

List of 10 best websites to create a logo

LogoMaker

It includes thousands of icons created by a team of designers. What you have to do is just select your icon, change color, add text and than download it.

OnlineLogo Maker

It is one of the best website to create logo for your blog. I have used it to create logo for this blog.

Logoease

I like it so much because of its simple design interface which allows you to create your world class logo in just minutes.

LogoDesign Engine

With free Logo Design Engine you can easily select logo template, select fonts, colors and in a few seconds your logo is ready.

LogoYes

It allows you to control whole process so you can save time and money. You can try it free so you can create a sample logo before you buy it.

Also Read: The 5 biggest tech myths prevailing among common man

FreeLogo services

It is so much simple and easy to use. Just enter your text, choose a design, customize your logo and than save and download.

LogoSnap

If you are looking for a free logo design than LogoSnap is for you. Creating a free logo with LogoSnap is fast, free, easy, simple and secure.

SimWebSol

It is one of the easiest and fastest logo designer website to create a free logo for you blog. In my opinion you should try it once.

Templatesbox

You can also go for this. It also provides some other services like creating a website or a template

CoolText

It is free logo generator for web pages, you can create impressive logo for your blog without a lot of design work.

Note: Some of the websites listed above charges money for creating a logo. Just try them and let me know about your experience and logo.

Beautiful CSS Horizontal Menus for Blogger Websites

As I earlier published a number of CSS tutorials for blogs, websites and separate web pages. But the world of web designing is still to be discovered We will further work with CSS in details in coming days. I have another Advance CSS course in Urdu that contains all new enhancements of CSS3. CSS3 is a powerful version of CSS. We will discuss the rounded border properties, newly added shadow effect, mouse effects, transitions and so many more. But Today, I will share some beautiful CSS horizontal menus that are entirely built within CSS and HTML. These menus are awesome and can be included in both websites and blogs. You can add them into your blogger blogs too. Below is the list of menus along with CSS and HTML codes. Just love them.

How to Add CSS menus to blog?

These menus can be included into any kind of website or blog. If youre using blogger platform for blogging then simply copy the codes from below boxes and paste it inside an HTML/JavaScript widget and save that widget. You can drag the widget anywhere you want to show the menu on your blog; mostly people keep it below the header.

Now here is the list of menus Im going to share, the codes are in boxes for each menu, so you can use them for websites and blogs. The customization will be taught below the codes.

CSS Menu # 1 Code:

CSS Menu # 2 Code:

CSS Menu # 3 Code:

CSS Menu # 4 Code:

#menu123{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF11UmDgbapYJmxxVDljmYBeLc9EpvyPKfTg5eVYAYopIIOJYECw6C6UunL189RtZVrt-es1Y-ejOb9elDmWjhHcQImVrENiKlD2kh1aufZZ0eJlaWR7ScCEq2jwa26dVz_GcHwjErMYeb/s1600/tabright9.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;} #menu123 ul{margin:0px;padding:0;list-style-type:none;width:auto;} #menu123 ul li{display:block;float:left;margin:0 1px 0 0;} #menu123 ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;} #menu123 ul li a:hover,#menu123 ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpnZceWvI_uQiZfzqPX5yRpPjqPtbaflGCNlDXD9oxSVlrDJ5MESF2hJ3XBPH_tIVEuMkBmd5K6tBNnPPCA_nDuwMdAUobrPgSGlHy9_YcwypzVRO1vLdrS8M9B3_tNoiyXgXvzUts_UtV/s1600/tableft9.gif) no-repeat top center;} <div id="menu123"> <ul><li>Home</li><li>About Us</li><li>Services</li><li>Our Work</li><li>Contact Us</li></ul></div>

CSS Menu # 5 Code:

#menu555{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxDTyg-_ghsnAEBiLL7fPOgrlvpa83iPvX3eaBleHMasPqL4ryZEoJ5qRLBxFlCzTLYi2U1jW34vNbqF87sHv2nf902wL-Na_ocgwC7HQhsgOf3CaZtTi7z9JCTHXsEYvbrfiEzzey2LE/s1600/bgOFF1.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;} #menu555 ul{margin:0;padding:0;list-style-type:none;width:auto;} #menu555 ul li{display:block;float:left;margin:0;} #menu555 ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmNxOOVa9SGLW0joqNzeNYkgCaDhJUnsYbkuoHU33IPXMdN9xZ1FWnNWIhowuTBEPnh4iDZlH3f_XCyk2Gm0rUtvhd1yLAJT9TwDr7DIi8FZheUL3YJnBxtKCy8YZ-A9V04hjbWuGOPA2/s1600/bgDIVIDER1.gif) no-repeat top right;} #menu555 ul li a:hover,#menu555 ul li a.current{color:#B30000;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblIywVNnErFa4eUdDmWH2VlwttIlJ4v4AN7oyAl_yJN1O3y9nIJQjKJwiqIOEpAa83udO3Nj7-sJWxokhnKEbYYW8onzlX7vGKbFbH82GcWCFujXUO6hOiH-s8KYb1jH83jBEpkCP6jdI/s1600/bgON1.gif) no-repeat top right;} <div id="menu555"> <ul><li><span>Home</span></li><li><span>About Us</span></li><li><span>Services</span></li><li><span>Our Work</span></li><li><span>Contact Us</span></li></ul></div>

Customization:

Now when you liked any menu from the above list, copy the code from the box and paste it inside an HTML/JavaScript widget in Blogger and then drag that widget right below the header; see the example image below:

I added one of the above menus into an HTML/JavaScript widget and dragged that below the header as showing in above image and that menu is looking like below image on my blog:

Now if you want to replace your links and anchor texts with the default ones then simply find lines like below one in the above code:

<ul><li><a href="#"><span>About Us</span></a></li></ul>

All the li tags are within ul tag, and the <a href="#"> is the link; so you can replace the (#) sign with your link and the default text (About Us, Services, Our Work etc) with your anchor text.

Your Turn:

These were some horizontal CSS menus for blogger and other websites, if youve questions or facing difficulties while adding them to your blog then do ask me in comment section. We will also share more collection of Vertical CSS menus and CSS drop down menus very soon. Stay connected with us.