BlogSpot Blog में Specific Links का Color Change कैसे करें

इस post में मैं आपको बताने वाला हूँ कि BlogSpot blog में post links, sidebar links, footer links, label links, archive gadget links, comment link, post title के color को change कैसे करते हैं | इसके साथ ही links में beautiful color effects कैसे देते है, के बारे में बताऊंगा |

Beautiful color effects वाले Links का होना क्यों जरुरी है ?

Blog में beautiful color link का होना बहुत ही जरुरी है | इस तरह के लिंक के तरफ visitors अधिक attract होते है और blog देखने में भी सुन्दर लगता है और links पर click करने के chances भी बढ़ जाते है | इससे blog या site का bounce rate decrease होता है जो SEO के लिए बहुत ही अच्छा है |

अगर आपके blog post में low quality color का link add है तो हो सकता है कि visitors उस लिंक की तरफ आकर्षित न हो और उस पर click न करें और वे आपके site को छोड़कर किसी दूसरे site पर visit कर जाये | इससे आपके site की bounce rate increase कर सकती है जो कि SEO के नजरिये से अच्छा नहीं है |



इसलिए आप अपने blog के सभी post में hyperlink को जरूर add करें और लिंक का color एकदम beautiful रखे | आगे मैं CSS code के बारे में बताने जा रहा हूँ जिसको template में add करके आप अपने blog के specific links को change कर सकते है |

• Blog Post में दूसरी Post का Link कैसे Add करे ?
• Gravatar Account बनाकर WordPress Comment में अपना Profile Photo कैसे दिखाये ?

Links या Hyperlink क्या है ?

हम लोग जानते है कि by default hyperlink highlighted blue color का underlined text (unvisited link) होता है | इस पर click करने के बाद new webpage open होता है |

Template में निम्न four hyperlink states के CSS codes को add करके links में चार तरह के apperance को show कर सकते है :-

• Normal Links : Normal links unvisited links होता है | इस तरह के links में किसी भी तरह का छेड़छाड़ नहीं करने पर इसका appearance normal रहता है |Normal links CSS code - a:link { color: #ff0000 !important; }

• Visited Links : जब visitors पहले से ही links पर click कर चुका होता है तब links का जो appearance (color) होता है, visited links कहते है |
  Visited links code - a:visited { color: #0000ff !important; }

• Hover Links : जब visitors mouse के cursor को links पर ले जाता है तो hover links का appearance (color) change होता है |
  Hover links code - a:hover { color: #38761d !important; }

• Active Links : जब visitors mouse के button को release करने से पहले directly link पर click करता है तो active links का appearance (color) change होता है |
  Active links code - a:active { color: #ff9900 !important; }

इस four states के hyperlink के CSS Code को template में add करके links में beautiful appearance और effects डाल सकते है |


BlogSpot Blog में Specific Links के Color को Change करने के लिए CSS Codes :

1. All Links [ to change color of all links ]

a:link {
color: #ff0000 !important;
}
a:visited {
color: #0000ff !important;
}
a:hover {
color: #38761d !important;
}
a:active {
color: #ff9900 !important;
}

2. Post Links [ to change color of all links inside post body]

.post-body a {
color: #ff0000 !important;
}
.post-body a:visited {
color: #0000ff !important;
}
.post-body a:hover {
color: #38761d !important;
}
.post-body a:active {
color: #ff9900 !important;
}

3. Post Title [ to change post title color]

.post-title a {
color: #ff0000 !important;
}
.post-title a:visited {
color: #0000ff !important;
}
.post-title a:hover {
color: #38761d !important;
}
.post-title a:active {
color: #ff9900 !important;
}

4. Sidebar Links [ to change all links color within sidebar]

.sidebar a {
color: #ff0000 !important;
}
.sidebar a:visited {
color: #0000ff !important;
}
.sidebar a:hover {
color: #38761d !important;
}
.sidebar a:active {
color: #ff9900 !important;
}

5. Footer Links [ to change all footer links color]

.footer-outer a {
color: #ff0000 !important;
}
.footer-outer a:visited {
color: #0000ff !important;
}
.footer-outer a:hover {
color: #38761d !important;
}
.footer-oute a:active {
color: #ff9900 !important;
}

6. Label Links [ to change label links ]

.post-labels a {
color: #ff0000 !important;
}
.post-labels a:visited {
color: #0000ff !important;
}
.post-labels a:hover {
color: #38761d !important;
}
.post-labels a:active {
color: #ff9900 !important;
}

7. Archive Gadget Links

#ArchiveList a {
color: #ff0000 !important;
}
#ArchiveList a:visited {
color: #0000ff !important;
}
#ArchiveList a:hover {
color: #38761d !important;
}
#ArchiveList a:active {
color: #ff9900 !important;
}

8. Comment Link

.comment-link {
color: #ff0000 !important;
}
.comment-link : visited {
color: #0000ff !important;
}
.comment-link : hover {
color: #38761d !important;
}
.comment-link : active {
color: #ff9900 !important;
}

Notes :-

• CSS code में color code #ff0000, #0000ff, #38761d, #ff9900 के place पर आप अपने पसंद के color code का इस्तेमाल कर सकते है |

• Various types के color code को w3schools या 2createwebsite site पर जाकर प्राप्त कर सकते है |

Blogger Template में CSS codes को कैसे Add करें ?

CSS codes को template में add करने के लिए निम्न steps को follow करे :


Step 1

सबसे पहले blogger.com पर जाकर अपने blogger account में login  करें |


Step 2

अब blogger dashboard open होगा |

1. Theme पर click करे |
2. Customise पर click करे |

Step 3

1. Advanced पर click करे |
2. Add CSS पर click करे |
3. Blog में जिस भी links के color को change करना है चाहे वह post links, footer links etc. हो, उसके CSS code को ऊपर से copy करके CSS box में paste कर दें |
4. Apply to blog पर click करे |

अब अपने site को browser में open करे और देखें कि आपके blog का links change हुआ या नहीं |

• Infolinks से पैसे कैसे कमाएं : Full Guide
• Google + Profile Link Change कर Custom URL / Username कैसे Set करे ?

उम्मीद करता हूँ कि आपको यह post जरूर पसंद आया होगा | BlogSpot Blog में Specific Links का Color Change करने में कोई परेशानी आती है तो मुझे comment करे | मैं आपकी मदद करने का पूरी कोशिश करूँगा |

इसी तरह का new post direct अपने e-mail inbox में पाते रहने के लिए subscribe करें | अगर आपको यह पोस्ट पसंद आया हो तो इसे अपने दोस्तों के साथ facebook, twitter, google plus जैसे social sites पर share करें |

Happy Blogging !