10 Best SEO Friendly Blogger Templates of 2016
Make Money Online in Pakistan - 14 Strategies In Urdu 2016
Looking forward to the fact that we don't have many make money online tutorials in Pakistan, specially in Urdu language, I decided to make this video tutorial for all the brothers and sisters living in Pakistan.
In this particular AskHassam episode, I go through 14 ways how we can make money online in Pakistan.
I hope this helps you out. Do leave out your question in the comments section of the video if you have any InshaAllah.
Watch Episode
Platforms Discussed In The Episode Are:
1. Make money online by filling Survey:
Also you can checkout alternatives for SwagBugs on this comprehensive post that you can checkout.
2. Make money online by downloading apps:
3. Make money online by reviewing stuff:
4. Make money online by testing websites:
5. Make money online by working for Amazon:
6. Make money online by becoming a virtual assistant:
Top 10 Best Google AdSense Alternatives of 2017
Automated Recent Posts Slider For Blogger - [FlexSlider]
Today we will create a dynamic and automated recent posts slider for blogger using Blogger JSON Feed and jQuery. We will display recent posts of your blog inside FlexSlider which is a free slider plugin provided by woothemes. The slider gives a feeling of a tab widget where you can switch from one slide to another using the tab buttons or navigational controls. WordPress users have already integrated recent posts inside flexslider but this is the first time blogspot users will be able to display automatic list of recent posts inside a image slider.-
Also Check: Display Recent Posts Inside Vertical Slider
Today's recent posts slider is coded using the same logic with which we coded our last JSON widget except for few design differences. Please check the last widget also:
Also read our json series to learn how to code these gadgets yourself!
Unique Features of Automated Recent Posts Slider
Today's recent posts widget has some unique features introduced first time online:
- Author Avatar - Unique!
- Displays recent posts inside Dynamic Slider or as a Dynamic Flat list. - Unique!
- Displays recent posts from a specific category/label.
- Slider with two animations: Slide & Fade
- Clickable Comments Count
- Custom Date Format in ribbon fashion - Unique!
- Clickable Animated Featured Thumbnails - Unique!
- Option to increase or decrease thumbnail Resolution - Unique!
- Support for Third-party Images and YouTube thumbnails - Unique!
- Title Length is adjustable
Add Automatic Recent Posts Slider Widget in Blogger
Follow these easy steps to add recent posts slider to your blogspot blog:
- Go To Blogger > Template
- Backup your template
- Click "Edit HTML"
- Just below
<head>tag paste the following JS and CSS source links:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>
Note: Do not add JQuery, FontAwesome or Oswald links in the code above to your template if you are already using them on your site.
- Next search
]]></b:skin>and just above it paste the following code:
<style>
/*######### Recent Posts Slider Stylesheet #############*/
.mbtslides-title{font-family:oswald; font-weight:normal;font-size:18px!important; border-bottom:2px solid rgb(144, 241, 40); color:#242729; width:300px;}.flexslider{ width:300px; margin:0px; border:0;}
.flexslider .slides {list-style-type:none; margin:0px auto 10px auto;padding:0px;} .flexslider li {color:#666; font-family:helvetica; font-size:12px; overflow:hidden; position:relative; padding-top: 10px; line-height: 1.6em;} .flexslider .flex-control-nav{list-style:none outside none;position:absolute;top:-45px;right:5px;text-align:right;height:10px}
.flexslider .flex-control-nav li{display:inline-block;margin:0 2px}
.flexslider .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}
.flexslider .flex-control-nav a.flex-active{background-color:rgb(132, 219, 6);border:1px solid rgb(144, 241, 40)} .flexslider .flex-div{margin:0px auto 20px auto; display:block; border-bottom:1px solid #eee; padding-bottom:20px!important; position:relative;} .flexslider li a { color:#0080ff; text-decoration:none; } .flexslider i{color:#999; padding-right:5px; } .flexslider .iline{line-height:2em; margin-top:3px;} .flexslider .icontent{line-height:1.5em; margin-top:5px;} .flexslider div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; } .flexslider .mbttitle {font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none;} .flexslider .mbttitle:hover, .flexslider .itotal a:hover {color:#333; text-decoration:none;}
.flexslider .iedit a{text-decoration:none; color:#999; cursor:pointer}
.flexslider .iedit:before, .flexslider .iauthor:before, .flexslider .itag:before, .flexslider .icomments:before, .flexslider .idate:before, .flexslider .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;} .flexslider .iauthorpic{width: 17px!important;height: 17px!important;border-radius: 50%; float: none; display: inline-block!important; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
.flexslider .iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;} .flexslider .iFeatured a {background: none; padding:0px; display: block;border:1px solid #eee;} .flexslider .iFeatured img{width:110px!important;height:65px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border-radius: 2px;} .flexslider .iFeatured:hover img{ opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)} .flexslider .icomments a{color:#0080ff; font-family: arial;font-size:12px;} .flexslider .icomments a:hover{text-decoration:underline} .flexslider .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;} .flexslider .idate {position: absolute;left: 0px;top: -7px; background: rgb(132, 219, 6);color: #fff;padding: 3px 4px;font-family: oswald;font-size: 11px;border: 1px solid rgb(144, 241, 40);} .flexslider .idate div{width:18px; line-height:1.6em; text-align:center;}
.flexslider .idate:after {content: ' ';position: absolute;z-index:-9999px;width: 0;height: 0;left: 25px;top: -1px;border-width: 4px 6px;border-style: solid;border-color: transparent transparent rgb(125, 208, 4) rgb(125, 208, 4);}
</style>
Make these changes
- To change the green color theme of the slider simply replace the green highlighted color codes with color of your choice. The color can be in rgb or #hexadecimal, both work. Use our Color Code Generator.
- Save your template.
- Now go to Blogger > Layout
- Select "Add a Gadget"
- Choose "HTML/JavaScript" gadget
- Keep the title field empty and then paste the following code inside it:
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
directionNav: false,
touch: true,
slideshowSpeed: 2500,
pauseOnHover: true,
animationSpeed: 700,
});
});
</script>
<h2 class="mbtslides-title">Recent Posts Slider</h2>
<div class="flexslider">
<ul class="slides">
<script type="text/javascript">
//################### Defaults
var ListBlogLink = "http://mybloggertricks.com";
var ListCount = 6;
var ListLabel = "SEO";
var TitleCount = 66;
var ImageSize = 150;
//################### Function Start
function mbtslider(json) {
for (var i = 0; i < ListCount; i++)
{
//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";
//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}
}
//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
YY = ListUpdate.substring(0, 4);
mm = ListUpdate.substring(5, 7);
DD = ListUpdate.substring(8, 10);
TT = ListUpdate.substring(11, 16);
MM = ListMonth[parseInt(mm - 1)];
//################### Thumbnail Check
// YouTube scan
if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAGUfSnOl8Z80gfkB3nf4E6leIH9b9OTX5_A6kGYdeyDWGdLwiDFiBviv0bDAWrrvjSJCz_-CkNJYcTYjw1u7RpJBfat_lFl0hPlE_kv7AADKMtFU4PPpY8DM21SEgNMaR2xUN21hR6D0/s200/Icon.png'";
}
//################### Printing List
var listing = "<div class='flex-div'><div class='iFeatured'><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a></div><a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span><span class='icomments'>"
+ListComments +
"</span> <span class='idate'><div>"
+ D +
"</div><div> "
+ M +
"</div></span></div></div>";
if (i == 0)
document.write('<li>');
if (i < ListCount/2)
document.write(listing);
if (i == ListCount/2)
document.write('</li><li>');
if (i >= ListCount/2)
document.write(listing);
if (i == ListCount)
document.write('</li>');
} }
<!-- #### Invoking the Callback Function #### -->
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtslider'></"+"script>");
</script>
</ul></div>
The following control options will help you modify the widget:
- animation: Select your animation type, "fade" or "slide"
- slideshowSpeed: You can set the speed of the slideshow cycling, in milliseconds
- animationSpeed: You can also set the speed of animations, in milliseconds
- pauseOnHover: Pause the slideshow when hovering over slider, then resume when no longer hovering
- You can edit the widget title by editing: Recent Posts Slider
- If you don't want to use the title then delete the yellow highlighted code.
- ListBlogLink : Insert your Blog link here
- ListCount : Decide how many posts do you wish to display. Choose even integer only like 2,4,6,8,10 etc.
- ListLabel : Insert your blog label/category here. Remember that labels are case sensitive. Therefore type it exactly as it is shown in your browser address bar. If your label is "blogging tips" and if you type it as "Blogging Tips" then it wont work. You must make sure that all letters are written in correct cases.
- TitleCount : Choose how many characters to display in post title.
- ImageSize : You can control the resolution or aspect ratio of thumbnails by editing ImageSize = 150; where the value 150 means that you want your images to be within 150 x 150 pixels in size. Keep this value close to the thumbnail size to ensure website load time is not effected a lot. Since our thumbnail images have a width of about 110px, therefore I have kept the resolution as 150, slightly higher to display images in slightly good quality.
- If you want to show recent posts published on your blog but don't wish to display posts from a specific label then simply remove /-/"+ListLabel+" from the code above.
- Click Save and you are all done!
Display Slider or Just a Flat List!
Fortunately I have setup the logic such that you can choose whether to display your posts inside animated FlexSlider or display them as simple flat list similar to my earlier recent posts widget. In other words you can choose to enable or disable the FlexSlider.
How to enable or disable the flex slider?
The logic is extremely simple. If you want to display and enable FlexSlider then insert even integer value next to ListCount , such as 2,4,6,8,10,12 etc. The JavaScript logic above will divide your inserted value into two sections and will display posts in each slide accordingly.
Output will be such:
For displaying a dynamic Flat list or in other words to disable FlexSlider insert odd integer value next to, such as 1,3,5,7,9,11 etc.
Output will be such:
Wasn't that easy? =)
Let me know if you have any questions or if you need any assistance. I hope this new widget will take your blogspot blog to the next level and help you spice up your blog with one more unique widget which was formerly found only on wordpress blogs. Why Should Wordpress folks have all the fun! =)
How to Choose an Ideal Platform to Build your Website
How Can You Improve Your Content Marketing to reach a wider audience?
Content is the lifeblood of business. It informs customers of what they need to know to make a purchase decision. It reassures them that their decision is a wise one.
For content to serve its beneficial purpose in your business, however, it has to reach your potential customers. So often it gets no farther than the website or blog or social media platform where we post it.
What does it need to reach a wider audience?
Read more �For content to serve its beneficial purpose in your business, however, it has to reach your potential customers. So often it gets no farther than the website or blog or social media platform where we post it.
Write with a purpose
Don�t just create content, create content to generate leads. It�s a difference in mindset. If your focus is just on completing something you can post on your website, blog or social sites, you can easily fall into merely stringing words together without regard to the value it will have to whoever reads it.How to Apply for Google AdSense - Approval Process 2016
One of the most common question that I get is how to apply for Google AdSense and how to get it approved. This particular blog post goes through the process of apply for Google AdSense and once we're done, you'd see how easy it is to apply.
The real effort lies in whether your application would get approved or not. One of the most common mistakes I see is that brothers and sisters haven't gone through AdSense's TOS (Terms of Service) and generally don't do their research about what they need to do before hand.
For this particular reason, I have linked below this very blog post for you all, so that you can first well equip your self, so that your Google AdSense's application gets approved on your first try. InshaAllah.
Read: Get Google AdSense Approval: 8 PROVEN Steps - Guaranteed!
Watch #AskHassam Episode.
Hope that helped you out. Also checkout the 15 Blunders That Violates Google AdSense TOS
15 Blunders That Violates Google AdSense TOS In 2016
All of you out there might agree to this fact that making something or creating something is really easy, or rather just a process in through which your mental innovation and creation comes into existence.
But after the creation, to maintain that very particular thing becomes a really tough job and sometimes a headache. But if you don't maintain it, it would definitely come to an end which i guess nobody would want to folks!
Now, there is only one thing that can be done in order to avoid such a situation, and that is either maintain that thing regularly, or try to remove every small sort of the cause and reason of destruction of that thing. The second option looks a bit feasible and easy.
If I focus on the Internet community and the area which involves the online earning, same situation is present here too. Now the first thing that comes to my mind every time i think about the online earning topic, is the Google AdSense.
One of the most popular source of earnings online for many bloggers and web masters.
But a large number of publishers get banned from Google due to very minute mistakes at their end. By this they then suffer a lot as their source of earning is almost gone.
Keeping these little yet very important mistakes in my mind, my today's post highlights some of them so that you guys out there can avoid them and continue earning great deals at google AdSense.
Once you're done reading the AdSense common mistakes, then you can go ahead and apply for Google AdSense. Hope these two AdSense episodes will help InshaAllah.
Google AdSense Application Process - 2016
Blunders to avoid!
So guys here are some of the blunders which should be implemented upon practically in order to save yourself from getting banned by the google AdSense.1) AdSense Code
Many of the Bloggers and webmasters often try to implement custom CSS to the AdSense ads, which is not allowed explicitly. The only design changes that can be implemented to the AdSense ads is via the AdSense Dashboard/Control panel.2) Confidential Information
Never disclose your confidential information like CTR, CPM and income derived via individual ad units or any other type of confidential information in any case or under any circumstances.However, you can disclose the total income you earn per ad as it may not cause any problem but greater than this would certainly be violation of rules and regulations that would ultimately cause you a loss.
3) Own Clicks - The Biggest Blunder
This is the most common blunder and should be avoided no matter what happens. You should never try to increase the number of clicks on your ads by unfair means such as asking your friends and family to do so in order to increase your income.Google is pretty much smart and fast on detecting these type of fraud clicks and you do get detected pretty easily at their end. So avoid this kind of activity as trying to increase your income through such means would ultimately result in you account getting closed.
4) AdSense Ad and Link Limit
Always take care of the limit that is given to you by them and try to stay within the designated limit as trying to exceed limit for the sake of your income increment would not only make your ads visible but would result in the closure for your account. SO, in any case always try to stay within the gives limit. The limit they give is units and 3 ad links or 2 AdSense search boxes on any web page.5) Text and Tools
Never try to add text or links that are powered by google search engines or ads that resemble the AdSense context and AdSense style as it can be greatly at you loss. Although google does allow you with some of the search engines like yahoo etc but still the main condition prevails of not being similar to the AdSense ad.6) Launching Page
It is very important that AdSense ads should open on the same page and there shouldn't be anymore pages opening at every click on the ad. If this is the case then surely you may be using a base target tag to open all links in a new window or frame by default. So, its better to correct it as they don't want opening of pages at every new click. This could too become a source of closure of your account.7) Headings
Only label your ads by the headings "sponsored links" or "advertisements" as any other headings or labels other then these are strictly unacceptable by google. There are people who have other labels and headings other then these. If you are one of them then correct it now and try not to become a target as become one can result in your account being closed.8) Ads By Email
Never try to send your AdSense ads through emails. Though sending ads through emails seems a much easier and an interesting option as HTML formatted emails look good and allow placement of these javascript ads.But this activity is against the Terms of Service rules. So never try to practise such an exercise and avoid it to every extent as they are watching you.
9) Placing Ads
Placement of ads is a really important and a sensitive issue as advertisers only pay for the content based ads. The rest is of little or no use. Although you may be able to manage some clicks from useless sort of pages such as thank you pages, pop ups etc. But these will eventually result in the dismal of you account. So better avoid such type of activity and provide some useful content based ads.10) Multiple Accounts
There is no need to create and manage multiple or more than one account to counter the fear that if they'll close one account then you can use others to continue and carry on. This is wrong approach folks, if they find this thing out they will definitely go for closing your other accounts too.No doubt they are the boss! Instead of approaching for this wrong approach you can keep track of clicks by using channels with real time statistics. They will automatically detect the new site and display relevant ads.
11) Ad Blending
In your AdSense account you are provided with a very large and an exclusive collection of borders and colours which can be used for stylizing purposes and they can surely serve the purpose really well.But in this styling process take care of one thing that is really important that components of the ad should never be covered as hiding relevant components of the ads is not allowed. Also do not block the visibility of ads by overlapping images, pop ups, tables etc. So take pretty good care of this thing.
12) Content Management
Do take extra care of the content of your ads as google does close accounts if your content isn't appropriate or suitable. Try not to add it on web pages with mp3, video, news groups, and image results. Also take care and exclude any pornographic, hate-related, violent, or illegal content. Acting on these will surely keep you safe.13) Supported Language
Always take extra care of the language you are using that whether is it supported by the AdSense. If it isnt' then application of the code should be avoided as it is of no use then.AdSense basically supports Chinese (simplified), Japanese, Danish, Korean, Dutch, Norwegian, English, Polish, Finnish, Portuguese, French, Russian, German, Spanish, Hungarian, Swedish, Italian and Turkish. Apart from these its search is also available in Czech, Slovak, and Traditional Chinese. So better use these languages to avoid any sort of problem.
14) Altering Results
While working you should take extra care of one thing that through your ads or work on them, site should not be altered in any case or through any type. Don't in any case frame, minimize, remove, redirect or otherwise inhibit the full and complete display of any advertiser page or search results page after the user clicks on any ad or search results as such an activity can make you cost a lot.15) Excessive Advertising
Always try to avoid over and extra advertising and keyword addition as a much specific and appropriate content which is well managed will attract more traffic then the one which is over crowded. So better avoid doing such activities as these can cost you double loss.So guys here were some of the blunders that should be avoided in any case in order to save yourself from getting banned by the google AdSense.
Just try not to get yourself in the spot light and get highlighted for such an activity, and with this try to abide by the rules and regulations at any cost. As by doing this you will definitely remain on the safe side. In the end, positive comments are appreciated.
You may also like to read
A Newbies Guide To Blog Marketing
As we all know that Blogs which are also known as Weblog.
A great way where you can publish your ideas on any topic that you want.
You can use blogs for writing, publishing and posting, anything that you want. If you are a newbie and want to create a new blog and also want promotion then there are some very significant things that you will want to know before start a new blog.
If you have a marketing mind than you will start Blog marketing because Blog Marketing is best and simple.
You can also find that majority of people use blogs as a dairy and lot of time these blogs that are used for marketing objective are not designed to create them money.
If you are new in this field and have no blog then easiest way is to start with just one blog and just start publication in it.
When you are writing your posts and some new thoughts in your mind then you have nothing to lose and nothing to gain.
One thing is most important for the newbies if you create a blog and you do not have to make your blog or post public even if you do not want to study what you have to say.
Read more �A great way where you can publish your ideas on any topic that you want.
You can use blogs for writing, publishing and posting, anything that you want. If you are a newbie and want to create a new blog and also want promotion then there are some very significant things that you will want to know before start a new blog.
If you have a marketing mind than you will start Blog marketing because Blog Marketing is best and simple.
If you are new in this field and have no blog then easiest way is to start with just one blog and just start publication in it.
When you are writing your posts and some new thoughts in your mind then you have nothing to lose and nothing to gain.
One thing is most important for the newbies if you create a blog and you do not have to make your blog or post public even if you do not want to study what you have to say.
How To Make Online Payments In Pakistan? 2016 UBL Wiz Debit Card
Making online payments in Pakistan was not the easiest of things in the near past when there was no easy mechanism to make online payments, specially for the students who couldn't mange to make any online payments expect to get debit/credit cards from their parents.
In the AskHassam episode below, I've gone through a very easy way how we can all get a UBL Wiz Debit card with such an a ease that we don't even have to fill out any forms or sign any papers.
The process is quite fast and the card can be used world wide.
I've gone through more details in the episode below InshaAllah.
Hope that helps you all InshaAllah. Do let me know if you guys need any help in the comments section below.
Also checkout: Get Google AdSense Approval: 8 PROVEN Steps - Guaranteed!
10 Best SEO Companies in New York
Living in lovers city New York (NY)? and want to boost your website's earnings on the value of SEO? then search engine marketing is what you need to do for this step.
You are a company online and want more customers, and to gain critical competitor insights? as you can dominate the market with site audits.
Simple and convenient search engine optimization is a main thing for doing all above things.
As a newbie you can't do it yourself. It's better to take a plan from SEO companies in NY.
Here I got a list of top 10 best SEO companies in New York.
You can trust on these companies. Let's read the list.
Read more �You are a company online and want more customers, and to gain critical competitor insights? as you can dominate the market with site audits.
Simple and convenient search engine optimization is a main thing for doing all above things.
Here I got a list of top 10 best SEO companies in New York.
You can trust on these companies. Let's read the list.
Google Two Factor Authentication Login with PHP
In our previous post, explains you the login system using PHP with PDO connection. Here is an extra feature that can be added to login system for an extra layer of security. It is 2 factor authentication using Google Authenticator App for Android/iPhone. Your account could be at risk of having your password stolen. 2 step verification can protect from misuse of your account if someone have your password, because logging into your account always require a security code(this verification code is uniquely designed for your account, if you opt for verification code, an unique code is sent to your mobile for every 30-60 seconds) in the second step after you enter your password.
Read more »
Recent Posts Gadget With Avatar, Animated Thumbnails & Labels
If you wish to add animation to this widget please read:
We have covered a comprehensive series on how to use Blogger JSON feed to extract data from your blog feeds and parse the JSON data in JavaScript. If you really wish to code these gadgets yourself, you must read this series where we have covered all A-Z steps of blogger gadget development.
We have already shared an advanced recent posts label widget with featured thumbnails earlier. We will use the same logic to code something more useful and productive. Since most of you requested that the comment and labels links should be clickable. Fortunately all your requests have been fulfilled in this new label gadget.
Today's recent posts widget has some unique features introduced first time online :
- Author Avatar - Unique!
- Clickable Labels - Unique!
- Displays recent posts
- Displays recent posts from a specific category/label.
- Clickable Comments Count
- Custom Date Format - Unique!
- Clickable Animated Featured Thumbnails - Unique!
- Option to increase or decrease thumbnail Resolution - Unique!
- Support for Third-party Images and YouTube thumbnails - Unique!
- Title Length is adjustable
- Summary Snippet Length is adjustable
- Total Posts Count for selected label is displayed at bottom - Unique!
- Customizable into different layouts using CSS thanks to different nodal IDs. - Unique!
Why Use Recent Posts Gadget?
By using Recent Posts Gadgets you can showcase latest posts from different labels to give extra exposure to your blog posts. It also helps you to increase pageviews and ultimately improve blog revenue. You can display posts from a specific label or you can simply display recent posts that just got published recently on your blog. You can display this gadget either on your homepage or your sidebar.
Search engine visitors who land on your blog would love to see what are the latest posts published on your blog through this gadget on your sidebar instead of going to the homepage. Thus bringing you more pageviews.
We have used AJAX to display several recent posts gadgets on homepage of COPmo template.
Install Recent Posts Gadget By Label on your Blog
Follow these easy steps to install it on your blogspot blog:
- Go To Blogger > Template
- Backup your template'
- Click "Edit HTML"
- Search </head> and Paste the following CSS code just above </head>:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><style>
/*------Recent Posts Gadget By STCnetwork.org--------*/
.mbtlist {list-style-type:none;overflow:hidden; margin: 10px 0px!important; width:300px; padding:0px!important;}
.mbtlist li {margin:0px auto 10px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative}
.mbtlist li a { color:#666; text-decoration:none; }
.mbtlist i{color:#999; padding-right:5px; }
.mbtlist .iline{line-height:2em; margin-top:3px;}
.mbtlist .icontent{line-height:1.5em; margin-top:5px;}
.mbtlist div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; }
.mbtlist .mbttitle {font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover, .mbtlist .itotal a:hover {color:#333; text-decoration:none;}
.mbtlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
.mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}
.mbtlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;
float: none; display: inline-block; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
.mbtlist .itag{ color: #fff;position: absolute;left: 7px;top: 8px;display: inline-block;font-size: 11px;width: 130px; height:22px; overflow: hidden;}
.mbtlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height: 2em;font-family: arial;
font-size: 11px;border:1px solid #333;}
.mbtlist .itag a:hover{background:#222; color:#eee; text-decoration:none;}
.iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;}
.iFeatured a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifiu_PsNWHatQNu9R4ZSEL_9uWgsToBb-sf4WAWjcwTZLNHQk5ZcJW25f5hZO1gUVPaHNEop5dCTdR3jLJtSdPRagVX5ArqqiB22HoCEh-W0mAvDtqBU2FUUQ_QTWLifp5B7bmW3ZK93w/s100/mbt-bg1.png) 0 0;padding: 7px 7px 8px 7px;display: block;}
.iFeatured img{width:135px;height:80px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border-radius: 2px;}
.iFeatured:hover img{ opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.mbtlist .icomments a{color:#0080ff; font-family: arial;font-size:12px;}
.mbtlist .icomments a:hover{text-decoration:underline}
.mbtlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;}
.mbtlist .idate:before {content:'\f073';padding-right:3px}
.mbtlist .iedit:before {content:'\f040';}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}
.mbtlist .itotal {color:#333; padding:5px 0px; }
.mbtlist .itotal a {font-family:oswald, arial; font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none}
.mbtlist .itotal span:before {content:'\f07c';}
.mbtlist .itotal span font {padding:0px 3px; color:#333; font-family:georgia; font-size:15px; font-weight:bold}
</style>Make these customizations:
- To change link color edit #0080ff
- To change comment icon color edit #84DB06
- Next Go To Blogger > Layout
- Choose HTML/JavaScript Widget
- Paste the following code inside it:
<script type="text/javascript">
//#################### Default Settings
var ListBlogLink = "http://mybloggertricks.com";
var ListCount = 3;
var ListLabel = "SEO";
var ChrCount = 45;
var TitleCount = 66;
var ImageSize = 200;
var showcomments = "on";
var showdate = "off";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "off";
var showTotal = "on";//################ Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)
{//################### Variables Declared
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT = "";//################### Category
if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}}//################### URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");AuthorPic = json.feed.entry[i].author[0].gd$image.src;
//################### Content CheckListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);//################### Date Format
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
Y = ListDate.substring(0, 4);
m = ListDate.substring(5, 7);
D = ListDate.substring(8, 10);
M = ListMonth[parseInt(m - 1)];ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
YY = ListUpdate.substring(0, 4);
mm = ListUpdate.substring(5, 7);
DD = ListUpdate.substring(8, 10);
TT = ListUpdate.substring(11, 16);
MM = ListMonth[parseInt(mm - 1)];//################### Thumbnail Check
// YouTube scanif (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
if (youtube_id.length == 11) {
var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
}
}else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage = json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAGUfSnOl8Z80gfkB3nf4E6leIH9b9OTX5_A6kGYdeyDWGdLwiDFiBviv0bDAWrrvjSJCz_-CkNJYcTYjw1u7RpJBfat_lFl0hPlE_kv7AADKMtFU4PPpY8DM21SEgNMaR2xUN21hR6D0/s200/Icon.png'";
}
//################### Printing Listdocument.write( "<li class='node"+[i]+"' >");
if (showthumbnail == 'on'){
document.write("<div class='iFeatured'><a href="
+ ListUrl+
"><img src="
+ListImage+
"/></a></div>");
}
if (showlabel == 'on'){
document.write("<span class='itag'>"
+ListTag +
"</span>");
}
document.write("<a class='mbttitle' href="
+ ListUrl+
">"
+ ListTitle+
"</a><div class='iline'>");if (showauthor == 'on'){
document.write("<span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span>");
}
if (showcomments == 'on'){
document.write("<span class='icomments'>"
+ListComments +
"</span> ");
}if (showdate == 'on'){
document.write("<span class='idate'>"
+ M +
" "
+ D +
"</span>");
}if (showcontent == 'on'){
document.write("<div class='icontent'>"
+ListContent +
"...</div> ");
}
document.write("</div></li>");}if (showTotal == 'on'){
document.write("<div class='itotal'><span> <a href='"+ListBlogLink+"/search/label/"+ListLabel+"'>View all <font>"+TotalPosts+"</font> posts in ? " +ListLabel+" </a></span></div>");
}
document.write("</ul>");
}document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
</script>
You can easily choose to show or hide an option using on/off Boolean values. Simple make these settings:
- Replace http://mybloggertricks.com with your Blog URL.
- Mention number of posts to display in ListCount = 3;
- Replace SEO inside ListLabel = "SEO"; with your label/category for which you wish to display recent posts. Remember that labels are case sensitive. Therefore type it exactly as it is shown in your browser address bar. If your label is "blogging tips" and if you type it as "Blogging Tips" then it wont work. You must make sure that all letters are written in correct cases.
- Edit ChrCount = 45; to choose how many characters you wish to display in post description snippet/summary.
- Edit TitleCount = 66; to choose post title length.
- You can control the resolution or aspect ratio of thumbnails by editing ImageSize = 150; where the value 150 means that you want your images to be within 150 x 150 pixels in size. Make sure to keep this value close to the image size to ensure website load time is not effected a lot. Since our thumbnail images have a width of about 135px, therefore I have kept the resolution as 150, slightly higher to display images in slightly good resolution.
- To show an element simply choose on and to hide it choose off. You apply these switch on/off values to these 7 variables: showcomments, showdate, showauthor, showthumbnail, showlabel, showcontent, showTotal
- If you want to show recent posts published on your blog and don't wish to display posts from a specific label then simply remove /-/"+ListLabel+" from the code above. Switch off showTotal and also replace ListLabel = "SEO"; with this ListLabel = "";
8. Click Save and you are all done!
Full Third Party Thumbnail Support
Our Recent Posts widget has the most robust coding algorithm which makes sure to use any available image from your post whether the image is hosted on your blogger Google album, Picasa or hosted somewhere else. It also has the built-in function to extract thumbnails from your YouTube video iframe. It will automatically display the YouTube thumbnail for a post where you may have embedded a YouTube video. In case the post contains no image at all, it will display a default image of MBT as shown below:
The image below shows recent posts for this blog.
Different Ways to Customize Recent Posts Gadget
By simply changing on/off values you can change the entire layout of the gadget. Let me show you some examples:
1 Switching off showcontent and showdate will produce this look:
2 Switching off showcontent, showlabel and showcomments will produce this look:
3 Switching off showcontent, showthumbnail, showcomments and showlabel will produce this look:
4 Switching off showthumbnail, showTotal and showlabel will produce this look:
5 Switching everything on and increasing the width of the class .mbtlist to 350px, will produce this layout:
6 Each "li" tag has its own class (such as .node0, .node1, .node2, etc.) that you can use to customize the look and appearance of each list. By changing these styles you can display recent posts in several interesting layouts such as:
Vertical List of Recent Posts With Large Thumbnail at Top:
Horizontal List of Recent Posts With Large Side Thumbnail:
This is the exact same technique that I used to design COPmo template.
What is Next?
Using the same logic as discussed several times in our JSON series and using the code above, we will create a list of random posts, related posts, sliders, carousels and news tickers. Stay tuned for lots of interesting tutorials. Know that we do not aim at only sharing fancy widgets, our true aim is educating our readers with the best knowledge so that each one of you could code his own gadgets and be the next big web developer.
In our last posts on recent posts widget, we asked how can you modify the code to display posts via a specific label. To which Ehsan Qureshi gave the correct answer and as a result of which I give my token of thanks to him for particpating in the contest and winning a backlink for his blog "Tips Tricks Island". Do visit his blog and give him your feedback. =)
Anyone who can suggest how to modify the above script to display random posts on each page load, will win the next PR5 free link. Your widget must fetch random posts from a blog JSON feed and then display that list. User must see different random posts list each time the page is refreshed. Share this post with your friends who are JSON or JavaScript enthusiast.
Do share your feedbacks and queries in the comments box below. Let me know if you need any help or assistance. Would love to help! =)
Why to Choose a Reseller Web Hosting Service
Top 5 Richest Bloggers In The World - 2017
Blogging nowadays is a first to choose option for making money online.
Some bloggers are doing it very well and some are just rocket it. After launch of some great blogging platforms, blogging is become a well-known and easy way for spreading our voice to the world. and making a living from.
There are many bloggers who become billionaires from their blogs.
From 1998 (Open Diary) to now (Blogger and WordPress) blogging can be achievable and easy way of content management. You can become a celebrity doing blogging. There are many bloggers on the globe who have a great fan base like other musicians and film-stars.
Can't believe? read below and I am damn sure you will get my saying true.
Read more �Some bloggers are doing it very well and some are just rocket it. After launch of some great blogging platforms, blogging is become a well-known and easy way for spreading our voice to the world. and making a living from.
There are many bloggers who become billionaires from their blogs.
Can't believe? read below and I am damn sure you will get my saying true.
Create an Error Free Application and Build an Amazing Customer Experience with Raygun
Are you building new web or mobile software? What are your goals while implementing your application? There could be many answers, like efficiency, more effective user experience, proper security and authentication, good marketing features and so on. In simple terms, the work we do should ultimately satisfy the end user. So, for any successful application, an end user’s happiness should be the first goal. A customer should never get frustrated with your application, it only costs you time, money and a whole bunch of lost customers.
Read more »
Hide or Remove Blogger Attribution Gadget - 2 Methods
If you are new to Attribution Gadget, then it is the widget that blogger adds to your layout by default when you setup your blog. You can display your copyrights or credit links here. Unlike other widgets this gadget is locked by default and it has no "Remove" button that could help you remove the gadget from your layout.
1. Hide "Powered by Blogger" Attribution Gadget
Follow these steps to hide the attribution widget using CSS "display:none" property.
- Go To Blogger > Template
- Backup your Template
- Click Edit HTML
- Search for this code
]]></b:skin> - Paste the following code above
]]></b:skin>#Attribution1{height:0;visibility:hidden;display:none}
- Save your template and you are done!
You have successfully hide the blogspot attribution credit link from your blog footer. The browser will not display or show the attribution or credit links attached to your layout but the gadget DOM will still load in background.
2. Remove 'Powered by Blogger' Attribution From Template
To permanently remove or delete the attribution gadget from your template so that it may neither load nor display on your blogspot blog, then follow the steps below:
- Go To Blogger > Template
- Backup your Template
- Click Edit HTML
- From the "Jump to widget" section click on "Attribution1"
- Delete the entire widget code that looks similar to the one shown in the image below, starting from
<b:widget>and ending at</b:widget>:If you expand the code, it looks similar to this one:
<b:widget id='Attribution1' locked='true' title='' type='Attribution' visible='true'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if><div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != ""'>
<data:attribution/>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget> - Delete and save your template. You are all done!
You have now successfully delete the blogger attribution gadget. It won't display on your blog now and neither will it eat up your page load time by rendering in background.
Need Help?
This post was requested by many of you, though there are many alternatives already online but this second method is the easiest and most effective of all. Let me know if you need any further help. Post your questions below. Your feedback means a lot. Good day! =)
How to Easily Add a Featured Image Slider in Blogger
Rethink Database for Creating a Realtime Web Application with Node JS
Earlier in realtime, any request for data from the server makes the app slow, unscalable and cumbersome to maintain. RethinkDB mainly focus on this drawback and makes building realtime apps easier. RethinkDB is the first open-source, scalable JSON database built for realtime web. The developer can tell RethinkDB to continuously push updated query results to application in realtime; this reduces the server load and also the time and effort necessary to build scalable realtime apps. Here there is complete steps for installing RethinkDB. This post also explains you to create a reat-time web application using RethinkDB and Node.js
Read more »
Make $2000 a Month With STCnetwork's Affiliate Program
As promised we have shared our affiliate program details with everyone. STCnetwork has been developing quality products for over 7 years. STCnetwork is Pakistan's first registered company of Professional Bloggers and SEO consultants which pays regular Income Tax and has a permanent local office. We offer Web Services and Web Solutions to clients around the globe. We are group of tech-savvy computer engineers and programmers who wish to contribute to web through the knowledge that we have acquired over this long period of learning.
So far all our services and products were offered for a selective group of sole proprietors but from 2016 we have decided to disclose some of our premium products for everyone online at an affordable cost. We strongly believe that no business can sustain on its own without a helping hand. We surely believe in affiliate marketing and the immense sale support provided by affiliates who spend as much efforts in publicizing products as we spend in developing these digital commodities.
It's now time to invite you all to become our business partners by promoting our products and services to your friends, colleagues and targeted audience. All Information regarding the program has been explained in the affiliate page where you can join the system for free and start making a lucrative income online without spending a penny.
Products and Services that we have in queue include:
- Android Mobile App Development
- WordPress SEO + SMO
- Blogger SEO + SMO
- Blogger Templates
- Web hosting and DNS Setup
- Plugins and Widgets
- Graphics + Vectors + Logo Design
- Eccomerce Setup
Without wasting any further time, lets head straight to the Affiliate page for full details:
Our program can be joined by anyone whether or not owning a bank account or PayPal account. The system is based on a 20% revenue share on each sale and has the power to make you up to $2000 within a month.
Subscribe to:
Posts (Atom)