Update feeds
Loading...

HOW TO EXPAND ANDROID OREO STORAGE CAPACITY AND INSTALL APPS IN SD CARD [ NO ROOT ]

Friday, 19 October 2018


Most android manufacturers have formed a norm of not giving much when it comes to the internal storage capacity, leaving the users in state where they have to keep thinking about how to manage their internal storage space.

If you are going through the problems of trying to manage your internal memory space there is solution which can work on android 8.1 go edition. Just follow the steps to work it out yourself.

WARNING: Going through the steps would erase any files in the sd-card since the sd-card will be formatted. I suggest backing up your files before proceeding to follow the steps below.

PRE-REQUISITION
  • An android phone running on android 8.1 (android oreo)
  • A PC with adb and fastboot properly set up, download adb.rar file here. learn how to set up adb at HOVATEK thread.
  • A USB compatible with the phone
  • A class 10 or UHS I and II (high speed memory card)

STEPS
  • Extract the adb.rar file with winrar.
  • Insert the sdcard in the phone and unmount it in setting.
  • Go-to settings>>developer option>>activate USB debugging.
  • Plug in the phone via a compatible USB cable and establish connection.
  • Head on to the folder where you extracted the content of adb.rar file, while holding the SHIFT key right click on an empty space and click on "Open command window here" in the context menu.
context menu image
  • When the command window opens up, type adb devices and allow connection on the phone when the prompt comes in, if allowed from the phone you will get the result in the image below.
adb devices
  • Next type ADB shell Click ENTER.
  • Then type sm list-disks and click ENTER, a respond with the format disk:178,128 will be shown on your screen. Take note of the number shown.
  • To enable you store apps in your SD-CARD you have three option "mixed", "private", "public", the next command can be changed base on which you prefer.
  • Mixed: Gives the option to set the SD-CARD as both internal storage and also media storage. i.e. segmented.
    Private: Gives the option to set the SD-CARD as just internal storage.
    Public: Gives the option to set the SD-CARD as just media, this is normally the default of the phone.
  • To use MIXED type sm partition disk:XXX,XXX mixed PP, where XXX,XXX represents the number of your SD-CARD that I mention you should take note of mine was 178,128, PP is the percentage of your memory space you want to use as media storage, it range from 10-90. The rest will be used as internal storage.
  • To use PRIVATE type sm partition disk:XXX,XXX private.
  • To use PUBLIC type sm partition disk:XXX,XXX public.
  • Click ENTER after choosing either Mixed, Private or Public.
  • Reboot the phone, head to setting>>Storage>>device storage>>sd-card, you will see your SD-CARD can now be used to store apps. thus, expanding your phone memory.
  • Now click on the vertical three dot menu in the SD-CARD storage and click migrate data.
  • Mission accomplished
for help on this use the comment section for feedback.
    continue reading

    Create and Personalize your Blogger template from scratch

    Wednesday, 28 February 2018

    An animation of  a responsive layout

    When I started blogging I was using the default templates on blogger which had all that is needed to kick-off and start writing and posting on my new blog, but my problem began when I tried to change some aspect of it like width, height generally trying to make it more responsive across mobile and PC platforms. It became hard because it consisted of several nested html element in which you need to take time to understand before thinking of making it responsive to your own taste.
    Building your own personalized layout is quite easy and requires basic or no initial knowledge of html, css and JavaScript. But just in case you need a kick starter to get conversant with the basics you can go-to: www.w3schools.com to learn more if not all.

    PRE-REQUISITION:

    What you need to start making your own layout are as follows;
    • Basic knowledge of html, css, and JavaScript.
    • A demo blog page: you need to open an experimental blog because you would be experimenting a lot on this one.
    • Time and Patience.

    HOW BLOGGER TEMPLATE WORKS:

    Before going to the main procedure I will start by explaining how the blogger blog template works. When you enter your blogger setup page go-to layout >> Edit html.
    how to open edit html in blogger

    When the Edit html option is clicked and loaded up, it shows the total code of your blogger blog, therefore any changes made here can change the fill of your blog page one way or the other.
    The basic arrangement of a blogger blog html tag is as follows;
    
    <html>
         <head>
    <title>'blog title goes here'</title>
    <meta name='property name' content='property content'/>
    <b:skin> 'style goes here' </b:skin>
    <style> 'style goes here' </style>
      </head>
    <body>
    "would contain the code that would make items show on browser"
    <b:section class=' ' id=' ' maxwidgets=' ' name=' ' showaddelement=' '/>
    </body>
    <html>
    • Html <html> the outer-most part of your blog that contain everything code and attributes about it.
    • Head <head>  this normally contains your meta tags, title tag, script tag, style tag; think of it as where whatever controls the looks and description of your blog is. In this case anything about description goes into the meta tag and anything about style goes in the skin tag or a style tag while the title tag is for your blog title. Blogger doesn't just lets you put in properties for your meta tags and title tag all these properties are generated using blogger layout tags or data tags. For example a title tag for a normal html code can be like this:
    <title>Enproteks</title> where-as in blogger html it is written like this;
    <title><data:blog.pageTitle/></title> where "<data:blog.pageTitle/>" would be changed to your title when the codes are submitted and compiled. For more about blogger layout tags go-to: https://support.google.com/blogger/answer/47270?hl=en.
    • Body <body> the body tag contains all the layout blocks for your blog, it would be loaded up in the browser when you visit you blog website. Inside the body we could have several html element tags like <div>, <h1>, <a>, <span> etc. for full list of html tags go-to: https://www.w3schools.com/tags/default.asp. Inside the body tag a section tag written as <b:section> can be seen, this tag when created is what is shown in the layout window of blogger. The image below gives an example.
    how to create a section tag in blogger 1

    how to create a section tag in blogger 2

    In the first image, a line with tag <b:section/> was created in the html code and it comes up in blogger layout window. The section tag written has the following attributes;
    • Class=' '(optional): Defines a unique identifier for two or more sections, this is useful when styling a group of sections with the same class name, it is optional.
    • Id=' '(required): Defines a unique identifier for just one section, this is useful when styling just one section element and it is required.
    • maxwidget=' '(optional): This is defined with a numerical integer i.e. 1, 2 , 3, 4 etc. it instructs the number of widget that can be contained in the section. Therefore if for example the specified number is one then the section will be only able to take just one widget.
    • Showaddelement=' '(optional): The default settings for this is 'yes', when specified as 'yes' the plus sign in the layout window would be visible but if 'no' is specified there would be no add a gadget option in the layout window in this case widget can only be added to this section by moving from another section.
    • name=' '(optional): this defines the name of the section and would be shown in the layout window inside the section block.
    After creating your new section you can go over to the layout option to add a widget to it. I would be adding a header to my new header section. You can copy and paste the code below inside the html edit window;
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
    <head>
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <meta expr:content='data:blog.url' property='og:url'/>
    <meta content='Enproteks' property='og:site_name'/>
    <meta content='Image-Link-Of-Blog-Logo' property='og:image'/>
    <meta content='article' property='og:type'/>
     <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
    <link href='https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <b:include cond='not data:view.isPreview' data='{                          image: data:skin.vars.body_background.image,                          selector: "body"                        }' name='responsiveImageStyle'/>   
    <b:include data='blog' name='all-head-content'/>
    <style>/*<![CDATA[*/
    /*]]>*/</style>
    <b:skin><![CDATA[
    ]]></b:skin>
    <title><data:blog.pageTitle/></title>
    <b:include data='blog' name='google-analytics'/>
    </head>
    
    <body>
      <div id='container'>
        <div id='header'>
       <!--header sections goes here-->
     </div>
     <div id='main-section'>
       <!--Main sections goes here-->
     </div>
     <div id='sidebar'>
       <!--sidebar sections goes here-->
     </div>
        <div id='footer'>
       <!--footer sections goes here-->
     </div>
      </div>
    </body>
    </html>
    
    After pasting the code inside the html window, we need to create a section for our header, blog post, side-bar, footer or any other sections based on what we have done so far.

    Note that; if you are creating your template from scratch it is require that you have a skin tag and at least one section tag or else your code won't save but give you a red colored error. Therefore a section and a skin must be created.

    HOW TO CREATE A SECTION:

    After understanding what the section tag is, the next thing is to create them under each of the red colored commented text in the html code above;
    Write the section tag for your header like this;
    <b:section id='header' class='header-class' name='header' maxwidgets='3' />
    Write the section tag for your main blog post like this;
    <b:section id='main-post' class='main-post-class' name='main-post' maxwidgets='3' />
    Write the section tag for your side bar like this;
    <b:section id='sidebar1' class='sidebar1-class' name='sidebar1' maxwidgets=' ' />
    Write the section tag for your footer container like this;
    <b:section id='footer-container' class='footer-container-class' name='footer-container' maxwidgets='3' />

    After created the four sections above, your code should look like this;
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
    <head>
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <meta expr:content='data:blog.url' property='og:url'/>
    <meta content='Enproteks' property='og:site_name'/>
    <meta content='Image-Link-Of-Blog-Logo' property='og:image'/>
    <meta content='article' property='og:type'/>
     <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
    <link href='https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <b:include cond='not data:view.isPreview' data='{                          image: data:skin.vars.body_background.image,                          selector: "body"                        }' name='responsiveImageStyle'/>   
    <b:include data='blog' name='all-head-content'/>
    <style>/*<![CDATA[*/
    /*]]>*/</style>
    <b:skin><![CDATA[
    ]]></b:skin>
    <title><data:blog.pageTitle/></title>
    <b:include data='blog' name='google-analytics'/>
    </head>
    
    <body>
      <div id='container'>
        <div id='header'>
       <!--header sections goes here-->
                            <b:section id='header' class='header-class' name='header' maxwidgets='3' />
     </div>
     <div id='main-section'>
       <!--Main sections goes here-->
                            <b:section id='main-post' class='main-post-class' name='main-post' maxwidgets='3' />
     </div>
     <div id='sidebar'>
       <!--sidebar sections goes here-->
                            <b:section id='sidebar1' class='sidebar1-class' name='sidebar1' maxwidgets=' ' />
     </div>
        <div id='footer'>
       <!--footer sections goes here-->
                            <b:section id='footer-container' class='footer-container-class' name='footer-container' maxwidgets='3' />
     </div>
      </div>
    </body>
    </html>
    
    Next step after creating the sections is to save and go-to the layout window of your demo-blog, those new sections would now become visible for you to add widgets to them but not yet, before that we have to design our layout so that the sidebar would be on the side and the main-post would be in the middle while the header and footer-container would occupy the top and bottom. This can be achieve by using css styling.

    SECTION STYLING:

    With the use of css style sheet we can style our layout. The style can either be in-line with an element, referenced at an external link or inside a style tag; (<style></style>). Example of each are given below;

    IN-LINE STYLE ATTRIBUTE:

    <div style='background-color: blue; width: 200px; height: 200px; display: block;'></div>

    In the above code, the attribute style defines that the div is a block of (200px * 200px) with a background color blue. Styles placed inline as an element attribute are given higher priority.

    STYLE TAG STYLING:

    <!DOCTYPE html>
    <html>
    <head>
    <style type='text/css'>
    div{
         background-color: blue;
         width: 200px;
         height: 200px;
         display: block;
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    
    
    
    In this method of styling any element with the same tag name would take up the style property of that tag name, this is not specific to one <div> but all the div in the body. To be more specific element should be referenced using 'id' or 'class' attributes to learn more about this go-to: https://www.w3schools.com/cssref/sel_id.asp and https://www.w3schools.com/cssref/sel_class.asp.

    REFERENCED STYLESHEET

    <!DOCTYPE html>
    <html>
    <head>
    <link rel='stylesheet' href='http://www.text.com'/>
    </head>
    <body>
     <!-body code goes here-->
    </body>
    </html>
    

    Here the stylesheet is referenced at a link or path where it is stored, this is the way to-go to avoid long codes. To learn more about this go-to: https://www.w3schools.com/html/html_css.asp

    FINALLY, DESIGNING THE LAYOUT;

    the purpose here is to the make your layout in your own likeness and taste go-to: https://www.w3schools.com/cSS/css_rwd_intro.asp to know more about building a responsive site. I have prepared a very simple responsive style sheet for this tutorial sake, copy and paste the code below inside the html edit window paste it after <style> tag.

    
    /*
        Created on : 27-Feb-2018, 19:44:35
        Author     : Daniel Ebonine (www.EnProteks.tk)
    */
    /*<![CDATA[*/
    
    body {
        width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: content-box;
    }
    :root {
        --footer-min-height: 50px;
        --main-section-min-height: 400px;
        --side-bar-min-height: 400px;
    }
    div#Blog1 {
        padding-left: 5px;
        padding-right: 5px;
    }
    #container {
        display: block;
        background-color: blue;
        margin-left: auto;
        margin-right: auto;
     width: 1345px;
    }
    #header {
        display: block;
        width: 100%;
        min-height: 50px;
        background-color: #f43059;
    }
    #main-section {
        display: block;
        width: 900px;
        min-height: var(--main-section-min-height);
        background-color: #20bd9a;
        margin-left: 6px;
        float: left;
        margin-bottom: 6px;
        padding-left: 9px;
        padding-right: 9px;
    }
    #sidebar {
        display: block;
        width: 400px;
        min-height: var(--side-bar-min-height);
        background-color: #682359;
        float: right;
        margin-right: 6px;
        margin-bottom: 6px;
        margin-left: 6px;
        padding-left: 9px;
        padding-bottom: 9px;
    }
    #footer {
        display: block;
        width: 100%;
        min-height: var(--footer-min-height);
        clear: both;
        background-color: yellow;
        position: relative;
    }
    #test-widget{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        height: 500px;
        background-color: #ffab73;
        z-index: 9;
    }
    span {
        background-color: transparent !important;
    }
    
    /*media queries for responsiveness*/
    @media all and (max-width: 1000px){
        #main-section {
            width: 100% !important;
            float: none !important;
            margin-bottom: 6px;
      padding-left: 0px;
           padding-right: 0px;
        }
        #container {
            width: 100%;
        }
        #sidebar {
            width: 100% !important;
            float: none !important;
            margin-right: auto !important;
            margin-left: auto !important;
      padding-left: 0px;
           padding-right: 0px;
        }
     body, html {
        overflow-x: hidden; }
    }
    @media all and (max-width: 1200px){
        #container {
            width: 100%;
        }
        #sidebar {
            display: block;
            width: 30%;
            float: right;
            margin-right: 6px;
            margin-left: 6px;
        }
        #main-section {
            width: 66.1%;
            margin-left: auto;
            float: left;
        }
    }
    /*]]>*/
    

    Forgive my choice of color, it is to enhance clarity and understanding, to change color of each sections just change the color of the blue highlighted test. You can also use chrome of firefox dev-tool to experiment just click on your keyboard: ctrl+shift+I.
    After inserting the code you now need to find the id='main' section we created and replace it with this code, this is an un-customized blogger post widget. After copying and paste save the code and reload your demo-blog page.

    
    <b:section class='main-class' id='main' name='main'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
                  <b:widget-settings>
                    <b:widget-setting name='showDateHeader'>true</b:widget-setting>
                    <b:widget-setting name='style.textcolor'>#666666</b:widget-setting>
                    <b:widget-setting name='showShareButtons'>true</b:widget-setting>
                    <b:widget-setting name='showCommentLink'>true</b:widget-setting>
                    <b:widget-setting name='style.urlcolor'>#666666</b:widget-setting>
                    <b:widget-setting name='showAuthor'>true</b:widget-setting>
                    <b:widget-setting name='style.linkcolor'>#2288bb</b:widget-setting>
                    <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
                    <b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
                    <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
                    <b:widget-setting name='style.layout'>1x1</b:widget-setting>
                    <b:widget-setting name='showLabels'>true</b:widget-setting>
                    <b:widget-setting name='showLocation'>true</b:widget-setting>
                    <b:widget-setting name='showTimestamp'>true</b:widget-setting>
                    <b:widget-setting name='postsPerAd'>1</b:widget-setting>
                    <b:widget-setting name='showBacklinks'>false</b:widget-setting>
                    <b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
                    <b:widget-setting name='showInlineAds'>false</b:widget-setting>
                    <b:widget-setting name='showReactions'>false</b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main' var='top'>
      <b:if cond='!data:mobile'>
        <!-- posts -->
        <div class='blog-posts hfeed'>
    
          <b:include data='top' name='status-message'/>
    
          <b:loop values='data:posts' var='post'>
            <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
              </div></div>
            </b:if>
            <b:if cond='data:post.isDateStart'>
              <div class="date-outer">
            </b:if>
            <b:if cond='data:post.dateHeader'>
              <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
            </b:if>
            <b:if cond='data:post.isDateStart'>
              <div class="date-posts">
            </b:if>
            <div class='post-outer'>
              <b:include data='post' name='post'/>
              <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
            </div>
    
            <!-- Ad -->
            <b:if cond='data:post.includeAd'>
              <div class='inline-ad'>
                <data:adCode/>
              </div>
            </b:if>
          </b:loop>
          <b:if cond='data:numPosts != 0'>
            </div></div>
          </b:if>
        </div>
    
        <!-- navigation -->
        <b:include name='nextprev'/>
    
        <!-- feed links -->
        <b:include name='feedLinks'/>
    
      <b:else/>
        <b:include name='mobile-main'/>
      </b:if>
    
      <b:include cond='data:top.showPlusOne' name='googlePlusBootstrap'/>
    </b:includable>
                  <b:includable id='backlinkDeleteIcon' var='backlink'>
      <span expr:class='"item-control " + data:backlink.adminClass'>
        <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
          <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
        </a>
      </span>
    </b:includable>
                  <b:includable id='backlinks' var='post'>
      <a name='links'/><h2><data:post.backlinksLabel/></h2>
      <b:if cond='data:post.numBacklinks != 0'>
        <dl class='comments-block' id='comments-block'>
          <b:loop values='data:post.backlinks' var='backlink'>
            <div class='collapsed-backlink backlink-control'>
              <dt class='comment-title'>
                <span class='backlink-toggle-zippy'> </span>
                <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
                <b:include data='backlink' name='backlinkDeleteIcon'/>
              </dt>
              <dd class='comment-body collapseable'>
                <data:backlink.snippet/>
              </dd>
              <dd class='comment-footer collapseable'>
                <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
                <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
              </dd>
            </div>
          </b:loop>
        </dl>
      </b:if>
      <p class='comment-footer'>
        <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
      </p>
    </b:includable>
                  <b:includable id='comment-form' var='post'>
      <div class='comment-form'>
        <a name='comment-form'/>
        <b:if cond='data:mobile'>
          <h2 id='comment-post-message'>
            <a expr:id='data:widget.instanceId + "_comment-editor-toggle-link"' href='javascript:void(0)'><data:postCommentMsg/></a></h2>
          <p><data:blogCommentMessage/></p>
          <data:blogTeamBlogMessage/>
          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
        <b:else/>
          <h2 id='comment-post-message'><data:postCommentMsg/></h2>
          <p><data:blogCommentMessage/></p>
          <data:blogTeamBlogMessage/>
          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
        </b:if>
        <data:post.cmtfpIframe/>
        <script type='text/javascript'>
          BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
        </script>
      </div>
    </b:includable>
                  <b:includable id='commentDeleteIcon' var='comment'>
      <span expr:class='"item-control " + data:comment.adminClass'>
        <b:if cond='data:showCmtPopup'>
          <div class='goog-toggle-button'>
            <div class='goog-inline-block comment-action-icon'/>
          </div>
        <b:else/>
          <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
            <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
          </a>
        </b:if>
      </span>
    </b:includable>
                  <b:includable id='comment_count_picker' var='post'>
      <b:if cond='data:post.commentSource == 1'>
        <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.url.canonical.http'>
        </span>
      <b:else/>
        <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
          <data:post.commentLabelFull/>:
        </a>
      </b:if>
    </b:includable>
                  <b:includable id='comment_picker' var='post'>
      <b:if cond='data:post.commentSource == 1'>
        <b:include data='post' name='iframe_comments'/>
      <b:elseif cond='data:post.showThreadedComments'/>
        <b:include data='post' name='threaded_comments'/>
      <b:else/>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:includable>
                  <b:includable id='comments' var='post'>
      <div class='comments' id='comments'>
        <a name='comments'/>
        <b:if cond='data:post.allowComments'>
          <h2><data:post.commentLabelFull/>:</h2>
    
          <b:if cond='data:post.commentPagingRequired'>
            <span class='paging-control-container'>
              <b:if cond='data:post.hasOlderLinks'>
                <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
                  
                <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
                  
              </b:if>
    
              <data:post.commentRangeText/>
    
              <b:if cond='data:post.hasNewerLinks'>
                
                <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
                
                <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
              </b:if>
            </span>
          </b:if>
    
          <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
            <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
              <b:loop values='data:post.comments' var='comment'>
                <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
                  <b:if cond='data:comment.favicon'>
                    <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
                  </b:if>
                  <a expr:name='data:comment.anchorName'/>
                  <b:if cond='data:blog.enabledCommentProfileImages'>
                    <data:comment.authorAvatarImage/>
                  </b:if>
                  <b:if cond='data:comment.authorUrl'>
                    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
                  <b:else/>
                    <data:comment.author/>
                  </b:if>
                  <data:commentPostedByMsg/>
                </dt>
                <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
                  <b:if cond='data:comment.isDeleted'>
                    <span class='deleted-comment'><data:comment.body/></span>
                  <b:else/>
                    <p>
                      <data:comment.body/>
                    </p>
                  </b:if>
                </dd>
                <dd class='comment-footer'>
                  <span class='comment-timestamp'>
                    <a expr:href='data:comment.url' title='comment permalink'>
                      <data:comment.timestamp/>
                    </a>
                    <b:include data='comment' name='commentDeleteIcon'/>
                  </span>
                </dd>
              </b:loop>
            </dl>
          </div>
    
          <b:if cond='data:post.commentPagingRequired'>
            <span class='paging-control-container'>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
                <data:post.oldestLinkText/>
              </a>
              <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
                <data:post.olderLinkText/>
              </a>
              
              <data:post.commentRangeText/>
              
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
                <data:post.newerLinkText/>
              </a>
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                <data:post.newestLinkText/>
              </a>
            </span>
          </b:if>
    
          <p class='comment-footer'>
            <b:if cond='data:post.embedCommentForm'>
              <b:if cond='data:post.allowNewComments'>
                <b:include data='post' name='comment-form'/>
              <b:else/>
                <data:post.noNewCommentsText/>
              </b:if>
            <b:elseif cond='data:post.allowComments'/>
              <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
            </b:if>
          </p>
        </b:if>
        <b:if cond='data:showCmtPopup'>
          <div id='comment-popup'>
            <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
            </iframe>
          </div>
        </b:if>
    
        <div id='backlinks-container'>
        <div expr:id='data:widget.instanceId + "_backlinks-container"'>
           <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
        </div>
        </div>
      </div>
    </b:includable>
                  <b:includable id='feedLinks'>
      <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
        <b:if cond='data:feedLinks'>
          <div class='blog-feeds'>
            <b:include data='feedLinks' name='feedLinksBody'/>
          </div>
        </b:if>
    
      <b:else/> <!--Post feed links -->
        <div class='post-feeds'>
          <b:loop values='data:posts' var='post'>
            <b:include cond='data:post.allowComments and data:post.feedLinks' data='post.feedLinks' name='feedLinksBody'/>
          </b:loop>
        </div>
      </b:if>
    </b:includable>
                  <b:includable id='feedLinksBody' var='links'>
      <div class='feed-links'>
      <data:feedLinksMsg/>
      <b:loop values='data:links' var='f'>
         <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
      </b:loop>
      </div>
    </b:includable>
                  <b:includable id='iframe_comments' var='post'>
    
      <b:if cond='data:post.allowIframeComments'>
        <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
        <div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType'/>
    
        <b:if cond='data:post.embedCommentForm == "false"'>
          <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
        </b:if>
      </b:if>
    </b:includable>
                  <b:includable id='mobile-index-post' var='post'>
      <div class='mobile-date-outer date-outer'>
        <b:if cond='data:post.dateHeader'>
          <div class='date-header'>
            <span><data:post.dateHeader/></span>
          </div>
        </b:if>
    
        <div class='mobile-post-outer'>
          <a expr:href='data:post.url'>
            <h1 class='mobile-index-title entry-title' itemprop='name'>
              <data:post.title/>
            </h1>
    
            <div class='mobile-index-arrow'>&rsaquo;</div>
    
            <div class='mobile-index-contents'>
              <b:if cond='data:post.thumbnailUrl'>
                <div class='mobile-index-thumbnail'>
                  <div class='Image'>
                    <img expr:src='data:post.thumbnailUrl'/>
                  </div>
                </div>
              </b:if>
    
              <div class='post-body'>
                <b:if cond='data:post.snippet'><data:post.snippet/></b:if>
              </div>
            </div>
    
            <div style='clear: both;'/>
          </a>
    
          <div class='mobile-index-comment'>
            <b:include cond='data:blog.pageType != "static_page"                          and data:post.allowComments                          and data:post.numComments != 0' data='post' name='comment_count_picker'/>
          </div>
        </div>
      </div>
    </b:includable>
                  <b:includable id='mobile-main' var='top'>
        <!-- posts -->
        <div class='blog-posts hfeed'>
    
          <b:include data='top' name='status-message'/>
    
          <b:if cond='data:blog.pageType == "index"'>
            <b:loop values='data:posts' var='post'>
              <b:include data='post' name='mobile-index-post'/>
            </b:loop>
          <b:else/>
            <b:loop values='data:posts' var='post'>
              <b:include data='post' name='mobile-post'/>
            </b:loop>
          </b:if>
        </div>
    
       <b:include name='mobile-nextprev'/>
    </b:includable>
                  <b:includable id='mobile-nextprev'>
      <div class='blog-pager' id='blog-pager'>
        <b:if cond='data:newerPageUrl'>
          <div class='mobile-link-button' id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>&lsaquo;</a>
          </div>
        </b:if>
    
        <b:if cond='data:olderPageUrl'>
          <div class='mobile-link-button' id='blog-pager-older-link'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>&rsaquo;</a>
          </div>
        </b:if>
    
        <div class='mobile-link-button' id='blog-pager-home-link'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
        </div>
    
        <div class='mobile-desktop-link'>
          <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
        </div>
    
      </div>
      <div class='clear'/>
    </b:includable>
                  <b:includable id='mobile-post' var='post'>
      <div class='date-outer'>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <div class='date-posts'>
          <div class='post-outer'>
    
            <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
              <b:if cond='data:post.thumbnailUrl'>
                <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
              </b:if>
              <meta expr:content='data:blog.blogId' itemprop='blogId'/>
              <meta expr:content='data:post.id' itemprop='postId'/>
    
              <a expr:name='data:post.id'/>
              <b:if cond='data:post.title'>
                <h1 class='post-title entry-title' itemprop='name'>
                  <b:if cond='data:post.link'>
                    <a expr:href='data:post.link'><data:post.title/></a>
                  <b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  <b:else/>
                    <data:post.title/>
                  </b:if>
                </h1>
              </b:if>
    
              <div class='post-header'>
                <div class='post-header-line-1'/>
              </div>
    
              <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
                <data:post.body/>
                <div style='clear: both;'/> <!-- clear for photos floats -->
              </div>
    
              <div class='post-footer'>
                <div class='post-footer-line post-footer-line-1'>
                  <span class='post-author vcard'>
                    <b:if cond='data:top.showAuthor'>
                      <b:if cond='data:post.authorProfileUrl'>
                        <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                          <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                          <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                            <span itemprop='name'><data:post.author/></span>
                          </a>
                        </span>
                      <b:else/>
                        <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                          <span itemprop='name'><data:post.author/></span>
                        </span>
                      </b:if>
                    </b:if>
                  </span>
    
                  <span class='post-timestamp'>
                    <b:if cond='data:top.showTimestamp'>
                      <data:top.timestampLabel/>
                      <b:if cond='data:post.url'>
                        <meta expr:content='data:post.url.canonical' itemprop='url'/>
                        <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
                      </b:if>
                    </b:if>
                  </span>
    
                  <span class='post-comment-link'>
                    <b:include cond='data:blog.pageType not in {"item","static_page"}                                  and data:post.allowComments' data='post' name='comment_count_picker'/>
                  </span>
                </div>
    
                <div class='post-footer-line post-footer-line-2'>
                  <b:if cond='data:top.showMobileShare'>
                    <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                      <a href='javascript:void(0);'><data:shareMsg/></a>
                    </div>
                  </b:if>
                  <b:if cond='data:top.showDummy'>
                    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
                  </b:if>
                </div>
    
              </div>
            </div>
    
            <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
          </div>
        </div>
      </div>
    </b:includable>
                  <b:includable id='nextprev'>
      <div class='blog-pager' id='blog-pager'>
        <b:if cond='data:newerPageUrl'>
          <span id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
          </span>
        </b:if>
    
        <b:if cond='data:olderPageUrl'>
          <span id='blog-pager-older-link'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
          </span>
        </b:if>
    
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    
        <b:if cond='data:mobileLinkUrl'>
          <div class='blog-mobile-link'>
            <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
          </div>
        </b:if>
    
      </div>
      <div class='clear'/>
    </b:includable>
                  <b:includable id='post' var='post'>
      <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
        <b:if cond='data:post.firstImageUrl'>
          <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
        </b:if>
        <meta expr:content='data:blog.blogId' itemprop='blogId'/>
        <meta expr:content='data:post.id' itemprop='postId'/>
    
        <a expr:name='data:post.id'/>
        <b:if cond='data:post.title'>
          <h1 class='post-title entry-title' itemprop='name'>
          <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
            <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
          </h1>
        </b:if>
    
        <div class='post-header'>
        <div class='post-header-line-1'/>
        </div>
    
        <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
        <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
          <data:post.body/>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
    
        <b:if cond='data:post.hasJumpLink'>
          <div class='jump-link'>
            <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
          </div>
        </b:if>
    
        <div class='post-footer'>
        <div class='post-footer-line post-footer-line-1'>
          <span class='post-author vcard'>
            <b:if cond='data:top.showAuthor'>
              <data:top.authorLabel/>
                <b:if cond='data:post.authorProfileUrl'>
                  <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                    <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                    <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                      <span itemprop='name'><data:post.author/></span>
                    </a>
                  </span>
                <b:else/>
                  <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                    <span itemprop='name'><data:post.author/></span>
                  </span>
                </b:if>
            </b:if>
          </span>
    
          <span class='post-timestamp'>
            <b:if cond='data:top.showTimestamp'>
              <data:top.timestampLabel/>
              <b:if cond='data:post.url'>
                <meta expr:content='data:post.url.canonical' itemprop='url'/>
                <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
              </b:if>
            </b:if>
          </span>
    
          <span class='reaction-buttons'>
            <b:if cond='data:top.showReactions'>
              <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
                <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
                  <span class='reactions-label'>
                  <data:top.reactionsLabel/></span> </td>
                <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
               </tr></table>
            </b:if>
          </span>
    
          <span class='post-comment-link'>
            <b:include cond='data:blog.pageType not in {"item","static_page"}                          and data:post.allowComments' data='post' name='comment_count_picker'/>
          </span>
    
           <!-- backlinks -->
           <span class='post-backlinks post-comment-link'>
             <b:if cond='data:blog.pageType not in {"item","static_page"}                      and data:post.showBacklinks'>
               <a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
             </b:if>
           </span>
    
          <span class='post-icons'>
            <!-- email post links -->
            <b:if cond='data:post.emailPostUrl'>
              <span class='item-action'>
              <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
                <img alt='' class='icon-action' height='13' src='https://resources.blogblog.com/img/icon18_email.gif' width='18'/>
              </a>
              </span>
            </b:if>
    
            <!-- quickedit pencil -->
            <b:include data='post' name='postQuickEdit'/>
          </span>
    
          <!-- share buttons -->
          <div class='post-share-buttons goog-inline-block'>
            <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
          </div>
    
          </div>
    
          <div class='post-footer-line post-footer-line-2'>
          <span class='post-labels'>
            <b:if cond='data:top.showPostLabels and data:post.labels'>
              <data:postLabelsLabel/>
              <b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if>
              </b:loop>
            </b:if>
          </span>
          </div>
    
          <div class='post-footer-line post-footer-line-3'>
          <span class='post-location'>
            <b:if cond='data:top.showLocation and data:post.location'>
              <data:postLocationLabel/>
              <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
            </b:if>
          </span>
          </div>
          <b:if cond='data:post.authorAboutMe'>
            <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
              <b:if cond='data:post.authorPhoto.url'>
                <img expr:src='data:post.authorPhoto.url' itemprop='image' width='50px'/>
              </b:if>
              <div>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </div>
              <span itemprop='description'><data:post.authorAboutMe/></span>
            </div>
          </b:if>
        </div>
      </div>
    </b:includable>
                  <b:includable id='postQuickEdit' var='post'>
      <b:if cond='data:post.editUrl'>
        <span expr:class='"item-control " + data:post.adminClass'>
          <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
            <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
          </a>
        </span>
      </b:if>
    </b:includable>
                  <b:includable id='shareButtons' var='post'>
      <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + "&target=pinterest"' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>
    </b:includable>
                  <b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>
                  <b:includable id='threaded-comment-form' var='post'>
      <div class='comment-form'>
        <a name='comment-form'/>
        <b:if cond='data:mobile'>
          <p><data:blogCommentMessage/></p>
          <data:blogTeamBlogMessage/>
          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
        <b:else/>
          <p><data:blogCommentMessage/></p>
          <data:blogTeamBlogMessage/>
          <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
          <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src='' width='100%'/>
        </b:if>
        <data:post.cmtfpIframe/>
        <script type='text/javascript'>
          BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>');
        </script>
      </div>
    </b:includable>
                  <b:includable id='threaded_comment_js' var='post'>
      <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
    
      <script type='text/javascript'>
        (function() {
          var items = <data:post.commentJso/>;
          var msgs = <data:post.commentMsgs/>;
          var config = <data:post.commentConfig/>;
    
    // <![CDATA[
          var cursor = null;
          if (items && items.length > 0) {
            cursor = parseInt(items[items.length - 1].timestamp) + 1;
          }
    
          var bodyFromEntry = function(entry) {
            var text = (entry &&
                        ((entry.content && entry.content.$t) ||
                         (entry.summary && entry.summary.$t))) ||
                '';
            if (entry && entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
                  return '<span class="deleted-comment">' + text + '</span>';
                }
              }
            }
            return text;
          }
    
          var parse = function(data) {
            cursor = null;
            var comments = [];
            if (data && data.feed && data.feed.entry) {
              for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
                var comment = {};
                // comment ID, parsed out of the original id format
                var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
                comment.id = id ? id[2] : null;
                comment.body = bodyFromEntry(entry);
                comment.timestamp = Date.parse(entry.published.$t) + '';
                if (entry.author && entry.author.constructor === Array) {
                  var auth = entry.author[0];
                  if (auth) {
                    comment.author = {
                      name: (auth.name ? auth.name.$t : undefined),
                      profileUrl: (auth.uri ? auth.uri.$t : undefined),
                      avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                    };
                  }
                }
                if (entry.link) {
                  if (entry.link[2]) {
                    comment.link = comment.permalink = entry.link[2].href;
                  }
                  if (entry.link[3]) {
                    var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                    if (pid && pid[1]) {
                      comment.parentId = pid[1];
                    }
                  }
                }
                comment.deleteclass = 'item-control blog-admin';
                if (entry.gd$extendedProperty) {
                  for (var k in entry.gd$extendedProperty) {
                    if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                      comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                    } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                      comment.displayTime = entry.gd$extendedProperty[k].value;
                    }
                  }
                }
                comments.push(comment);
              }
            }
            return comments;
          };
    
          var paginator = function(callback) {
            if (hasMore()) {
              var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
              if (cursor) {
                url += '&published-min=' + new Date(cursor).toISOString();
              }
              window.bloggercomments = function(data) {
                var parsed = parse(data);
                cursor = parsed.length < 50 ? null
                    : parseInt(parsed[parsed.length - 1].timestamp) + 1
                callback(parsed);
                window.bloggercomments = null;
              }
              url += '&callback=bloggercomments';
              var script = document.createElement('script');
              script.type = 'text/javascript';
              script.src = url;
              document.getElementsByTagName('head')[0].appendChild(script);
            }
          };
          var hasMore = function() {
            return !!cursor;
          };
          var getMeta = function(key, comment) {
            if ('iswriter' == key) {
              var matches = !!comment.author
                  && comment.author.name == config.authorName
                  && comment.author.profileUrl == config.authorUrl;
              return matches ? 'true' : '';
            } else if ('deletelink' == key) {
              return config.baseUri + '/delete-comment.g?blogID='
                   + config.blogId + '&postID=' + comment.id;
            } else if ('deleteclass' == key) {
              return comment.deleteclass;
            }
            return '';
          };
    
          var replybox = null;
          var replyUrlParts = null;
          var replyParent = undefined;
    
          var onReply = function(commentId, domId) {
            if (replybox == null) {
              // lazily cache replybox, and adjust to suit this style:
              replybox = document.getElementById('comment-editor');
              if (replybox != null) {
                replybox.height = '250px';
                replybox.style.display = 'block';
                replyUrlParts = replybox.src.split('#');
              }
            }
            if (replybox && (commentId !== replyParent)) {
              replybox.src = '';
              document.getElementById(domId).insertBefore(replybox, null);
              replybox.src = replyUrlParts[0]
                  + (commentId ? '&parentID=' + commentId : '')
                  + '#' + replyUrlParts[1];
              replyParent = commentId;
            }
          };
    
          var hash = (window.location.hash || '#').substring(1);
          var startThread, targetComment;
          if (/^comment-form_/.test(hash)) {
            startThread = hash.substring('comment-form_'.length);
          } else if (/^c[0-9]+$/.test(hash)) {
            targetComment = hash.substring(1);
          }
    
          // Configure commenting API:
          var configJso = {
            'maxDepth': config.maxThreadDepth
          };
          var provider = {
            'id': config.postId,
            'data': items,
            'loadNext': paginator,
            'hasMore': hasMore,
            'getMeta': getMeta,
            'onReply': onReply,
            'rendered': true,
            'initComment': targetComment,
            'initReplyThread': startThread,
            'config': configJso,
            'messages': msgs
          };
    
          var render = function() {
            if (window.goog && window.goog.comments) {
              var holder = document.getElementById('comment-holder');
              window.goog.comments.render(holder, provider);
            }
          };
    
          // render now, or queue to render when library loads:
          if (window.goog && window.goog.comments) {
            render();
          } else {
            window.goog = window.goog || {};
            window.goog.comments = window.goog.comments || {};
            window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
            window.goog.comments.loadQueue.push(render);
          }
        })();
    // ]]>
      </script>
    </b:includable>
                  <b:includable id='threaded_comments' var='post'>
      <div class='comments' id='comments'>
        <a name='comments'/>
        <h2><data:post.commentLabelFull/>:</h2>
    
        <div class='comments-content'>
          <b:include cond='data:post.embedCommentForm' data='post' name='threaded_comment_js'/>
          <div id='comment-holder'>
             <data:post.commentHtml/>
          </div>
        </div>
    
        <p class='comment-footer'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='threaded-comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        </p>
    
        <b:if cond='data:showCmtPopup'>
          <div id='comment-popup'>
            <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
            </iframe>
          </div>
        </b:if>
    
        <div id='backlinks-container'>
        <div expr:id='data:widget.instanceId + "_backlinks-container"'>
          <b:include cond='data:post.showBacklinks' data='post' name='backlinks'/>
        </div>
        </div>
      </div>
    </b:includable>
                </b:widget>
    </b:section>
    
    Here is the finish work in case you follow the tutorial well.

    DESKTOP VIEW:

    desktop layout of the steps carried out

     MOBILE VIEW:

    mobile layout of the steps carried out
    disclaimer: all the text in the preview were sourced from Wikipedia for this demonstration. 

    Note: for this to actually be responsive you must disable mobile view by going to theme --> click on the mobile setting icon --> select; (No. Show desktop theme on mobile devices). That's all!

    Wow that was a journey, if you have benefited from this tutorial you can share, subscribe for more contents, you can also drop your relevant comment in the comment section.







    continue reading

    Fundamentals of wireless power transmission

    Saturday, 20 January 2018

    Goal:

    At the end of this article you would be able to grasp the working phenomenon of wireless power transmission and would be able to apply it in building your own wireless power transmission project.

    Introduction:

    In my previous post, I talked about how I made money with my design skills just when I was still in school. Well this could be called a sequel to that. One of the project I handled back in the days was the development of a wireless charger. A wireless charger uses the technology of wireless power transmission to transmit power from a charging pod to a receiver which is normally built in the phone that is being charged.

    How it works (Analogy):

    Wireless power transmission works in a similar way to an AC transformer in which an insulated copper wire is wounded around a core of a transformer. Most times the core is designed in form of an E-shape, I-shape, rectangular, circular etc. for more about transformer core design click here. Regular electronic transformers are in form of the E-shape. A transformer comes with two winding; a secondary winding and a primary winding.
    Fundamentals of wireless power transmission

    In a conventional step down transformer the secondary is connected to the AC mains while the primary winding is connected to the device being powered e.g. radio set or television. A transformer works by obeying the principle of electromagnetic coupling in which two coils placed close together induces an emf (electro-motive force) when current is varied in one coil, this is also known as mutual inductance.

    Mutual inductance:

    Mutual induction can be defined as the current flowing in one coil that induces a voltage in an adjacent coil. In addition, irrespective of the type of core used either solid (iron) or gas (air) mutual inductance always takes place as far as the two coils are placed close together. Mutual inductance is one of the principle that aid in wireless power transmission. For more information on mutual inductance click here.
    mutual inductance

    The inductance of an air core coil that causes the coil to undergo self-induction can be derived using the formula below;
    mutual inductance formula
    Where;
    L = inductance of the coil.
    d = the diameter of coil in inches.
    n = number of turns.
    l = length of coil in inches.

    The formula above can be used to calculate the inductance of a coil but in cases where another coil is brought close the other coil, mutual inductance would take place, this is because the two coils tends to couple. Therefore transmission is based on inductive coupling of the two coil. To know the extent of coupling between the two coils means calculating the coupling coefficient which is a function of mutual inductance which can be given as;
    mutual inductance formula
    Where;
    M = Mutual inductance.
    L1 = Inductance of L1
    L2 = Inductance of L2

    Since the formula above can be used to solve for the mutual inductance of two coils in close proximity it is assumed that there was a complete mutual inductance. In other words the voltage in L1 is equal to the voltage in L2 at time t = 0. But in a real life scenario there would be loss due to several factors like distance between the two coils, angle of inclination etc. In that case M ≠ √ (L1 ˟ L2). Therefore we assume a value K which will multiply to equate the equation properly to give;
    mutual inductance formula

    Where;
    K = Coupling Coefficient or Factor of Coupling.

    Coupling Factor or Coupling Coefficient

    The coupling Factor K ranges from 0 to 1, when it is equal to 0 it means no mutual inductance. Thus there would be no transmission from L1 to L2, this depict a situation where the coil are kept far apart. When K approaches 1 it means there is mutual inductance to some extent, this could mean the two coils are in range of transmission and reception. Several factors can also affect inductive coupling. Factors like type of coil, number of turns, coil design, core etc.

    The equation above can be further expatiated to give the following;
    inductive coupling formula


    Where;
    V2 = voltage on receiving coil.
    V1 = Voltage on transmitting coil.
    N2 = Number of turns on receiving coil.
    N1 = Number of turns on transmitting coil

    For information on how the above equation was derived click here.
    In conclusion wireless power transmission has been in existence since the time of Nickolas Tesla, this article just concentrates on power transmission through inductive coupling of coils in a close proximity. Since the invention of wireless power transmission in 1904 by Nickolas Tesla there have been invention of newer ways to transfer power wireless e.g. microwave, resonance inductive coupling, light-waves etc. In my next post I will go through the stages of wireless power transfer through inductive coupling.
    continue reading

    Contact Form

    Name

    Email *

    Message *

    Subscribe to get updates

    news letter