Saturday, 24 March 2018

How To Create Chrome Extension for your Blog in 2 minutes that shows recent posts.

How To Create Chrome Extension for your Blog in 2 minutes that shows recent posts.


Do you have a blog and you regularly write posts and still your blog still suck reaching enough audience. There are several things that you can do improve your blogs net worth, one such thing is create a dedicated chrome extension exclusively for your blog posts. It just take 30 minutes to entirely create a dedicated chrome plugin for your blog and to go live with the code included here.

Advantages of having chrome extension for your blog

  • It’s considered to be search ranking signal, although Google doesn’t openly admit that it is a search ranking signal, I, from my personal experience could say it could make a huge difference on your blog’s /websites traffic
  • It allow traffic from chrome web store to you blog.
  • It establishes your brand name to wide range of audience through chrome webstore.
  • People trust a website which have dedicated chrome extension or android app & they could take your words seriously.
  • If more number of people install your blog/websites extension, Google consider that your blog is worth showing to people.
  • You’ll receive traffic from your extension itself.
  • If your website/blog involves selling of products/services then it may increase sales behind the scenes.

How chrome extension works for your blog?

  1. Almost all blogs have a feed URL with rss that has most recent 10 posts you published with description and link that updates automatically.
    This blogs RSS feed URL http://feeds.feedburner.com/Phpcable
  2. We use your RSS feed URL to read the recent posts and display in chrome extension public menu.
This is how it looks on chrome extension menu. On clicking the icon chrome opens extension menu with list of recent posts of your blog

How to create chrome extension for your blog in 2 minutes?


Step 1 – Download the zip file included in this
Get the customized Chrome Extension for your Blog to show latest posts

DOWNLOAD FREE

Step 2 – Open manifest.json change name and description



{
 "manifest_version" : 2,
 "name": "PhpCable Web Developers",
 "description" : "An extension that shows the recent posts published on phpcable.com",
 "version" : "1.0",
 
 "browser_action" : {
  "default_icon" : "icon128.png",
  "default_popup" : "popup.html"
  
 }
}

Important Step 3 – Open Popup.js, goto line 5, change URL to your blogs feed URL. 



// JavaScript Document
jQuery(document).ready(function($) {

    //Change it to your blog feed URL here - Create and send request to get feed via google feed api 
    url = 'http://feeds.feedburner.com/Phpcable';
    url = 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=' + encodeURIComponent(url);
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            var result = xhr.responseText;
            var result = jQuery.parseJSON(result);
            for (var i = 0; i < result.responseData.feed.entries.length; i++) {
                var entry = result.responseData.feed.entries[i];
                $('<div/>', {
                    'id': i,
                    'class': 'passenger popup-btn',
                    'style': 'cursor:pointer;',
                    'html': '<div class="entry" style="float:left;"> <div style="width: 315px;" class="name">' + entry.title + '</div><div class="fromto" style="width: 315px;"> <span class="from">Published on: </span><span class="traveldate">' + entry.publishedDate + '</span></div> </div> <div style="float:right; margin-top:20px;"> <a class="button-green copy" data-url=' + entry.link + ' href="javascript:;">Read Now</a></div> <div style="clear:both;"></div>',
                }).prependTo('#initdata');
            }
        }
    };
    xhr.send();


    $(document).on('click', '#acpdesign .copy', function() {
        $('#acpdesign .copy').text('Read Now').css("font-weight", "normal");
        $(this).text('Read').css("font-weight", "bold");
        var key = $(this).attr('data-key');
        var copiedUrl = $(this).attr('data-url');


        chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(arrayOfTabs) {
            var activeTabUrl = arrayOfTabs[0].url;
            if (activeTabUrl != copiedUrl) {
                chrome.tabs.update({
                    'url': copiedUrl
                });
            }
        });
    });
});


Step 4 – Change Icon files if required (Optional)
Step 5 – Play around the HTML & CSS to match your blog’s look and feel
Step 6. Zip the package again and upload to chrome webstore.

Let your blog get improve in net worth, gain the trust of one time visitors, let people take your words seriously, let Google consider your blog is worth showing to people, let your traffic increase tremendously – All this in 30 minutes of time assured.

Kennedy Sakala
www.phpcable.com
Whatsapp +260976196939

Thursday, 15 March 2018

How to Disable Copy and Paste on Your Site

How to Disable Copy and Paste on Your Site


This jQuery plugin helps you to prevent copy and paste of your post content from your blog. This mainly helps you to avoid someone from copying your quality content.

jQuery script to Disable Selection

This is very simple to add this in your blog. Just follow few steps to add it.
Step 1:
Add following jQuery plugins in the head (<head> </head>)section of the html home page.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='https://dl.dropboxusercontent.com/u/49791983/disableSelection.js'></script>

Note:
If your are a blogger, go to html editing page. Find </head> tag and add above plugins before </head> tag.

Step2:
Now add following script just below that.
<script>
$(document).ready(function(){
$('body').disableSelection();
});
</script>
Note: Add this jQuery library only if you never add it before in your page.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

If you felt any difficulty implementing this please leave the comments..
This Project is free to download and the source code is based on core PHP. comments are putted into the source code for better understanding. optimized codes are being used and is easy to understand.

Saturday, 10 March 2018

How to Add RSS Email Subscription Box To Website

How to Add RSS Email Subscription Box To Website

Before continuing this tutorial please refer my previous tutorial on “how to link Google RSS feedburner to website” to improve website traffic. one of the nice way to make visitor to subscribe for blog updates is add RSS email subscription box to our website. Follow simple steps to add email subscription box to your website.

RSS email subscription box
step 1: Login into your Google feeburner account using Google account. Then click on your feed link you created before just like one shown in the below picture.

RSS feed burner home page

step 2: Find publicize button in the main menu and select it, then navigate to left sidebar and select Email subscription button.
Find publicize and Email subscription button and select it.
step 3: Now click on Activate button at the bottom to activate email subscription service, unless it is activated already.
Activate email subscription service using activate button
Step 4: Now copy the Subscription Form Code found in the page and paste the code in the sidebar widget of the blog or wordpress.
RSS email subscription form code
Step 4. Now paste the code on your blog widget or on your website here you what the subscription form to appear.

Step 5. See the live RSS email subscription box in my blog.
Live RSS email subscription box
NOTE: Please subscribe to my blog post, so that you will get regular technology updates from PhpCable.

Mr Kennedy Sakala
www.phpcable.com
whatsapp +260976196939

How To Add Google RSS Feed to Website (Blogger, WordPress …)

How To Add Google RSS Feed to Website (Blogger, WordPress …)

One of the great way to improve your blog (blogger, wordpress or site) traffic is to retain site visitor by making them get in touch with your latest updates in your blog. Here is the simple way to add your blog or WordPress site to Google feed burner.


                                      Add google rss feed to website


Note : you need to have google account to use feed burner features, if you don’t have already sign up for Google account.
Steps to Follow:
  1. Go to the Google feed burner home page and sign in into the feedburner using your Google account.
  2. Now you will see textbox with label Burn a feed right this instant on the homepage of FeedBurner. Enter your site address or feed address in the textbox like one shown in the below picture and click Next

RSS Feedburner homepage 
3. Now Feedburner will look for feeds of your blog. If it finds it will assign feed address of your blog. Where you need to give feed title to your blog feeds. Then click Next to continue.

RSS Feedburner assigns feed address to blog feeds
4. Now you have successfully created RSS feeds to your blog and it live now.
Feedburner feed is now live
5. Now you have to configure FeedBurner statistic options. Select all the options and click Next button to finish.
Configure RSS feedburner statics options
6. Now you had successfully finished rss feed creation for your blog posts.

RSS feed for blog post is now live


Please refer my next tutorial on how to add rss feed email subscription box to your website or blog.



thanks 
Erick kennedy Sakala
www.phpcable.com



Thursday, 8 March 2018

How To Generate A Single Use Download Link

Single use download

Brief


This script was written to be a very easy way for non-programmers to be able to create a secure way to share a single file. It is ideal for bands looking to give a single song to a single person, and invalidating the link once the song has been downloaded. However, it will work for any type of file.

Description


This script allows you to generate a unique link to download a file. This file will only be allowed to be downloaded one time. This link will also have also have an expiration date set on it.

For instance, if you wanted to sell a song for your band. You sold the song on your website for $1, you could use this script to allow that person to download your song only one time. It would only give them a limited number of hours/days/weeks/years to claim their download.

You can also mask the name of the file being downloaded, for further protection. For example, if your song was called "greatsong.zip", you could set the download link as "Band_Awesome-Awesome_Song.zip" (it is not a good idea to leave spaces in URL titles)

Update


On January 11, 2018 a multi-file feature branch was merged with the single file. It is now possible to download multiple files at once.

Example



Git the code





If you have problems using the script leave a comment i will be happy to help you