Don't Miss

Latest Posts
Browsing Category "CSS Tricks"

How to Create Drop Caps (Big First Letter) in Blogger

- 30 Comments
Hi Bloggers, today I'm sharing an amazing CSS trick known as Drop Caps (Big First Letter). This trick is still being used by some top websites. This trick Enlarges the first letter of each blog post on your blog and gives a unique and professional look to your blog. You might have seen this trick on some top websites. If you ever wished to use this trick on your blog, then you're at the right place. Today in this tutorial I'll show you that How to Create Drop Caps (Big First Letter) in Blogger. Let's begin:

Recommended for You:
How to Create Drop Caps (Big First Letter) in Blogger

How to Create Drop Caps (Big First Letter) in Blogger

First and foremost go to Blogger.com and log in to your Blogger Account. Go to Template >> Edit HTML >> Click inside the code area >> Press Ctrl+F to search and search for the below tag

]]></b:skin>

 Now copy the below code and add it just above/before it (]]></b:skin>)

.capital:first-letter {
color: #000000;
float: left;
margin:0px 5px 0 0;
font-size: 38px;
font-family: Times, serif, Georgia;
display: block;
padding:0 0 0 10px;
}

Now again search for the below tag

<data:post.body/>

And then add the green tags before and after it as shown below

<div class='capital'><data:post.body/></div>

Click Save Template button and check your blog. If the above code is not working then try the below two methods (Skip the above line and try the below one, add the green codes before and after)

<p class="capital"><data:post.body/></p>

Or Try this:

<span class="capital"><data:post.body/></span>

Finally Click Save Template button and you're done!

We hope this article may have helped you in learning How to Create Drop Caps (Big First Letter) in Blogger. Share this article with your friends and don't forget to subscribe us!

How to Create an Animated CSS3 Drop Down Menu in Blogger

- 26 Comments
A Navigation Bar or Drop Down Menu is one of the most essential elements of a blog. A drop down menu makes your blog user-friendly, allowing your visitors to easily navigate your blog by simply choosing their desired category from the menu. Apart of all these advantages it also gives your website a new unique and professional look. Almost all the website either its a top website or a newly created are using Drop Down Menus. Recently we shared an article on How to Create a Drop Down Menu in Blogger. The design of that menu was simple and the one we're going to share today has a stylish and professional look with eye catching CSS transitions. Lets begin:
How to Create an Animated CSS3 Drop Down Menu in Blogger

How to Create an Animated CSS3 Drop Down Menu in Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area, press Ctrl+F to search and search for the ]]></b:skin> tag. Now copy the below CSS code and paste it just above/before the ]]></b:skin> tag

a, #navigation li .sub-nav-wrapper .sub-nav li {
 transition: all 0.7s;
 -moz-transition: all 0.7s;
 -webkit-transition: all 0.7s;
}
#navigation li .sub-nav-wrapper {
 pointer-events: none;
 opacity: 0;
 filter: alpha(opacity=0);
 top: 0;

 transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
 -moz-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
 -webkit-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
}
#navigation li:hover .sub-nav-wrapper {
 pointer-events: auto;
 opacity: 1;
 filter: alpha(opacity=100);
 top: 30px;
}
#navigation {
 position: relative;
 text-align:center;
 margin:0 auto;
 background-color:#fff;
 border-bottom: 2px solid #009999;
}
#navigation li {
 position: relative;
 list-style: none;
 display: inline-block;
 padding: 5px 20px;
}
#navigation li a {
 padding: 5px;
 display: block;

 font-family: 'Open Sans', Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: 700;
 color: #3b3b3b;
 text-align: left;
 text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
#navigation li:hover .main {
 color: #ee4e1d;
}
#navigation li .sub-nav-wrapper {
 display: block;
 position: absolute;
 z-index: 30;
 margin-left: -16px;
}
#navigation li .sub-nav-wrapper .sub-nav {
 width: 150px;
 margin-top: 6px;
 background: #fff;
 border-top: 1px solid #fff;
 padding:0;
 box-shadow: 0 1px 2px rgba(0,0,0,0.35);
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#navigation li:hover .sub-nav-wrapper {
 display: block;
}
#navigation li .sub-nav-wrapper .sub-nav li {
 list-style: none;
 display: block;
 margin: 0;
 padding: 0;
 text-align: left;
 border-bottom: 1px solid #009999;
}
#navigation li .sub-nav-wrapper .sub-nav li:last-child {
 border: none;
}
#navigation li .sub-nav-wrapper .sub-nav li a {
 display: block;
 padding: 11px 20px;
 font-size: 12px;
 font-weight: 600;
}
#navigation li a:hover {
color: white;
}
#navigation li .sub-nav-wrapper .sub-nav li:hover {
 background: #009999;
 border-bottom: 1px solid #009999;
 color: #3b3b3b;
 text-decoration: none;
}

CSS done, its time for HTML. Search for the <body> tag. Copy the below HTML code and Paste it Just below/after the <body> tag.
Note: You can add HTML wherever you want.

<ul id="navigation">

    <li>
        <a href="index.html" class="main">Home</a>
    </li>
   
    <li>
        <a href="#" class="main">Blogger</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Tips</a></li>
            <li><a href="#">Widgets</a></li>
            <li><a href="#">Traffic Tips</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">Services</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Blogger</a></li>
            <li><a href="#">Logo</a></li>
 <li><a href="#">Banner</a></li>
            <li><a href="#">Wordpress</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">Tutorials</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Logo</a></li>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">Design</a></li>
            <li><a href="#">Illustrator</a></li>
            <li><a href="#">Web Design</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">About</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Website</a></li>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Our Mission</a></li>
        </ul></div>
    </li>
   
    <li>
      <a href="#" class="main">Contact</a>
    </li>
   
</ul>

  • Replace the Categories with your own and replace # with their links

Finally click Save Template button and you're done!

We hope this article may have helped you in learning How to Create an Animated CSS3 Drop Down Menu in Blogger. Share this article with your friends and don't forget to subscribe us!

How to Customize Labels Cloud Widget in Blogger v3

- 21 Comments
Are you fed up with the ugly design of default blogger Labels Cloud Widget? Do you want to make it more prominent and attention grabbing? Labels Cloud is a Widget provided by Blogger that allows you to categorize your content under specific labels. Labels widget makes your blog user-friendly by allowing your visitors to easily navigate to the content they are looking for by choosing the categories/labels.
Customize Labels Cloud Widget in Blogger v3
The default blogger Labels Cloud widget is simple and leaves a bad impression on your visitors that's why we've to customize it. Labels cloud widget can be easily customized using CSS. If you don't know that how to customize it? Don't worry, in this tutorial we'll show you that How to Turn that Ugly label design into a stylish and clean design. We've designed these labels by using CSS and Animated Gradient effect. Let's begin:

Recommended For You:
How to Customize Labels Cloud Widget in Blogger v1
How to Customize Labels Cloud Widget in Blogger v2
Customized Flat UI Labels Cloud widget for Blogger v1
Customized Flat UI Labels cloud widget for Blogger v2

How to Customize Labels Cloud Widget in Blogger

First and foremost, Log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now choose a style from the below three styles, copy its code and paste it just above/before it (]]></b:skin> Tag)

Note: There is no difference in the coding of the below three styles. The only difference is their colors, we did this to show you that there is nothing technical if you want to match its color with your blog theme. You can change the color by changing the bolded text in the CSS code and use our Color Code Generator 1 and Color Code Generator 2 for HTML color codes.

Style# 1

How to Customize Labels Cloud Widget in Blogger
.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#EE4343, #E07C7C);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000;
}

.label-size a:hover {
  background-position: 0 0;
}

Style# 2

How to Customize Labels Cloud Widget in Blogger
.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#00FF3B, #778C7C);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000;
}

.label-size a:hover {
  background-position: 0 0;
}

Style# 3

How to Customize Labels Cloud Widget in Blogger
.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#8A8C8B, #1A1D1B);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000;
}

.label-size a:hover {
  background-position: 0 0;
}

Finally click Save Template button and you're done.

We hope this article may have helped you in learning How to Customize Labels Cloud Widget in Blogger. Share this article with your friends and don't forget to subscribe us!

4 Cool CSS Tricks to Spice Up your Blog

- 5 Comments
No doubt! Every Blogger loves CSS. CSS is used for styling webpages, customizing colors, layout etc. Almost everything that we do for styling our blog is based on CSS. There are thousands of amazing things that you can do with CSS. Even if you've been learning CSS for many years, you probably still come to new things, new values, new effects/tricks and properties you've never used.
4 Cool CSS Tricks to Spice Up your Blog
So, lets learn some new CSS tricks today, that you can use to spice up your blog. In this tutorial we'll share 4 Cool CSS tricks that you might find useful.

3D Text

Create a 3D effect for your text using this simple CSS code. Add this CSS code to the CSS code of that element which you want to make 3D. You can make it look more cool by changing its color.

text-shadow:   1px 0px #eee, 0px 1px #ccc,
                      2px 1px #eee, 1px 2px #ccc,
                      3px 2px #eee, 2px 3px #ccc,
                      4px 3px #eee, 3px 4px #ccc,
                      5px 4px #eee, 4px 5px #ccc,
                      6px 5px #eee, 5px 6px #ccc,
                      7px 6px #eee, 6px 7px #ccc,
                      8px 7px #eee, 7px 8px #ccc,
                      8px 8px #eee;

Check the Image below to see how it Looks.
3d text effect using css blogolect

Blurry Text

Turn your normal text to a cool blurry text using CSS. Use the below CSS code to create a blurry text and grab your visitors attention :)

.blur {
   color: transparent;
   text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

Check the Image below to see how it Looks.
blurry text effect using css blogolect

Flip an Image

Sounds crazy! You can flip images with CSS. Try this amazing effect for your blog. Use the below CSS to Flip an Image.

img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

Before you try this effect, have a look at the image below.
flipped image effect using css blogolect

Animated Gradient Effect

Create animated gradient effect for your blog buttons. Use the below CSS to create animated gradient effect. You can also use this effect for styling your labels widget.

.button {
background-image: linear-gradient(#518712, #124555);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
.button:hover {
background-position: 0 0;
}

We hope you enjoyed this article and also learned some new CSS tricks. We'll cover some more tutorials on CSS this week. Stay Tuned!

Share these tricks with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

How to Customize Popular Posts Widget in Blogger

- 27 Comments
Are you fed up because of the yucky and unclean design of the blogger Popular Posts Widget? Do you want to make your Popular Posts widget more prominent and attractive for your readers? Popular Posts is a widget provided by blogger, which allows you to display Popular Posts on your sidebar or footer. This widget shows the most visited posts of a blog, you have four different combinations for displaying this widget i.e.

1- Only the title of the post
2- Post title with summary
3- Post title with image thumbnail
4- Post title with image thumbnail and summary

Having a popular posts widget in the sidebar has a lot of advantages. It helps your visitors to check the most visited/popular posts of your blog, it encourages your visitors to navigate your content and the visitors will get more interested in your content. Therefore, if you want to stylize/customize the popular posts widget, and you want to make it more attractive for your visitors. In this article, we'll show you that How to Customize Popular Posts Widget in Blogger. Let's begin:
How to Customize Popular Posts Widget in Blogger

How to Customize Popular Posts Widget in Blogger

First and foremost, Log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now copy the below code and paste it just above/before it (]]></b:skin> Tag)

.PopularPosts {
background: #fff; 
}
.popular-posts ul {
  margin: 0 !important;  padding: 0 !important; 
}
.PopularPosts img {  background: #fff;  border: 3px solid #CCCCCC;  display: block;  float: left;  height: 48px;  margin-right: 8px;  padding: 2px;  width: 48px;  
}
.PopularPosts .widget-content { 
font-size: 15px;  margin: 0 !important; 
}
.popular-posts ul li { 
list-style: none;  border-bottom: 1px solid #ccc;  border-top: 1px solid #FFFFFF;  padding: 0 !important;
}
.popular-posts ul li:hover {
background: #fafafa;  text-decoration: none; 
}
.popular-posts ul li a {
  color: #404040;  display: block; 
}
.popular-posts ul li a:hover { 
color: #262626;  text-decoration: none; 
}

Hit the Save Template button and you're done.
Congratulations: You've successfully customized your popular posts widget.

From Editors Desk

We hope this article may have helped you in customizing popular posts widget. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

How to Customize Labels Cloud Widget in Blogger

- 5 Comments
Do you want to make your Labels Cloud widget more prominent and attractive for your visitors? Labels Cloud is a widget provided by Blogger, that allow you to arrange your content or categorize your content under specific labels. This widget helps your visitors to easily browse your posts by choosing a specific label or category. This widget makes your blog user friendly. You can add this widget to your sidebar or footer.

The default design of the Labels Cloud widget is simple and not that much attention-grabbing. Therefore, to make it look clean and stylish, we've to customize it. As Blogger is a flexible platform and you can easily customize any element of your blog using CSS. So, we'll also customize the Labels Cloud using CSS3. Recently, one of our visitors asked us that How to Customize Labels Cloud Widget in Blogger. In this article, we'll show you that How to Customize Labels Cloud Widget in Blogger.

Don't Forget to Read:
101 Ways to Increase Your Website Traffic
5 Reasons You'll Quit Blogging Within 3 Months
18 Reasons Why Newbie Bloggers Quit Blogging

How to Customize Labels Cloud Widget in Blogger

First and foremost, Log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now copy the below code and paste it just above/before it (]]></b:skin> Tag)

/*---------Labels Cloud--------*/
.label-size{
margin:0 2px 6px 0;
color:#666;
padding: 7px;
border: solid 1px #C6C6C6;
border-radius: 3px;
text-transform: uppercase;
text-decoration:none;
float:left;
text-decoration:none;
font-size:14px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.label-size a  {
float:left;
text-transform: uppercase;
text-decoration: none;
color:#fff;
}
.label-size a:hover  {
text-decoration: none;
color:#2aa4cf;
}

Hit the Save Template button and you're done.
Congratulations: You've successfully customized your Labels Cloud widget.

From Editors Desk

We hope this article may have helped you in customizing Labels Cloud widget. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

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
Create a Basic Stitched Effect Using CSS
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

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