Helplogger

11 Mart 2015 Çarşamba

Building a List/Grid View Switcher in Blogger with Auto Read More

A list of posts in grid or list view provides a more defined canvas with which a blogger or website owner can use as a guide in creating content. This concept has extended to visitors, where they can have control on whether or not they wish to view posts in list or grid view. While custom modification codes are shared by some blogging sites, others are not. Some that are shared, however, can be complex even to bloggers themselves, such as JQuery.

The good news is there are lightweight codes available, including the Auto Read More in Blogger. Through it, a blogger can add two buttons that will enable visitors to switch between grid view and list view, depending on what they prefer. These buttons, however, are only visible on limited pages - homepage, label page and archive page. Nonetheless, it is better than not having this particular feature at all.

Unlike JQuery, the Auto Read More uses HTML, CSS and JavaScript. To view posts in a list view, two sets of CSS codes are added as one. Another set is added to view posts in grid view. Other combination of codes is used to enable easy switch between views, particularly at a click of a button.

Live Demo

How to Add a List/Grid View Switcher in Blogger

Step 1. Log into your Blogger dashboard and select your blog, then go to "Template" > press the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type this tag below inside the box and hit Enter to find it:

</head>

Step 3. Just above the </head> tag, copy and paste the following CSS style and scripts:

Step 4. Next, search for the following line:

<b:section class='main' id='main' showaddelement='no'>

...in case you can't find it, search for this one instead:

<b:section class='main' id='main' showaddelement='yes'>

Step 5. Just above this line, add the following code:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUkUwuFDTZS_U8Oos7OeJMxHyNSzVaAzg3a1RZ3iHcoLthYQqOxKsr1R9x-3QxoNoL5GOWMV-0NdZbjSVHHzGLYZYVM4LecKAqmESx3evQA1-gy7IdjdYEdhvlt3-62C0fJvO96Ha63sHf/s1600/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Grid View</a> <a class='list-view-button' onclick='list_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0tw-dNBWIAoX_zIfqcTlSNUCG2P1zyMYJoFpvr7mC3xlHTvV5h0LxaIyxRSJhbHmpY-B3sIvR5vpO7CKpZ9SS9wbxDEReZCYpo8Qwrn1jptGE5Svn2ysqFIoAWjueBtsazyyozyDnc8dQ/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div>
</b:if></b:if>

Step 6. Now, search the code below:

<data:post.body/>

Step 7. You will find 3 occurrences of this code, replace only the second and third one with this one below:

<b:if cond='data:blog.pageType != "static_page"'>
    <b:if cond='data:blog.pageType != "item"'>
        <div expr:id='"summary" + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>
        <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
    <data:post.body/>
</b:if>

Important: if you already added the auto read more script, remove the previous one in order to make this work.

Step 8. Finally, click "Preview" to see if everything looks good and press the 'Save Template' button to save the changes...

That's it!

Adding a dynamic view switcher on a blog will make viewing content a lot easier for visitors. Whether using a list or grid view, a more compressed list of posts will eliminate the need to click on the next page, which could take time if loading takes a while to complete. For a blog archive, using the Auto Read More codes in Blogger will surely make everyone's viewing experience very convenient.

Considering the ease with which the codes can be customized, building a list/grid view switcher would be completed in no time. A real bonus is that Auto Read More works on all platforms, with cross-browser support as well.

5 Mart 2015 Perşembe

Add Masonry, Grid Layouts to Blogger Posts with CSS and Javascript

How a website's content is displayed can spell the difference between being popular and obscure. Anything that looks chaotic or hardly readable is never going to be anyone's favorite. This is why content must be displayed in an organized, easy to follow and straightforward manner. Nothing works better than a structured grid, in this case.

Posts listed in grid view provide an excellent viewing experience for both the blogger or website owner and the visitors. This is especially true if the grid comes with images that would play with a person's visual inclination. What is great about grids is the seamless and smooth layout, complemented with a structured yet simple architecture. This makes it easier to navigate through a blog archive or product page. The style also enables a website owner to present posts in a more artistic and informative manner, without delving into the details. Suffice to say that a grid view demands creativity to be effortlessly mixed with functionality.

How views can be switched depends on a number of changes in a blog's codes. Some are fairly easy to implement, while others can be a little complex. Not to worry, as there are guides that will be provided. Grid styles also come in huge varieties, with each one designed to cater to a specific audience. Now, are you ready to go on the grid?

Features

What features can you expect from a grid style post in Blogger?

All the posts will follow the grid style when switching to grid view.
While the codes are being customized, the posts are left untouched. Their length, however, could be changed accordingly.
Auto Read More will be applied on all posts.
Thumbnails are automatically added based on the first picture found in each post.
Code is secure and is used across the board. In fact, 99% of bloggers are using a similar code to enable grid style posts in blogger.

What are the benefits of grid style?

Quick loading time of posts. Since only the snippets are loaded in certain pages, or a thumbnail and a caption, pulling up a blog archive would be quicker. When loading time is decreased, user experience is greatly enhanced.
Professional-looking blog. Without the chaos and concerns on readability, a website can look really clean and professional. Combined with the right colors and images, it can also leave a visual impact.
Improved website ranking. Because visitors have to click in order to view the rest of the post, page views of a site will significantly increase. This makes for a better SEO strategy.

Although changes to the CSS codes have to be made to implement the grid style view and make it compatible with a blog's template, all the work will be worth it once it is up and running.

Important:
Before anything make sure that you backup your Blogger template! If have encounter any problems with your edits, you can revert the template back to its previous condition by restoring it from your backup. For this, go to 'Template' in the left menu > click on the 'Backup/Restore' button in the upper right corner and press the 'Download Full Template' button - choose where you want to save the file on your computer and click the 'Save' button.

Now we can safely proceed with editing our Blogger template. If you run into problems, just revert back to your saved template.

How to Create Masonry, Grid Style Posts in Blogger

Step 1. Log into your Blogger dashboard and click on the blog where you want to apply the grid style.
Step 2. Go to "Template" located on the left side of the screen and press the "Edit HTML" button.
Step 3. Click anywhere inside the code area and press the CTRL+F keys to open the search box, then type the following tag inside the box (hit Enter to find it):

</head>

Step 4. Now copy the script below and paste it just before the </head> tag:

<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}

else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC1svpfgjMGwNjaFP6hNSPzHCTHrYSpR6oPzrdGUyed_p3g2A36Q_2O0djQScpVWsTgt560e8dY5-Ro9s40VwrRem0AKZN2X1ndtreRXJwdiWnUnLsGIABbDqGLG7IZRFMN72vCrRlF4b5/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>
</script>

Step 5. Find the following code snippet using CTRL+F or Command + F:

<data:post.body/>

Step 6. After pressing the "Enter" key on your keyboard, you may find three occurrences of the above code, replace only the second and the third one with this code below:

<b:if cond='data:blog.pageType != "static_page"'>
    <b:if cond='data:blog.pageType != "item"'>
        <div expr:id='"summary" + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>
        <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
    <data:post.body/>
</b:if>

Step 7. Now choose one of the styles below, copy the code provided and paste it just above the </head> tag:

Simple Grid Design

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style>
#blog-pager {
clear:both;
}
.post {
height: auto;
width:30.8%;
overflow: hidden;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding: 0px !important;
}

h3.post-title a {
font-size:75%;
font-family: 'Open Sans Condensed', sans-serif;
text-transform:uppercase;
padding:0;
color:#444;
}
h3.post-title {
height: 26px;
text-align:center;
width:100%;
margin:0!important;
padding-bottom: 4%;
}
.date-header {
display: none;
}

.post-body a {
text-decoration: none;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
color:#777;
font-size:100%!important;
font-family: 'Open Sans Condensed', sans-serif;
text-align:center;
clear:both;
overflow:hidden;
margin:5px 0 0;
padding:7% 10%;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
font-weight: bold;
right:10px;
position:absolute;
top:165px;
text-shadow:1px 2px 1px #333;
font-family: 'Open Sans Condensed', sans-serif;
}
a.comment-bubble:before {
content: "Comments: ";
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

Grid Layout with Post Summary and Thumbnail

Demo

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style>
#blog-pager {
clear:both;
}
.post {
height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0!important;
}
h3.post-title a {
font-size:75%;
font-family: 'Open Sans Condensed', sans-serif;
text-transform:uppercase;
color:#111;
padding:0;
}
h3.post-title {
text-align:center;
height:22px;
position:absolute;
bottom:23%;
width:100%;
z-index:101;
overflow:hidden;
margin:0!important;
padding:10px 0;
}
.date-header {
visibility:hidden;
height:0!important;
width:0!important;
margin:0!important;
padding:0!important;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
border-bottom:3px solid #00C8BD;
border-top:3px solid #558ABB;
}
.posts-thumb:hover {
border-top:3px solid #FF664E;
border-bottom:3px solid #FEBE36;
}
.post-body {
border-radius:2px;
box-shadow:0 0 6px 1px rgba(0,0,0,0.1);
position:relative;
height:auto;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
color:#555;
background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiqGB-cUC8xQbUhyphenhyphenSYiZ5546qah0yA2WVQD7RCRQIlxSIp4fQvANAWopGLKoUnMibbmIagkhPiTWIxWNDEaglQOmuTyvyqR9EdDPe7vUddWqpEcj7qdif_KDo5NERJMNeYGKdBvzlNuQXu/s1600/blueprint.png);
font-size:100%!important;
font-family: 'Open Sans Condensed', sans-serif;
text-align:center;
clear:both;
overflow:hidden;
margin:5px 0 0;
padding:17% 10% 6%;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:110%;
right:10px;
position:absolute;
top:165px;
text-shadow:1px 2px 1px #333;
font-family: 'Pacifico', cursive;
}
a.comment-bubble:before {
content: "Comments: " url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcO4ohwM92eDzBBJKd0xa9DVOSfwbDTjcTQazMykxth8saYbQaJF4CO3qyUfbpe9NhXh4smPnpjmQCT_JOReRtYSK06dQO2stFzu4AcCIC-baC0y9sG41ee_QJhwyxW1qANKjQaqjULwHs/s1600/heart-active.png);
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

Grid Layout with Text Snippet on Hover

Demo

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style>
#blog-pager {
clear:both;
}
.post {
height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0!important;
}
h3.post-title a {
font-size:95%;
font-family: 'Open Sans Condensed', sans-serif;
text-transform:uppercase;
color:#fff;
padding:0;
text-shadow: 2px 2px 3px #222;
}
h3.post-title {
height: 22px;
text-align:center;
position:absolute;
top:1%;
width:100%;
z-index:101;
overflow:hidden;
margin:0!important;
padding:10px 0;
}
.date-header {
visibility:hidden;
height:0!important;
width:0!important;
margin:0!important;
padding:0!important;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body {
border-radius:2px;
box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);
position:relative;
overflow: hidden;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: 'Open Sans Condensed', sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
width: 100%;
text-align: center;
position:absolute;
top:165px;
left: 0px;
text-shadow:1px 2px 1px #333;
font-family: 'Pacifico', cursive;
z-index: 122;
}
a.comment-bubble:before {
content: "Comments: ";
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

Masonry Layout (Pinterest Like Grid)

DEMO

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style>
#blog-pager {
clear: both;
position: absolute;
bottom: 0px;
left: 0px;
}
.blog-feeds {
display: none;
}
.post {
height: auto;
width: 100%;
padding: 0px !important;
margin: 0px 0px 30px;
display: inline-block;
text-decoration: none;
}
h3.post-title a{
font-size: 95%;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
padding: 0px;
color: #fff;
text-shadow: 3px 2px 2px #222;
font-weight: bold;
}
h3.post-title, .comments h4 {
margin: 0px !important;
text-align: center;
padding: 10px 0px;
position: absolute;
top: 10px;
width: 100%;
z-index: 200;
}
.post-header {
display: none;
}
.date-header {
visibility: hidden;
height: 0px !important;
width: 0px !important;
padding: 0px !important;
margin: 0px !important;
}
.posts-thumb {
width: 100%;
height: auto;
overflow: hidden;
clear: both;
}
.post-body {
overflow: hidden;
position:relative;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: none;
min-width: 100%;
min-height: auto;
margin: 0px;
padding: 0;
border: none;
outline: none;
position: relative;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: 'Open Sans Condensed', sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
.post-footer {
display: none;
}
a.comment-bubble {
color: #fff;
text-decoration: none;
font-size: 120%;
right: 5px;
z-index: 222;
position: absolute;
top: 5px;
text-shadow: 1px 2px 1px #333;
font-family: 'Open Sans Condensed', sans-serif;
}
a.comment-bubble:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcO4ohwM92eDzBBJKd0xa9DVOSfwbDTjcTQazMykxth8saYbQaJF4CO3qyUfbpe9NhXh4smPnpjmQCT_JOReRtYSK06dQO2stFzu4AcCIC-baC0y9sG41ee_QJhwyxW1qANKjQaqjULwHs/s1600/heart-active.png);
}
.main-inner .column-center-inner {
-moz-column-count: 3;
-moz-column-gap: 1px;
-webkit-column-count: 3;
-webkit-column-gap: 1px;
column-count: 3;
column-gap: 1px;
width: 100%;
padding: 0px !important;
}
</style></b:if></b:if>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

Please note that the masonry layout might not work if you have a customized template, also older posts will appear vertically (from top to bottom) instead of left to right.

Step 8. Click "Preview" and if everything looks fine, press the "Save Template" button.

That's it!

Implementing a grid style view has its pros and cons, but the benefits clearly outweigh the disadvantages. The fact that a website will look visually appealing and professional when set in grid style, is already enough to boost its online reputation. An increase in page views is just the beginning. With the right images and content, a blog will also have better SEO. Most importantly, implementing the changes is not as complex as some might think. With a step-by-step guide available, adding a dynamic view switcher would be completed in no time.

17 Şubat 2015 Salı

4 Ways to Detect Invalid Activity in Google AdSense

Monitoring your website's performance shouldn't be a chore but a necessity. After all, how else will you know how to serve your audience better - and acquire new ones - if you don't know how they get to you, what they do on your site and who they are? Google Analytics is a tool that does all that, but despite its sophistication, your account can be suspended for invalid activity.

This is the one thing that you have to avoid because the process of reinstating your account may take a while. That said, how can you detect invalid activity?

Before answering the question, here are some terms that you need to familiarize yourself with as they will appear throughout the rest of this post:

DEFINITIONS

Clicks - number of times a user has clicked on your advertisements
CPC - cost per click; what you get whenever a user clicks on your ads
Pageviews - refers to the action the user takes of viewing a page with an ad displayed
CTR - click through rate; calculated as (clicks / pageviews) x 100 and is given in percentage
Estimated Earnings - calculated as (clicks x CPC); the value goes up or gown while the earnings are still in verification process

WAYS TO DETECT INVALID ACTIVITY

1. You have a CTR above 20%. The normal range for CTR is 1% to 11%, but anything above these tells Google that there is something iffy and that may not bode well for you. So, if you notice this, make necessary changes so that you maintain a healthy CTR.

2. You have a lot of clicks but no CPC. As in, your assigned CPC is 0.00. For example, if you get about 50 clicks and don't have a CPC set, that tells Google that something funky is going on and they will not hesitate to take action. Keep in mind that they do take matters like this seriously, and which is why they employ both human and machine checking to analyze clicks and impressions.

3. You're estimated earnings rise then fall suddenly. For example, you get estimated earnings of $1.00 but the next minute this drops to $0.0. Whether it drops to zero or half the original estimated earnings amount after you refreshed the page, you know that something is up.

4. You have many clicks from one country but less pageviews. Google operates on the belief that if a user clicked on an ad, they are interested in what it has to say. So, if the pageviews are really low, that sends a wrong signal to Google and causes them to think that something fishy is happening.

So, make sure to check your AdSense performance regularly so you can spot discrepancies and address them as soon as possible before Google decides to suspend your account.

20 Aralık 2014 Cumartesi

How to Build High Quality Backlinks

One of the secrets to creating more web traffic with your posts is to build in some backlinks. To build high quality backlinks is one of the most popular methods to boost your content over the competition. However, finding the right methods to build the backlinks is going to take a little effort.

Everything starts with understanding what a backlink is and what it will do for your content. From there, you can then extend your efforts to build even more backlinks using creative and effective means that maximizes the potential of your content.

What is a Backlink?

A backlink is an incoming hyperlink that connects the web page or content to another website. Backlinks are very important when it comes to page ranking as Google rates them highly. However, the backlinks themselves must be of good quality in order to generate the rankings needed to boost your content ahead of the competition.

Quality of the backlinks is important because having 10 good ones will beat 200 bad ones in terms of Google rankings. So, you must strive for quality each and every time. However, it will take time to build up backlinks to your articles because people will have to see it and then decide to link to it in order to add more value to their site.

If you look at adding good backlinks as a long term strategy, you will eventually reap the rewards that they offer. What follows are some interesting ways to start building good quality backlinks so that you can start your success today a little bit at a time.

Create Long, Interesting Posts

One of the easiest ways to start creating good backlinks is by writing a good, long tutorial post that uses images, charts and other graphics to really make it interesting. It will need to be from 1000 to 1200 words long and not have any filler, so the information really needs to be good and tight to make it interesting.

How-To guides often make the best long posts, especially if you can really hit the details so that people will fully understand how to do what you are explaining to them.

Participate in Forums

A person who is active in the forums when it comes to the subject that you are writing is building a network of potential fans who might offer high quality backlinks to their work. This is a delicate matter as you don't want to come across as someone only interested in what they can do for you. This will mean offering quality backlinks to those who participate in the forum as well if you find their articles useful and informative.

Write e-Books

An e-Book is one of the best ways to help spread the word about your talents and you can ask your friends to share it with the world through social media as well. You can also send your links to the best in social bookmarking sites as well to help augment your efforts.

With e-Books, you don't have to write very many, but it does help if you create ones that are very useful, highly readable and can be shared so that you can build high quality backlinks.

Create Special Days

One of the more interesting ways to build high quality backlinks is creating special days like St. Patrick's Day, Halloween or Valentine's Day to offer discounts on your products or services. You can actually build up to the day as well with special writing and content features to help pull in more traffic.

Remember, you'll need to do some research on your audience to see what type of holidays and content works best for their interest, but Valentine's Day is one that everyone shares, so that is an easy one to write good content, or run a contest that is bound to get good, high quality backlinks.

Have Free Products

Everyone likes free products and this can help you boost the number of visitors to your website. You can have a free e-Book or even a promotional gift if you want. While it may take some investment, the result will be getting more web traffic which in turn creates more demand for your products or services.

Videos

YouTube may very well be the biggest marketing tool of the moment with no signs of slowing down. If you can create a funny, interesting video then you will start getting some great backlinks. Today, the technology to create a solid, professional-looking video is dirt cheap compared to just a decade ago.

You can create "how-to" videos or find something interesting to make a video about as long as it relates to the industry in which your business is in. The key is to do something fun and enjoyable for your audience so that they will start sharing it with their friends.

Interact with Other Blogs

When you read a blog or see a video you like that is within your industry, don't just say "good job" and leave it at that. Write a good, interesting comment or review so that you can really share your thoughts. Remember to be positive, articulate and get right to the point. If you can write your thoughts in an entertaining, audience-pleasing way, you can start building up an audience for your comments and reviews.

Do Guest Blogging

Want to make a great impression? Find a good place to guest blog and write until you get that post to go viral. This will not only attract you an audience, but by helping out someone else you will build high quality backlinks as well.

It will take time, effort and the ability to write well. But if you can pull it off, your stint as a guest blogger will pay off big time for your efforts. The key is to write something that attracts people's attention and provides you with a place to write again for the blogger.

Guest blogging can be very rewarding in more ways than one, so if you have the time to do it right, then you should market your services as a guest blogger.

These are just some of the methods you can use to build high quality backlinks and start building up your web traffic.

What to Do Before Applying for Google AdSense

It seems that everyone wants to make money by joining up with Google AdSense and why not? Google AdSense is a relatively simple, straightforward way to actually start earning some extra money with your efforts.

However, things have changed from the early days of AdSense when joining was not much of an issue. Today, applying for AdSense takes more effort and some preparation so that you can take full advantage of their services.

First, you will need a good reason to apply for AdSense so you can reap the benefits that they offer. Here you will find out more about what Google AdSense is all about, what they offer and how you can properly prepare yourself before joining to really take advantage.

What is Google AdSense?

One of the most established internet networks to offer advertisement publishing, AdSense uses the Pay Per Click (PPC) system to help businesses reach out to others on the web. At one time, Google used to provide AdSense to everyone who used their Blogspot program, but now that has changed.

Today, AdSense is one of the most respected thanks to the many thousands of satisfied publishers and customers who use the service. It is straightforward, easy to use and always pays on time which makes it very attractive to anyone wanting to have this service. If you do your work the right way, it will pay better than any other similar service on the web.

However, it is their very success that now makes them harder to join. When you apply, everything has to be just right otherwise you will not be approved.

How to Avoid Getting Your Application Rejected

There are a number of things to avoid when applying for AdSense so that your entry will not be discarded. Here are just a few.

Read Google Policies: Just like studying for a test, Google posts their policies about what it takes for your site to get into AdSense. So, take the time to read them and be sure that your website follows the rules.

Have Good Content: If your website doesn't have good or sufficient content, it will not be accepted. So, be sure that you provide them with enough to review. In addition, it has to be neat, professional and grammatically correct otherwise it will give them the excuse to toss out your application.

Aesthetically Pleasing: Garish yellows and lots of distracting glitz will also stop you in your tracks when you apply for AdSense. Your website should have a good, solid design that is comfortable to look at and pleasing for the visitor.

Post Your Contact Information: If Google cannot find a way to contact you through your website, you might as well not apply. Having an "About Us" page that is complete with contact info is the minimum to getting accepted.

Now that you've done the basics, it is time to hedge your bets when it comes to applying for AdSense by adding in items and procedures that will enhance your chances. While nothing is guaranteed, the following steps will help your website in getting approved.

10 Ways to Increase Your Chances when Applying for AdSense

1. Policy for Privacy

It may seem odd to have a privacy policy for your blog, but it is vital if you want to get AdSense approval. Without it, you might as well not apply at all. The policy itself should describe to those who visit your blog what they will see and what they can and cannot do.

2. Contact Information

This is where you put in your contact information. At the very least, it should consist of an email so that readers can contact you directly about any issue they have on your blog.

3. About Us

This is where you tell people a little about who you are, what your business does and how you are going to accomplish it. This is sort of like an introductory page to your efforts and it critical when you apply for Adsense.

4. Email & Name Verification

Be sure that you put your email as well as your name in your About Me or Contact Us page so that it will help Google verify you quickly.

5. Verify Age

Always use your correct name and date of birth when applying for AdSense. This is mostly for those who are under 18, but it is important to be truthful otherwise you'll never get approved.

6. Appropriate Design

Your blog should look attractive, professional and easy to use. You don't have to be fancy or pour in thousands of dollars, just make it clean and neat will be sufficient.

7. Have Plenty of Posts

Do you know that there is no minimum number of posts stated by Google in terms of what is required for joining AdSense? Even so, if you only have a handful, do not count on getting approved. You should shoot for about 500 or so before applying to demonstrate your seriousness about your efforts and make sure that they are at least 500 words in length.

8. Remember the Rules

No pornography, illegal items, advocating drug use or other items that will not get you any AdSense at all. Plus, if your posts are all less than 200 words, that will not work either.

9. Adds Value

Your blog or website must provide real value for your audience. This will not only help keep people visiting your site, but it will also impress Google as well.

10. Unique, Top Level Domain

Basically, this means that your domain should be a ".com" in order to succeed. Plus, the name itself needs to be short as possible, related to your area of interest and easy to remember.

When applying for AdSense, you will need to keep all of these things in mind so that you will be accepted. However, all of the attributes that Google AdSense requires are also ones that will boost your website as well. So, keep this in mind when you apply for AdSense because the result will be a blog that will start earning you another income stream that can build over time.

15 Aralık 2014 Pazartesi

Show/Hide Blogger and Google+ Comments System With Toggle

Many Blogger site owners received the new Google+ Comment System pretty negatively because it forced all commenting users to create their own Google+ account before they were able to write a comment. The Google+ Comment System on Blogger was convenient to writers, but discouraged many users from continuing to comment on blogs because they simply didn't want to use Google+. For those that did use Google+ to make a comment, Blogger would never email you and notify you that someone left a comment; you could go days or weeks without ever realizing that you never responded to a reader.

In addition to frustrating your audience, the Google+ Comment System on Blogger depended upon the URL of your blog post. By changing your URLs or moving around your blog posts internally, you run the risk of losing every one of your comments that was placed using Google+.

Previously, the only way to solve this problem was to disable the comment system through your account settings, thus giving up your ability to use their Google+ account. Now, there's an easy new way to have the best of both worlds. Allowing fans of Google+ as well as everyday blog readers to access all same features, you’ll be able to engage every visitor equally. You can respond to comments while still being able to communicate with other Google+ users outside of your site and take advantage of the Google+ Comment System on Blogger.

DEMO

How to Integrate Blogger and Google Plus Comments

To make the installation as simple as possible, I used inline jQuery and CSS, but who wants can change this code later. Also, the most accessible place I found to add it would be just after <b:include data='post' name='post'/>. So, let's start adding it:

Step 1. Log into your Blogger account and select your blog > go to 'Template' and press the 'Edit HTML' button on the right side.

Step 2. Click anywhere inside the code area and press CTRL + F keys to open the editor's search box and search for the following code:

<b:include data='post' name='post'/>

Step 3. Just after <b:include data='post' name='post'/> add the following code:

<b:if cond='data:blog.pageType == "item"'>
<style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh25YFoDn7oXQ9Dk0CAA6_u8_sXWzE3ncDCXU9pBHfytvSgm3hzOeKM9T0Y0MuzUENGvueBM9dQRpc5vhLaLGzK3LRzrNiGQaHT06eCwEjUJFc9M_BVUYSGjNnVEHXNDT1Wofggju2G50kK/s1600/speech-bubble.png) no-repeat; font-size: 20px; font-family: "Arial Narrow",Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}</style>
<div class='comments-icons'>
Show Comments: <a class='show-hide-comments' href='javascript:void();' onclick='$("#gplus-comments-visibility").slideToggle();$("#comments").hide();'><img class='gplus-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEvl5brtWn22hnaCHeRkAjTivmH8eXaQSN89wfRR8ItiVnvMNxVWx49I_oAMe_pbNbWblCCr-PuCuMeO2jl_qV7HXcjJgt9OARPIwLncPtkIpCU3V3UNOGNldsBidf0UnQXew2s8NcnzUG/s1600/google-plus-logo.png' width='35'/></a> OR <a class='show-hide-comments' href='javascript:void();' onclick='$("#comments").slideToggle();$("#gplus-comments-visibility").hide();'><img class='blogger-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGePhZtUVlsnuTWOIPSZJT3rB5tjmfy8iHA3cwtQ_2dXxmcr9nOgifBDmbNacM_B7LLI2A9u7mmOa1Gtkl9HrAyQFWqukV7cPIVAedThbGHaEanoDvRGGmZBtmNTS60JlG7BRENtrZcglP/s1600/blogger-logo.png' width='35'/></a>
</div>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>
</b:if>

Note: The data-width is for setting the width of the comment box, so the number (550) indicated there can be changed according to the design of your blog.

Step 4. Press the "Save Template" button located at the top of the editor and view your blog to see if you have successfully added Google+ commenting system to Blogger.

Please note that in order to make this work, you need to make sure that you are using a version of jQuery in your site. Otherwise, add this line just above the </head> tag using the HTML template editor:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

That's it!

From here on out, any reader that views your post has the option of making a comment using their Google+ account, or the native Blogger comments. Your readers will enjoy the flexibility that your site provides and you will also benefit from the inclusive services offered by Google.

3 Aralık 2014 Çarşamba

Facebook Popup Like Box Widget For Blogger

Facebook has become the leading social media service on the Internet playing host to over 1.3 billion users; of those, 800 million login to their dashboard feeds at least once a day. Thanks to the vast number of active users on services like Facebook, acquiring new readers as a blogger or content provider has become easier than ever.

In order to produce an effective digital campaign, you absolutely must take advantage of social media by doing things like integrating Facebook on Blogger. Email marketing can be useful, but it comes with restrictions that could limit your blog's potential. Perhaps the most significant problem is that emails don't come with a face or personality like Facebook does.

Think of a time when you received an email in you inbox from someone you didn't know. Where you inclined to open it or did you send it right to the junk folder? If it's your first introduction to new consumer, they simply don't know who you are, what you want, and how you got their email. This sets off an initial breakdown of any type of trust that might have developed. The reputation of email marketing is further deteriorated with a study done by Kaspersky Lab, an Internet research firm. They estimate that around 70% of all the emails sent in the world are spam.

Sharing site content using a Facebook Like Box is just one of many strategies that can generate a regular flow of traffic from a diverse demographic that might have been previously inaccessible. Adding a Facebook Like Box to your site helps to reduces your individual workload, and instead distributes that ability equally among your readers.

When someone reads your content and appreciates the kind of work that you produce, they'll be willing to share that information to their followers and fans, setting off a viral reaction. The first step necessary to making this a reality is to make this change to your site. These next few steps will provide you with a quick and easy guide on how to add a 'Like Box' to your Blogger site so that you can began taking advantage of these great opportunities.

Click here for a DEMO

How to Add the Facebook Popup Like Box Widget

1. Log into your Blogger account and select your blog > go to 'Layout' & click the 'Add a Gadget' link on the right side
2. Once the popup window is open, select the HTML/JavaScript gadget from the list:

3. Copy and paste the following code inside the empty box:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

#fbox-close {
    width: 100%;
    height: 100%;
}

#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}

#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Helplogger/120574614736021&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com" rel="nofollow">Helplogger</a></div>
</div>
</div>

4. Press the 'Save' button to add the widget to your blog. That's it!

Customization

After adding the code, replace the address in blue https://www.facebook.com/pages/Helplogger/120574614736021 with your site's facebook page URL.

The widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part:

.delay(5000)

By default, the like box only shows up the first time the user visits your page. If you would like the Facebook box to popup every time the page loads, then remove this line of code:

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

If you want to display only when user visits your homepage, go to 'Template' > hit the 'Edit HTML' button on the right side and search by clicking anywhere inside the code area and pressing the CTRL + F keys for this tag:

</body>

Paste the facebook popup widget right above the body tag and make sure to include the conditional tags below:

<b:if cond='data:page.type == "index"'>ADD THE FACEBOOK WIDGET CODE HERE </b:if>

After saving your work, you can test out your new feature by returning to one of your old posts which should bring up a little popup widget asking if you'd like to join the site's facebook page.

If you don't see the Facebook Like Box on the page, you may need to delete your cookies or check out the 'Customization' section above in order to display the widget every time a user visits your site. Once this widget is added to your site, all your hard work should start to translate into an increase in web traffic and number of Facebook fans.