Sabtu, 15 Agustus 2015

Fixing "headline and datepublished missing and required" in blogger

how-to-fix-structured-data-tool-errors-in-blogger-tutorial-101helper

Since Google is updating posting schema and search results so frequently, bloggers and webmasters are having trouble to cope with it. Previously Structured Data Testing Tool was detecting following errors:

(1). image_url: 
(2). postId: 
(3). blogId:
    how-to-fix-image_url,blogid,postid-errors-in-blogger


    But now two new errors are encountered which are:

    (1). headline: missing and required
    (2). datepublished: missing and required

    In this post I will show you how to fix these errors in blogger. So follow below steps to fix your errors. I am starting from "headline: missing and required" first.

    Method 1: How To Fix "headline: missing and required" In Blogger:

    Step 1: Go to blogger dashboard and navigate to template.

    Step 2: Click on Edit Html to Edit your template.

    how-to-edit-template-in-blogger

    Step 3: Click inside the code and search for below piece of code:

    <h1 class='post-title entry-title' itemprop='name'>

    Or if you don't find it search for below one:

    <h2 class='post-title entry-title' itemprop='name'>

    Step 4: Change 'name' to 'headline' in the code  as shown in below image:

    how-to-fix-headline-missing and required-in-blogger-structured-data-to-esting-tool

    You will find the above code two times or more then two times, make sure to change 'name' to 'headline' in all of these codes.

    Step 5: Save your template and test your blog again using Structured Data Testing Tool.

    How To Fix "datepublished: missing and required" In Blogger:

    If you do it manually it will need hard work and it would be difficult for you so I found an alternative method to fix this error which is much easier then other methods. So follow below steps to fix 'datepublished: missing and required' in your blog.

    Step 1: Go to blogger dashboard > settings and select sub-option(Language and formatting):


    how-to-fix-datepublished-missing-and-required-in-blogger-structured-data-to-esting-tool

    Step 2: Find Formatting and Timestamp Format.



    Step 3: Change time format from default to 8/15/2015 04:33:50 AM(Month/Date/Year Time AM) format as show in below image:


    how-to-fix-structured-data-tool-errors-in-blogger

    Step 4: Click on save settings and go to layout.


    blogger-step-by-step-help-tutorials

    Step 5: On the layout page edit blog posts.


    how-to-edit-blog-posts-in-blogger-101helper

    Step 6: Check/Mark both date and time options in post page options as shown in below picture:


    how-to-change-date-and-time-settings-in-blogger

    Step 7: Change time format to 8/15/2015 04:33:50 AM(Month/Date/Year Time AM) as you did in the settings above(step 3).


    how-to-change-date-and-time-settings-in-blogger-101helper

    It should be like above image.

    Step 8: Click on save and you are done.

    Once again check your blog with Structured Data Testing Tool, I am sure this time you will see All good!

    If you still have errors in your webmaster testing tools then you have to do all this manually so follow below steps to add codes manually.

    Method 2: Fixing "headline and datepublished missing and required" in blogger Manually!

    Step 1: Go to your template and edit it.

    Step 2: Search for below code:

    <div class='date-posts'><div class='post-outer'><div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

    Step 3: Copy below code and paste it below the above code:

    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><span class='updated'><data:post.dateHeader/>T<data:post.timestamp/></span></abbr></a>

    Step 4: Now search for this code:

    <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

    Step 5: After finding above code just below it paste this one:

    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><span class='updated'><data:post.dateHeader/>T<data:post.timestamp/></span></abbr></a>

    Step 6: Now search again for the below code:

    <meta expr:content='data:post.canonicalUrl' itemprop='url'/>

    You may find this code 2 or 3 times

    Step 7: Add the below code below each of the above codes(step 6):

    <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><span class='updated'><data:post.timestamp/></span></abbr></a>

    Step 8: Click on save and you done!

    Important Note: Make sure to follow step 5,6 and 7 in the first method of fixing these errors!

    If your blog have other errors like img_url, postid, blogid then read How To Fix Google Webmaster Tools Errors In Blogger 


    If you still see any problem you can discuss it with me in comments or by contacting me.

    If this post helped you then please take a second to share it with others. Follow ans subscribe for latest posts updates. Keep visiting 101Helper :)

    Search Tags: How to fix Structured data tools errors in blogger,blogid,postid,headline,image_url,datepublished error fixing tutorial for blogger,Google webmaster tools tutorials for blogger 101helper.blogspot.com

    Jumat, 31 Juli 2015

    How To Use Google Adwords To Increase Blogger Blog Traffic

    how-to-use-google-adwords-in-blogger-101helper

    As far as I am concerned with blogging, Google Adwords is the only ad network which I prefer best to advertise a blogger blog. Although I get my whole traffic from search engines but in the beginning I used Google Adwords to promote my blog. You can also use Google Adwords to promote your blog and help it to start running. 


    Why Google Adwords?

    Only few of us know how to use Google adwords and its good for blogger because of its policy which is to pay only when you get clicks. It means you don't have to pay a fixed amount to advertise your blog but you choose your own budget and also pay per click amount. Moreover if you don't get clicks and your site is against Google Adword's policy you will get your money back. It has tremendous features which makes it better than other advertising networks.


    Payment Methods:


    - Credit Or Debit card.

    - Bank Account.

    Mobile App:




    Stay up to date about your ad campaign clicks and impressions via smart phone app(Andoid/iphone). Just go to your phone's app store and download Google adwords app. Login by using your blogger account and stay updated about your campaign as well as keep full control over your account from your phone.

    How To Use Google Adwords For Blogger Blog?


    Well it seems that using Google Adwords is very difficult to understand but it isn't so. Even a beginner can start promoting his blog with it, all you need is a way to pay and follow this tutorial. So lets begin, follow below steps to start promoting your blog through Google Adwords.


    Step 1: Go to blogger dashboard and navigate to Campaigns.



    how-to-use-google-adwords-in-blogger-101helper

    Step 2: Click on Start Now.



    Advertise-blogger-blog-101helper

    Step 3: Wait for the page to load and refresh it if its not showing anything.


    Step 4: Type your Email, Select your country, Select your time zone and your currency(in which you will pay for advertising).



    advertise-blogger-blog

    After selecting desired options click on save and continue to proceed away. Congratulations! your adwords account has been created.



    How To Create My First Ad Campaign In Google Adwords?

    Read and follow below steps to create your first campaign and start promoting your blog/website.


    Step 1: Click on Create Your First Campaign.




    Step 2: Give a title to your campaign, Select the type of ads either Standard or All features, Choose networks and devices(on which ads will show up e.g computer, tablets, mobile etc).




    Step 3: Scroll down the page and move to Locations, here you have to choose the countries in which you would like to show your ads. Choose All the countries or your own country or if you want to target specific country then choose Let me select. If you choose Let me select then type the name of the country in the search box below and select it.


    After location you have another option below "Languages" so check the languages in which you would like to show your ads. Be sure that the languages you select aren't only languages but these languages will decide that on which Google domain your ads will appear. 


    Say that you choose English, now your ads will be shown on the Google domains which have English language e.g Google.co.uk, Google.com, Google.pk. 


    It doesn't mean that your ads will not be shown in the countries you choose. 



    how-to-use-google-adwords-blogger-tutorial

    Step 4: In step 4 there are three things that you have to deal with, one is to choose a bid strategy, budget for your ads and other is to ad extension to your ads.


    Choose Basic options in bid strategy because Advanced options are difficult to understand.


    - In bid strategy area you have two options:

    1. Adwords will set my bids to help maximize clicks within my target budget.
    2. I'll manually set my bids for clicks.
    Choose I'll manually set my bids for clicks because if you let Google to choose bids for you then you will get more and more traffic but have to pay high rates.

    how-to-set-bid-in-google-adwords-101helper
    How to set bids in Google Adwords?

    After choosing I'll manually set my bids for clicks you will have two options:

    1. Default bid.
    2. Budget.
    In the default bid type the rate which you will pay for each click(PPC).

    Tip: For a quick boost in traffic while spending lowest amount set $0.05 as default bid.

    In budget area type $1 or $2 no matter what you type but it is just a limit in which you will pay Google Adwords. For example if you set a budget of $1 and default bid $0.05 then you will get 20 clicks for 1 dollar and after that your ad will stop running because your daily budget is consumed. If you don't get 20 clicks in a day then your remaining budget will be used next.

    What Is Ad Extension And How To Use It?



    ad-extension-google-adwords-blogger-101helper

    Ad extension is an optional feature to include relevant business info with your ads e.g location, sitelinks, call info.


    So if you want to use this feature just check any of the given option and follow instructions to proceed away. 


    Step 5: Click on Save and continue and you have successfully created your first campaign now its time to create an ad group which will include you ads so follow next step.


    Step 6: Give a name to your ad group and below it design your ad look. You can see a preview of your ad on the page.



    how-to-create-ad-in-google-adwords

    Step 7: Scroll down and write your keywords in the given text area as shown in below photo. Write 10-20 keywords on after other.



    how-t-add-keywords-in-google-adwords-101helper

    Step 8: After writing keywords click on Save and continue to billing as shown in below image:



    how-to-set-keywords-in-blogger

    Setting Up Billing Settings In Google Adwords:


    Step 9: Select your country and click on Continue.



    set-payment-settings-in-google-adwords-blogger-101helper

    Step 10: Select account type as individual and fill up your info. E.g your name, address, phone number etc and scroll down the page.



    billing-settings-in-blogger-google-adwords

    Step 11: Select Automatic payments in How you pay option and the payment method is chosen in step 9(you can pay with either credit or debit card or by bank account depending on your country).




    Fill up all your info carefully and choose your billing language also.


    Step 12: Check the Yes, I agree the above terms and conditions and click on complete sign up.



    how-to-signup-google-adwords

    Congratulations! you are done successfully. You can read more about Google adwords below e.g how to create more campaigns or edit the existing one, how to change billing info and account info and also how to cancel your account any time.


    How To Make Changes In Settings?


    Although payment settings and other settings are configured and saved at the time of setting up account but later you can change your payment as well as account settings. To change your account settings just click on the settings button on the top-right-corner of the page.



    To create more ads and ad-groups just navigate to campaigns and click on  +CAMPAIGN 

    I hope you like this post if you have any question ask me in comments or contact me. Follow through social networks and subscribe to Newsletter for E-mail notifications about new posts. Share this post with others and help me spread my blog. 

    Search Tags: How to Use Google Adwords, Google adwords help, Google adwords for blogger, Step by step tutorial Google adwords, Increase traffic Google adwords,Get Google Adword's tips,Advertise blog low rates,101Helper blogging tutorials


    Jumat, 10 Juli 2015

    How To Add Smart Search Box In Blogger

    swiftype-smart-search-blogger-tutorials
    Swiftype smart search box for blogger blogs

    Search box could be called the fuel of a blog because it runs your blog. People find their desired content through search box. As it is a very useful widget so it is available in many styles in different blogs because everybody is trying to make his blog unique from other. Although blogger has a built-in search box in the navbar as well as in widgets list but most of the blogger prefer to use customized search boxes because they look good.


    Most of the search boxes are customized by CSS and some are designed by using some javascript also to enable some great features like auto-complete. 

    But its not easy to use the search boxes having auto-complete feature because it needs alot of work and you have to add each suggestion manually. So advance bloggers are using advance search box like Google custom search engine. Because it has suggestion feature but it slows down your blog as well as need manual work for auto-complete suggestions. 


    So this time I brought you a smart search box which has some great features. You can read these features below:


    (1). It is free of cost and floats on the bottom corner of your blog.

    (2). It is easily customizable.
    (3). It crawls your blog automatically and show suggestions based on keywords.
    (4). Easy to setup.
    (5). You can use a single account for a single blog with free account. But you can upgrade to a premium account.

    Don't Miss:

    Demo:


    smart-search-box-blogger-101helper

    You can see a live version of this search box at http://trickme1.blogspot.com

    How To Install Smart Search Box In Blogger:



    Step 1: Go to https://swiftype.com/users/sign_up and register a free account by typing your full name, E-mail, Password and Phone number.


    smart-search-box-blogger-101helper-gadgets

    Step 2: Now log-in to your account here.


    Step 3: Click on Create A Search Engine And 



    how-to-add-smart-search-box-in-blogger

    Step 4: Enter your blog address and click on verify.



    how-to-add-smart-search-box-in-blogger-tutorial

    Step 5: Enter name of your search engine and click on Create Engine to proceed away.



    blogger-help-tutorials-101helper

    Swiftype will start crawling and indexing your posts immediately.


    Step 6: Scroll down the page and click on Install Search Engine.



    install-search-engine-for-blogger

    Step 7: Click on Start Installation



    widgets-for-blogger

    Step 8: Customize your search engine's appearance e.g search results, number of search results etc and then click on next.



    autocomplete-search-box-blogger

    Step 9: Customize auto-complete appearance and click on next.


    search-box-for-blogger-101helper.blogspot.com

    If you want to disable auto-complete check the Disable auto-complete option.


    Step 10: Make color Customizations e.g Primary Links color and Text Highlighting color and click on save and preview. 


    color-picker-for-blogger-101helper

    You can use color picker but if you want to choose a specific color and get its code then use 101Helper color picker.


    Step 11: See preview of your search box and click on save.


    Step 12: Its almost done now just scroll down the page and click on Activate Swiftype.



    color-picker-for-blogger-101helper

    Step 13: Copy the code of your Swiftype search engine.



    blogger-widgets-codes-101helper

    Step 14: Go to blogger dashboard and navigate to template > edit html.


    Step 15: Click inside the code and hit Ctrl+F.


    Step 16: Type </head> and hit enter.



    how-to-edit-blogger-template

    Step 17: Just above it paste the copied code as shown in above image.

    Step 18: Click on save template and finally you are done!


    How is this post? Is this gadget working in your blog properly? Please give me your feedback by leaving a comment below. If you have any problem in above steps feel free to ask me. 


    Follow and subscribe to our news letter for latest updates. Share this post with others and help us spread our voice.



    Search Tags: How To Add Smart Search Box In Blogger, Aut-complete search box, Smart blogger gadgets and widgets, 101Helper blogger gadgets tutorials, Smart search box blogger.

    Selasa, 23 Juni 2015

    How To Add Fanciest Author Box Below Posts In Blogger

    Fanciest-author-box-for-blogger

    Author box is among the trending widgets now a days because people who have blogs or websites want to get more followers and stay in touch with their fans. My recent post was also about "Author boxes with different styles for blogger" and once again I am about to share a new author box which will be added below every post in your blog. It is called fancy author box. It is designed with javascript and css and doesn't effect your blog's load time.



    fanciest-author-box-blogger-101helper

    See a live demo at http://http://trickme1.blogspot.com/2015/06/all-changes-that-you-can-make-in-this.html


    If you liked this gadget and want to add it in your blog below every post then follow below mentioned steps:


    Step 1: Go to blogger dashboard and navigate to template.




    Step 2: Click inside the code and search for below code by using Ctrl+F on your keyboard:



    <div class='post-footer'>

    how-to-find-code-in-blogger-template

    Step 3: You will find the above code two times if you are using simple template but if you are using a custom or other template then you will find it many times. Now copy the below code and paste it after the second code in simple template and in other template paste it after third code.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <link href='https://googledrive.com/host/0B-3SIKm-BBF_R3JrV2RQbEFnYm8' rel='stylesheet'/>   <script src='//code.jquery.com/jquery-1.10.2.js'/>   <script src='//code.jquery.com/ui/1.11.4/jquery-ui.js'/> <br/> <div id='tabs'> <ul> <li><a href='#fragment-1'><i class='fa fa-user'/> Bio</a></li> <li><a href='#fragment-2'><i class='fa fa-facebook-square'/> Facebook</a></li> <li><a href='#fragment-3'><i class='fa fa-twitter-square'/> Twitter</a></li> <li><a href='#fragment-4'><i class='fa fa-instagram'/> Instagram</a></li> <li><a href='#fragment-5'><i class='fa fa-google-plus-square'/> Google+</a></li> </ul> <div id='fragment-1'> <img src='https://lh3.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s120-c/photo.jpg' style='width: 90px;'/><h4>Fahim Raza</h4> <p>I am fahim Raza and this fancy author box is designed by me. Its free for blogger. Do not copy!! </p></div> <div id='fragment-2'> <img src='https://lh3.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s120-c/photo.jpg' style='width: 90px;'/><h4>Fahim Raza</h4><p style='position: absolute;bottom: 50px;width: 80%;left: 19%;'>Follow me on Facebook!</p> <div class='fb-follow' data-colorscheme='light' data-href='https://www.facebook.com/zuck' data-layout='button_count' data-show-faces='false'/>   </div> <div id='fragment-3'> <img src='https://lh3.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s120-c/photo.jpg' style='width: 90px;'/><h4>@Fahim Raza</h4> <div class='twitter'><a class='twitter-follow-button' href='https://twitter.com/TwitterDev'> Follow @TwitterDev</a></div><p style='position: absolute;    bottom: 45px;width: 80%;left: 19%;'>Follow me on twitter</p>   </div> <div id='fragment-4'> <img src='https://lh3.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s120-c/photo.jpg' style='width: 90px;'/><h4>Fahim Raza</h4> <p style='position: absolute;    bottom: 40px;width: 80%;left: 19%;'>Follow me on Instagram!</p> <div class='instagram'><span class='ig-follow' data-count='true' data-handle='igfbdotcom' data-id='5479dee' data-size='medium' data-username='false'/></div></div> <div id='fragment-5'> <img src='https://lh3.googleusercontent.com/-p4_CJcGp4AM/AAAAAAAAAAI/AAAAAAAAABM/vdNgm0VFg70/s120-c/photo.jpg' style='width: 90px;'/><h3 style='position: absolute;top: 39px;left: 17%;font-size: 22px;color: #5B96DD;'>+Fahim Raza</h3> <p style='position: absolute;    bottom: 50px;width: 80%;left: 18%;'>Follow me on Google+</p> <script src='https://apis.google.com/js/platform.js'/> <div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/u/0/115567523686578759435' data-rel='author'/>   </div> <script src='https://googledrive.com/host/0B-3SIKm-BBF_TE1qbnR4VGpwR3c'/> <script>(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src=&quot;//x.instagramfollowbutton.com/follow.js&quot;;s.parentNode.insertBefore(g,s);}(document,&quot;script&quot;));</script> <div id='fb-root'/> <script src='http://googledrive.com/host/0B-3SIKm-BBF_U0E1ZHM2OFZ3Vzg'/>   <script src='http://googledrive.com/host/0B-3SIKm-BBF_UnoyMXJVUnJLMWs'/></div>
    </b:if>


    how-to-add-fancy-author-box-in-blogger

    Step 4: Make changes in the above code according to your choices. I have highlighted my name and links all you have to do is to replace them with your name and social profile links.


    Step 5: Click on save template and you are done.



    how-to-save-template-in-blogger

    I hope you like this gadget and its working in your blog, if not please let me know by leaving a comment below. 

    Try more blogger gadgets and widgets here.

    Follow and subscribe below to get latest blogger gadgets news.

    Share this post with other bloggers around you!


    Search tags: How To Add Fanciest Author Box Below Posts In Blogger, Fancy author box for blogger, Fancy author box blogger, Author boxes for blogger with different styles, all in one author box blogger,101Helper gadgets for blogger.