Tags: Blogger Tricks / CSS Tricks

Create a Stitched Effect Using CSS

- 6 Comments

Everything is possible with the power of CSS and when it comes to blog design, designers and web developers are using different techniques for customizing their different blog elements. Almost all the customizations are done using CSS. There are thousands of visual effect we can achieve with CSS, the only limit is our imagination.

Today we're going to share a simple CSS trick: Creating a Stitched Effect using CSS, today we'll show you that how to create a stitched effect using CSS. You can use this effect for your heading, or you can also use it for stylizing your navigation menus, sidebar etc. using the CSS Markup. Let's start

HTML Markup

<div class="stitched">
Stitched
</div>

CSS Markup

.stitched {
   background: #2aa4cf;
   color: #fff;
   font-size: 20px;
   font-weight: bold;
   line-height: 1.3em;
   padding: 10px;
   margin: 10px;
   border: 2px dashed #000000;
   border-radius: 7px;
   box-shadow: 0 0 0 4px #2aa4cf, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
   text-shadow: -1px -1px #2aa4cf;
}

For people using Blogger.com, learn How to Add CSS Codes to Blogger Using Template Designer. After adding the CSS Markup and use it anywhere.

Check out some more cool CSS Tricks

Thats all. So, try this simple CSS trick and stylize your blog.
Share this article with your friends and don't forget to Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

Tags: Blogger Tricks / CSS Tricks / Tutorials

How to Change the Text Selection Highlighting Color in Blogger

- 50 Comments

The quickest way of selecting/copying text from a blog/website is to drag your mouse over that content. The selected content becomes highlighted. Mostly the highlighted text color is blue (Default color). Have you noticed that when you highlight/select text on some top websites, the text's background color is unique and matches the site's color scheme? So, have you ever wanted to change the highlighted text color of your blog? If yes then today we will show you that How to Change the Text Selection Color in Blogger. Its really easy to do and can be done with just the tiniest bit of simple CSS codes. This trick works on Chrome, Firefox, Safari and on latest versions of I.E.

How to Change the Text Selection Highlighting Color in Blogger

Step 1. Go to your Blogger Dashboard >> Select a Blog >> Template and click Edit HTML button
Step 2. Click inside the template code area and by using Crtl+F search for the ]]></b:skin> tag
Step 3. Now copy (Ctrl+C) the below code and paste (Ctrl+V) it just above/before it (]]></b:skin> tag)

::-moz-selection  {
background: #00cc00;
color: #FFFFFF;
text-shadow: none;  }
::selection   {
background: #00cc00;
color: #FFFFFF;
text-shadow: none; }

Customization:

• Replace 00cc00 with the text highlight color
• Replace FFFFFF with the text color (highlighted text color)

Step 4. Click Save Template button
And you're done!
Congratulations: You've successfully changed your Text Selection Highlighting Color. 

From Editors Desk

We hope this article may have helped your in learning How to Change the Text Selection olor in Blogger. Share this simple trick with your friends and don't forget to Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

Tags: Beginner's Guide / Blogger Tricks / Tutorials

How To Add Multiple Authors To Blogger Blog

- 66 Comments

A team is always better than a one man army and achieving our goals becomes easier with a team. Teamwork is better than being alone. Same is the case with blogging. Competition in the field of blogging has increased and survival has become very tough, so people are starting their blog with multiple niches. So it's always recommended to have a multiple author blog. If you have multiple author blog, you can have a schedule for posting and it will be easier for you to have a very good number of posts within a small period. If you want to boost up your blogging career then its important to start working as a team. But guys, one account, 4-5 or more people using one account, doesn't make a sense. So what to do now??? Not an issue, if your blog is hosted on blogger then you don't have to worry about it. Blogger all of its features also provides you an option for adding multiple authors to your blog. By adding multiple authors, all the people that you've added can access to your blog dashboard from their accounts. You can also manage their roles as Admin or Author. So, today in this tutorial we'll show you that How To Add Multiple Authors To Blogger Blog.

How to Add Multiple Authors to your Blogger Blog

First and foremost go to your Blogger Dashboard >> Select your Blog >> Setting. Now in the Basic section of setting hit the + Add Authors button under the Permissions heading

It'll ask you to enter the Email id's of the new authors, enter the Email id's of your authors and hit the Invite Authors button.

An email invitation will be sent to the specified persons. When he verifies the invitation, his name will be listed and you can decide his account type as Admin or Author.
All done :)

From Editors Desk

We hope this article may have helped you in learning How To Add Multiple Authors To Blogger Blog. Share it with your friends and don't forget to subscribe us. Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

Tags: Blog Design / Blogger Tricks

How to Use Google Web Fonts in Blogger

- 3 Comments

There are millions of blogs on the internet, competing with each other. But it you want your blog to stand out and impress your visitors, then you've to make some changes to make your blog look different from others.
There are hundreds of elements that you can make different from others and one of them is your blogs font. Yes, you can make your blog look professional by using custom fonts.

Okay, you made this decision, but now you've to find a place where you can get free web fonts. I think that the best place for fonts is Google Web Fonts. Google Web Fonts inventory is full of gorgeous fonts that are extremely flexible and lightweight. There are over 600 fonts available in the Google Web Fonts. All of the fonts hosted, there are free to use in any commercial or personal projects.

Implementing Google Web Fonts in blogger is extremely straightforward. So if you are thinking to Add Google Web Fonts on your Blogger blog, then you're at the right place. Today we'll show you that How to Use Google Web Fonts in Blogger.

How to Use Google Web Fonts in Blogger

First of all go to http://www.google.com/fonts/. There are over 600 fonts available in the Google fonts. Okay now you've to choose your desired font, you'll see all the fonts with their previews and names. You can organize them by their font size and preview text. You can also sort them according to popularity, date added, alphabet, trending and by number of styles.

Once you've decided what font you want to choose click Add to Collection button and then click the Use button. It'll redirect you to the next page. From that page choose you font style i.e. light, normal or bold and scroll down.

After that you'll see the link to sylesheet, which would look like this:

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>

And its CSS style which would look like this:

font-family: 'FONTNAME';

Copy the stylesheet and go to Blogger.com >> Log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML (Don't forget to Backup your Template). Click inside the template code area, use Ctrl+F to search and search for the <b:skin> tag. Just above it paste your font stylesheet code.  
Note: To prevent any error, add a forward slash ( / ) before the closing bracket of the stylesheet code. See the example below:

<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>
The above is the stylesheet provided by Google, before adding it to your blog add a forward slash ( / ) before the closing bracket like:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />

Finally you've added the stylesheet. To use this font on a specific part of your blog, you've to add the CSS code to its element/code. Copy the CSS code provided by Google and use it where you want. See the example below:

.post-title {font-family: 'FONTNAME'; }
OR
.post-body {font-family: 'FONTNAME'; }

You can use this code anywhere in your blog, just add the CSS to the element where you want to use it. Click the Save Template button and you're done.

From Editors Desk

The method will be difficult for newbies, but if you follow the steps correctly, I don't think that you'll find any difficulty. Share your feedback and suggestions in the comments section below. Do share this article with your friends and don't forget to subscribe us!

Tags: Blogger Tricks / Freebies / Reviews

FormGet Review - An Ultimate Solution for HTML Contact Forms

- 1 Comment

Contact form is one of the most essential elements of a blog/website. If you're a website owner then it's obvious that the people would contact your for queries, feedback, payments etc.

If you think that coding skills are required for creating contact or payment form, you're wrong, nothing is required for building a form. Now a days  there are hundreds of free online services, using which you can easily create any type of form for your blog with zero coding/skills. But the problem is to choose which one is the best, but now you don't have to worry about it because today we're going to share one of the best contact form builders on the web.

Yes, the best form builder and it is FormGet.com. FormGet is the ultimate solution for building HTML forms of any type. FormGet makes it easy to create and manage a form online with its unique features and powerful dashboard for free of cost. You can use forget for building contact forms, payments, bookings, admissions, auditions and hundred of other forms. Lets discuss the features of FormGet.

Features

• Easy to Use: Building forms using formget is extremely easy, no skills or coding is required. Easily manage you multiple forms from one place.
• Eye-Catching Design: You'll get addicted to it once you created a form with formget. Eye-catching colors, clean layout and beautiful design.
• Drag and Drop Form Builder: Easily drag and drop fields to your form, just a few clicks and your form is ready.
• Collect Payments: Easily collect payments from your clients with zero loss and secured method.
• Powerful Helpdesk Tool: With its instant messaging tools, easily solve your clients issues, faster and quicker.
• Users Tracking: FormGet tracks your visitors and provides you all the information like their country, IP address, OS, browser etc.
• Email Integration: You can also integrate your account with accounts on MailChimp, Madmimi, etc., and get the collected data stored into your mailing list.

Some of the other features are:

• Dropbox Integration
• Google Analytics
• Auto Responsers
• File Upload
• Captcha
• Translation
• Pre-built Templates

Now we'll show you that How to Create A Form Using FormGet.

How to Create A Form Using FormGet.com

First and foremost go to formget.com and click Build your Form Now button

It'll redirect you to the Form Editor, customize your form and design it in your own taste, it provides you several options for your form such as Name, Email Address, Message, Date, Radio, Text and if you want to make a payment form you can choose Payment option. After you've customized your form, click Next Step button.

Now Create a new account or start using by connecting your account to Google or Facebook.

After signup you'll be redirected to your Form Preview, there you can Upload your Own banner, customize its colors and customize its footer setting.

After customization click Save Changes and you'll be redirected to your Dashboard.

From your Dashboard click Embed Form button, from the next page choose the type of your form, such as Sliding form or Full Form. Sliding form will be displayed on every page of your blog and it will slide out on clicking the button. Choose your form type and copy the code given just below it.

If you choose a sliding form then paste the copied code between the opening and closing <head> tag in your template code. And in case of Full Form, copy the code and add it on a separate page. For adding full form in blogger go to Pages >> Create a New Page >> Switch to HTML tab >> Paste the Full Form Code and click Publish.

From Editors Desk

We hope this tutorial may have helped you in creating a Contact Form for your blog. If you like this tutorial, then do share it with your friends on Facebook, Google+ or twitter and don't forget to subscribe us!

Tags: Blogger Tricks / Google / Tutorials

How to Host CSS or JavaScript in Blogger Using Google Drive

- 3 Comments

Sometimes we need to host our codes on some external source for our blogger templates but unfortunately blogger doesn't provides the flexibility to host CSS or JavaScript files in a separate link. That's why hosting CSS and JavaScript files on your Blogger Blog has always been a matter of concern for bloggers. Embedding external files instead of writing the entire code has its advantages. Blogger doesn't provides any option for hosting external files but luckily Google Drive provides you an opportunity for hosting CSS or JavaScript files. Hosting your codes on external sources reduces your template size and your blog loads faster. Today in this tutorial we'll learn that How to Host CSS or JavaScript in Blogger Using Google Drive.

Features of Google Drive

There are many features for hosting your files on Google Drive and some of them are:-

• Lots of Space: Google drive provides you 5Gb of free space, and its enough for hosting codes. If your drive is full, you can get more space by upgrading.

• 100% Security: Google Drive provides you full proof security for your hosted files, you don't have to worry about your files security.

• Privacy: Google drive lets you keep your files private, if you don't want to share your files with others you can change its privacy to Private and no one will be able to access except you.

• Create and collaborate: Google drive provides you the flexibility to host different kinds of spreadsheets.

• All this for Free: Yes all this is for free, you don't have to pay a penny for hosting you files on Google Drive.

How to Host CSS in Blogger Using Google Drive

Step 1. First of all you've to create the CSS file. To do this, copy the CSS code from your template that you want to upload. Log in to your Blogger Account >> Template >> Edit HTML >> Search (Ctrl+F) for <b:skin><![CDATA[ tag and copy the code till the ]]></b:skin>.

Step 2. Prepare your style.css file After copying the CSS code paste it in the notepad and remove that code from your template. Now save the notepad and name it as style.css. Note: The file extension must be in .css

Step 3. Now you've to host your CSS file. Go to Google Drive and log in to your Gmail account. Click Create >> create a new Folder >> Name it whatever you like such as mycodes or myscripts etc. and click Create button

Step 4. Open that folder >> Click Upload button and choose Files >> Now it will request you to choose your files, so select you file and click the Open button. A wizard would appear on the right side of your screen displaying your upload status.

Step 5. Once the file is uploaded, click the Share button >> Click the Get Shareable Link and choose Anyone Can View the File option. It will provide you the sharing link

Step 6. The sharing link would be something like https://drive.google.com/file/d/your-unique-file-code but you have to change it to https://googledrive.com/host/your-unique-file-code. For example if my file link is https://drive.google.com/file/d/0B43vwjPtKakCODMzcEc2amM3ZTQ so i will change it to https://googledrive.com/host/0B43vwjPtKakCODMzcEc2amM3ZTQ, Hope you got it.
Step 7. Its Time to Add your File/Link to Blogger. Log in to your Blogger Account and go to Template >> Edit HTML. Now search for the <head> tag and paste the below code just above/before it. Note: Don't forget to replace https://googledrive.com/host/your-unique-file-code with your file link that we created in the previous step and make sure that you've removed the CSS code from your template as we mentioned in the step 2.

<link href='https://googledrive.com/host/your-unique-file-code' rel='stylesheet'/>

Step 8. Click the Save Template button and you're done!

How to Host JavaScript in Blogger Using Google Drive

To host JavaScript on Google Drive, you have to follow the same steps, the changes are that the file Extension must be in .js form in case of JavaScript and for adding it to blogger use the code below

<script src='your-googledrive-javascript-link-here' type='text/javascript'></script>

Congratulations: You've successfully hosted your CSS and JavaScript in blogger using Google drive.

From Editors Desk

We hope that you've learned How to Host CSS or JavaScript in Blogger Using Google Drive. Share this tutorial with your friends and don't forget to subscribe us!
Got a Question? Please don't hesitate and ask us in the comments section below. If we missed something, then leave a comment below.

Tags: Blog Design / Blogger Tricks / CSS Tricks

How to Change Links Color/Style in Blogger

- 22 Comments

Blog design has always been a great challenge for bloggers. Remember, quality content is not the only thing required for making a blog successful, but we also have to give attention to its design that how your blog looks. If your blog design is clean and attractive, then the visitors will get more interested in your blog. There are thousands of blogger templates available on the internet, but not a single template comes with 100% fulfillment. We have to customize its different sections and elements. Links color is also one of the. If you want to make links more visible and stands out from other text or, want to make the design more attractive to enhance user experience, then its important that you customize your link color/style and that's what we are going to learn today. Today in this tutorial we'll show you that How to Change Links Color/Style in Blogger.

How to Change Links Color in Blogger

First and foremost log in to your Blogger Account and go to Template >> Edit HTML. Now look for the CSS code of the hyperlink in your template, which would be something like the below code

a { color:#2aa4cf;}
a:hover { color:#000000; }

The text in bold will be different for every template, simply search for a { tag and you'll find the above code. The first line is for you line style before hover (color:#2aa4cf;) and the seconds line is for the link style on hover (color:#000000; ). So by changing the styles and colors you can easily customize your links style. Use our HTML Color code generator to find your color code.

From Editors Desk

We hope this article may've helped you in learning How to Change Links Color/Style in Blogger. Share it with your friedns and dont forget to subscribe us!
Got a question? Please don't hesitate, ask us in the comments section below.

Tags: Blog Design / Blogger Tricks / CSS Tricks

How to Customize Labels Cloud Widget in Blogger

- 5 Comments

Website design has always been a great challenge for bloggers. We spend hours and hours for searching a perfect template and on its design. Okay, say you found a perfect template, but remember not any template is perfect, you've to make customizations. After you found a template, now its time to add some important widgets, such as a popular posts widget, subscription boxes, label cloud, etc. After adding all these widgets, it's important to give them a professional look. If you're a web designer then you can easily customize them, but if not, then don't worry there are hundreds of tutorials available on the internet. So, today in this article we'll show you that how to customize labels cloud widget in blogger. Label Cloud is a widget provided by blogger, which is used to display labels on your blog. Simply labels are tags or categories which we use for categorizing our posts under different groups. You can easily customize Label cloud widget using CSS. Today when I came to update Blogolect, I thought to share something new and I started customizing my label cloud widget on a demo blog. After making some customizations, I created a new labels design using some simple CSS codes and transitions too. This widget shows a beautiful and smooth transition on hover and I hope this widget will give a professional look to your blog.

How to Customize Labels Cloud Widget in Blogger

First and foremost log in to your Blogger Account and go to Template >> Click Edit HTML >> Click inside the code area, use Ctrl+F and search for the ]]></b:skin> tag
Now copy(Ctrl+C) the below code and paste(Ctrl+V) it just above/before the ]]></b:skin> tag

/*--- Custom Label Cloud With CSS3 By Blogolect.com --- */
.Label a{
background:#000;
padding:0 20px;
color:#fff!important;
height:32px;
font-size:14px;
text-transform:uppercase;
text-decoration:none;
line-height:32px;
padding-left:20px;
float:left;
border:none !important;
margin-left:5px;
margin-top:5px;
-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;
}
.Label a:hover{
color:#000 !important;
background:#00cc00; }
/*--- Custom Label Cloud With CSS3 By Blogolect.com --- */

Hit the Save Template button and you're done!
Congratulations: You've successfully customized your label cloud widget in blogger.