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/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.

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.

Tags: Blog Design / CSS Tricks

How to Customize Blockquote in Blogger (v.2)

- 1 Comment

Blockquote or a Block quotation is used to display certain text different from other. It is used for quotations or for showing a special message by the author. Blockquote is also used for displaying codes. You might have seen the customized part of my articles where i put my codes/scripts that i share with you. Every blog has its own blockquote style, but have you ever thought about customizing your blockquote style. If not, or you don't know about customizing blockquote? Don't worry, today in this tutorial we'll show you that How to Customize Blockquote in Blogger. This blockquote also shows a beautiful transition effect on hover and as we know, that the easiest way of customizing any element of a blogger template is by using CSS, so we'll customize this blockquote using CSS.
Recommended:
How to Customize Blockquote in Blogger

Customize Blockquote in Blogger

First and foremost log in to your Blogger Account >> Select your Blog >> Template >> click Edit HTML >> click inside the code area and use Ctrl+F to search and search for the following tag

]]></b:skin>

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

.post blockquote {background: #2aa4cf;
padding: 10px;
color: #ffffff;
border-top: 20px solid #444;transition:border-top-color 400ms;-webkit-transition:border-top-color 400ms;-moz-transition:border-top-color 400ms;}
.post blockquote:hover {background:#444; border-top-color:#2aa4cf;}

Hit the Save Template button.
Congratulations: You've successfully customized your blockquote in blogger.

From Editors Desk

We hope this tutorial may have helped you in customizing your blockquote. Share this post with your friends and don't forget to subscribe us.

Tags: Blog Design / Blogging Tips / CSS Tricks

Add CSS3 Hover Animation Effect to Post Titles in Blogger

- 53 Comments

You might have seen hover effect on post titles on many blogs (especially in blogger blogs). Adding a CSS3 hover animation effect to post titles will increase your readership and it'll also attract your readers. One of our readers asked us that how to add a link nudge effect to post titles in blogger. So, today in this article we are going to learn how to add CSS3 hover animation effect to post titles in Blogger. How it works? Click on the demo button and move your mouse cursor over any post title to see how it works.

Demo

Add CSS3 Hover Animation Effect to Post Titles in Blogger

Step 1. Log in toy your Blogger Account
Step 2. Go to Template >> Edit HTML and search for the ]]></b:skin> tag
Step 3. Now copy the below code and paste it just above/before it

.post h2 {
margin:.1em 0 0;
padding:0 0 4px;
font-size:1.0em;
font-weight:normal;
line-height:2.5em;
color:#444;
font-family: Oswald, Serif;
}
.post h2 a, .post h2 a:visited, .post h2 strong {
display:block;
text-decoration:none;
color:#444;
font-size:2.0em;
font-weight:normal;
font-family: Oswald, Serif;
}
.post h2 strong, .post h2 a:hover {
color:#2aa4cf;
padding: 0px 00px 0px 10px;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Step 4. Click on Save Template button
And you're done!

From Editors Desk

We hope this article helped you in learning How to Add CSS3 Hover Animation Effect to Post Titles in Blogger. Share this article with your friends and don't forget to subscribe us!

Tags: Blog Design / Blogging Tips / Buttons

How to Create a Button/Badge for your Blog

- 3 Comments

You might have seen that many blogs and directories are using Buttons for their promotion. Blog buttons are becoming a very popular way to promote and link back to your blog. A badge in your blog's sidebar is really a good way to provide your readers something that they can use and display on their own blog to show that which blog's they read and it'll also increase your blog's traffic. It's really easy to create a button for promoting your blog. You can choose color, border, font style, background and text for your button by using this button maker tool. Using this tool is extremely easy and in this article we'll show you How to Create a Button/Badge for your Blog using Button maker tool.

How to Create a Button/Badge for your Blog

Go to this page and Customize you badge
Customization:
1- Choose a base color or keep it transparent
2- Choose a border color or keep it transparent
2- Select your Button Size and
4- Choose a vertical bar color or keep it transparent
5- For better look, write a small abbreviation of your blog or whatever you want (Left Side Text) and select its background and text color
6- Write your main keyword in the (Right Side Text) and select it background and text color
7- Click on Update >> Looks good so right click on the image and Save it
8- Upload it to blogger to get its link

How to Add this Badge to your Blog

<a href="Your-Blog-URL" ><img border="0" src='Your-button-link' rel="Keyword"/></a>

1- Replace Your-Blog-URL with the url of your blog
2- Replace Your-button-link with the link of your button
3- Replace Keyword with your blog's keyword
Now to add this button to your blog Log in to your Blogger Account >> Layout >> Add a Gadget >> Scroll down the page and select HTML/JavaScript gadget from the list of gadgets. Paste the above code after customization in the empty HTML/JavaScript Box and click on Save Button.

From Editors Desk

I hope this article helped you in learning How to Create a Button/Badge for your Blog and How to Add it to your Blog. Share this article with your friends and don't forget to subscribe us. Take Care!

Tags: Blog Design / Blogging Tips

Add Rainbow Animation Effect to Links in Blogger

- 23 Comments

Got tired of Blogger's default link effect? Want to change your links hover effect? Don't worry, today we have a beautiful link effect for your blog. By using this link effect you can make the links on your blog change through different colors when the cursor is hovered over them. This effect works on JavaScript and it's really easy to implement this Rainbow Animation Link Effect to your blog. Follow the steps below to implement this Rainbow Animation Effect to your Blog.

How to Add Rainbow Animation Effect to Links in Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Edit HTML >> and Search for the <head> tag
Step 3. Now Copy the below code and Paste it just below/after the <head> tag

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1)    elmR = "0" + elmR;
if (elmG.length == 1)    elmG = "0" + elmG;
if (elmB.length == 1)    elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

Step 4. Hit the Save Template button
And you're done...

From Editors Desk

I hope this articled helped you in learning How to Add Rainbow Animation Effect to Links in Blogger. Share this article with your friends.

Tags: Blog Design / Blogging Tips

Add Page Peel Effect with jQuery in Blogger

- 4 Comments

Page Peel effect is actually a page flip effect, when you move your cursor on over it, it flip and shows that whats behind it. There are many ways for adding this effect, and today we are going to share one of them. Just like other Peel effect widgets, it would also appear at the top right corner of your blog and whenever your visitors would move their cursor over the top right corner of your website, it would display the RSS Image with its link. Check the following screenshot to see how it works.

How to Add Page Peel Effect

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Edit HTML >> Search for the <head> tag
Step 3. Now Copy and Paste the following code below/after <head> tag
Note: If your blog already have jQuery plugin, then ignore this step

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Step 4. Now search for </head> tag and paste the following piece of code just above/before it

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihz3q3h2zCv7CfnjbVW3Qf06uFaWlBrVKQSLud-kTbP9TPVdOMl1g7fTyj6E6ASKoEspj3a7ZqUjX_xBvzlWGaVo3vreRS5imzfG9AUjpKFB48TUUtXaL6-h_4D9H2n7XIcN10kyAVp8A/s1600/mini_rss.png) no-repeat right top #fff;
}
</style><a href='http://blogolect.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOOskp1gqv0QqtqnuJnHX00nJ2WgEcdPi3HTTJRQtY31Q_GnKf8VljKvkRF-ZKbacVAUdzly0Rqx4dYx0RwJQEwXMFkK_k3Lym-kF-bdd9tE-up7AmsRmTYo7584cmbDP0M8LZ6Cg26I/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .back-img").stop()
    .animate({
    width: '307px',
    height: '319px'
    }, 500);
    } , function() {
    $("#pageflip img").stop()
    .animate({
    width: '50px',
    height: '52px'
    }, 220);
$(".back-img").stop()
    .animate({
    width: '50px',
    height: '50px'
    }, 200);
});
});
</script>

Step 5. Now search for <body> tag and paste the following piece of code just after the close tag '>'

<div id='pageflip'>
<a href='http://feeds.feedburner.com/blogolect'><img alt='Blogolect' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRzDkdCzX1NFeCnXV6pyc0eTACmDS0ca4pqthkuDpAt0MSHP0z6w7t7fDrqgu8A_bku1H1trfd8GtlT4t4slFFTziYEeqelRwuYdIBKDAx3yKyOnS4jMjaq4THkx2JAwdNQisWuiQzUBN/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>

Replace http://feeds.feedburner.com/blogolect with your Link
Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihz3q3h2zCv7CfnjbVW3Qf06uFaWlBrVKQSLud-kTbP9TPVdOMl1g7fTyj6E6ASKoEspj3a7ZqUjX_xBvzlWGaVo3vreRS5imzfG9AUjpKFB48TUUtXaL6-h_4D9H2n7XIcN10kyAVp8A/s1600/mini_rss.png with your Image URL or keep it default

Step 6. Hit the Save Template Button
And you're done.

Tags: Blog Design / Blogging Tips

Add Spinning/Rotating Effect to Images in Blogger

- 2 Comments

Recently we've shared Add Round Hover Effect to Images of your Blogger Blog Posts , Add Hover Effect to Images of your Blogger Blog Posts , Add Zoom Effect to Images on Mouse Hover in Blogger and today we've another image effect for you. This effect rotates the image to 360 degree when you move your mouse cursor on the image. To see how this hover effect works move your mouse cursor on the image below.

How to Add Spinning/Rotating Effect to Images

Step 1. Log in to your Blogger Dashboard

Step 2. Go to Template >> Edit HTML and Search for the following tag

]]></b:skin>

Step 3. Copy the below code and Paste it just above/before it

.spineffect img {
/* Spinning/Rotating Effect for Images By www.blogolect.blogspot.com */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.spineffect img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

You can change the degree at which you want to rotate image by changing degree value 360

Step 4. Hit the Save Template button

How to Use this Effect on Images

To use this effect in you posts then in the post editor after uploading your image switch to HTML look for the image class. The default image class is <div class="seperator". Now replace seperator to spineffect in the post editor and you're done.
If you want to use effect in other part of your blog then use the following tag and replace IMAGE-URL with the image URL.

<a class="spineffect" href="IMAGE-URL" target="_blank"><img src="IMAGE-URL" /></a>

From Editors Desk

I hope this tutorial helped you in learning How to Add Spinning/Rotating Effect to Images in Blogger. Share this article with your friends and don't forget to subscribe us!