Important links !
  • Increase Blog Traffic
  • Improve Alexa Rank
  • Improve SEO
  • Improve Search Rank
  • Earn Money From Blog
  • Design Your Blog
  • Improve Mobile Site Traffic
  • Start Website As Beginner !
  • Multiply My Traffic
  • Help Me With Google Adsense
  • trending-popular-posts-widget-for-blogger-mobile-site

    Welcome again bloggers, today I am back with a new widget for blogger mobile site. I am doing this post on request of many bloggers who sent me messages about my trending post widget in mobile site. If you haven't seen it yet, visit 101Helper on mobile to see it live. Its a simple popular posts widget that is for desktop site with some Javascript and CSS modifications. So I have simply provided this widget with a tinny red trend button and also modified the images of widget so it has big thumbnails and you can scroll down for more posts. You can also add upto 10 posts which are updated automatically and you have to just set the values in Layout just like a simple popular posts widget but the updates can be seen only in mobile site.



    Steps to install Pop up Trending Posts Widget in Blogger Mobile Site:


    Step 1: Go to blogger and navigate to theme.

    Step 2: Click on Edit HTML.

    Step 3: Click on Jump to widget and select Blog1.

    how-to-add-popular-post-widget-in-blogger-mobile-site

    Step 4: Copy below code.

    <b:widget id='PopularPosts2' locked='false' mobile='only' title='On Trend' type='PopularPosts' version='1'>
                                  <b:widget-settings>
                                    <b:widget-setting name='numItemsToShow'>5</b:widget-setting>
                                    <b:widget-setting name='showThumbnails'>true</b:widget-setting>
                                    <b:widget-setting name='showSnippets'>false</b:widget-setting>
                                    <b:widget-setting name='timeRange'>LAST_WEEK</b:widget-setting>
                                  </b:widget-settings>
                                  <b:includable id='main'>
    <div class='trend-shadow'/>
      <div class='trend-mobile'>
    <a class='x-trend' href='javascript:' rel='nofollow'>&#10006;</a>
    <script>
    $(document).ready(function(){
      $(&quot;.o-trend&quot;).click(function() {
     $(&#39;body&#39;).addClass(&#39;noscroll&#39;);
        $(&quot;#PopularPosts2&quot;).fadeIn(&quot;fast&quot;);
      });

      $(&quot;.x-trend&quot;).click(function() {
     $(&#39;body&#39;).removeClass(&#39;noscroll&#39;);
        $(&quot;#PopularPosts2&quot;).fadeOut(&quot;fast&quot;);
      });
    });
    </script>
    <style>
    #PopularPosts2 {
        text-align: center;
        margin: 0 auto;
        width: 300px;
    display:none
    }
    body.loading.mobile.noscroll {
    overflow:hidden
      }
    .o-trend {
        position: fixed;
        right: 60px;
        top: 10px;
        box-shadow: 0px 2px 5px #444;
        border-radius: 100px;
        z-index: 999;
        cursor: pointer;
    }
    a.x-trend {
        position: fixed;
        font-size: 30px;
        color: #ef5858;
        z-index: 999;
        background: rgba(255, 255, 255, .7);
        box-shadow: 0px 2px 5px #bbb;
        border-radius: 70px;
        right: -10px;
        top: -15px;
        padding-top: 15px;
        padding-right: 25px;
        padding-bottom: 5px;
        padding-left: 13px;
    }
    .trend-mobile {
        position: fixed;
        height: 100%;
        z-index: 9999999999;
        overflow-x: hidden;
        top: 10px;
    }
    .trend-shadow {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 9999999999;
        background: #fff;
    }
    .trend-mobile ul {
        padding: 0;
        margin: 0;
    }
    .trend-mobile ul li {
        list-style: none;
        margin-bottom: 20px;
        margin-right: 0;
        margin-left: 0;
        margin-top: 0;
        width: 300px;
        padding: 0;
    }
    .trend-mobile .item-thumbnail {
        float: none;
        margin: 0;
    }
    .trend-mobile img {
        margin-right: 0;
        background: #ffffff;
        border: 1px solid #ddd;
        padding: 0;
        width: 300px;
        height: 160px;
    }
    .trend-mobile .item-title {
        text-align: left;
        float: left;
    }
    .trend-mobile li a {
        color: #444;
        font-weight: bold;
        font-size: 16px;
        font-family: arial,sans-serif;
    }
    .trend-mobile a:hover {
        color: #222;
        text-decoration: none;
    }
    </style>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='!data:showThumbnails'>
              <b:if cond='!data:showSnippets'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
              <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
                <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
                  <div class='item-thumbnail'>
                    <a expr:href='data:post.href'>
                      <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 300)                                  : data:post.thumbnail' var='image'>
                        <img alt='' border='0' expr:src='data:image'/>
                      </b:with>
                    </a>
                  </div>
                </b:if>
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              </div>
              <div style='clear: both;'/>
            </b:if>
          </li>
          </b:loop>
        </ul>
      </div>
    </b:includable>
                                </b:widget>

    Step 5: Paste it just above this line <b:widget id='Blog1' locked='false' OR <b:widget id='Blog1' locked='true'


    how-to-add-popular-posts-widget-in-blogger

    Keep in mind that your code should look similar to shown in the image above. In the above image the code in not in expanded form so If you find your code expanded then don't worry its fine unless you find any error while saving code in Step 6.

    Step 6: Click Save theme button and use CTRL+F on your keyboard to open search box and search for </body>.

    Step 7: Copy below piece of code and paste it just above </body> as shown in below image.


    <b:if cond='data:blog.isMobile'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <img class='o-trend' src='https://4.bp.blogspot.com/-r1Q5mqag4_A/Wn2s9Mk8LAI/AAAAAAAAHRs/HUEMqALq0fQBUlH5LEzT6G40VvUV1XUCACLcBGAs/s1600/trending.png'/>
    </b:if>
    </b:if>

    Step 8: Now again hit CTRL+F on keyboard and search for </head>.

    Step 9: Copy below script and paste it just above </head>.
    <script defer='defer' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js'/>

    Final Step: Click on Save theme button and you are done.

    Trending posts widget not working, What to do?

    Visit your mobile site to see if widget is working properly in your blog. If you don't see your trending post widget then go to your blog theme section again and look for mobile template, there click on settings icon below mobile site theme and enable Custom theme. Now go to your mobile site again to check if it is working or no. If you have any problem you can leave a comment below or contact us. You will be helped shortly!

    how-to-enable-custom-theme-for-blogger-mobile-site
    Image showing Settings button for mobile site theme.  

    custom-mobile-site-theme-blogger
    Image showing how to enable custom theme for blogger mobile site.

    I hope you found this post helpful, if not or if you have any suggestion please leave a comment below. Thanks for visiting 101Helper. Like us on Facebook or follow on Google+ to stay updated about new posts.

    Search keywords: Pop up Trending Posts Widget For Blogger Mobile Site,trend posts widget with button,popular posts widget with big thumbnails for blogger,popular post popup widget for blogspot,101helper widgets for blogger,popular posts big images widget for blogger

    Pop-up Popular Posts Widget For Blogger Mobile

    Random posts lite version is a widget for blogger mobile version. It is called lite version because it's code is minified so that it could load faster. Also images are removed from the links for simpler look and to boost the widget's loading speed. So lite version or random post is best widget to multiply mobile page views.

    Also this widget is fixed at the bottom of mobile site and floats while scrolling and has a close button for a good user experience. A "show" button is also added to let visitors to open the closed widget and read more posts.

    An attribute with "install widget" text is also added to let other bloggers reach this widget when they see this cool widget on your blog's mobile site. So don't remove this text and let other bloggers to get benefit of it. Also don't use this widget without attribute because it may become irregular due to such CSS arrangement.

    You can see a demo of random post widget in below image which is a screenshot taken from 101Helper's mobile site. If you want to try this widget, visit 101Helper from your phone.

    This widget is fully customizable if you know CSS but you can also make changes in this widget if you don't know CSS. Changes that you can make are changing name of the widget, changing number of links(default is 2 links) etc.

    Demo:

    To try live demo go to 101Helper mobile site!

    How To Add Random Post Widget In For Blogger Mobile Version ?

    Step 1: Go to blogger dashboard > Layout.

    Step 2: Click on "add a gadget" in footer section or in mobile footer section if you have one in your theme's layout.

    how-to-add-gadget-in-blogger

    Step 3: Choose HTML/Javascript.

    how-to-add-javascript-in-blogger-mobile-version

    Step 4: Copy below code and paste it in the HTML/Javascript window.

    <p id="show">↑ Show</p>
    <ul id="random-posts">
    <a href="https://101helper.blogspot.com/2017/04/random-post-widget-lite-version-for-blogger-mobile-site.html" id="credit">Install Widget!</a>
    <p id="hide">✖</p>
    <h3>Related links:</h3>
    <script>
    var randomposts_number = 2;
    var randomposts_chars = 0;
    var total_randomposts = 100;
    var randomposts_current = new Array(randomposts_number);
    function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t }
    document.write('<script type=\"text/javascript\" src=\"https://101helper.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
    function getvalue() { for (var i = 0; i < randomposts_number; i++) { var found = false; var rndValue = get_random(); for (var j = 0; j < randomposts_current.length; j++) { if (randomposts_current[j] == rndValue) { found = true; break } }; if (found) { i-- } else { randomposts_current[i] = rndValue } }}; function get_random() { var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1)); return ranNum }; </script>
    <script src="https://rawgit.com/101Helper/mobile/master/random-litev1.js"></script>
    </ul>
    <link rel="stylesheet" type="text/css" href="https://rawgit.com/101Helper/mobile/master/randomlitev1.css"/>

    Replacements:

    var randomposts_number = 2;    //////////// Number of post links

    <h3>Related links:</h3>        //////////// Widget title

    https://101helper.blogspot.com    //////////// Your blog URL

    Step 5: Save the widget and note its ID.

    How To Find ID Of A Widget In Blogger ?

    Step 6: Go to theme and click on Edit HTML.


    Step 7: Jump to the widget with the ID you noted in Step 5.

    how-to-jump-to-widget-in-blogger

    Step 8: Add mobile="only" after locked="false" in the code as shown in below image.

    how-to-add-mobile-only-widget-in-blogger

    Step 9: Save your template and you are done.

    Make sure that you have enabled custom theme for your mobile site.

    Search keywords: Random post widget for blogger mobile version, how to show widgets in blogger mobile version, blogger mobile site widgets, Add widgets in blogger mobile version, 101Helper blogger mobile gadgets and widgets.

    Random Post Widget Lite Version For Blogger Mobile Version



    Mobile screen being small can't hold a wide horizontal menu so people add vertical menu for mobile site specially bloggers do so but there is a simple way of install a horizontal menu in blogger mobile site that is making a scrollable menu so it will show some tabs of the menu and others can be seen by touching and scrolling. As you know that almost everyone is now using a touch screen mobile so it is a good menu for your mobile site. So in this post I am going to share 4 different types of horizontal scrolling menus. Follow below steps to add any of the menu in your blog's mobile site.

    Horizontal Scrolling Menu For Blogger Mobile Site

    earn money from appnext googleplay store 101helper

    I have shared many ways of earning online with blogger blog but today I am sharing something unique and different which is good to earn bigger amounts. With this amazing network you can earn money for each cpi(cost per install) and it is only for blogger mobile sites not for desktop site. Also its not only for blogger but all mobile websites can be integrated with these ads.

    How To Earn Bigger From Google Play Store Apps

    featured posts swiper widgets for blogger mobile site

    This is a quick post about featured post swiper for blogger mobile site. So in this post I am going to share different types of mobile swipers and there features. I hope you will like them. Other bloggers and webmasters are requested to not copy and share this code without 101helper tag below each code, if found to be copied it will be against 101Helper's copyright violation and action will be taken!

    Swiper Featured Posts Widget For Blogger Mobile Site

    how to show ads in blogger mobile above comments 101helper

    Placing ads in blogger mobile site is always difficult for every newbie because handling blogger template is not easy especially in case of mobile blogging it becomes more difficult so bloggers either avoid placing ads in blogger mobile site or add ads as a gadget or try to show infolinks ads in mobile site. Adding ads in gadget is not a problem but it may slow down your mobile site. But its important also to show ads on mobile site specially those bloggers which have majority of visitors on mobile site really need to show ads in mobile to get a maximum benefit from blog. So this tutorial is to show you how to place ads in blogger mobile site just above the comment box below every post. It will boost your blog revenue to a great extend. So lets start!

    How To Show Ads Above Comments In Blogger Mobile Site

    Slideout Menu For Blogger Mobile Site With Social buttons

    My recent post for mobile blogging was about a slide down menu which is really appreciated by visitors as it got more than 1000 views so I decided to create another menu for blogger mobile site. Slide down menu was too simple and it didn't have other features like social media buttons and search box so I decided to create a menu which have these features and an exiting look. As responsiveness is also very important for a menu so i made it responsive too. You can read its major features below. For a live demo you can visit 101Helper's mobile site. I am sure you'll like this menu. Don't forget to give your feedback by leaving a comment below.

    Slideout Menu For Blogger Mobile Site With Social Buttons

    how to create a post in blogger

    Blogger is the best platform for blogging because of its great features. Its easy interface and alot of features makes it better than others. Currently blogger has millions of users because of its best service. One of the greatest features of blogger is its smart phone app which is introduced to let users write posts from their smartphones anywhere anytime. Unfortunately blogger smartphone app is available only for Android and IOS so if you are using Microsoft phones or other phones which don't support Andoid apps then you can't use this app.

    How To Create A Post In Blogger Using Android Or Ios Blogger App

    jquery-stylish-slide-down-menu-for-mobile-blogger.gif

    A successful blogger is that who knows the importance of a mobile site. As blogger has no gadgets for mobile site therefore you have to add them manually. Basic things which are important for a mobile site are a search box, a related posts widget and a menu. If your mobile site has these gadget then your site is ready for mobiles.

    In blogger page list is commonly used as a menu as it becomes a selector in mobile site. But it doesn't look professional and most of the visitors don't like it. So today I have a stylish jquery slide down menu for your blog's mobile site. It works on jquery so it works properly in all mobiles either it is iphone or Microsoft mobile or something else. But if you are using a phone which doesn't support javascript or jquery then this menu won't work on it.

    Jquery Slide Down Mobile Menu For Blogger

    simple-related-posts-widget-for-blogger-style

    "Simple Related Posts Widget For Blogger" is the most frequently searched on search engines because it is a very important gadget for blogger. It helps visitors to reach more posts on your blog and hence it helps you to multiply your traffic. Related posts widget plays a role of internal linker as it link one post with other so it has a great impact on your traffic as well as seo. Because internal linking is a part of off-page seo. As this gadget is so important for blogger therefore some websites are also formed which provides related posts plugin for your blog but if a website's plugin is used then it may slow down your blog which is not good.

    Link/text Only Related Posts Widget For Blogger With 6 Different Styles

    related posts widget for blogger mobile 101helper

    A very important factor of off page seo is internal linking, it means to inter link other posts with the post you write. Internal linking is good for seo as well as it increases your page views because it is the way by which visitors reach to your posts. Internal linking is of two types one is to mention links of older posts in new post and the second is to add a related, recentrecommendation or featured posts widget in your blog. It helps visitors to reach to more posts and read them. Related post widget is most popular in desktop sites but now you can add related posts widget in your blogger mobile site to engage your mobile visitors to your blog. So in this post I will show you how to add related posts widget in blogger mobile site.

    Related Posts Widget For Blogger Mobile

    how-to-optimize-blogger-blog-for-mobile-sites

    Many blogging networks like wordpress, weebly, hostgator etc provides mobile sites to their users, similar to them blogger also provides this feature to its users. Blogger provides mobile site as well as templates for mobile sites which are well made for all mobile phone screens. Although blogger is good for blogging as it has desktop and mobile sites but like desktop template you have to optimize your blog for mobile phones. And for this you need to add some Gadgets, so that you could get benefit of your desktop as well as mobile site. 

    How To Optimize Blogger Blog For Mobile Phones

    Search Box For Blogger Mobile View

    Like other blogging networks blogger also has mobile view for mobile users. It loads very quickly as it is in kilo-bites so mobile users can also read blogs by wifi connections or by mobile data. Blogger provides mobile view and also templates for it, but you have to optimize it in your way to get benefit of it e.g enabling ads, enabling essential gadgets(follow button, search box, related posts etc). It will help you to get more traffic as after optimizing your blog for mobile phones, you will be able to get mobile views too instead of loosing it. The default gadgets aren't optimized for mobile view so you need to use optimized gadgets for mobile view, One of the most essential gadgets(search box) which is powered by blogger doesn't work in all mobiles, it works only in smartphones like Iphone, Android, Htc, Nokia lumia phone etc but the phones which don't have android or ios aren't optimized for the common search box so you have to optimize search box to make it work in all mobile phones whether it is smart or not. Although the default search box works in smartphones but if it is used to search something, it works very slowly and the pages take too much time to load because the page is first searched for desktop fist and then converted to mobile view. So in this post I will share a well optimized search box for blogger mobile view which will work in all mobile phones.

    Search Box For Blogger Mobile Site

    Responsive social sharing buttons for mobile

    Mobile phones and tablets is one of the major source for a blog's and site's traffic now  a days. A blog receives 40% traffic from mobile phones and that's the reason why bloggers are enabling ads in mobile view so that they could earn money from mobile visitors also. Since usage of mobile for reading blogs is increase day by day therefore bloggers and webmaster are enabling gadgets for mobile view also such as related posts widget to get more page-views and social media buttons to get shares on social media. Previously I have create a post about enabling gadgets in mobile view in blogger but in some blogs it do not work therefore in this post I will show you how to add share buttons to mobile view in blogger that floats at the bottom of mobile screen. You can add follow buttons also beside share buttons and set the position of your share/follow buttons to top of the mobile screen.

    Responsive Social Sharing Buttons For Blogger Mobile

    How to show ads in mobile view in blogger

    Blogging is a good way to earn money and I have written many posts about it, among them I have also written a post in which I shared some tips to increase blog revenue by getting more clicks on your ads. In that post I have told that showing ads in mobile view also helps in getting more clicks but many bloggers don't know how to show ads in mobile view in blogger.

    How To Show Ads In Mobile View In Blogger

    How to redirect mobile visitors to mobile site automatically in blogger

    Since mobiles and smartphones are trending many people use internet usually on mobile phones, only few use computers/laptops. People not only use internet for surfing websites but also those who own websites or blogs are updating and posting from smartphones. Specially many bloggers use blogger app in their smart phones for creating posts. Do you have any idea about those visitors who surf your blog from mobiles? visitors only enjoy blogs/websites on mobile phones when they are friendly to mobiles.

    How To Redirect Mobile Visitors To Mobile Site In Blogger



    How to show a widget in mobile view in blogger | 101Helper Adding a gadget in blogger is very easy but the gadgets don't appear in mobile view until they are enable for mobile. Gadgets are added in blog to help visitors read your blog e.g search box to find posts, popular post gadget to help them read popular posts, related post gadget to help them read similar posts etc. But when a gadget is added in blogger it will show up only in Desktop. What about mobile visitors? now a days many people read blogs through smartphones so if there is no search box how will they search posts? if there is no related posts gadget how will they read similar posts? and so on. A most common problem of every blogger is low traffic and for increasing it bloggers are doing hard work such as working on traffic exchanging sites to exchange traffic, paying for traffic, adding gadgets(relates posts, popular posts, recent posts, random posts) but they are forgetting about mobile visitors.

    How To Show A Widget In Mobile View In Blogger