Is this the first question?

Yes, this is the first question.

गोण्डा लाइव न्यूज एक प्रोफेशनल वेब मीडिया है। जो समाज में घटित किसी भी घटना-दुघर्टना "✿" समसामायिक घटना"✿" राजनैतिक घटनाक्रम "✿" भ्रष्ट्राचार "✿" सामाजिक समस्या "✿" खोजी खबरे "✿" संपादकीय "✿" ब्लाग "✿" सामाजिक "✿" हास्य "✿" व्यंग "✿" लेख "✿" खेल "✿" मनोरंजन "✿" स्वास्थ्य "✿" शिक्षा एंव किसान जागरूकता सम्बन्धित लेख आदि से सम्बन्धित खबरे ही निःशुल्क प्रकाशित करती है। एवं राजनैतिक , समाजसेवी , निजी खबरे आदि जैसी खबरो का एक निश्चित शुल्क भुगतान के उपरान्त ही खबरो का प्रकाशन किया जाता है। पोर्टल हिंदी क्षेत्र के साथ-साथ विदेशों में हिंदी भाषी क्षेत्रों के लोगों के बीच बहुत लोकप्रिय है और भारत में उत्तर प्रदेश गोण्डा जनपद में स्थित है। पोर्टल का फोकस राजनीतिक और सामाजिक मुद्दों को उठाना है और आम लोगों की आवाज बनना है जो अपने अधिकारों से वंचित हैं। यदि आप अपना नाम पत्रकारिता के क्षेत्र में देश-दुनिया में विश्व स्तर पर ख्याति स्थापित करना चाहते है। अपने अन्दर की छुपी हुई प्रतिभा को उजागर कर एक नई पहचान देना चाहते है। तो ऐसे में आप आज से ही नही बल्कि अभी से ही बनिये गोण्डा लाइव न्यूज के एक सशक्त सहयोगी। अपने आस-पास घटित होने वाले किसी भी प्रकार की घटनाक्रम पर रखे पैनी नजर। और उसे झट लिख भेजिए गोण्डा लाइव न्यूज के Email-gondalivenews@gmail.com पर या दूरभाष-8303799009 -पर सम्पर्क करें।

Dynamic Blogger Recent Posts Slider Widget kaise add kare

मित्रो ब्लागर ब्लाग में डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट लगाना बहुत ही आसान प्रक्रिया है। परन्तु इसके लिए आपको दिये गये स्टेप का पालन करना होगा जिससे आपको डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट ऐड करना आसान हो सके। मित्रो आज हम आप लोगो को डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट को लगाने बारे में विस्तार से जानकारी उपलब्ध करायेगें। मित्रो ब्लागर ब्लाग के टेम्पलेट को स्टाइलिश लुक देने के लिए ब्लागर ब्लाग ने ब्लाग टेम्पलेट को एडिट करने का आफ्शन दे रख्खा है। जबकि ब्लागर ब्लाग में उपलब्ध टेम्पलेट में ब्लाग को स्टाइलिश लुक देने के लिए नही है। ऐसे में हमारे पास दूसरा विकल्प यह है कि हम अपने ब्लाग या वेबसाइट के लिए किसी थर्ड पाटी टेम्पलेट कम्पनी से कोई स्टाईलिश टेम्पलेट खरीद ले। या यदि हमें थोडा बहुत ब्लागिंग के एडिटिंग के बारे में जानकारी है। तो हम ऐसे में अपने ब्लाग को एक आकर्षक सटाइलिश लुक प्रदान कर सकते है। मित्रो दरअसल जब हमारे ब्लाग का टेम्पलेट आकर्षक होता है तो ऐसे में हमारे ब्लाग पर विजिटर प्रभावित होतें है और हमारे ब्लाग के ट्रैफिक में भी बृद्धि होता है। परन्तु जब हमारे ब्लाग का टेम्पलेट साधारण होता है तो ऐसे में हमारे ब्लाग पर विजिटर का प्रभाव नही पड पाता । जिससे एक तो विजिटर की कमी होता है और दूसरा सबसे बडी बात कि इससे ट्रैफिक भी नही बढ पाता है। इस लिए हमें ब्लाग बनाते समय यह विशेष ध्यान देना चाहिए कि हम अपने ब्लाग के लिए कोई अच्छा सा एक टेम्पलेट खरीद कर लगा ले या फिर थोडा बहुत ब्लाग एडिंटिंग का ज्ञान हासिल कर अपने ब्लाग को एक नया आकर्षक लुक प्रदान कर दे।

डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट कैसे ऐड करे

मित्रो ब्लागर ब्लाग में डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट लगाना बहुत ही आसान प्रक्रिया है। परन्तु इसके लिए आपको दिये गये स्टेप का पालन करना होगा जिससे आपको ब्लागर ब्लाग में डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट ऐड करना आसान हो सके।

स्टेप संख्या -01

यदि आप ब्लॉगर में डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट के कोड को वायरस मुक्त कापी करना चाहते है। तो आप इसके लिए डाउनलोड बाटम पर क्लिक कर ब्लॉगर में डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट के कोड को को डाउनलोड कर सकते है ।

[[डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट कोड डाउनलोड करे ]]

स्टेप-संख्या-02

सबसे पहले आप ब्लागर डेशबोर्ड में लागिंन करे।
इसके बाद अब आप ब्लाग के layout पर क्लिक करे।
इसके बाद अब आप add a gadget पर क्लिक करे।

स्टेप-संख्या-03

इसके बाद अब आप HTML/JavaScript पर क्लिक करे।

स्टेप-संख्या-04

नीचे दिए गए Dynamic Blogger Recent Posts Slider Widget के कोड को कॉपी करे ।

<link href='https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css' rel='stylesheet'/>
<style>
     :root{
         --success: rgb(255, 55, 1 ); /* Light Green Color*/
         --light: rgb(248 249 250); /* Whitish Color */
         --dark: rgb(10, 39, 247);  /* Dark Gray Color*/
         --gray: rgb(23, 32, 42); /* Normal Gray Color*/
         --pink: rgb(255, 108, 0); /* Pink Color*/
     }

.ABT_Recent_Posts{
margin-top: 30px;
}

.ABT_Recent_Posts div h2{
  font-size: 16px;
  margin-top: 10px;
  text-transform: capitalize;
  padding: 5px;
min-height: 80px;
}

.ABT_Recent_Posts div h2 a:hover{
  text-decoration: none;
  color: var(--success);
}

.ABT_Recent_Posts div{
  text-align: center;
background-color: var(--light);

}

.ABT_Recent_Posts div a {
  color: var(--gray);
}

.ABT_Recent_Posts img{
  width: 100%;
  max-height: 200px;
min-height: 200px;
height: 100%;
  object-fit: cover;
  
}

.ABT_Recent_Posts  div p{
  margin: 0
}

.ABT_Recent_Posts  div p a{
  display: block;
  background: var(--pink);
  color: var(--light);
  padding: 10px;
  transition: all .5s;
}
.ABT_Recent_Posts  div p a:hover{
  background: var(--dark);
  color: var(--light);
  text-decoration: none;

}

.ABT_Recent_Posts div p{
    border-radius: 4px;
}

.tns-controls {
    width: fit-content;
    margin: 20px auto;

}

.tns-controls button{
    margin: 0px 15px;
    outline: none;  
    border: none;
    font-size: 20px;
    background: unset;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: rgba(0,0,0,.1);
}

.tns-controls button:hover{
    background-color: rgba(0,0,0,.2);
}
    </style>


 <div class='ABT_Recent_Posts'>
        <!-- Dynamic Data will be added here-->
    </div>

    <script>
let TotalPosts = 15; // Number of posts you want to display 
        function ABT_Fetch_Recent_Posts(JSON) {
            const POSTS = JSON.feed.entry;
            let PostTitle, PostURL = "";
            let JumpLinkText = "Read More";
            let RecentPostsContainer = document.querySelector(".ABT_Recent_Posts");

            for (let i = 0; i < TotalPosts; i++) {
                //Get Title and URL of the Post
                POSTS[i].link.forEach((el, i) => {
                    if (el.rel === "alternate") {
                        PostTitle = el.title;
                        PostURL = el.href;
                    }
                })

                //Get Post Thumbnail
                let thumbnail = POSTS[i].media$thumbnail && POSTS[i].media$thumbnail.url;
                if (thumbnail) {
                    thumbnail = thumbnail.replace("s72-c", "");
                } else if (POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))/)) {
                    thumbnail = POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))/)[0];
                } else {
                    thumbnail = "https://placeholder.pics/svg/300/DEDEDE/555555/Image%20Not%20Loaded";
                }


                RecentPostsContainer.innerHTML += `<div> 
        <img src="${thumbnail}" alt="${PostTitle}"/>
        <h2>
        <a href="${PostURL}">${PostTitle}</a>
        </h2>
        <p><a href="${PostURL}">${JumpLinkText}</a></p>
         </div>`;

            }
        }

        var blogLink = document.location.origin;
        var callScript = document.createElement("script");
        callScript.src = `${blogLink}/feeds/posts/default?alt=json-in-script&start-index=1&max-results=${TotalPosts}&callback=ABT_Fetch_Recent_Posts`;
        let Recent_Posts_Container = document.querySelector('.ABT_Recent_Posts');

        document.body.appendChild(callScript);

 let SliderOptions = [
"<i class='fas fa-arrow-left'/>", 
"<i class='fas fa-arrow-right'/>",
];

        window.onload = () => {
            tns({
                container: ".ABT_Recent_Posts",
                items: 1,
                mouseDrag: true,
                autoplay: true,
                controls: true,
                arrowKeys: false,
                gutter: 10,
                nav: false,
                slideBy: 1,
                autoplayHoverPause: true,
                autoplayButtonOutput: false,
                controlsText: [
"<i class='fas fa-arrow-left'></i>", 
"<i class='fas fa-arrow-right'></i>",
],
                controlsPosition: "bottom",
                loop: false,
                preventScrollOnTouch: "force",
                autoplayTimeout: 6000,
rewind: true,
                responsive: {
                    0: {
                        items: 1,
                    },
                    320: {
                        items: 1,
                    },
                    460: {
                        items: 2,
                    },
                    600: {
                        items: 3,
                    },
                    800: {
                        items: 4,
                    },
                }

            });
        }
    </script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js'></script>

Title को खाली छोड़ दे ।
Content के खाली बाक्स में HTML/JavaScript कोड को कापी पेस्ट कर दे ।
जब आपका सब कुछ कम्पलीट हो जाए तो आपको अंत में Save Arrangement सेव SAVE बाटन पर क्लिक करके सुरक्षित सेव SAVE कर ले ।

नोट - मित्रो अब आप देखेगें की आपका ब्लाग या वेबसाइट में Dynamic Blogger Recent Posts Slider Widget आसानी के साथ सुरक्षित एड हो चुका है। आप अपने सुविधा के अनुसार ब्लाग या वेबसाइट में Dynamic Blogger Recent Posts Slider Widget को जहां चाहे वहा पर कोड बाक्स के लेआउट को सेट कर सकते है।

मित्रो अब मुझे उम्मीद है कि आप लोगो ने ब्लॉगर में डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट कैसे ऐड करे ? यानि की ब्लॉगर में डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट कैसे ऐड करे ? को अच्छे से एड कर लिया होगा। परन्तु इसे आप एक बार अपने पेज को क्लिक कर ओपेन करने के उपरान्त अवश्य चेक कर ले की आपके ब्लाग में पोस्ट विजेट ठीक प्रकार से कार्य कर रहा है या नही। हां यदि आप लोगो को इस आर्टिकल से रिलेटेड किसी भी प्रकार की कोई समस्या उत्पन्न होता है। तो इसके लिए आप लोग हमे ईमेल के माध्यम से या ब्लाग पर कमेन्ट कर अपने समस्या को साझा कर सकते है। जिससे आपके समस्या का निदान किया जा सके। यदि आप ब्लॉगर में आडायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट कैसे ऐड करने के लिए दिए गये तकनीकों को सीखते हैं, तो कृपया नीचे टिप्पणी करें, या दूसरों की मदद करने के लिए इस लेख को साझा करें।

Dynamic Blogger Recent Posts Slider Widget kaise add kare

डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट कैसे ऐड करे

No comments:

Post a Comment

Dynamic Blogger Recent Posts Slider Widget kaise add kare

डायनामिक ब्लॉगर रिसेंट पोस्ट स्लाइडर विजेट कैसे ऐड करे

You may also like:

No comments:

Post a Comment