Thursday, August 8, 2019

How To Add Together Recent Tweets Widget Inwards Blogger

Do you lot desire to practice a recent tweets widget that displays all the tweets you lot received from others? It volition non only increase your Social exposure, but readers volition likewise accept benefits from it. This widget is non similar our previous Twitter Slider. Though, the functionality is almost identical, but the styling is solely different. This Live Tweet widget displays all the recent tweets that a individual receives on a sure Twitter username. This widget industrial plant on JavaScript together with amongst the help of Twitter API it derives all the tweets, thus amongst the help CSS StyleSheet it becomes a perfect Live Tweets widget. In this article, nosotros volition live on sharing a Recent Tweets widget for Blogger users, but WordPress users tin likewise implement it on their websites.





How Does Recent Tweets Widget Works:

Since, nosotros believe inward simplicity. Therefore, our developers conduct maintain pattern this widget amongst fantabulous functionalities. It is an automatic Live Tweet widget that displays tweets of dissimilar users. For Example, a individual selects #mybloggerlab tag from the widget’s setting. Now whenever, whatever user volition utilisation (#mybloggerlab) tag inward their tweets. This widget volition automatically fetch together with display them. Following is the screenshot of Recent Tweets Widget.

Features of MBL Recent Tweets Widget:

  • It volition display all the tweets that a individual volition have from dissimilar users. 
  • This widget is interactive. Therefore, tweets volition update instantly.
  • It has a compact aspect which volition certainly increase the beauty of a website.
  • It industrial plant perfectly on almost each together with every browser i.e. Chrome, Internet explorer together with etc.
  • This widget is highly compressed. Thus, it non affects a person’s site Speed.

How to Install Recent Tweet Widget inward Blogger:

The steps are pose into words inward such a agency that both blogger together with whatever ordinary individual tin easily integrate this widget inward their website. Follow the next instruction. 

  • Go to Blogger >> Template.
  • Take Backup of Template.
  • Then Select Edit HTML >> Proceed.
  • In The Template Search For ]]></b:skin> and inward a higher house it glue the next Style sail Code.
#mblfeedtop {
width: 280px;
height: 79px;
margin-bottom:-6px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCgB8GMKTeQz9D7qT8QaS5tqQsP7S_DycStmhuB2QhGD055-KTpw9Ld6w3AK0lbWFvom2Os4Yc5-cFvXIAOCh8CEzJWRiSAXnXTw955OxDngMSHhJRB1TWy1FdRpNM4JnxjUJuCTFxQ_Y/s1600/MBL_TOPPER.png) no-repeat;
}

#mblfeedbottom {
width: 280px;
height: 7px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcWe44Zh6CRuVgRO_jthrjdsqqMSoXI05GNayDVDiNktxZmH7C6LqGY7bGY27DmoPlmqUDzwg9MTfkpj5Vik1hFENRLUantSW_goZKhrcF44uE4ujimX67hikMtTs4oPpjsirTiq3-D_Y/s1600/MBL_BOTTOM.png) no-repeat;
}

#mblfeedinner {
     width: 280px;
     font-family: Arial, Verdana, sans-serif;
     font-size: 12px;
     color: #000000;
}

.ttw-date {
     color: #949494 !important;
     display: block;
}

#mblfeedinner a {
     text-decoration: none;
     color: #095f8f;
}

#mblfeedinner ul {
     margin: 0;
     padding: 0;
     list-style: none;
}

#mblfeedinner ul li {
background: #63defa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXMXCcyhbdQXhEUOf4du-ZW5ScbmSZVnF-CFflOqWUp_aqUu6c1oQqT7OgEUntRubkYOW00Sy60Xvp14Kj9FGbjAl2Y2J6tVZvNyyEJWvqSpcd_KwLGfJooY1LN9SN9B5ZSMoophyphenhyphen4BA/s1600/MBL_DIVIDER.png) repeat-x;
padding: 11px 9px;
min-height: 42px;
}

.ttw-body {
     display: block;
}

#mblfeedinner img {
     margin-right: 10px;
     float: left;
}

#mblfeedinner rigid {
     margin-right: 5px;
}
  • Again inward the template search for </head> together with inward a higher house it glue the next JavaScript code.
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.jtweetsanywhere-1.3.1.min.js"></script>
 
    <script>
/*$(document).ready(function(){
    $('div#mblfeedinner').twitterTrackbacks({
        url:'http://twitter.com/mybloggerlab',
        n:4,
        show_n:0,
        image_width: 42,
        reply: '',
        retweet: '',
        info: '',
        show_author: 1
    });
});
$(document).ready(function(){
      $('div#mblfeedinner').relatedTweets({
         query: 'mybloggerlab',
         realtime:0,
         n:4,
         image_width: 42,
         show_source: 0
      });
   });
*/
$(document).ready(function(){
    $('#mblfeedinner').jTweetsAnywhere({
        username: '',
        searchParams: 'q=mybloggerlab',
        count: 3,
        showTweetFeed: {
            showProfileImages: true,
            showUserScreenNames: true
        },
        showTweetBox: {
            label: '<span style="color: #303030">Spread the give-and-take ...</span>'
        }
    });
});
</script>
  • Replace mybloggerlab amongst your twitter user name.
  • Now Save the template together with expire on to the side yesteryear side step.

How To Add Recent Tweet Widget In Blogger:

  • Go To Blogger >> Layout >> Add a Gadget.
  • Now From the List Select Add HTML/JavaScript.
  • Now inside the HTML Box glue the next Code.
            <div id="mblfeedtop"></div>
            <div id="mblfeedinner"></div>
            <div id="mblfeedbottom"></div>

All Done: After pasting the inward a higher house HTML Coding expire ahead together with relieve the template yesteryear pressing Save Bottom. Now take in your website together with savour the unforgotten perfection. 

From the Editor’s Desk:

Hope you lot guys conduct maintain adored today’s Tutorial. Since, the PageRank Update is nigh why non larn a Dofollow Backlink from Pinterest. According to our estimates, Page Rank volition live on updated inward betwixt 10 Nov to v December. What are your thoughts nigh this widget? What is your expectation nigh the Page Rank Update? Don’t forget to larn out your precious comment. Take a lot attention of your families till thus Peace, Blessings together with happy tweeting. 

No comments:

Post a Comment