फ़ेसबुक लाइक बॉक्स सीएसएस स्टैकिंग प्रभाव के साथ

दोस्तों आप अगर फ़ेसबुक लाइक बॉक्स (Facebook Like Box) को अपने ब्लॉग से जोड़ना चाहते हैं तो इस बार पेश है नया फ़ेसबुक लाइक बॉक्स सीएसएस स्टैकिंग प्रभाव के साथ (New Facebook Like Box Using CSS Stack Effect)। जो कि बहुत ही प्रोफ़ेशनल लुक (Professional Look) में उपलब्ध है और इसमें नीचे फ़ेसबुक की ब्रैण्डिंग (Facebook Branding) भी नहीं है। तो आज से बनिये प्रोफ़ेशनल ब्लॉगर और प्रयोग करिए नया नवेला ब्रैण्डिंग-फ़्री फ़ेसबुक लाइक बॉक्स सीएसएस स्टैकिंग प्रभाव के साथ। इसे ब्लॉग से लगाना बहुत ही सरल है। इसमें कोई भी मेहनत नहीं करनी पड़ती। बस दो चरणों में सारा काम ख़त्म हो जाता है। ये मैं आपको 6 रंग-रूप (6 Color Schemes) में उपलब्ध करवा रहा हूँ। अब इसे अपनी पसंद के अनुसार या अपने ब्लॉग के डिज़ाइन के अनुसार प्रयोग करिए।

सीएसएस स्टैकिंग प्रभाव वाले नये फ़ेसबुक लाइक बॉक्स को ब्लॉगर या किसी भी साइट से जोड़ना
New Facebook Like Box Using CSS Stack Effect Installation Tutorial

1. इसके लिए आपको अपने ब्लॉगर डैशबोर्ड पर जाकर Layout (Page Element Section) में एक HTML/JavaScript गैजेट को जोड़ना होगा
2. और फिर नीचे दिया गया कोड कॉपी (copy) करके उसमें पेस्ट (paste) करना होगा। अंतत: सहेज (Save कर) दें।

विशेष:
नीचे दिये सभी कोडों में गुलाबी रंग से प्रदर्शित techprevue को अपनी फेसबुक पेज ID से बदलना होगा।

सामान्यत: फेसबुक पेज का लिंक ‘http://www.facebook.com/techprevue‘ इस प्रकार होता है जबकि आपने फेसबुक का पेज नाम सत्यापित करवा लिया हो, किंतु असत्यापित या 25 से कम बार पसंद किये गये पेज का लिंक ‘http://www.facebook.com/pages/धर्म-चक्र/365334223544209‘ इसप्रकार भी हो सकता है। पहली स्थिति में फेसबुक पेज ID ‘techprevue‘ होती है और दूसरी स्थिति में फेसबुक पेज ID को ‘pages/धर्म-चक्र/365334223544209‘ करके लिखा जाना चाहिए।

रूप रंग 1: ‘शुद्ध’ के लिए नीचे दिया कोड प्रयोग करें

<style>
.techprevue-fb-like-box-pure{width:280px;height:150px;border-radius:3px;position:relative;background:#FFF;padding:0px 10px 15px 0}.techprevue-fb-like-box-pure,.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{background:#FFF;border:1px solid #0072C4}.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-pure:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #0072C4}
</style>
<div class="techprevue-fb-like-box-pure">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23FFF&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

रूप रंग 2: ‘भारत’ के लिए नीचे दिया कोड प्रयोग करें

<style>
.techprevue-fb-like-box-india{width:280px;height:150px;border-radius:3px;position:relative;background:#FFF8ED;padding:0px 10px 15px 0}.techprevue-fb-like-box-india,.techprevue-fb-like-box-india:before,.techprevue-fb-like-box-india:after{background:#FFF8ED;border:1px solid #68914F}.techprevue-fb-like-box-india:before,.techprevue-fb-like-box-india:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-india:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #68914F}
</style>
<div class="techprevue-fb-like-box-india">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23FFF8ED&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

रूप रंग 3: ‘चमक’ के लिए नीचे दिया कोड प्रयोग करें

<style>
.techprevue-fb-like-box-shine{width:280px;height:150px;border-radius:3px;position:relative;background:#EDF4FF;padding:0px 10px 15px 0}.techprevue-fb-like-box-shine,.techprevue-fb-like-box-shine:before,.techprevue-fb-like-box-shine:after{background:#EDF4FF;border:1px solid #ABACB2}.techprevue-fb-like-box-shine:before,.techprevue-fb-like-box-shine:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-shine:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ABACB2}
</style>
<div class="techprevue-fb-like-box-shine">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23EDF4FF&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

रूप रंग 4: ‘चाँदी’ के लिए नीचे दिया कोड प्रयोग करें

<style>
.techprevue-fb-like-box-silver{width:280px;height:150px;border-radius:3px;position:relative;background:#E6E8EF;padding:0px 10px 15px 0}.techprevue-fb-like-box-silver,.techprevue-fb-like-box-silver:before,.techprevue-fb-like-box-silver:after{background:#E6E8EF;border:1px solid #ABACB2}.techprevue-fb-like-box-silver:before,.techprevue-fb-like-box-silver:after{content:"";position:absolute;bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-silver:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #ABACB2}
</style>
<div class="techprevue-fb-like-box-silver">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23E6E8EF&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

रूप रंग 5: ‘आकाश’ के लिए नीचे दिया कोड प्रयोग करें

<style>
.techprevue-fb-like-box-sky{width:280px;height:150px;border-radius:3px;position:relative;background:#EFF1F6;padding:0px 10px 15px 0}.techprevue-fb-like-box-sky,.techprevue-fb-like-box-sky:before,.techprevue-fb-like-box-sky:after{background:#EFF1F6;border:1px solid #A8B3CF}.techprevue-fb-like-box-sky:before,.techprevue-fb-like-box-sky:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-sky:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #A8B3CF}
</style>
<div class="techprevue-fb-like-box-sky">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23EFF1F6&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

रूप रंग 6: ‘मोती’ के लिए नीचे दिया कोड प्रयोग करें

<style>
.techprevue-fb-like-box-pearl{width:280px;height:150px;border-radius:3px;position:relative;background:#F2F2F2;padding:0px 10px 15px 0}.techprevue-fb-like-box-pearl,.techprevue-fb-like-box-pearl:before,.techprevue-fb-like-box-pearl:after{background:#F2F2F2;border:1px solid #CFCFCF}.techprevue-fb-like-box-pearl:before,.techprevue-fb-like-box-pearl:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-pearl:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #CFCFCF}
</style>
<div class="techprevue-fb-like-box-pearl">
<div style="height:155px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23F2F2F2&amp;stream=false&amp;header=false&amp;appId=421760957869477" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div>
</div>

आशा है यह आपको पसंद आयेगा। यदि आया है तो नीचे दिये गये Social Networks पर मेरे मित्र एवं प्रशंसक बनें। इससे आपको अगली पोस्टों की जानकारी समय पर मिलती रहेगी। 🙂

Keywords: Facebook Like Box, Branding Free Facebook Like Box, CSS Stacking Effect