कुल पेज दृश्य

मंगलवार, 6 नवंबर 2012

Blogger पर Content Slider जोड़ना एकदम सरल है

0 Cmt and 0 Rct


आशा करता हूँ कि आपको पिछला HTML5 स्लाइडर (Slider) पसंद आया होगा। जैसा कि मैंने कहा था कि तरह-तरह के सरल स्लाइडर (Slider) आपके लिए तकनीक दृष्टा पर समय-समय पर दिये जायेंगे ताकि आप अपने ब्लॉग को सुंदर बना सकें और अपने ब्लॉग पर चुनिंदा पोस्टों की ब्लॉग पर नुमाइश कर सकें। मैं जो स्लाइडर (Slider) आपके लिए लाया हूँ उसको कंटेंट स्लाइडर (Content Slider) भी कहा जाता है जिसमें आप एक फोटो, पोस्ट का शीर्षक और पोस्ट का संक्षिप्त विवरण डाल सकते हैं। नीचे दिया गया चित्र कंटेंट स्लाइडर (Content Slider) कैसा दिखता है उसका प्रारूप है।

Content Slider Preview
Content Slider Preview

Sections of Content Slider
Sections of Content Slider

विशेषताएँ: Features
  1. इस स्लाइडर (Slider) में जोड़े गये पोस्ट शीर्षकRead More पर क्लिक करके पाठक आपकी पोस्ट (Post) तक पहुँच सकते हैं।
  2. इसके अतिरिक्त स्लाइडर से जोड़ी गयी फोटो एक निश्चित आकार (Fixed Sized) में रहती है जिससे आपके द्वारा प्रयोग की गयी फोटो के छोटे व बड़े आकार का अधिक महत्व नहीं रह जाता है।

See Slider Demo

कंटेंट स्लाइडर को ब्लॉग पर कैसे जोड़ें? | How to add Content Slider on Blogger


नोट:
1. किसी भी परिवर्तन से पूर्व टेम्प्लेट (Template) का बैकअप (Backup) ज़रूर ले लीजिए| कैसे? यह जानने के लिए यहाँ क्लिक करें।
2. ब्लॉगर टेम्पलेट (Blogger template) में बदलाव की अधिक जानकारी के लिए यहाँ क्लिक करें।

नीचे दिये सभी चरण (Steps) पूरे कीजिए -

1- Dashboard ›› Blog's Template ›› Edit HTML ›› Proceed ›› Search for ]]></b:skin>

2- अब नीचे दिया गया CSS CODE इसके ऊपर पेस्ट कर दीजिए

#feature{ background:#f4f4f1;  width:525px;  height:280px;  padding:10px;  margin:0 auto 20px}
.slider{ margin:0;  padding:0}
.sliderwrapper{ background:#fff;  position:relative;  overflow:hidden;  width:100%;  height:250px}
.thumbnailz{ float:left;  margin:0;  padding:10px}
.thumbnailz img{ width:250px !important;  height:230px !important}
.contentdiv{ height:250px !important}
.pagination{ width:510px;  text-align:right;  background:#f4f4f1;  padding:0 0 0 10px;  height:20px;  margin-top:10px}
.pagination a{ padding:2px 7px;  text-decoration:none;  color:#fff;  background:#D04528}
.pagination a:hover, .pagination a.selected{ background:#fff;  color:#444}
.desc{ overflow:hidden;  padding:5px 10px 10px 0;  margin:0}
.desc p{ margin:10px 0 0 0;  padding:0}
.desc h2 a{ color:#D04528;  font-size:24px}

3- इसके बाद टेम्पलेट में </body> Tag की खोज कीजिए और नीचे दी गयी जावा स्क्रिप्ट (JS) इसके ऊपर पेस्ट कर दीजिए

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
<script src='//techprevue.googlecode.com/files/contentslider.js'/>
<script>
featuredcontentslider.init({
id: &quot;slider1&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

4- सभी परिवर्तन सावधानी पूर्वक पूरे कर लेने के बाद टेम्पलेट को SAVE कर दीजिए

5- अब आपको लेआउट (Layout) में जाकर एक HTML/Javascript Gadget जोड़ना है इसके लिए Add a Gadget पर क्लिक कीजिए
[Dashboard ›› Blog's Layout ›› Add a Gadget ›› HTML/Javascript Gadget]

6- इस गैजेट (Gadget) में आपको नीचे दिया कोड पेस्ट करके गैजेट को SAVE कर दीजिए
<div id="feature">
        <div class="sliderwrapper" id="slider1">
            <!-- Begin of Content Slider 1 -->
            <div class="contentdiv">
          <div class="thumbnailz">
       <img alt="ALT_IMG" src="http://i.minus.com/ivTnPCT8qUGvT.jpg" />
                </div>    
                <div class="desc">
       <h2><a href="#Post_Link_1">Post Title 1</a></h2>
       <p>Short Description about post 1 in 100 words</p>
                                     <a style='text-align:right;' href="#Post_Link_1">Read More...</a>
  </div>
            </div>
            <!-- End of Content Slider 1 -->

            <!-- Begin of Content Slider 2 -->
            <div class="contentdiv">
          <div class="thumbnailz">
       <img alt="ALT_IMG" src="http://i.minus.com/i7oMaU7tRPsxV.jpg" />
                </div>    
                <div class="desc">
       <h2><a href="#Post_Link_2">Post Title 2</a></h2>
       <p>Short Description about post 2 in 100 words</p>
                                     <a style='text-align:right;' href="#Post_Link_2">Read More...</a>
  </div>
            </div>
            <!-- End of Content Slider 2 -->

            <!-- Begin of Content Slider 3 -->
            <div class="contentdiv">
          <div class="thumbnailz">
       <img alt="ALT_IMG" src="http://i.minus.com/iAlUYKB0Cg4yZ.jpg" />
                </div>    
                <div class="desc">
       <h2><a href="#Post_Link_3">Post Title 3</a></h2>
       <p>Short Description about post 3 in 100 words</p>
                                     <a style='text-align:right;' href="#Post_Link_3">Read More...</a>
  </div>
            </div>
            <!-- End of Content Slider 3 -->

            <!-- Begin of Content Slider 4 -->
            <div class="contentdiv">
          <div class="thumbnailz">
       <img alt="ALT_IMG" src="http://i.minus.com/iuxI5V15twm0B.jpg" />
                </div>    
                <div class="desc">
       <h2><a href="#Post_Link_4">Post Title 4</a></h2>
       <p>Short Description about post 4 in 100 words</p>
                                     <a style='text-align:right;' href="#Post_Link_4">Read More...</a>
  </div>
            </div>
            <!-- End of Content Slider 4 -->

       </div>
         <div class="pagination" id="paginate-slider1"/>
    </div>
</div>

इस गैजेट में जोड़ा जाने वाला कोड स्लाइडर कंटेंट (Slider Content) है जिसे आपको अपने अनुसार बदलना होगा। मतलब ये है कि यही वो कोड है जिसमें आपको फोटो, पोस्ट शीर्षक और संक्षिप्त विवरण जोड़ना है।

यह परिवर्तन कैसे किये जायें इसके लिए नीचे दिये उदाहरण कोड को समझें। आप इस स्लाइडर में कितनी भी स्लाइड जोड़ सकते हैं किंतु ब्लॉग को धीमा होने से रोकने के लिए अधिकतम 5 से 10 स्लाइडर (5 to 10 Slides) ही जोड़ें।

<!-- Begin of Content Slider 1 -->
            <div class="contentdiv">
          <div class="thumbnailz">
       <img alt="ALT_IMG" src="http://i.minus.com/ivTnPCT8qUGvT.jpg" />
                </div>    
                <div class="desc">
       <h2><a href="#Post_Link_1">Post Title 1</a></h2>
       <p>Short Description about post 1 in 100 words</p>
                                     <a href="#Post_Link_1">Read More...</a>
  </div>
            </div>
            <!-- End of Content Slider 1 -->

ऊपर दिया कोड स्लाइडर की एक स्लाइड (1 Slide) का है। इसमें 4 भाग (Part) हैं जिन्हें आपको बदलना है।

1. http://i.minus.com/ivTnPCT8qUGvT.jpg ›› यह उदाहरण इमेज लिंक है
2. #Post_Link_1 ›› इसे आपको पोस्ट लिंक से बदलना है
3. Post Title 1 ›› इसे आपको पोस्ट शीर्षक से बदलना है
4. Short Description about post 1 in 100 words ›› इसकी जगह आप लगभग 100 शब्दों में पोस्ट का संक्षिप्त विवरण दें

इसी प्रकार बाक़ी स्लाइडस्‌ (Remaining Slides) के लिए कोड बदलकर आप अपना स्लाइडर तैयार कर सकते हैं। मेरे द्वारा दिए गये स्लाइडर में 4 स्लाइडस्‌ (Slides) हैं आप इसमें और भी स्लाइडस्‌ जोड़ सकते हैं।

आशा करता हूँ कि आप इस स्लाइडर को अपने ब्लॉग पर जोड़ने में सफल हो जायेंगे। पोस्ट पसंद आये तो फेसबुक पेज अवश्य [LIKE] करें।

कोई टिप्पणी नहीं: