Codepal

एक बहुत लंबे समय के लिए चहचहाना वेबसाइट साइडबार, पाद लेख या शीर्ष लेख पर प्रदर्शित की इस प्रवृत्ति किया गया है. कई डिजाइनरों सुंदर नेत्र पकड़ने उन्हें युक्त चित्र बनाने के द्वारा चहचहाना प्रदर्शित करने के सरल तरीके तैयार की है. उन्हें नेत्रहीन आकर्षक बनाने का मुख्य उद्देश्य है ताकि आगंतुकों को दिलचस्पी पाने के लिए और है कि साइट के मालिक प्रदान कर रहा है ताजा अद्यतन पढ़ सकते हैं. इस ट्यूटोरियल करने जा रहा है क्या आप के लिए सक्षम करने के लिए अपने कलरव फ़ीड प्रदर्शन बॉक्स इंटरैक्टिव इतना है कि आपके आगंतुकों 'जाने वाह कर सकते हैं! यह बहुत अच्छा है जब वे अपनी साइट पर जाएँ या अपने फ़ीड पढ़ें. तो यहाँ यह जाता है:

चरण 1. मैं अपनी वेबसाइट में कैसे सम्मिलित फ़ीड?

अपनी वेबसाइट में अपने कलरव खाते फ़ीड डालने मुश्किल हो सकता है. यह एक अच्छी बात है वहाँ से बाहर इतने सारे ट्यूटोरियल है जो आप आसानी से इन फ़ीड्स डालने के ज्ञान के साथ प्रदान कर रहे हैं. यहाँ कुछ संसाधनों है जो तुम चहचहाना से अपनी खुद की साइट पर फ़ीड प्राप्त करने के लिए सक्षम हो जाएगा रहे हैं:

1. चहचहाना अपडेट करने के लिए एक अद्वितीय पेज डिजाइनिंग
2. 10 विस्मयकारी चहचहाना अपनी वेबसाइट के साथ एकीकृत करने के तरीके
3. !

WordPress के उपयोगकर्ताओं को कुछ भयानक plugins का उपयोग करने के लिए अपनी साइट पर उनके चहचहाना फ़ीड प्राप्त कर सकते हैं:

1. 35 WordPress के लिए विस्मयकारी चहचहाना प्लगइन्स
2. Juitter
3. चहचहाना के लिए jQuery के प्लगइन

चरण 2. छवि प्रेत बनाना.

अब है कि आप सफलतापूर्वक सीखा है कि कैसे चहचहाना फ़ीड आयात करने के लिए, यह प्रदर्शन क्षेत्र कॉन्फ़िगर करने के लिए समय है. इस ट्यूटोरियल के लिए, मैं के चहचहाना बॉक्स के लिए एक ही डिजाइन का उपयोग के रूप में मैं इस साइट के पाद लेख अर्थात् में एक चहचहाना चहचहाना पर घूर पक्षी का इस्तेमाल किया है के लिए जा रहा हूँ.

हमारा प्राथमिक उद्देश्य है कि जब कभी उपयोगकर्ता हॉवर चहचहाना फ़ीड बॉक्स पर है, कुछ कार्रवाई करने के लिए जगह ले जा रहा है. हमारे मामले में चहचहाना पक्षी उपयोगकर्ता की दिशा में दिखेगा.

आप कुछ अद्भुत डिजाइनर, जो वेब समुदाय के साथ अपने काम साझा करने के लिए प्यार करता हूँ द्वारा किए गए विभिन्न चहचहाना चिह्न का उपयोग इस तरह से डिजाइन बना सकते हैं. यहाँ इन चिह्न के लिए एक परम स्रोत है.

100 + उल्लेखनीय सुंदर चहचहाना प्रतीक और बटन (हमेशा के लिए डिजाइनर इन चिह्न का उपयोग करने से पहले पहले पूछना याद है.)
मुक्त सदिश ProductiveDreams.com द्वारा सेट चिह्न

मैं ProductiveDreams द्वारा बनाया माउस का इस्तेमाल किया है. फ़ोटोशॉप में एक सरल बॉक्स बनाने के बाद. सामान्य चहचहाना पक्षी आइकन के साथ एक पक्षी के क्रॉस अनुभागीय ऐसा है कि पक्षी के लिए बॉक्स के अंदर लग रही हो प्रतीत होता है बॉक्स के नीचे सही पक्ष पर, दृश्य यानी रखें. अब अन्य चहचहाना पक्षी आइकन पेस्ट, जो दर्शक की ओर देख रहे हो.

तो बड़े चिह्न जो आप ऐसा है कि यह एक दो सिरों वाले चहचहाना पक्षी की तरह दिखाई देता है जैसा कि नीचे दिखाया बॉक्स के ठीक नीचे कोने में रखा से ऊपर झुका पक्षी आइकन धक्का

अब झुका चहचहाना पक्षी आइकन को छिपाने के लिए और ठीक से एक वर्ग सामान्य चहचहाना पक्षी गाइड लाइनों का उपयोग युक्त निशान. यकीन है कि दोनों झुका और सामान्य पक्षी एक ही दिशा निर्देशों के द्वारा किए गए वर्ग में ठीक से फिट है.

फसल छवि और दिशा निर्देशों के साथ सामान्य चहचहाना पक्षी आइकन के साथ एक नई फ़ाइल खोलने के लिए और यह वहाँ पेस्ट करें. तो फसली छवि की ऊंचाई की जाँच करें और उस राशि से कैनवास आकार खड़ी वृद्धि. यह किया जाता है ताकि आप छवि प्रेत अंतिम रूप देने के लिए एक ही कैनवास पर झुका चहचहाना पक्षी संस्करण पेस्ट कर सकते हैं.

सामान्य चहचहाना पक्षी आइकन को छिपाने के लिए और अन्य झुका पक्षी दिखाई. तो फिर छवि फसल गाइड लाइन बस के रूप में आप पिछले छवि के लिए किया था के साथ. छवि की प्रतिलिपि बनाएँ और यह नव निर्मित कैनवास जहाँ आप अन्य छवि चिपकाया पर चिपकाएँ. छवियों को समायोजित इतना है कि वे ठीक से पूरे कैनवास को फिट करने के लिए. छवि प्रेत उपयोग के लिए तैयार है और इस तरह दिखना चाहिए:

चरण 3. जीवन के लिए पक्षी कोडिंग!

चहचहाना फ़ीड बॉक्स का html कंकाल एक साधारण एक होने जा रहा है. वहाँ एक मुख्य कंटेनर चहचहाना फ़ीड, पक्षी और एक वैकल्पिक "मुझे का पालन करें" लिंक युक्त div होगा.

 < div आईडी = " चहचहाना " >
	 < a href = " http://twitter.com/SumeetChawla&quot, आईडी = " चहचहाना लिंक " > मुझे का पालन करें < / a & gt ;
	 < div आईडी = " चहचहाना पक्षी " > < / p >
	 < - आपके चहचहाना फ़ीड यहाँ आता है! >
 < / div >

'#' चहचहाना कंटेनर div के लिए सीएसएस बहुत सरल है. # चहचहाना पक्षी div पक्षी होते जा रहा है. यह मूल प्रेत की आधी ऊंचाई हम बना दिया है क्योंकि केवल प्रेत में दो छवियों के एक प्रदर्शित किया जाएगा होना चाहिए. सीएसएस sprites का उपयोग करना एक अच्छा अभ्यास है क्योंकि यह सर्वर अनुरोधों को कम कर देता है, इसलिए लोड समय कम हो जाती है और छवि का अचानक चमक रोकता है जब पहली बार के लिए पर आगे पीछे किये.

चहचहाना पक्षी div सही करने के लिए मंगाई जानी चाहिए और यह एक नकारात्मक मार्जिन को सौंपा जाना चाहिए ताकि पक्षी कंटेनर div के बाहर क्या कुछ हो गया लगता है. पृष्ठभूमि स्थिति 'ऊपर' इसलिए कि सामान्य चहचहाना पक्षी प्रदर्शित किया जाता है बनाओ. हमारे चहचहाना फ़ीड बॉक्स को अंतिम रूप देने के लिए, बस 'सबसे नीचे' 'चहचहाना पक्षी div की पृष्ठभूमि छवि स्थिति को बदलने के लिए जब कभी कंटेनर div अधिक उपयोगकर्ता hovers.

 # चहचहाना {
	 रंग: 658,097 #;
	 स्थिति: रिश्तेदार,
	 चौड़ाई: 332px;
	 ऊँचाई: 122px;
	 पृष्ठभूमि रंग: # 1f1f1f;
	 सीमा: ठोस 1px 414,040;
	 पृष्ठभूमि - स्थिति: छोड़ दिया नीचे;
	 पृष्ठभूमि - दोहराना: no-दोहराने;
	 गद्दी छोड़ दिया: 10px;
	 गद्दी के शीर्ष: 10px;
 }
 # चहचहाना पक्षी {
	 पृष्ठभूमि छवि: url ('छवियों / twitter.jpg के');
	 पृष्ठभूमि - स्थिति: शीर्ष;
	 स्थिति: रिश्तेदार,
	 फ्लोट: सही;
	 मार्जिन टॉप: 32px;
	 मार्जिन - सही: 75px;
	 चौड़ाई: 101px;
	 ऊँचाई: 100px;
	 पृष्ठभूमि - दोहराना: no-दोहराने;
 }
 # चहचहाना: मंडराना # चहचहाना पक्षी {
	 पृष्ठभूमि - स्थिति: नीचे;
 }

देखने के लिए कैसे अंतिम परिणाम की तरह लग रही होगी, बस इस पृष्ठ के तल पर पाद लेख के लिए नीचे स्क्रॉल.

उदाहरण

से गोपाल राजू ProductiveDreams के बना दिया है उसके चहचहाना फ़ीड बहुत ही जीवंत और चमकदार लग रही है. चहचहाना पक्षी एक बहुत दोस्ताना और आरामदायक तरह से इंटरैक्टिव है. यह winks और अनुयायियों है कि वह है की कुल संख्या प्रदर्शित करता है.

मँडरा से पहले:

बाद हॉवर:

यह केवल साइट है मैं मिल सकता है जो चहचहाना फ़ीड बॉक्स इंटरैक्टिव बनाया था. यदि आप लोगों को किसी भी अन्य साइट है जो इस प्रवृत्ति के बाद सिर्फ टिप्पणी में इसके बारे में पोस्ट खोजने के लिए और मैं इसे यहाँ जोड़ने के लिए सुनिश्चित कर देगा.

टैग: सीएसएस , प्रदर्शन फ़ीड , फ़ीड , कैसे करने के लिए , प्रेत , चहचहाना

के बारे में लेखक

सुमित कोड दोस्त के संस्थापक है. वह एक वेब डेवलपर के रूप में काम करता है, एक कट्टर प्रोग्रामर, workaholic, मजेदार आदमी है और उसके परिवार को प्यार करता है. उस पर का पालन करें चहचहाना और Facebook.

आप के माध्यम से इस प्रविष्टि के लिए किसी भी प्रतिक्रियाओं का पालन कर सकते हैं आरएसएस 2.0 फ़ीड के. आप कर सकते हैं एक प्रतिक्रिया छोड़ देते हैं , या trackback अपनी खुद की साइट से.

ज्ञान को साझा करें

अन्य पोस्ट आपको पसंद आ सकते हैं

• Listify, HTML तत्वों कच्चे पाठ में कनवर्ट करें
• कैसे बनाएँ करने के लिए केवल CSS3 के साथ पैनल आउट कूल स्लाइड
• त्वरित सुझाव: ऊपर VaultPress के साथ अपने ब्लॉग का बैकअप
• व्यापार खाका