Codepal

टैग की गईं 'प्रदर्शन फ़ीड

आपके चहचहाना फ़ीड प्रदर्शन सीएसएस बॉक्स का उपयोग करके ऊपर स्पाइस

शुक्रवार, अक्टूबर 23, 2009

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

उदाहरण

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

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

बाद हॉवर:

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

टैग: सीएसएस , प्रदर्शन फ़ीड , फ़ीड , कैसे करने के लिए , प्रेत , चहचहाना
में पोस्ट ब्लॉग , ट्यूटोरियल | 15 टिप्पणियाँ »