CSS breadcrumbs क्या है - ldkalink

-

Breadcrumbs navigation: सबसे पहले ब्रेड क्रंब नेवीगेशन आखिर होता क्या है इसके बारे में थोडा जानते है ब्रेड क्रंब का मतलब छोटे-छोटे टुकड़ों में होना और नेवीगेश से आशय जो दिशा के बारे में बताता है। 

किसी भी वेबसाइट या ब्लॉग पर ब्रेड क्रंब नेवीगेशन इंटरनेट यूजर्स को आर्टिकल पढ़ते समय उस आर्टिकल की वर्तमान स्थिति के बारे में बताता है यूजर जो आर्टिकल पढ़ रहा है वह आर्टिकल इस साइट के किस कैटेगरी में रखा गया है इसके पाथ (दिशा) के बारे में ज्ञान देता  है।

तो चलिए अब हम आज के इस आर्टिकल में www.ldkalink.com पर यह भी जान लेते हैं कि ब्रेड क्रम नेविगेशन को कैसे क्रिएट करते हैं। 


How to Create Breadcrumbs Navigation 

ब्रेड क्रम्ब्स नेविगेशन जो कि प्रत्येक प्रीवियस पेज के पीछे के लिंक्स को बताता है और वेबसाइट में इंटरनेट यूजर्स को उसके करंट लोकेशन के बारे में बताता है जैसे की नीचे इमेज में आप देख सकते है। 

CSS breadcrumbs
How to Create CSS Breadcrumbs Navigation


Step 1) Add HTML:

सबसे पहले हम एचटीएमएल कोड द्वारा ब्रेड क्रम नेवीगेटेशन के लिस्ट HTML div Tag  और list items क्रिएट करते हैं: 


Example 


<ul class="breadcrumb">

  <li><a href="#">Home</a></li>

  <li><a href="#">SEO</a></li>

  <li><a href="#">Blogging </a></li>

  <li>Italy</li>

</ul>


Step 2) Add CSS:

ऊपर एचटीएमएल जो कोड लिखा गया है इसे स्टाइलिश लुक देने के लिए ही हम सीएसएस का उपयोग करते हैं: 

Example


Style the list

लिस्ट को स्टाइलिश बनाने के लिए इस कोड का उपयोग करें:


ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}

 

Display list items side by side

डेफल्ट रूप से लिस्ट आइटम्स एक के नीचे एक दिखाई देता है लेकिन जब हम चाहते हैं कि यह एक दूसरे के साइड में दिखने लगे, तो इसके लिए हम इस कोड का उपयोग करते हैं:

ul.breadcrumb li {

  display: inline;

  font-size: 18px;

}

 

Add a slash symbol (/) before/behind each list item

हम चाहते हैं की लिस्ट आइटम के बीच-बीच में स्लैश सिंबल दिखाई दे तो इसके लिए यह कोड ऐड करते हैं:

ul.breadcrumb li+li:before {

  padding: 8px;

  color: black;

  content: "/\00a0";

}

 

Add a color to all links inside the list

लिंक के कलर को सेट करने के लिए तथा text- decoration को none करने के लिए इस कोड का उपयोग करते हैं: 

ul.breadcrumb li a {

  color: #0275d8;

  text-decoration: none;

}


Add a color on mouse-over 

माउस का कर्सर ले जाने पर इसका कलर चेंज हो जाए और यह अंडरलाइन में दिखाई दे इसके लिए इस कोड को उपयोग करते हैं: 

ul.breadcrumb li a:hover {

  color: #01447e;

  text-decoration: underline;

}

अभी हमने ब्रेड क्रम्ब्स नेविगेशन के बारे में जाना कि यह होता क्या है और इसका उपयोग क्यों किया जाता है पर आगे हम ब्रेडक्रम नेविगेशन को ब्लॉगर थीम में कैसे ऐड करते हैं इसके बारे में जानेंगे।

Popular Posts

Fake smile Quotes in Hindi - ldkalink

-
Fake smile Quotes in Hindi:  इस आर्टिकल में  fake smile status  से रिलेटेड बहुत सारे  words  और shayari है यदि आप sad fake smile quotes Hindi me  for girls and boys चाहते है तो आप सही जगह पर है।  
view answer

संतुलित बल और असंतुलित बल - ldkalink

-
संतुलित बल और असंतुलित बल (balanced and unbalanced force): इससे पहले वाले आर्टिकल में हमने बल के बारे में विस्तार से जाना था पर अभी हम Santulit bal और  asantulit bal के बारे में उदाहरण के साथ जानने वाले है। 
view answer

image file formats क्या है - ldkalink

-
Image file format  क्या है: 10 Type of image format   list में इमेज के कई प्रकार होते है और इन सब का उपयोग इनके जरूरत के आधार पर अलग समय में अलग अलग जगह पर किया जाता है कुछ इमेज फॉर्मेट जैसे की jpeg, png, raw, tiff, gif, pdf, psd, indd,   eps, Ai आदि है।    इन सभी तरह के इमेज फॉर्मेट का उपयोग कब और कैसे किया जाता है इसके बारे में www.ldkalink.com पर निचे विस्तार से बताया गया है।  image file format क्या है 10 Types of image file extensions आज हम उन सभी  image file formats in Hindi   के बारे में  Examples के साथ   बात करने वाले है जो अलग अलग तरह के  image file extensions  के लिए multimedia के रूप में computer तथा mobiles में यूज़ किये जाते है।    JPEG (JPG) - joint photographic experts group  PNG (portable network graphics) GIF (graphics interchange format) TIFF (tagged image file format) Raw - Raw image formats PDF (portable document format) PSD (Photoshop document) INDD (in Design document)  EPS (encapsula...
view answer

पैन कार्ड पर पिता के ही नाम क्यों लिखे जाते हैं

-
पैन कार्ड पर पिता के ही नाम क्यों लिखे जाते हैं ( Why is father name on PAN card ) : आज के इस आर्टिकल में हम जानने वाले हैं कि पैन कार्ड पर पिता के नाम ही क्यों लिखे जाते हैं। 
view answer

खुद को मोटीवेट करते रहने के लिए motivational stories हमेशा पढ़ते रहे

-
motivational stories in Hindi : आज हम आपके सामने छोटी सी ज्ञान वाली महान लोगों की संघर्ष से सफलता की प्रेरणादायक ( motivational ), मोरल (moral) कहानी आपके सामने लेकर आए हैं जो आपको ज्ञान देने वाली कहानी से लेकर आपकी सोच बदल देने वाली कहानी में से एक है। 
view answer

अभ्यास ही सफलता की कुंजी motivational story - ldkalink

-
अभ्यास ही सफलता की कुंजी motivational story in Hindi: आज के इस आर्टिकल में हम अभ्यास ही सफलता की कुंजी होती है को प्रेरणादायक कहानी (prernadayak kahani) को एक साधारण से कहानी के रूप में समझने वाले हैं। 
view answer

बीजांक (Bijank) किसे कहते हैं इसका उपयोग गणना की जाँच करने के लिए कैसे किया जाता है, आइये इसे कई तरह से उदाहरण से समझते है

-
बीजांक (Digital root) बीजांक (Digital root or Digital sum) : आज हम जानने वाले है की बीजांक क्या है  (Bijank kya hai)  है यह किसी भी दी गई संख्या के अंकों का एक योग होता है और इसे तब तक जोड़ा जाता है जब तक की एक अंक वाली संख्या प्राप्त न हो जाए। 
view answer

blogger template कैसे create करे from scratch - ldkalink

-
Custom blogger template कैसे बनाये: ब्लॉगर यह एक content management system (CMS) है यहाँ से हम अपने लिए एक website create कर इसकी सहायता से अपने नॉलेज को बड़ी ही आसानी से लोगो तक पहुंचा सकते है।    website या Blog बनाने के लिए एक Domain name के साथ एक Template की भी जरूरत होती है क्यों हर साइट का अपना    एक   अलग नाम और लुक होता है internet पर कभी भी एक नाम के दो साइट नहीं हो सकते है।  वैसे तो इंटेंटनेट पर कई सारे पहले से बना हुआ फ्री और पेड दोनों तरह के टेम्पलेट मौजूद होते है free वाले टेम्पलेट में कुछ लिमिटेशन होता है और पेड वर्शन में कुछ सुविधाएं और दे दी जाती है।  पर इसे हम अपने तरीके से पूरी तरह कस्टमाइज नहीं कर सकते है इसलिए हमें एक कस्टम ब्लॉगर टेम्पलेट क्रिएट करने की जरूरत होती है जिसे हम अपने तरीके से बना सकते है। लेकिन यदि आप खुद से यानि blogger में manual method से Custom template कैसे create करते है इसके बारे में जानना चाहते है तो आज से इस आर्टिकल में हम how to make a blogger template हिंदी में सिखने वाले है यानि blogger में custom templ...
view answer

अदिश राशि और सदिश राशि में अंतर - ldkalink

-
अदिश राशि (scalar quantity) और सदिश राशि (vector quantity): आज हम अदिश राशि और सदिश राशि के बारे में बात करने वाले है की आखिर adish rashi (scalar quantity) और sadish rashi (vector quantity) में anter (difference) क्या होता क्या होता है।  कौन कौन से राशि अदिश और सदिश राशि होती है और अदिश राशि तथा सदिश राशि की पहचान कैसे करे इन सब के बारे में आज हम इस आर्टिकल में बात करने वाले है।  अदिश राशि और सदिश राशि में अंतर अदिश और सदिश राशि में अंतर क्या है  Scalar and vector quantity definition in Hindi: सबसे पहले हम Adish rashi और sadish rashi को इसकी परिभाषा (Peribhasha) से समझते है ऐसी भौतिक रशिया जिनमे केवल परिणाम होता है अदिश राशि कहलाती है जैसे की   दूरी, छेत्रफल, द्रव्यमान, समय, तापमान, विधुत धरा, घनत्व, आयतन इत्यादि।  पर जिन राशियों में परिणाम और दिशा दोनों होती है इन्हे सदिश राशि कहते है जैसे की वेग, बल, संवेग, चुम्बकीय आघूर्ण, ताप प्रवणता, विद्युत द्विध्रुव आघूर्ण इत्यादि । अदिश राशि का उदहारण/Scalar quantity example  अदिश राशि की पहचान कैसे...
view answer

on page seo और off page seo क्या है - ldkalink

-
On-page seo vs. off-page seo: आज के इस आर्टिकल Types of SEO में हम जानेंगे की on-page SEO और off-page SEO  किसे कहते है आखिर ये दोनों होता क्या है इसे हम इसकी परिभाषा और example  से भी समझने का प्रयास करेंगे। इसके अलावा black hat seo और white hat seo क्या है  क्या यह भी seo के ही प्रकार है या फिर ये दोनो seo करने के techniques है अगर हम  white hat और black hat  की बात करे तो ये दोनो ही  seo करने की techniques है  यानि content को optimize करने के तरीके है।  Black hat seo और white hat seo में कौन कौन सी techniques का use किया जाता है इसके बारे में हम पिछले आर्टिकल में step by step जाना था यदि आपने यह आर्टिकल नहीं पढ़ा है तो इसे एक बार जरूर पढ़े और इसके साथ ही Technical seo क्या है इसमें कौन कौन से तरीका use किया जाता है इसके बारे में पूरा विस्तार से जानेंगे।  Types of seo - on page seo और off page seo क्या है आप सभी जानते है की हर काम को करने के दो तरीके होते ही है पहला जो गलत तरीके से किया जाता है और दूसरा सही तरीके से, जब सही तरीके से...
view answer

Translate