The Rested Life Ministries

Welcome to

Education @ The Rested Life

In our effort to enable and equip, we have put together resources for Educators, Students and Web Developers. Take advantage of these resources and we hope that they will prosper you, even as your soul prospers.

Be Blessed.

View Our
Resources

Welcome to The Rested Life

The Rested Life is an online ministry with the sole mission of unveiling Jesus and His love for you. We want to share with you the importance of His work on the cross and bring you to the intimate knowledge of Jesus Christ and the gift of salvation that He wants to freely give you.


  • Our
    Calling
  • Meet
    The Team
  • Make A
    Difference
  • Write To Us

    We would love to hear from you. Whether you have a prayer request to make or a testimony to share, just drop us a line and let us praise God together.


  • Prayer
    Requests
  • Share Your
    Testimony
  • Request a
    Message
  • Serving the Community

    Apart from providing edification and encouragement through our daily messages, the ministry also wants to be able to bless you tangibly. We hope to enable and equip you so that you may prosper, even as your soul prospers.


  • For
    Teachers
  • For
    Students
  • Web
    Developers
  • Our
    Missons
  • Latest Resources for You

    Saturday, January 2, 2016

    HOW TO OPTIMIZE BLOGGER SITE FOR GOOGLE+, FACEBOOK, TWITTER, PINTEREST AND SEARCH

    If you are here, it must be because you have heard of how using the right meta tags on your pages can help your post look better in Google+, Facebook, Twitter and Pinterest.

    But you also must have realized that they all run different systems. Google+ needs the 'itemprop' markup, while Facebook and Pinterest uses 'og:' and Twitter uses 'name='twitter:''.

    To complicate matters, if you want to be listed effectively on Bing, you need to use the 'name='description'' mark up, which will complicate matters when it comes to using Twitter's 'name='twitter:description''.

    So is there an 'all in one' solution? Yes, there is, and here it is. You will want to insert this within your <head></head> section.
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta content='summary' name='twitter:card'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <meta content='summary' name='twitter:card'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='summary_large_image' name='twitter:card'/>
    </b:if>
    </b:if>
    </b:if>
    <meta content='@[your twitter id]' name='twitter:site'/>
    <meta content='@[your twitter id]' name='twitter:creator'/>
    <meta expr:content='&quot;en_US&quot;' property='og:locale'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <meta expr:content='data:blog.pageName' itemprop='name' name='twitter:title' property='og:title'/>
    <meta content='article' property='og:type'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' itemprop='name' name='twitter:title' property='og:title'/>
    <meta content='article' property='og:type'/>
    <b:else/>
    <meta expr:content='data:blog.title' name='twitter:title' property='og:title'/>
    <meta content='website' property='og:type'/>
    </b:if>
    </b:if>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageUrl' name='twitter:image' property='og:image'/>
    <b:else/>
    <meta content='[your favicon url]' height='200' name='twitter:image' property='og:image' width='200'/>
    </b:if>
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <meta expr:content='data:blog.metaDescription' itemprop='description' name='twitter:description' property='og:description'/>
    </b:if>
    Now, let me break it down for you.
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta content='summary' name='twitter:card'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <meta content='summary' name='twitter:card'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='summary_large_image' name='twitter:card'/>
    </b:if>
    </b:if>
    </b:if>
    If you are like me, you will only use large pretty images for your blog posts. Your static pages and homepage have next to no unique images and so, you probably want to use your favicon image or your brand logo.

    What this bit of the code does is it changes the nature of the Twitter card from the large summary to the ordinary summary and allows you to use your brand logo to front the static pages and homepage; while your nice fancy post images still come out as is in the large summary.
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <meta expr:content='data:blog.pageName' itemprop='name' name='twitter:title' property='og:title'/>
    <meta content='article' property='og:type'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' itemprop='name' name='twitter:title' property='og:title'/>
    <meta content='article' property='og:type'/>
    <b:else/>
    <meta expr:content='data:blog.title' name='twitter:title' property='og:title'/>
    <meta content='website' property='og:type'/>
    </b:if>
    </b:if>
    Now, this bit of code ensures that the right title and page type is identified for the homepage, the static pages and each blog post. If you want your posts and site classified by any other type, just change the items highlighted in green.
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageUrl' name='twitter:image' property='og:image'/>
    <b:else/>
    <meta content='[your favicon url]' height='200' name='twitter:image' property='og:image' width='200'/>
    </b:if>
    Now, this bit of code ensures that your images come out the way you want them to. You see, Facebook won't show images smaller than 200x200 px. And even if the image is larger, they sometimes need a little bit of help in identifying the image size. So by defining the size for them, you will ensure that it will come out right every time.

    Also, for Twitter, you must use 'data:blog.postImageUrl'. Some other solutions will tell you to use 'data:blog.postImageThumbnailUrl'. Now, Thumbnail Url is too small to be used for Twitter's large summary and it is best to retrieve your original image for best results. So the ones in red, do not change.
    <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <meta expr:content='data:blog.metaDescription' itemprop='description' name='twitter:description' property='og:description'/>
    </b:if>
    Now, for the main event. The cornerstone of any social media post is your meta description tag. If you are here, that means you understand this and there is no need for me to explain it further. But each of the different social media networks use a different markup language. And Bing needs you to use 'name='description''. Now, XML will not allow you to have two 'name' elements in one meta tag, so you will need to have two meta description tags, one for Bing, which says 'name='description'' and one for Twitter, which says 'name='twitter:description''.

    Yes, I know what you are thinking. It's not good to have two description tags for the same page. Well, yes. But in this case, because they are both known by different names, pardon the pun, it will not throw up any errors on SEO validators. I checked with Bing's.
    <meta content='@[your twitter id]' name='twitter:site'/>
    <meta content='@[your twitter id]' name='twitter:creator'/>
    <meta expr:content='&quot;en_US&quot;' property='og:locale'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    Finally, customize the items marked in yellow to suite your own Twitter id and favicon url, and you are on your way to beautiful posts each and every time your URL is listed on on a social media network.

    Saturday, January 02, 2016

    Thursday, December 24, 2015

    ADDING POST TITLES TO YOUR POST NAVIGATION

    If you are bored of your page navigation buttons only ever saying 'Next' and 'Previous', and would like them to give more information so that visitors will be enticed to read on, then this solution is for you.

    Now, there are many alternative solutions out there that use jquery and javascript; but if your blogger site is running off Cloudflare's secure CDN, then this solution is probably the only one you can use, because it prevents you from having Mixed Content Errors. What it does is it extracts your post titles from your blog feed and displays them in your 'Next' and 'Previous' buttons. You can see what I mean by scrolling to the end of this post. This solution is used on this site.

    So if you like this solution, then here's the script that you need to use. It comes courtesy of MS-potilas and it can be found at http://yabtb.blogspot.sg/2012/01/add-post-titles-to-older-and-newer-post.html.
    <script type='text/javascript'>
    // Post titles to Older Post and Newer Post links (without stats skew)
    // by MS-potilas 2012. See http://yabtb.blogspot.com/
    //<![CDATA[
    var urlToNavTitle = {};
    function getTitlesForNav(json) {
    for(var i=0 ; i < json.feed.entry.length ; i++) {
    var entry = json.feed.entry[i];
    var href = "";
    for (var k=0; k<entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    href = entry.link[k].href;
    break;
    }
    }
    if(href!="") urlToNavTitle[href]=entry.title.$t;
    }
    }
    document.write('<script type="text/javascript" src="//'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"/>');
    function urlToPseudoTitle(href) {
    var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
    if(title) {
    title=title[1].replace(/-/g," ");
    title=title[0].toUpperCase() + title.slice(1);
    if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
    }
    return title;
    }
    $(window).load(function() {
    window.setTimeout(function() {
    var href = $("a.blog-pager-newer-link").attr("href");
    if(href) {
    href = href.replace(/\http\:[^/]+\//, "https");
    var title=urlToNavTitle[href];
    if(!title) title=urlToPseudoTitle(href);
    if(title) $("a.blog-pager-newer-link").html("&lt;&lt; Newer<br />" + title);
    }
    href = $("a.blog-pager-older-link").attr("href");
    if(href) {
    href = href.replace(/\http\:[^/]+\//, "https");
    var title=urlToNavTitle[href];
    if(!title) title=urlToPseudoTitle(href);
    if(title) $("a.blog-pager-older-link").html("Older &gt;&gt;<br />" + title);
    }
    }, 500);
    });
    //]]>
    </script>
    To use this script, you will want to look for </body> and insert this just above it. This will ensure that you don't encounter 'blocking script' issues in Google Page Speed diagnosis. And once you have done that, you are done.

    Well, not quite.

    You will still need you style your CSS to your own liking and according to your site template's specifications. If you need a guide, this is what I am using.
    .item #blog-pager span {
    background: none;
    width: 40%;
    font-size: 18px;
    }
    .item #blog-pager a {
    color: #ff9b00;
    font-size: 16px;
    }
    .item #blog-pager a:hover {
    color: #bbb;
    }
    .item #blog-pager-newer-link {
    float: left;
    text-align: left;
    }
    .item #blog-pager-older-link {
    float: right;
    text-align: right;
    }
    But this is not the most important thing you need to look out for. The most important bit comes from this segment of script.
    document.write('<script type="text/javascript" src="//'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav"/>');
    function urlToPseudoTitle(href) {
    var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
    if(title) {
    title=title[1].replace(/-/g," ");
    title=title[0].toUpperCase() + title.slice(1);
    if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
    }
    return title;
    }
    Firstly, you will notice that there is no protocol used after 'src="'. And this is because stating the protocol will give you Mixed Content Errors and the code will not work properly.

    Secondly, even though the script says max-results=500, the script may not pull 500 results for your site. It pulled only 150 for mine. So you will have to test the script by pasting
    //'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav
    in your browser and checking to see just how many posts it pulls. Of course, you will need to replace '+window.location.hostname+' with your domain name.

    Now, this is important, because if the script does not capture all your posts, for the ones that are not caught, the script will revert to PseudoTitle mode, which means, it will create the title off your URL instead. You will know that it is doing this if you see your title come out truncated and in sentence font, not full caps. Clever little script, isn't it? Even has a built in fail-safe.

    But you don't want the fail-safe, do you? You want it working perfectly. You want your post title displayed in full and not truncated. So if the script is not retrieving all the posts for you, then you will need to use the feed that is direct from blogger instead. In this case, replace
    //'+window.location.hostname+'/feeds/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav
    with
    https://www.blogger.com/feeds/[the series of numbers that represent your blog id]/posts/summary?redirect=false&max-results=500&alt=json-in-script&callback=getTitlesForNav
    You can get the code by doing a CTRL U and looking for the following code.
    <link href='https://www.blogger.com/feeds/[the series of numbers that represent your blog id]/posts/default' rel='service.post' title='Your blog name - Atom' type='application/atom+xml'/>
    From my experience, using the code direct from blogger is the most foolproof solution when it comes to retrieving feed information, and you should have no problems getting the script to retrieve the full 500 posts that is allowed by Blogger.

    Now, if you have more than 500 posts, then what you need to do is to add the following script directly under the first.
    document.write('<script type="text/javascript" src="https://www.blogger.com/feeds/[the series of numbers that represent your blog id]/posts//summary?redirect=false&max-results=500&start-index=501&alt=json-in-script&callback=getTitlesForNav"/>');
    function urlToPseudoTitle(href) {
    var title=href.match(/\/([^\/_]+)(_.*)?\.html/);
    if(title) {
    title=title[1].replace(/-/g," ");
    title=title[0].toUpperCase() + title.slice(1);
    if(title.length > 28) title=title.replace(/ [^ ]+$/, "...")
    }
    return title;
    }
    You will undoubtedly realize that this is almost identical to the one above, except for this little bit.
    max-results=500&start-index=501
    A big thanks goes out to Adam over at http://too-clever-by-half.blogspot.sg/2011/12/blog-feed-500-post-limit-for-more-than.html for this code.

    Now, that second bit is to extract the next series of 500 posts, after the code has extracted the first.

    And once you have done that, you can enjoy the fruits of having more informative links.

    Thursday, December 24, 2015

    Friday, November 27, 2015

    GETTING HTTPS ON BLOGGER SITES WITH CUSTOM DOMAINS - PROBLEMS AND SOLUTIONS

    In October, Blogger rolled out the HTTPS protocol for .blogspot.com domains. Since then, many users have been trying to jump on the HTTPS bandwagon. However, if you are using a custom domain with the blogger site, the current version of the HTTPS protocol is not for you because it doesn't support custom domains.

    But if you still want to get your custom domain onto the HTTPS protocol, there is a way; and it's with Cloudflare.

    Now, caveats first. This is not a sponsored post by Cloudflare, nor does it give you instructions on how to set up your Cloudflare account. There are tons of instructional material out there on that, plus the process is really simple. So we're not looking at that here. Instead, I'd like to share with you some of the problems that you will encounter when trying to use Cloudflare for your HTTPS protocol and how to work around them.

    So let's get cracking.

    The Basics
    Blogger runs off its own servers and the servers are owned by Goggle. Ordinarily, if you wanted to run your site on the HTTPS protocol, you needed to install an SSL certificate on your server. But we Blogger users can't do that since we don't have access to the Blogspot server. So the next best thing we can do is to route traffic from the Blogspot server to a third party server (think DNS hosting) and let that third party server run your SSL certificate for you.

    Now, purists will tell you that this goes against the 'proper' way of doing things. And I agree. So if you feel the same way, then read no further. Wait for Blogger to roll out HTTPS for custom domains.

    But if you can't wait and you don't mind the redirection, then here's the solution for you.

    Cloudflare
    Cloudflare is a company that provides Content Delivery services. It's great if you are hosting your site on your own server at home. But given that Blogger uses Google's servers, there is little sense in using them, really, except... if you want to leverage on their SSL certificates.

    Cloudflare provides free SSL certificates, which is great for low budget startups and NPOs like us. It saves us the time, money and all round bother of finding a suitable SSL certificate for our site. So if you want to leverage on their services, go on to Cloudflare, sign up for an account, add in your domain and follow the instructions. Because you are running your Blogger site off of Blogger's own servers, there is little point in using their paid service. So select their free service and follow the steps below to set up your Cloudflare settings.

    Setting Up Cloudflare

    Step 1:

    Select Flexible SSL

    Select Flexible SSL on Cloudflare

    Cloudflare has a variety of options for you to select. But the one that applies to us Blogger users is Flexible SSL because what it does is it secures traffic to and from your Cloudflare server, but not the traffic between Cloudflare and Blogger. Some people are comfortable with this, some aren't. But because we Blogger users cannot install an SSL certificate on the Blogger server, this is our only option.

    Step 2:

    Set up Page Rules

    Set up Page Rules to route http to https

    The next thing you want to do is to go to the Page Rules tab and set up your own page rule. What this does is it sets up a 'force HTTPS' and directs all HTTP traffic to HTTPS, something that the current version of the Blogger HTTPS protocol does not allow.

    Now, Cloudflare will tell you to set up your URL pattern as *domain.com/*. If you do this, and you are running a custom domain, and you already have the following redirections set up;
    • blogspot.com to www.domain.com (enabled in your Blogger user interface) 
    • domain.com to www.domain.com (enabled either in your Blogger user interface or in your domain host user interface) 
    You will end up with a redirection loop error. Basically a page will load and tell you that the URL has too many redirects and you can't access the page.

    To solve this, set your URL pattern as http://*domain.com/*. Remember to add the http:// in front and all HTTP traffic will now be redirected to your HTTPS domain.

    Step 3:

    Sort out your Mixed Content Errors

    Photos and Resources
    Now, if you are using Blogger, then I assume that you use the 'Insert Photo' button to attach your pictures onto your posts. If you do that, then all your photos are stored on the blogspot photo folder, and you have less of a headache. Also, if you are using javascript from Google's stable of .js files, then you are quite fine as well. If this is you, all you need to do is go through each and every resource link and change http:// to https://. You can do a simple search for the term 'src="http' and make the changes.

    For all other resources, check that the resource is supported on the https:// protocol by copying and pasting the URL in the browser. If you find that the resource can only be found on the http:// protocol, then use a neutral domain protocol (i.e. //www.google.com) for that resource.

    This is tedious, I know, but this is because while the HTTPS protocol on .blogspot.com domains will automatically recognize and draw the resource from blogspot's https:// domain, Coudflare, a third party DNS host, won't know that and so you will have to define it for them in your coding.

    Do take note that you need to do this for ALL resources used in your site for the HTTPS protocol to be fully activated on your site (i.e. for the lock icon to turn green).

    Internal Links
    Because you are now running off of a third party DNS host, if you have internal links to your own pages that are expressed as http://domain.blogspot.com/*, these internal links will not work anymore. They will route you to a Blogger page which tells you that the site is no longer hosted on Blogger and there may be malware on it.

    To get around it, change all your internal links to use your custom domain. You can choose to have them expressed as https://domain.com or just simply //domain.com.

    Step 4:

    RSS Feeds and Email Subscriptions.

    The last thing you need to do is to change the feed on your Feedburner account. Now, if you don't have email subscription set up, then you can ignore this bit. But if you do, then you will, if you haven't already, want to change your Original Feed URL to the use the following;
    https://www.blogger.com/feeds/[a long numbered id]/posts/default
    Now, if you do a CTRL U from your Blogger site, you will find that there are actually 3 possible RSS feed URLs, and they come in these patterns.
    <link rel="alternate" type="application/atom+xml" title="Site Name - Atom" href="http://www.domain.com/feeds/posts/default"/>
    <link rel="alternate" type="application/rss+xml" title="Site Name - RSS" href="http://www.domain.com/feeds/posts/default?alt=rss"/>
    <link rel="service.post" type="application/atom+xml" title="Site Name - Atom" href="https://www.blogger.com/feeds/[a long numbered id]/posts/default"/>
    The first two are alternates, and if you use them, your feeds will break once there are changes in your domains or protocols. By using the one listed 'service.post', you will ensure that your feeds still flow smoothly no matter what changes you make to your site.

    Once you have done all that, all you need to do is wait for Cloudflare to populate their DNS with your information, which usually takes a full day, and you are done.

    Do take note that during the time that Cloudflare is taking to populate their DNS, you will get intermittent service to your site. That is normal. But the down time is no longer than 10-15 minutes each time. And once the site is fully populated, your site will be as stable as it was when it was running off of Blogger's server.

    Friday, November 27, 2015
    Like our messages?

    Sign up to get our messages delivered daily.

    Social Media Policy Privacy Policy Disclaimer Terms of Use