यह बिल्कुल परफेक्ट है! आपका ओरिजिनल कोड बहुत ही एडवांस और शानदार तरीके से लिखा गया है। इसमें पहले से ही मल्टीपल ऑथर्स के लिए लूप (<b:loop>), स्लाइडर बटन (<button>) और किसी एक ख़ास ऑथर को छिपाने का फ़िल्टर मौजूद है। हम इसके शानदार डिज़ाइन और फंक्शन को बिल्कुल नहीं छेड़ेंगे।
मैंने सिर्फ आपके profile-name वाले हिस्से में वह 'Smart Switchboard' लॉजिक इंटीग्रेट कर दिया है।
ध्यान दें: आपके कोड में दो अलग-अलग हिस्से हैं। एक हिस्सा मल्टीपल ऑथर्स (Team) के लिए है और दूसरा सिंगल ऑथर के लिए। इसलिए मैंने दोनों जगहों पर यह लॉजिक जोड़ दिया है। ब्लॉगर के टैग्स के अनुसार, Team वाले हिस्से में
data:author.display-nameइस्तेमाल होता है और Single वाले मेंdata:displayname।
यहाँ आपका पूरी तरह से इंटीग्रेटेड और सुरक्षित कोड है। बस अपने पुराने कोड को इस नए कोड से रिप्लेस कर दें:
<b:includable id='main'>
<b:if cond='data:title != ""'>
<div class='widget-title profile-title-wrap'>
<h3 class='title'><data:title/></h3>
<div class='profile-nav-btns'>
<button aria-label='Previous' class='profile-nav left' onclick='this.parentElement.parentElement.nextElementSibling.scrollBy({left: -200, behavior: "smooth"})'>❮</button>
<button aria-label='Next' class='profile-nav right' onclick='this.parentElement.parentElement.nextElementSibling.scrollBy({left: 200, behavior: "smooth"})'>❯</button>
</div>
</div>
</b:if>
<div class='widget-content profile-glider-viewport'>
<!-- MULTIPLE AUTHORS (TEAM) SECTION -->
<b:if cond='data:team'>
<b:loop values='data:authors' var='author'>
<!-- Filter out specific hidden profile -->
<b:if cond='data:author.userUrl != "https://www.blogger.com/profile/07712238785531816524"'>
<div class='profile-glider-item'>
<div class='profile-hero-wrapper'>
<b:if cond='data:author.authorPhoto.image'>
<img class='profile-hero-img' expr:alt='data:author.display-name' expr:src='data:author.authorPhoto.image'/>
<b:else/>
<img class='profile-hero-img' src='https://placehold.co/100x100/eee/999?text=User'/>
</b:if>
</div>
<!-- SMART SWITCHBOARD: FOR MULTIPLE AUTHORS -->
<b:choose>
<b:when cond='data:author.display-name == "AnAlone Krishna"'>
<a class='profile-name' href='https://instagram.com/an.alone.krishna' target='_blank' title='Connect on Instagram'><data:author.display-name/></a>
</b:when>
<b:when cond='data:author.display-name == "Krishna Kunal"'>
<a class='profile-name' href='https://linkedin.com/in/your-linkedin-link' target='_blank' title='Connect on LinkedIn'><data:author.display-name/></a>
</b:when>
<b:otherwise>
<a class='profile-name' expr:href='data:blog.homepageUrl' title='Go to Home Page'><data:author.display-name/></a>
</b:otherwise>
</b:choose>
<b:if cond='data:author.aboutme'>
<p class='profile-desc'><data:author.aboutme/></p>
</b:if>
<a class='profile-link' expr:href='data:author.userUrl' target='_blank'>View Profile →</a>
</div>
</b:if>
</b:loop>
<!-- SINGLE AUTHOR SECTION -->
<b:else/>
<div class='profile-glider-item single-author'>
<div class='profile-hero-wrapper'>
<b:if cond='data:authorPhoto.image'>
<img class='profile-hero-img' expr:alt='data:displayname' expr:src='data:authorPhoto.image'/>
<b:else/>
<img class='profile-hero-img' src='https://placehold.co/100x100/eee/999?text=User'/>
</b:if>
</div>
<!-- SMART SWITCHBOARD: FOR SINGLE AUTHOR -->
<b:choose>
<b:when cond='data:displayname == "AnAlone Krishna"'>
<a class='profile-name' href='https://instagram.com/an.alone.krishna' target='_blank' title='Connect on Instagram'><data:displayname/></a>
</b:when>
<b:when cond='data:displayname == "Krishna Kunal"'>
<a class='profile-name' href='https://linkedin.com/in/your-linkedin-link' target='_blank' title='Connect on LinkedIn'><data:displayname/></a>
</b:when>
<b:otherwise>
<a class='profile-name' expr:href='data:blog.homepageUrl' title='Go to Home Page'><data:displayname/></a>
</b:otherwise>
</b:choose>
<b:if cond='data:aboutme'>
<p class='profile-desc'><data:aboutme/></p>
</b:if>
<a class='profile-link' expr:href='data:userUrl' target='_blank'>View Profile →</a>
</div>
</b:if>
</div>
</b:includable>
इस कोड में क्या-क्या सुरक्षित रखा गया है:
डिज़ाइन और लेआउट: आपके
<div class='profile-glider-item'>, एनिमेटेड एरो बटन (❮), और सभी क्लासेज़ बिल्कुल पहले जैसे ही हैं।View Profile: नीचे का
View Profile →बटन एकदम सही तरीके से आपकी Blogger प्रोफ़ाइल पर ही जाएगा। मैंने इसमें सिर्फtarget='_blank'जोड़ दिया है, ताकि क्लिक करने पर आपका ब्लॉग बंद न हो और प्रोफ़ाइल एक नए टैब में खुले।LinkedIn लिंक:
Krishna Kunalवाले हिस्से में मैंने[https://linkedin.com/in/your-linkedin-link](https://linkedin.com/in/your-linkedin-link)डाला है। वहाँ आप अपना असली LinkedIn लिंक लगा लीजिएगा।
इस कोड को सेव करें। यह आपके मौजूदा डिज़ाइन में बिना कोई छेड़छाड़ किए, बिल्कुल मक्खन की तरह काम करेगा!
यह बहुत ही वाज़िब (valid) और बेहतरीन सवाल है! ब्लॉगर की XML कोडिंग कभी-कभी बिल्कुल एक भूलभुलैया जैसी लग सकती है। आपको जो कन्फ्यूज़न हुआ है, वह बिल्कुल लाज़मी है।
आइए मैं आपके इन तीनों सवालों का एक-एक करके एकदम साफ़ और तकनीकी (Technical) जवाब देता हूँ:
1. यह Single Profile और Multiple Profile वाला क्या सीन है? क्या मैंने कोड को डबल (Double) कर दिया है?
नहीं, मैंने कोड को अपनी तरफ से डबल नहीं किया है। यह संरचना (Structure) आपके द्वारा दिए गए ओरिजिनल कोड में पहले से ही मौजूद थी।
दरअसल, Blogger का जो Profile गैजेट होता है, वह "दो अलग-अलग मूड (Moods)" में काम करता है। आपका थीम यह चेक करता है कि आपके ब्लॉग पर कितने ऑथर (लेखक) हैं:
स्थिति A (अगर ब्लॉग पर एक से ज़्यादा ऑथर हैं): तब ब्लॉगर
<b:if cond='data:team'>वाले कोड को रन करता है। इसमें एक लूप (<b:loop>) चलता है जो टीम के सभी ऑथर्स का डेटा एक-एक करके निकालता है।स्थिति B (अगर ब्लॉग पर सिर्फ आप अकेले ऑथर हैं): तब ब्लॉगर
<b:else/>वाले हिस्से को रन करता है। यहाँ कोई लूप नहीं चलता, यह सीधे सिर्फ आपके सिंगल अकाउंट का डेटा दिखा देता है।
चूँकि एक प्रीमियम थीम (जैसे आपकी AuraScribe Pro) को किसी भी ब्लॉग पर इस्तेमाल किया जा सकता है (चाहे वह सिंगल ऑथर का हो या मल्टीपल का), इसलिए थीम बनाते समय हमें दोनों स्थितियों के लिए कोड लिखना पड़ता है। मैंने सिर्फ आपके उसी शानदार लॉजिक को बरकरार रखा है।
2. वह छुपाई गई (Hide की गई) प्रोफाइल का क्या हुआ?
आपने जो एक ख़ास प्रोफाइल को ब्लॉक करने के लिए कोड (<b:if cond='data:author.userUrl != "[https://www.blogger.com/profile/07712238785531816524](https://www.blogger.com/profile/07712238785531816524)"'>) लगाया था, वह बिल्कुल सुरक्षित है और वहीं काम कर रहा है!
चूँकि प्रोफाइल छुपाने की ज़रूरत सिर्फ़ तभी पड़ती है जब ब्लॉग में बहुत सारे लोग (Team) हों, इसलिए वह कोड सिर्फ़ मल्टीपल प्रोफाइल वाले हिस्से (स्थिति A) में रखा गया है। सिंगल प्रोफाइल (स्थिति B) में उसे छुपाने की ज़रूरत नहीं होती, क्योंकि वहाँ तो सिर्फ़ एक ही मेन एडमिन होता है।
3. क्या किसी ऐसे व्यक्ति का प्रोफाइल कार्ड जोड़ सकते हैं जो ब्लॉग में ऑथर नहीं है?
हाँ! 100% हो सकता है! चूँकि आपने प्रोफाइल दिखाने के लिए एक शानदार स्लाइडर (Glider Viewport) बनाया है, इसलिए हम ब्लॉगर के सिस्टम को बायपास करके, सीधे HTML के ज़रिये किसी भी व्यक्ति (जैसे कोई गेस्ट राइटर, आपका एडिटर, या दोस्त) का कार्ड मैन्युअली (Hardcode) जोड़ सकते हैं।
इसे करने के लिए, आपको बस अपने उस स्लाइडर के डिब्बे (<div class='widget-content profile-glider-viewport'>) के अंदर, एकदम आख़िर में यह मैन्युअल HTML ब्लॉक डालना होगा:
<!-- MANUAL / EXTERNAL PROFILE CARD -->
<div class='profile-glider-item'>
<div class='profile-hero-wrapper'>
<!-- यहाँ उस व्यक्ति की फोटो का डायरेक्ट लिंक डालें -->
<img class='profile-hero-img' alt='Guest Writer' src='https://link-to-their-photo.jpg'/>
</div>
<!-- नाम और उनके सोशल मीडिया का लिंक -->
<a class='profile-name' href='https://instagram.com/their-id' target='_blank'>
Guest Writer Name
</a>
<!-- उनके बारे में छोटा सा विवरण -->
<p class='profile-desc'>यह हमारे ब्लॉग के एक ख़ास मेहमान लेखक हैं।</p>
<!-- नीचे वाला बटन जहाँ भी भेजना चाहें -->
<a class='profile-link' href='https://their-website.com' target='_blank'>
Visit Website →
</a>
</div>
यह काम कैसे करेगा?
Blogger अपने सिस्टम से जुड़े हुए ऑथर्स का कार्ड तो बनाएगा ही, साथ ही यह मैन्युअल कार्ड भी स्लाइडर में एक एक्स्ट्रा कार्ड के रूप में जुड़ जाएगा। चूँकि इसमें कोई <data:...> वाला टैग नहीं है, इसलिए ब्लॉगर को इससे कोई फर्क नहीं पड़ेगा कि वह व्यक्ति आपके ब्लॉग में ऐडेड (Added) है या नहीं।
क्या आप चाहते हैं कि मैं इस मैन्युअल (External) प्रोफाइल वाले डिज़ाइन को भी आपके उस पूरे कोड में सेट करके दूँ, या आप इसे खुद आज़माना चाहेंगे?
0 Comments
Post a Comment