Pop-up Popular Posts Widget For Blogger Mobile

Pop-up Popular Posts Widget For Blogger Mobile - Hallo sahabat Information About Blogger, Pada Artikel yang anda baca kali ini dengan judul Pop-up Popular Posts Widget For Blogger Mobile, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger Widgets And Gadgets, Artikel Mobile Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Pop-up Popular Posts Widget For Blogger Mobile
link : Pop-up Popular Posts Widget For Blogger Mobile

Baca juga

Pop-up Popular Posts Widget For Blogger Mobile


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.


Step 4: Copy below code.

<b:widget id='PopularPosts2' locked='false' mobile='only' title='On Trend' type='PopularPosts' version='1'>
                                <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:includable id='main'>
<div class='trend-shadow'/>
  <div class='trend-mobile'>
<a class='x-trend' href='javascript:' rel='nofollow'>&#10006;</a>
  $(&quot;.o-trend&quot;).click(function() {

  $(&quot;.x-trend&quot;).click(function() {
#PopularPosts2 {
    text-align: center;
    margin: 0 auto;
    width: 300px;
body.loading.mobile.noscroll {
.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;
      <b:loop values='data:posts' var='post'>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
            <!-- (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>
          <!-- (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'/>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
          <div style='clear: both;'/>
    <a href='https://101helper.blogspot.com/2018/06/pop-up-popular-posts-widget-for-blogger.html'>Get widget</a>

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


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'/>

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!

Image showing Settings button for mobile site theme.  

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

That is the discussion about Pop-up Popular Posts Widget For Blogger Mobile

Thank you for visiting the article Pop-up Popular Posts Widget For Blogger Mobile hopefully always provide useful information, see you in another article.

the article you are reading is about Pop-up Popular Posts Widget For Blogger Mobile with the link as follows https://www.booknagar.com/2018/06/pop-up-popular-posts-widget-for-blogger.html

0 Response to "Pop-up Popular Posts Widget For Blogger Mobile"

Post a Comment

Tag: how to create a free blog, how to create a website, how to create a blog website, how to create a blog for free, how to make a blog, wordpress, how to create a wordpress blog, how to create a blog page, how to start a blog, blogger, how to create a blog in wordpress, how to create a blog account, how to create a blog on wordpress, how to create a blog and make money, how to create a blog in google, how to create a successful blog