Add Your Blogger Blog to Facebook

In today's Blogger tutorial I will show how to add your Blogger blog (Blogspot blog) to Facebook so that your updated content can be read right from your Facebook profile. Importing your Blogger blog into Facebook will only take you a few minutes to set up but will likely produce quite a few extra readers.

By importing your blog into Facebook your Blogger posts become available to all your Facebook friends and family. Everytime you post new articles to your Blogger blog they will automatically appear on your Wall in Facebook and in your friends News Feeds. It is also possible to remove any content that you do not wish to be displayed which may be handy for some.

Advantages of Importing Your Blog into Facebook
  • Increase your web presence
  • Enjoy added interest in your blog articles and new readers
  • No need to replicate your blog articles or content on Facebook

Disadvantages of Importing Your Blog into Facebook
  • If you blog for profit think carefully about importing your Blogger blog into Facebook as you are likely to experience a drop off in traffic and a reduction in revenue earnings as fewer people will visit your actual blog. One possible way around this is to set your blog's RSS feed to show summaries only that way ensuring that anyone interested will need to visit your blog to read the whole article.

How to Import or Add Your Blogger Blog to Facebook
  1. Login to Facebook or Sign up to Facebook if you are not already a member

  2. From your Facebook profile page go to Settings > Application Settings which you will find in the top right hand corner


  3. Select Notes from the list of applications displayed on the page

  4. Click on Import a Blog in the right sidebar

    Facebook - Add Notes Screen (Settings, Applications Settings, Notes)
  5. Enter the URL address of your blog

    either website URL:
     http://blogknowhow.blogspot.com

    or your Blogger feed: http://blogknowhow.blogspot.com/feeds/posts/default?alt=rss
    Please note it is not necessary to add the feed of your blog as Facebook will autodetect this


    Facebook - Import a Blog Screen
  6. You will need to tick the box below this to confirm that the content is not illegal or obscene and that you have the right to permit Facebook to reproduce the content of your blog. Any problems click Cancel and reenter your blog URL address

  7. Click Start Importing

  8. Facebook will now import your feed and you will be taken to a preview screen to make sure the content matches your blog. If it does go ahead and confirm the import by clicking on the Confirm Import button

    Facebook - Preview Screen for import a blog showing latest content

  9. Go to your Wall in Facebook to check that your Blogger posts are now available to all your Facebook friends and family.


Tips and Troubleshooting
  • If your Blogger blog is members only the blog import will fail as Facebook will be unable to detect your blog's feed

  • To remove a blog post from your Wall in Facebook click on the Remove button on the righthand side

  • If your images are not displaying (there seems to be a bit of a glitch with this) then you may need to try importing your blog using Networked Blogs


In this Blogger tutorial I have discussed how to import your Blogger blog into your Facebook profile. I have also pointed out some advantages and disadvantages of adding your Blogger blog to your Facebook profile. I will be talking some more about importing blogs into Facebook in the future which is likely to be of interest to those with multiple Blogger blogs.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs

Add Profile Images to Blogger Comments

Today I will show you how easy it is to have Blogger (Blogspot) display profile images in the embedded comments section of your blog even if you are using a custom template.

About a month ago Blogger announced that it was enabling profile images (profile avatars) in the embedded comments section on Blogger (Blogspot) as part of its 10th birthday feature series. The new profile image feature which has been available on other commenting options has now been extended to the embedded comments option. This is good news if you are using a default template as you will now see a small avatar next to your visitors comments and your own avatar if you have uploaded a profile image.



Default Blogger Templates - Enabling Profile Images
Profile images work on default Blogger templates and have been automatically enabled by Blogger. If you are using a default Blogger template with embedded comments enabled and have recent comments on a post you will see a profile image to the left of visitor comments (provided they have uploaded one that is). Your profile avatar will also display when you respond to visitor comments again provided you have uploaded one. (To upload your profile photo click on Add Photo at the Dashboard). If profile images are not displayed enable them by going to Settings > Comments and checking the Yes radio button at the bottom of the page which says Profile Images Enabled.

Custom Blogger Templates - Enabling Profile Images
If you are using a custom template you may still be able to see profile images in your embedded comments section. Check out Settings > Comments to make sure Profile Images are enabled. If you can't see profile images you can still add this feature by tweaking your Blogger template. Follow the instructions below to have Blogger display profile images in the embedded comments section of your custom Blogger template.

Add Profile Images to Comments Section of a Custom Blogger Template
If you are using a custom Blogger template you can use the following method to add profile images to the embedded comments section of your Blogger template.

  1. Login to Blogger if not already logged in

  2. Go to Design > Edit HTML

  3. Back up your Blogger template as a precaution by downloading the full template to your computer

  4. Expand Widget Templates by checking the box on the right hand side

  5. Find the following line in your Blogger template by using CTRL + F:

    <dl id='comments-block'>

  6. Change the above line to the following:

    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

  7. Scroll down a few lines and find the following line in your Blogger template:

    <a expr:name='data:comment.anchorName'/>

  8. Directly before the above line paste the following code block:

    <b:if cond='data:comment.favicon'>
    <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
    <data:comment.authorAvatarImage/>
    </b:if>

  9. Click Save Template

  10. Click View Blog and navigate to a page with commenting to see avatars next to comments in the embedded comments area


Tips and Troubleshooting
  • If you have added the author commenting highlight hack to your Blogger template there will be 2 instances of the code at Step 7 to change

  • If your template does not have the code mentioned in Step 5 and Step 6 check that dl has not be replaced by div. In this case leave the div as is and replace the rest of the code in the line.

  • Blogger has only enabled profile images for Blogger and Google profiles so if your visitors comment using identities such as "Anonymous" or "Name/URL" their image profile will not be displayed. If OpenID, AIM or other identities are used these favicons will be displayed instead.

  • Profile avatars load last so they will not prevent visitors viewing your content if you have a lot of comments on some pages


In today's Blogger tutorial (Blogspot tutorial) you have learned how to enable profile images in the embedded comments section in Blogger. If you are using a default Blogger template this can be achieved by enabling profile avatars in your Blogger template. If you are using a third party custom template I have shown you a Blogger hack that will display profile images next to comments on your blog. As always I am interested in how you get on with this tweak. Good luck!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add Missing Embedded Comments Section to a Blogger Template
Embed Comments Form in a Blogger Template
How to Get More Comments on a Blogger Blog

Add CSS Styling to Blockquotes in a Blogger Template

Today I continue the series of Blogger tutorials (Blogspot tutorials) by showing you how to apply CSS styling to blockquotes in a Blogger template. Other articles I have already published on the subject of CSS styling include:

How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts
How to Add or Change a Background Image in a Blogger Template.

Today's tutorial on Blogger blockquotes will be useful if you are using a default Blogger template or a third party custom template. It will show you how to change your blockquote area in the following ways:

  • Add a background color to the blockquote
  • Add a border around the background of the blockquote
  • Add or change the color of the blockquote text
  • Add or change padding around the text
  • Add or change the margin
  • Add a background image

Blogger beginners you can relax as I have written this Blogger tutorial with you in mind. I will walk you through the steps of styling the blockquote section and you will see that it is not as daunting as it first appears. This Blogger tutorial assumes no knowledge of CSS styling. I have rated the difficulty level as easy to medium because it does involve making adjustments to your Blogger template.

How to Change the Blockquote Section of a Blogger Template

First of all let's take a look at the CSS Styling for the blockquote section of a default Minima Blogger template.

.post-body blockquote {
line-height:1.3em;
}

.post blockquote {
margin:1em 20px;
}

.post blockquote p {
margin:.75em 0;
}

As you can see the blockquotes area of this Minima template has minimal styling. Apart from line height and margin indentation there has been no additional code added to improve the look of the template.

Minima Blockquotes No Extra CSS Styling
Let's go ahead and give the blockquotes in your Blogger posts some styling. I will use the Minima template to show you but you can do the same for another default template or custom template. As always back up your Blogger template by downloading it to your computer before you begin to make any changes.

  1. CSS Styling to Add a Background Color to Blockquotes
    Adding a background color to the blockquote area can be achieved in 1 of 2 ways.

    1. One way is to enter the hex color directly into the styling as I have done below. This code will add a light grey background to the blockquote area.

      .post-body blockquote {
      line-height:1.3em;
      background-color: #cccccc;
      }

    2. Another way to add a background color using CSS styling for the blockquote area is to make use of the variable names already set up. The border color is light grey #cccccc by default in a Minima template. The advantage of this option is that if you decide to change the border color under Layout > Fonts and Colors the blockquote color will automatically change to the new color too.

      .post-body blockquote {
      line-height:1.3em;
      background-color: $bordercolor;
      }

      If you wanted the background color to be the same as the blog title color rather than the border color you would write this instead

      .post-body blockquote {
      line-height:1.3em;
      background-color: $titlecolor;
      }

  2. CSS Styling to Add a Border Around Blockquotes
    You have your background in place now let's add a narrow border around the background to add some more definition. The following will add a 1px solid border around the outside of your blockquote area in your Blogger posts.

    .post-body blockquote {
    line-height:1.3em;
    background-color: #cccccc;
    border: 1px solid #cc6600;
    }

    or if using variables

    .post-body blockquote {
    line-height:1.3em;
    background-color: $bordercolor;
    border: 1px solid $titlecolor;
    }

    Blockquotes With a Background and Background Border
  3. CSS Styling to Add Padding Around Blockquotes
    Now if we were to leave the styling at this point one of the problems would be that the text would butt up against the background which is not a good look. To create some space between the text and the background edge all the way around we use CSS styling to add some padding like this:

    .post-body blockquote {
    line-height:1.3em;
    background-color: #cccccc;
    border: 1px solid #cc6600;
    padding: 20 px;
    }

    or if using variables

    .post-body blockquote {
    line-height:1.3em;
    background-color: $bordercolor;
    border: 1px solid $titlecolor;
    padding: 20 px;
    }

    Blockquotes With a Background, Background Border and Padding
  4. CSS Styling to Add or Change the Text Color of Blockquotes
    If you want to accent your blockquote area in your posts one effective way to do this is to make the blockquote text color a different color from the text color of your pages. We do this by picking a color and adding the following line to the code:

    .post-body blockquote {
    line-height:1.3em;
    background-color: #cccccc;
    border: 1px solid #cc6600;
    padding: 20 px;
    color: #cc6600
    }

    or if using variables

    .post-body blockquote {
    line-height:1.3em;
    background-color: $bordercolor;
    border: 1px solid $titlecolor;
    padding: 20 px;
    color: $titlecolor;
    }

    Blockquotes With a Background, Background Border, Padding and Change of Text Color

Tips and Troubleshooting
If you want to add further modifications to the blockquotes area of your Blogger template here are several other possibilities.

  1. CSS Styling To Change the Margin of Blockquotes
    You can increase the margin from 1em to 1.5em by changing the margin line to
    margin: 1.5em 20px;

  2. CSS Styling to Add a Background Image to Blockquotes
    You can have your own image as a background in your blockquotes area of your posts by adding this line:

    background: url(http://URL of your image.jpg);

In today's Blogger tutorial (Blogspot tutorial) you have learned how to add CSS styling to the blockquotes area of your Blogger posts. I have shown you how to add a background, a background border, change the text color, add padding, change the margin and add a background image to the blockquotes code block. If you have a moment please let me know how you got on customizing your own Blogger template. Any questions please ask.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts
How to Add or Change a Background Image in a Blogger Template

Add or Change Background Image of a Blogger Template

In today's Blogger tutorial (Blogspot tutorial) I will show you how to both add a background image to a Blogger template if you don't have one already or change the existing background of your Blogger template.

I have chosen to write this article not because there aren't any how to articles already on the net but because they assume quite a bit of knowledge. I have taken a different tack with this post in that I assume you are an absolute beginner with no knowledge of Blogger templates.

For this reason I have provided some sample backgrounds for you to play around with. By just cutting and pasting these images you can see first hand how dramatically adding a different background to your Blogger template can change it. You will see that replacing your background image with these images isn't that difficult and hopefully it will give the confidence to branch out further and change the background of your Blogger template to suit your own needs. All that is needed is to insert a small snippet of code into the CSS styling section of your Blogger template and hey presto your Blogger template will take on a whole new look.

How to Change the Color of a Blogger Background (Default Templates)
If you are using a default Blogger template then you already have the option to change the background color to your own taste by going to Layout > Fonts and Colors. Some third party custom Blogger templates have this option too but by no means all. For instructions on changing the background color of custom templates see tips and troubleshooting below.

How to Add a Background Image to a Blogger Template
  1. Log in to Blogger if not already logged in

  2. Go to Layout > Edit HTML

  3. Back up your Blogger template as a precaution by downloading the full template to your computer

  4. Find the following line in your Blogger template

    body {

  5. Add the following line directly after this line
    background-image: url(URL address of your image);

    Your block of code will now look like this:

    body {
    background-image: url(URL address of your image);
    (existing code in this block)
    }

  6. Now replace the code in red for the URL address of your image. Choose an image from the selection below to practise with or use your own image. Note if using your own image make sure you read the tips and troubleshooting section below.


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUI3YCtWplx_f4fd9jvdJCfzggjIET0mA8FUFLIatR9R9yXtX6s2Q4zliX5jFfd2YKcb1F6fIgWco5x3qDkU6pdIm7AzQnc2Z5AI0qJFn_7NexHceoiwoidmjU1ZsJRXMfk9XuP0GeFdg/s320/background_047.gif


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihNWEcquFlfKg-UeyP0bV1efolLsPo3cq59REuO6LZSkvsgxX3nVomJW12yLr9QmA6VsBQ0nDEcwiVDaTrbJSOVtj_fcs9wSLb5hW1cbpbtJf4yQnVumDo_-AxaD_d45TSa-d-FHb7J8/s320/background_104.gif


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJ1Am87PxwbBsuiewFu1NiLdarQZ_97qDg_KxAUxAelzbtcjyq0eEHAltpYve50uH2c5fhZYFyscFLwciqRKVPWA_nqrtCFQe7SMR8DP_GHDezcCMwYtHVdx-6zUF8KD7bBc5K4M-zLA/s320/background_126.gif


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHy_cNdNtj7rxAqgujha6f00Jq2x71fd0xg7iJWCsz3uxqdFAUyZ1O9C1y8G1TPP3O5Qvk85XSu2WYT9WXm3k5YR3JJypeIdDtkES0xmNkvQShDD_F02e27kvS4_6wS-4cZNpHvy15rZ4/s320/background_073.gif


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRse3S-x9_WL5EMz54_N5zw60HXPPlvpRbve9BIQDk7evp95nwVZ3ync5DljJbYXlCu8CS5wOJYdaMXNMakuv6Vhxqfo41UuGvfbnZ9gvQYKjGRswCBsX6SioM9_ONSy-vRAb2pj0LCCY/s320/background_083.gif

    Green Paws Background

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGbegVd51FLt7lBtBduZshX0NuLFINcOKJelDH6XnwaclSiC_9IQA8y_Rb1RjVZUuvXTHbNxy_pZ9nJuwcuXC6Qr4Xi4WhwchVxNdTvV4ZTB7bIXChqbw-bc3Lf_Wmo-vAhOoiQuRQr0/s320/green-paws.gif

    Musical Notes Background

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY34eKSXBb-E8epMMEHGCNQgnNY0nT0km46oDyCepispj2IgY-8aBViiruFl-V6S0CSXyfp2PATEINw9c67PAOLliFYPCiOpfHU39LwkikVHE-i7WzLEhH5Jt8TAKU6wPRm1E5vnkaFqM/s320/melody.gif

  7. Use the Preview button to see the effect of these different backgrounds on your template. It will help you get an idea of the kind of possibilities out there.

  8. You are welcome to use one of the above Blogger backgrounds as they are all free to use without any restriction. If you decide to use one of these simply click on Save Template and you are in business. Alternatively go ahead and find your own background image on the net and follow the instructions below to insert it into your Blogger template.

Tips and Troubleshooting

  • To Add Your Own Image to a Blogger Template
    There are huge number of backgrounds on the net that are suitable for Blogger. Search under free website backgrounds in your favorite search engine to find these.

    Simply download your preferred background and save to an image service like Photobucket, Flickr.

    Make sure the file format is either a .jpg, .gif or .png and that its size does not exceed 100kbs. As a rule of thumb an image size of around 30kb or less is about right if loading time speed is not to be compromised. Larger images can be resized quickly by using an online resizing service such as Shrink Pictures.

    Follow the instructions above to change the URL to that of your image.

  • To Change the Background Color of Your Custom Blogger Template
    If there is no option to change the background color of your Blogger template in Layout > Fonts and Colors you can still change the color manually.

    1. Follow steps 1 to 4 as above

    2. Find the line beginning with :

      background-color: #

    3. The hex color will be different for each template. We will change the color only

      background-color: #change hex color code to your chosen color;

    4. Replace the existing hex color code with the value of your chosen hex color. List of web safe hex colors. For example insert the following code to change the background color to:

      Denim Blue
      background-color: #336699;

      Black
      background-color: #000000;

      White
      background-color: #ffffff;

    5. Use the Preview button to see the effect of each color before you save it.

    6. Once you are satisfied go ahead and click on Save Template

Today's Blogger tutorial (Blogspot tutorial) aimed at Blogger beginners continues the series on CSS styling for Blogger. You have learned how to add the background image to your Blogger template or change the existing background image. To help you gain confidence in changing the background image I have provided some sample images for you to practise with. Also in this Blogger tutorial you have learned how to change the color of your Blogger background if you prefer a plain solid background color rather than a background image. As always if you strike any problems implementing the tips in this tutorial please let me know.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts

Add a Post Divider Between Blogger Posts

In today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post divider to your Blogger template. Used effectively post dividers can really jazz up your blog and will lend it that individual feel which most of us are hoping to create.

This tweak is very easy and well within the capabilities of any Blogspot blogger. Only a few simple changes to your Blogger template are required and these are in the CSS styling section.

How to add a post divider between posts in Blogger
By way of example I will use a divider that I downloaded from the internet free by searching for free divider graphics. Here are some sample dividers you can use to get started:


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYe-3_G1ORFiaDq_AQpHryMGkWlt6ROFkBYqHgR7Xi1DcO-h0-fa0PVLr9zfV7C5Vi3b5PDFdgtYwYe_zkSG4OWRJYgT7AdmorC2jsICvOM5Z607wLG1pD9lregkRVBEOpxiNeGIellC8/s400/ribbon.gif


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirxiUMhxAdM5BLqBzzDxSoDTHQ8FsjZn7bKcljP3TjQ7A0mXMa0uyaizKgAuewiU1AC-i3YsA0gib2Eg2RFiD08bYvVKkuxKBzF-hynx-SVOhH1JF7Kj-IlLUSwFtAw5-pMdN3-c3Hc5Y/s400/bar1.gif


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6sdBBAKd5GZpL-6hyF6aBZROrhuF2VB8oCX4QR6dynjskTCoIzx9a4RtveNrJ2SezEyxx9fBGkvAVtyMvarptqdtq5RO_xWUXV2I9gxC0FzXDx1v1EzjDh9rWpMnLNDiqgi1Rjl_jPX4/s400/barbsmpl.jpg


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWThopGU8A4gG4AbIzuV3UWIZuto02Si7tNoOL7Lk32_4L5SKZcJdaZb54_569jrjrNCfJxZDxs9NqwwTRdwsTqEuus7TorTiR9ZbsIYlr0_uy4dcVaox57AaiOhsFYH6-ANiSXJM0nGk/s400/bar47.gif


How to Add a Divider Between Posts in Blogger

  1. Login to Blogger if not already logged in

  2. From the Dashboard navigate to Layout > Edit HTML

  3. Back up your Blogger template as a precaution by downloading it to your computer

  4. Find the following line of code in your template:

    .post {

    You are likely to have something like this in your template already:

    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }

  5. Paste the following lines of code to this block making sure you paste them before the closing curly bracket:

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYe-3_G1ORFiaDq_AQpHryMGkWlt6ROFkBYqHgR7Xi1DcO-h0-fa0PVLr9zfV7C5Vi3b5PDFdgtYwYe_zkSG4OWRJYgT7AdmorC2jsICvOM5Z607wLG1pD9lregkRVBEOpxiNeGIellC8/s400/ribbon.gif);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin:.5em 0 1.5em;
    padding-bottom:1.5em;

  6. If any lines are duplicated remove them.

  7. Remove any line beginning with: border-bottom: eg

    border-bottom:1px dotted $bordercolor;

  8. You will now have a block of code which looks like this plus any extra lines from the existing code in this block:

    .post {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYe-3_G1ORFiaDq_AQpHryMGkWlt6ROFkBYqHgR7Xi1DcO-h0-fa0PVLr9zfV7C5Vi3b5PDFdgtYwYe_zkSG4OWRJYgT7AdmorC2jsICvOM5Z607wLG1pD9lregkRVBEOpxiNeGIellC8/s400/ribbon.gif);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin:.5em 0 1.5em;
    padding-bottom:1.5em;
    }

  9. Click on Save Template to save your changes

  10. Click on View Blog to see your new post divider between posts

Tips and Troubleshooting
  • To change the divider to one of the above replace the URL address of the image (in red) with the URL address of the new image you want to use.

  • To use your own divider image download to your computer from the internet and then save the image to a photo image service like Photobucket. Replace the divider image URL address (in red) with the URL address of your new image

  • To increase the padding around the divider change the following line of code:

    padding-bottom:1.5em;

    to

    padding-bottom:2.5em;

In today's Blogger tutorial you have learned how to insert a divider between your Blogger posts to enhance the look of your Blogger template (Blogspot template). You can either make your own post divider or download one from the myriad of free website dividers available on the net.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger

Add a Twitter Profile Widget to Blogger

If you use Twitter then you are going to want to let your Blogger readers know about it. One effective way to show your Twitter updates on Blogger is to add a Twitter profile widget to the sidebar of your blog. This widget is quite a bit more fancy than the current Twitter Updates Widget available through Blogger which I showed you how to insert into your blog in my recent article Add a Twitter Updates Widget to Blogger. On the minus side the widget may slow your blog down so test it out first if fast loading time is crucial to you.

Twitter Profile Widget - how to insert into Blogger
How to Insert a Twitter Profile Widget into Blogger
  1. Go to Twitter Widgets and sign in


  2. Choose Profile Widget and you will be taken to a default profile widget page where you can customize your Twitter widget according to your needs.

  3. Choose Settings and make sure that your username is correct

  4. Choose Appearance and make any custom color changes you need to so that the widget will blend into your blog. At the very least you will need to change the shell background and the links colors to suit your blog

  5. Choose Dimensions and change the sizing of the widget if it is too large to fit into your Blogger sidebar. The default setting is 250x300

  6. Click on Test Your Settings to ensure your new widget looks the way you want it to

  7. Click the Finish and Grab Code button

  8. Copy the code by right click the mouse in the code box and choosing Select All. Right click again and choose Copy

  9. Sign in to Blogger. From the Dashboard go to Layout | Page Elements

  10. In the sidebar choose Add a Gadget and then a HTML/Javascript widget

  11. Paste the Twitter code into the gadget content box and click Save

  12. Your Twitter Profile Widget will now be showing in your Blogger sidebar so click on View Blog to admire it

In this Blogger tutorial I have showed you how to add a Twitter Profile Widget to the sidebar of your Blogger blog (Blogspot blog). This Twitter widget will encourage your blog readers to visit your Twitter Profile and with luck you may get some new Twitter followers out of it.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add a Twitter Updates Widget to Blogger
Add Twitter Button or Twitter Badge to Blogger
Add Twitter Followers Counter to Blogger
Add a Social Bookmarking Button to Blogger
Add Social Bookmark Buttons to Blogger
Best Free Social Bookmark Icon Sets for Blogger

Add a Simple Drop Down Menu to Blogger

In today's Blogger tutorial I show you how to add a simple drop down menu widget sometimes called a select box to the sidebar of your Blogger blog (Blogspot blog). If you want to add lots of links to your Blogger blog but are worried about the amount of space this will take up on your blog this tutorial is for you. A drop down widget is a neat solution to the cluttered sidebar problem as it is both space saving and easy to install. The convenience of a drop down menu widget can be seen on many blogs where it is used for lists like a long Blogroll, Categories list, Labels list or a Recommended Posts list.

How to Add a Drop Down Menu Widget to Blogger
Adding a drop down menu to Blogger is well within the capabilities of even beginner bloggers. Most of the work is in cutting and pasting the links which is not difficult for anyone with basic computer skills. So let's get started but first here is a working drop down menu list with links to various posts in my blog:



  1. Log in to Blogger if not already logged in

  2. Navigate from the Dashboard to Layout > Page Elements.

  3. Click on Add a Gadget in the sidebar or other location if you wish

  4. Select a HTML/JavaScript gadget from the list of gadgets

  5. Paste the following code into the content box of the widget:

    <form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
    size=1 name=menu>
    <option>- Your Menu Title -</option>

    <!-- Change the following links to your own -->

    <option value="http://URL of link1">Link 1</option>
    <option value="http://URL of link2">Link 2</option>
    <option value="http://URL of link3">Link 3</option>
    <option value="http://URL of link4">Link 4</option>
    <option value="http://URL of link5">Link 5</option>

    <option value="http://blogknowhow.blogspot.com">Blog Know How</option>
    </select></form>

  6. Replace _blank as follows:

    • To have a new window open leave the same

    • To have the new page appear in the same window replace _self


  7. Replace - Your Menu Title - with a title of your own

  8. For each instance of the option values highlighted in red substitute your own links and link names. For example:

    <option value="http://blogknowhow.blogspot.com">Blog Know How</option>

  9. Click Save

  10. Use drag and drop to position the drop down menu widget in the location you want it within your sidebar and save any changes

  11. Click View Blog to admire the new drop down menu in the sidebar of your blog

In today's Blogger tutorial I have provided you with instructions to create and insert a simple drop down menu widget in the sidebar of your Blogger blog (Blogspot blog). This widget is ideal for reducing clutter on your Blogger sidebar and excellent for displaying long lists of links such as labels in a convenient, neat and space saving way. A drop down menu gadget is easily installed from the Layout > Page Elements page and can be customized to your own specifications. Any problems with this Blogger tweak please let me know. Enjoy!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Add Breadcrumb Navigation to Blogger
Add Horizontal Links Menu Navigation to Blogger

Blogger Read More Links in Posts with Jump Breaks Feature

In this Blogger tutorial you will learn how to insert jump breaks into your Blogger posts (Blogspot posts) as an aid to quick navigation for your visitors. Jump Breaks in Blogger provide an easy way to show only a snippet of your whole post on the home page of your blog with a read more link below it for the rest of the story.

I have already written about a Blogger expandable post summaries hack which provides a read more feature for a Blogger blog homepage. For most Blogger webpublishers (Blogspot webpublishers) this hack is no longer necessary because Blogger as part of its 10th birthday celebration introduced a new feature called Jump Breaks. I cover several methods to insert jump breaks depending on whether you are using a Blogger default template or a customized Blogger template.

The advantage of adding jump breaks to your Blogger posts is that your readers can quickly and easily skim your most recent posts for what interests them rather than having to scroll through a whole bunch of long articles. This is definitely a big help for those of us like me who often write articles longer than 500 words. If your posts are short and sweet you may find that adding this read more feature is unnecessary however you can still apply it when you do have a longer post. Below is an example post which illustrates the Jump Break feature in action.

Example post showing Blogger new jump breaks read more feature
How to Insert Jump Breaks (Read More Links) in Blogger
It is easy to insert a Jump Break into your Blogger posts (Blogspot posts) at any point of your choosing.

There are two methods of inserting the Jump Breaks in Blogger. Which method you choose depends on which post editor you are using. If you are not sure which editor you are using check this out by going to Settings > Basic and scrolling to the bottom of the page. Under Global Settings you will see a radio button next to old editor or updated editor.

Select Blogger editor from Settings, Basic
  1. Method 1
    Insert Jump Breaks - New Blogger Post Editor Only
    In order to use this method you need to be using the updated editor in Blogger or have Blogger in Draft enabled.

    • When creating a new post in the Blogger Post Editor position the cursor in the editor at the point you wish the Jump Break to be inserted

    • Click on the insert Jump Break icon (currently the last option on the menu)

    Click on the Jump Break Icon to insert a jump break into a Blogger post
    • A jagged dividing line will appear to mark the insertion point

    A divider line indicates where the jump break will occur
    • Publish your post as normal


  2. Method 2
    Insert Jump Breaks - Old Blogger Post Editor Only
    If you are using the old post editor rather than the new post editor you can still insert jump breaks into your Blogger posts.

    • When creating a new post in the Blogger Post Editor make sure you are in the Edit HTML mode rather than compose mode

    • Insert the following code at the point where you want to break the Jump Break to occur:

      <!-- more -->

    • Publish post as normal

Tips and Troubleshooting
  1. To Add Jump Breaks to New Posts Automatically
    To save time it is possible to automatically add Jump Breaks to posts with the following method:

    • Go to Settings > Formatting and scroll to the bottom of the page

    • Under Post Template paste <!-- more --> into the box and save. The next time you create a new post the <!-- more --> will automatically appear. Make sure you are in the Edit HTML mode to see <!-- more --> appear.

    Add the code to your Post Template in Settings | Formatting to automate Jump Breaks
  2. To Change the Read More Text
    If you want to change the Read More text for something like Read Full Story or Continue Reading you can easily do this by:

    • Go to Design > Page Elements

    • Edit the Blog Posts widget

    • Change the post page link text (Read More text) which appears at the top of the page to your preferred text and save

    Jump breaks page link text can be changed via Blogger Layout Page Elements Edit Blog Posts
  3. To Manually Add Jump Breaks to Blogger For Users of Customized Templates
    If you are using highly a customized template or have customized your Blog Posts widget you may experience a problem in getting the Blogger Jump Break feature to work. In this event you can edit your Blogger template to enable Jump Breaks.

    • As a precaution back up your template by downloading full template to your own computer

    • Tick the Expand Widget Templates checkbox

    • Using CTRL + F find the following line of code:

      <data:post.body/>

    • Directly below this line insert the following code into your Blogger template:

      <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
      <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
      </div>
      </b:if>

In this tutorial you have learned how to create expandable post summaries using the new Blogger feature Jump Breaks. You now have the option to easily insert Jump Breaks into your Blogger posts so that longer posts appear with only an introduction followed by a Read More link.

I have shown you 2 methods to insert the Jump Breaks and Read More links into your Blogger posts depending on whether you are using the new or old post editor features. I have also given you some tips to make sure you get the most out of the Blogger Jump Break feature including what to do if the Jump Breaks feature does not work with your customized Blogger template. As always I would welcome your feedback about your experiences with the expandable post summaries Blogger feature (Blogspot feature) or any other feature you may be having an issue with.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogger Buzz - You Might as well Jump!

Blogger Guide to Google Adsense Placement

There are so many places to position Google Adsense in a Blogger Blogspot blog. This article covers the most common places to add Google Adsense ad units and linked units in a Blogger blog together with links to the various articles which explain in detail how to insert the Google Adsense ad unit into Blogger.

Included in this article about Google Adsense placement are articles that cover positioning in the header both above and below the title, in the sidebar, in the footer, between the posts, between the header and the first post, below the post title, in the middle of posts, between the end of an article but before the embedded comment form

Format of Google Adsense Ad Unit

Google Adsense Ad Units

728x90 Leaderboard
728x90 leaderboard under Blogger header
728x90 leaderboard above Blogger header

160x600 Vertical Wide Banner
160x600 vertical wide banner in sidebar or 120x600 or 120x200

336x280 Large Rectangle
336x280 below post title or 250x250 or 300x250


Google Adsense Linked Units

728x15 Linked Unit
728x15 linked unit in Blogger footer or 468x15
728x15 linked unit in Blogger header or 468x15
728x15 linked unit above Blogger header or 468x15


Placement of Google Adsense on Blogger

EASY - CHANGE SETTING ONLY

Add Google Adsense Between Posts in Blogger
Blogger has a setting which allows you to add Google Adsense between posts. Read more about how to Add Google Adsense Between Posts in Blogger


EASY - ADD WIDGET ONLY

Add Google Adsense to a Blogger Sidebar
It is extremely easy to add a Google Adsense ad unit to a Blogger sidebar using a HTML/Javascript gadget or widget. For instructions on adding an ad unit to the sidebar please refer to Add Google Adsense to Blogger Sidebar

Add Google Adsense to a Blogger Footer
It is not so popular to place Google Adsense ad units in a Blogger footer however with the increased use of footers as a place that contains valuable information it is becoming more common to place an ad in the footer particularly a linked unit. For instructions on how to place a Google Adsense 728x15 linked unit in the footer refer to Add Google Adsense to a Blogger Footer


EASY-INTERMEDIATE - MINOR CHANGE TO TEMPLATE CODE AND ADD WIDGET

Add Google Adsense or Banner Above Blogger Header
If you have occasion to display either Google Adsense or an affiliate banner above the Blogger header you can by adding a section to the Blogger template. You can add any kind of Google Adsense content or linked ad unit although I suggest that a 728x90 leaderboard would be ideal for this spot.

Add Google Adsense or Banner Above Blogger Header

How to Add Google Adsense or a banner above Blogger header

Add Google Adsense to Blogger Header
The header of a Blogger blog is a popular place to add Google Adsense particularly a linked unit. I have good success adding a linked unit below the blog title in the header of my blog.

Add Google Adsense Above the Title

Place Google Adsense Above the Title

Add Google Adsense Below the Title

Place Google Adsense Below the Title in Blogger

Add Google Adsense Between the Header and the First Post in Blogger
Some templates lend themselves well to having a full length banner below the header. The Minima template for example suits a 728x90 Google Adsense unit just below the header and before the first post. Instructions on how to Add Google Adsense Between the Header and the First Post in Blogger

Add Google Adsense Between the Header and the First Post in Blogger

INTERMEDIATE - INSERT GOOGLE ADSENSE CODE INTO TEMPLATE

Add Google Adsense to Body of Post
Positioning Google Adsense within the body of the post in Blogger is a bit more tricky as it requires adding the Google Adsense code to the template. Before adding the code it must be parsed so the Javascript can be read by Blogger

Add Google Adsense Below Post Title

Add Google Adsense Below Post Title

in this article I have pulled together a number of Google Adsense articles I have written in the past about adding Google Adsense to a Blogger Blogspot blog so that it will provide an easy reference for anyone wanting to find out about Google Adsense placing on Blogger.

Related Articles
Bloggers Guide to Google Adsense Myths
Google Adsense Tips for Blogger Blogs
Better Placement of Google Adsense in Blogger
Add Google Adsense to Blogger Header
Add Google Adsense or Banner Above Blogger Header
List of Blog Know How Tutorials for Blogger Blogs

Place Google Adsense Below Post Title in Blogger

I have had a lot of interest in my articles about placement of Google Adsense in a Blogger Blogspot blog. Today I continue the Google Adsense series with an article about how to place your Google Adsense ad unit below the post title in Blogger.

This ad placement requires pasting the Google Adsense code directly into your Blogger template. While not difficult I have rated the skill level as intermediate as it requires parsing (conversion of the Javascript into a format readable by Blogger) of the Google Adsense code first before pasting it into your template. For the benefit of newbies and beginner Bloggers I have broken down the steps to simplify the process and make it more manageable. What follows is a detailed step by step tutorial on how to place Google Adsense below the post title in a Blogger blog including how to create a Google Adsense ad unit if you don't already have one.

Google Adsense Placement Below Blogger Post Title
Steps to Place Google Adsense Below Blogger Post Title
Follow Steps 1-11 if you don't have a Google Adsense ad unit.

IF YOU ALREADY HAVE A GOOGLE ADSENSE UNIT SKIP TO #12

1. From the Blogger Dashboard click on the Google Adsense link at the bottom of the page

2. Proceed to Adsense Setup > Get Ads or sign up for Google Adsense if not already

3. Choose Adsense for Content from the Ad Setup screen

4. Choose Ad unit or Link unit from the Adsense for Content screen. In most cases you will want an ad unit.

5. Choose the Ad Type from the dropdown menu depending on your needs. I often select text only because I think they are better performers but you may have a different experience. Click on the Continue button

6. Choose the Ad Format. Most likely this will be between 336x280, 250x250, or the 468x60 banner sizes.

7. Choose your color palette according to your blog color scheme.

Tip: I find the best way to get the colors for my ads if I am not sure is to create an Adsense unit in Blogger and transfer that color scheme to the new ad unit in Google. Alternatively you can accept the default and change the color scheme later. Changing the color scheme won't affect your ad unit code for your template.

8. Accept the default font in the meantime unless you know the font that you need. You can always check this out later by reviewing your template

9. Click on the Continue button

10. Create an Ad Channel by clicking the link add a new channel. By default Google will add this to Your Selected Channels. Click on the Continue button

11. You may need to give your ad unit a more detailed name. I recommend keeping the dimensions of the ad unit in the name as it makes the unit easily identifiable. I usually add the name of the blog to the name because I have several blogs. Save and Get Ad Code by clicking on the Submit and Get Code button.

START HERE IF YOU HAVE A GOOGLE ADSENSE AD UNIT
12. Copy the Adsense code by right clicking the mouse while it is in the code box. Choose select all and then right click again and choose copy. Make sure you get all of the code

Google Adsense Code for ad unit
13. Open the Ad Converter by following this link to Centricle.

14. Paste the Google Adsense code into the converter and press the Convert Ad Code button. This will parse the code so that Blogger will read the Javascript properly. Leave this window open for now as we will be returning here. Note that pasting Google Adsense code in to your Blogger template that has not been parsed will produce errors

15. Login to Blogger if not already logged in

16. Navigate to Layout > Edit HTML

17. Back up your Template (recommended) by downloading it to your computer

18. Check the Expand Widgets Template checkbox

19. Bring up Blogger Search using CTRL + F. Copy and paste the following line of code into the text box to locate the block of code in your template beginning with this line:

<b:if cond='data:post.title'>

Code Block to Find
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a> <b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

20. Return to the Ad Converter and copy the converted code by right clicking your mouse and choosing select all followed by right clicking again to copy it

21. Paste this code directly after the above code block:


<p>
<!-- Start Google Ad-->
<!-- End Google Ad-->
</p>

22. Paste your Google Adsense ad code between <!-- Start Google Ad --> and <!-- End Google Ad -->

Add Google Adsense Code to Blogger Template to Make it Appear Below Post Title
23. Click the Save Template button

24. Take a look at your new Google Adsense ad unit in your blog by following the View Blog link.

Troubleshooting Your New Google Adsense Below the Post Title
  • Note only a placeholder will show up for about the first 10 minutes or so. If no placeholder appears go back and retrace your steps to make sure you haven't forgotten something. Check you have copied the code exactly.

  • If you need more white space between the ad unit and the start of the first line of your article add this html tag <p> before your Google Adsense code and this </p> after the last line of your Google Adsense code

  • If you have Google Adsense ad units in other parts of your blog you will find that only 3 Google Adsense ad units will display on one page at any one time according to Adsense rules. for this reason you may get a placeholder appearing for some of your earlier posts which appear further down the page. To counter this problem I suggest you set the number of posts on a page to 3 if you have no other ad units anywhere else and 2 if you have another unit some where else. Linked units are not included in this only ad units.

In this tutorial I have covered the steps involved in creating a new Google Adsense ad unit at Google Adsense. I have also provided a detailed walkthrough of the steps involved in adding a Google Adsense ad unit below the post title in a Blogger Blogspot blog. Let me know how you get on.

Related Articles
Bloggers Guide to Google Adsense Myths
Add Google Adsense to Blogger Header
Add Google Adsense or Banner Above Blogger Header
Better Placement of Google Adsense in Blogger
Google Adsense Tips for a Blogger Blog
Add a Banner or Google Adsense Above Blogger Header

Add Outbrain Ratings Widget to Blogger

Outbrain provides a free and very stylish content recommendations and ratings widget which can be easily added to your Blogger Blogspot blog. In this tutorial I will discuss the benefits of Outbrain and also provide a step by step walkthrough of the process of adding an Outbrain widget to your Blogger blog and your Feedburner FeedFlare if you have burned your blog feed at Feedburner.

Outbrain Home Page
Benefits of Adding Outbrain to Your Blogger Blog
By adding an Outbrain content and ratings widget to your Blogger blog you will encourage visitors to record their reactions to a post they have just read. Along with features likes polls this is another good method of encouraging visitors to interact with your blog. Outbrain also makes it possible to display your most popular posts within the widget. In addition the Outbrain ratings widget may help drive more traffic to your blog when your visitors use the Recommended Posts feature which is embedded in the widget. By the same token it may also mean that the traffic doesn't stay long as visitors will be wooed away by recommended links so you will have to weigh up the benefits versus the costs for yourself. Outbrain also provides reports on widget activity

How to Add an Outbrain Ratings Widget to Blogger
1. Register at Outbrain. This is a simple sign up process that requires you to click on a confirmation email once you have requested sign up and filled out a simple form.

2. Once registered click on Get the Widget from the footer menu

3. Choose Blogger as your Blogging platform

4. Select the language of your widget if other than English which is the default

5. Click on Get the Widget button and Outbrain will automatically refer you to Blogger in a new window. Sign in to Blogger in the new browser window. Don't close the Outbrain window as we will be returning here.

Outbrain Get Widget page
6. Choose your blog from the drop down menu and click on the Add Widget button.

Add Outbrain Widget to Blogger
7. Navigate to Layout > Page Elements and reposition if necessary your new widget which will now be appearing in the sidebar of your blog. Save any changes you make.

8. Return to Outbrain in your open browser window and click on the click here link to verify your blog. You will receive a message verifying that you have claimed your blog

9. Click on the View Blog link in the menu tab section and view your new Outbrain widget in action.

Outbrain Ratings Widget as it appears at the bottom of a Blogger post


Note that once your readers start to rate your posts by clicking on them the stars will become yellow. 5 yellow stars is an excellent rating


Customizing Your Outbrain Ratings Widget
1. Return to the Outbrain window in your browser

2. Navigate to Manage Posts using the Sidebar Menu on the lefthand side

3. In the list of blogs you will see your blog listed. Click on the settings link

Outbrain Manage Blogs Screen
4. If you leave the default setting you will see recommended links appearing as pictured above in #9. If you don't want any recommendations you can set this to no.

5. If you have set up your blog with the idea of earning a little extra money you may choose to turn off sponsored recommendations. If you leave the radio button set to yes any proceeds from the sponsored links clicked on will go to charity. The charity sponsored can be selected via the drop down menu

6. Outbrain will show the most popular posts in the sidebar of your blog if this feature is enabled. To enable popular posts select the enable radio button.

7. Click on the Submit button


Adding Outbrain to Your Feedburner FeedFlare
If you already have a FeedFlare appearing at the footer of your burned Feedburner feed of your blog you can easily add Outbrain too. Check out my article on adding a Feedburner FeedFlare to Blogger if you are not sure what a FeedFlare is or how to add one to Blogger.

Go to Feedburner and choose your blog from the list of My Feeds. Select the Optimize tab and then FeedFlare from the lefthand sidebar menu. In the Personal FeedFlare section paste the following code (URL) into the text box:
http://widgets.outbrain.com/FeedFlareUnit.xml

and click on the Add New Flare button. Click on Save. Your readers will now be able to rate your blog straight from your Blogger feed.

Outbrain Troubleshooting Tips for Blogger Installation
  • When you install Outbrain on your blog resist the temptation to rate one of your posts as this vote can't be deleted once it is cast. Even when I tried uninstalling and reinstalling the widget the vote did not clear.

  • The Popular Posts feature takes a while to show any posts as it needs at least 2 visits before it will start rating the post

  • If you have other problems with Outbrain try this active Outbrain support forum for answers

In this tutorial you have learned how to install the Outbrain Ratings widget on your Blogger Blogspot blog and customize it. Also some of the benefits of the Outbrain widget were discussed along with a couple of Outbrain installation troubleshooting tips. If you have a moment let me know how you get on installing this widget. Don't forget to bookmark this post for easy reference.

Related Articles
Add a Feedburner FeedFlare to Blogger Feed

How To Delete a Blogger Blogspot Blog

I notice I get a lot of traffic to my blog from Blogger Blogspot webmasters searching for tutorials on how to delete their blog so this has prompted me to write this post about deleting a Blogger blog. As most of us are trying to get our blogs up and running this post may not be very useful for you right now however you may have occasion in the future to want to delete a blog so read on in case the day comes when you need to know what you do.

Why Might I Want to Delete a Blogger Blogspot Blog?
There a variety of reasons why you might decide to delete your blog. Here are some common ones:

You have set up a test blog and have now finished with it

You are unhappy with the name you have chosen for your blog and wish to change it. Please note you can change the name of your Blogger blogspot.com subdomain for another subdomain name provided the address is available on Blogger. Or you can change to a custom .com domain name and have Blogger redirect your blog traffic to your new address. You may want to consider these options first before proceeding with deletion)

You have tried blogging and it is not for you and you want to get rid of your blog all together

How to Delete a Blogger Blogspot Blog
1. Login to Blogger if you are not already logged in

2. From the Dashboard select the blog you wish to delete. Make sure you are in the right place if you have more than one blog

3. Navigate to Settings > Basic

4. If you think you may want to come back to your blog at a later date you can use the export tool to export your blog before you delete it. To export your blog click on Export Blog in the Blog Tools menu. If you aren't interested in exporting a copy of your blog to your home computer skip this step

blogger Basic Settings Configuration - Eport Blog - Delete Blog
5. Under the first heading Blog Tools click on the Delete Blog link

6. You will be taken to the Delete Blog screen in Blogger. Check again you have the right blog displayed by checking the name which should appear just above the row of menu tabs.

7. A warning message like the one pictured below will be displaying:

How to Delete a Blogger Blog

8. If you wish to proceed with the deletion then click on the Delete This Blog button

9. You will now be returned to the Dashboard. Notice that your blog is no longer displayed in the list of blogs. If you wish to view your deleted blog you can click on the Show All link at the bottom of the Manage Blogs list in the Dashboard

10. You will now be able to see your deleted blog including details of its deletion date. Follow the link provided to undelete this blog. Blogger allows you 90 days grace.

In this tutorial we have covered some basic reasons why you might want to delete a blog and the steps involved in actually deleting a Blogger Blogspot blog.

Subscribe to: Posts (Atom)

Copyright @ 2014 Hack CF,VinaCF,LikeCF

Blogger Templates ZMTemplates Wallpapers Hack Wfi