Zealmat Tech Blog: Blogger tutorial
Showing posts with label Blogger tutorial. Show all posts
Showing posts with label Blogger tutorial. Show all posts

Thursday

How To Add Labels To Blogger Posts

Blogger.com is one of the most simplest platform and easy to use base on how it was being built.

Having a blog is very important  and also adding a label  to your post is a nice idea that allows your visitors to be able to get the right information properly without any issues.

So today we are going to be talking on how to add a label to your post on blogspot and make sure you add label to those  post which you haven't add to before.






Step 1
First  you need to create a new post or you can just click on an already published post to edit. On the right hand side you will see “Post Settings.” Click on “Labels.”


Blogger label



Step 2
Then add or write all the labels that you would like to categorize your post and Make sure each label is separated by a comma and a space then before publishing your post.


How To Add Labels To Blogger Posts




Step 3
Finally  try to view your published post, you will see your labels appear at the bottom of your post.





Step 4
Then for additional  purpose just click on layout and add a gadget that has many options to list your labels on your sidebar for easy reference and that's  all. 
Read More »

Saturday

How To Add Adsense Ads Before, Between or Below Posts on Blogger Blog

Adding adsense ads before, between or below posts on blogger blog is a very good idea if you really want to increase your earnings but you have to place your ads in a responsive manner so as to allow you visitors read well in your site.

Recently google has been kicking some of those people who violate it policy as in regards of ads placement but do you know placing to much ads doesn't guarantee you of making more money?

Today we have some little steps so as to enable you add you ads responsibility not an how must especially the entertainment bloggers so take note that this tutorial is not for you to add excess ad unit on your site that will stop your visitor's from coming back but before we start have you heard of match content ads unit for Google AdSense I know must of you are not yet eligible for that but it help in increasing your AdSense earnings too




Step 1
First you need to visit AdSense.com then login to your dashboard.


Step 2
Now create new responsive ad unit, parse it here and paste the code somewhere safe.



Step 3
Log on to your blogger dashboard and select your blog which you will like to place your ads on.


Step 4
Then move your mouse down to Theme and click on Edit HTML




Step 5
Now Click any part inside the html code box, and press CTRL + F on your keyboard and search for


</head>



Step 6
Now Paste the below codes right above the </head>



<style>
 .post span.title-ads{font-size:16px; text-align:left; background:#fff; font-weight:bold; display: block;margin:10px 0}
</style>




Arrangements

Replace Background #fff - Replace #fff with your color code

Replace font-size:16px - Replace s16px with your own font size

text-align: left - Replace with left or right



Step 7
Again search for the below code using CTRL + F on your keyboard


<b:includable id='main' var='top'>



Step 8
After searching, you should see a line of codes similar to the below codes.


<b:includable id='main' var='top'>
  <b:if cond='!data:mobile'>
    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>
        <!-- Ad -->
        <b:if cond='data:post.includeAd'>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </div>
    <!-- navigation -->
    <b:include name='nextprev'/>
    <!-- feed links -->
    <b:include name='feedLinks'/>
  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>
  <b:if cond='data:top.showPlusOne'>
    <data:top.googlePlusBootstrap/>
  </b:if>
</b:includable>




Step 9
Now Replace any of the above codes with the below code. Make sure you replace properly.



              <b:includable id='main' var='top'>
  <b:if cond='!data:mobile'>
    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='post'>
<span class='title-ads'>Ads Spot</span>
PASTE ADS CODE HERE
</div>
</b:if>
      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post' index='x'>
        <b:if cond='data:post.isDateStart and not data:post.isFirstPost'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comment_picker'/>
        </div>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:x==1'>
<div class='post'>
<span class='title-ads'>Ads Spot</span>
PASTE ADS CODE HERE
</div>
</b:if>
<b:if cond='data:x==3'>
<div class='post'>
<span class='title-ads'>Ads Spot</span>
PASTE ADS CODE HERE
</div>
</b:if>
</b:if>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<div class='post'>
<span class='title-ads'>Ads Spot</span>
PASTE ADS CODE HERE
</div>
</b:if>
    </div>
    <!-- navigation -->
    <b:include name='nextprev'/>
    <!-- feed links -->
    <b:include name='feedLinks'/>
  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>
  <b:if cond='data:top.showDummy'>
    <data:top.dummyBootstrap/>
  </b:if>
</b:includable>


Make sure all ads code pasted are parse already

That's all and if you find any difficulty in doing this just send me a mail thanks.
Read More »

Sunday

What is a Blog and choosing a Niche

A blog (also called a weblog or web log) is a website consisting of entries (also called posts) appearing in reverse chronological order with the most recent entry appearing first (similar in format to a daily journal). ... Blogging: The act of writing a post for a blog. Blogger: A person who writes content for a blog.
image

blogging has being fetching money for so many Nigeria and it has being one of my major source of earning as a student in the university but in this game of blogging you cant succeed without passion .

passion is the strong and barely controllable emotion we have different things and problem to handle everyday of our life but when we see they feature we wont look back and we struggled through the pains of posting and updating on our blog.

first my question is what niche would you like to start with? here is a link to decide wich niche then comment immediately

http://bit.ly/2qvGsZc

Nigeria News (Over 6 million readers every month)
Entertainment News (Over 6 Million Readers every month)
Live score (over 5 million readers every month)
Jobs in Nigeria (Over 5 Million readers every month)
Celebrity Gossips (Over 4 Million readers every month)
Nollywood Films (Over 4 Million readers every month)
Business Ideas in Nigeria (Over 3 Million readers every month)
Naija Musics (Over 4 Million readers every month)
Football News (Over 2 Million readers every month)
School News Updates (Over 500k readers every month)
How to Guide (Over 5 Million readers every month)
Make Money Online (Over 800k readers every month)
Free Browsing Cheats (Over 500k readers every month)
Technology (Over 500k readers every month)
Health (Over 500k readers every month)
Scholarships (Over 500k readers every month)
Prayer Points (Over 1 Million readers every month)
Sugar Mummy (Over 1 Million readers every month)
Sugar Daddy (Over 1 Million readers every month)
Blogging (Over 500k readers every month)
Fashion (Over 400k readers every month)
Cooking Tips (Over 100k readers every month)
Affiliate Marketing Tips (Over 200k readers every month)
Weight Loss (Over 200k readers every month)
Web hosting (Over 200k readers every month)
Phone Reviews (Over 200k readers every month)
Wedding (Over 200k readers every month)
Relationship (Over 200k readers every month)
Real Estate (Over 200k readers every month)
Politics (Over 200k readers every month)
Read More »

Saturday

How To Implement AMP(Accelerated Mobile Page) on Blogger Blog or Blogspot

AMP(Accelerated Mobile Pages) is a new web language created by Google to make websites load faster on iPhones, Androids, and other smartphones. Originally aimed at news websites and blogs, AMP is a stripped down version of standard HTML and JavaScript that better optimizes websites by prioritizing content loading and prearranging photos.

Image

I most people might be thinking this feature is only used or created for those on the WordPress platform but today we will show you how to add the AMP to your Blogger or blogspot blog just follow the steps below carefully.



Step 1
First you need to log into your blogger dashboard then select your preferred blog.




Step 2
Now scroll your mouse down to theme and click on it.





Step 3
Then click EDIT THEME.





Step 4
Now press CTRL + F and search for this code  <html> just replace the code with the following code below


<html amp='amp'>




Step 5
Carefully look for the charset and viewport meta tags. If not present, copy and paste the following code after <head>.


<meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>





Step 6
For your blog discoverable make use of canonical tag. Check for the for the canonical link tags. If not present, add the canonical link like 

<link rel="canonical" href="http://example.blogspot.in/article-metadata.html" /> 


It will now point to itself just Copy and paste the following code after the viewport tag.

<link expr:href='data:blog.url' rel='canonical'/>






Step 7
Now Replace </head> code with the following code:




<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head>









Step 8
Change your img tags into amp-img tags just like one below.

<amp-img src="AmpImage.jpg" alt="amp-img" height="100" width="200"></amp-img>





Hope you enjoyed it
Read More »

Tuesday

Gain More Backlink from Those who Copy and Paste Directly From your Website or Blog

How to gain more backlink from those who copy and paste directly from your website

Backlink can be define as a link one website gets from another website. Backlinks make a huge impact on a website's prominence in search engine results. This is why they are considered very useful for improving a website's SEO ranking. Search engines calculate rankings using multiple factors to display search results.

Image



33across is another seo tool it helps your blog seo in terms of duplicates.

33across is a free service that helps you track copied content from your site with full details and it serves as a means of gaining more backlinks to your site, if any one copy your content from your site the 33across will help you add a backlink to any of your article and it has some unique features like.


  • Tracking numbers of backlinks generated
  • Gives you full stats of traffic coming to your site
  • Add free social media sharing button on your posts
  • Identifies keywords more of visitors use



Now let’s go straight to the point


Step 1
You need to visit 33across which was known before as tynt and sign up for a free account.





Step 2
Then click on siteCtrl then you will be given a JavaScript




Step 3
Then copy that JavaScript and paste in your site header below <head>

Or or your can check here You will also be provided with some tips and are basically meant for those on blogger, WordPress, Joomla, and Tumblr.





Step 4
If you have save the script, go back to the 33across and test the installation.



Here are some result on the first day I inserted this code to my blog and it has really done well in the increase of traffic.



This are list of what people copy from my blog both image and text wow😁

Happy blogging....
Read More »

Wednesday

How to Add a Widget to Blogger

Some blogging applications, like Blogger and wordPress, use widgets to enable bloggers without HTML or CSS knowledge to modify the design and content of their blogs using a simple point-and-click or drag-and-drop system through widgets. Widgets are most frequently used to customize blog sidebars.
Blogger.com has so many new and good widgets that allows you beautify your blog in a good manner that pleases your visitors.

Below as some easy steps on how to add a widget to blogger just follow it carefully.









Step 1
Firts you need to go to Blogger "www.blogger.com"

Image


Step 2
Now click on the SIGN IN Button which is located at the upper-right corner of your window.



Step 3
You can now log in with your Google ID. If your Google account appears on the screen, click on it, otherwise, click on Add account.



Step 4
Then enter your Google password and click on Sign in.



Step 5
Now move your move to the top and Click on 🔽 closely located at your blog title that appears below the word "Blogger"



Step 6
Then select your preferred blog from the drop-down menu.



Step 7
Then click on the title of the blog to which you'd like to add a gadget on any section like"Recent blogs" or "All blogs" section.



Step 8
Now click on "Layout" which is located at left side of the window in the Blogger dashboard.




Step 9
Scroll down and click on  Add a Gadget. S

Image


Step 10
Then select a button in the part of the layout where you want the gadget to appear, like the cross column or a sidebar.



Step 11
Scroll down and select a gadget.


Or if you want to add a custom HTML or JavaScript widget, add the HTML/JavaScript gadget from the "Basics" menu and enter the widget's code in the dialog box that appears




Step 12
Click on Save. It's in the lower-left corner of the dialog box.




Step 13
Click on Save arrangement. It's an orange button in the upper-right portion of the window. This saves your gadget and takes it live on your blog.
Read More »

Thursday

Change Anonymous Avatar in Blogger Comments

author-pic About author
Paul Nwachukwu is a professional blogger,hoping to help you and your business at Reputatustech




Today on Zealmatblog. We will learn how to change Anonymous Avatar in Blogger Comments. This feature has been added by Blogger. You might have noticed some blank picture when some one comment Anonymous in Blogger comment. The reason why that blank picture appears is because the user have no image on their profile.




Continue Reading to learn how to customize it.

See the Demo Below.



How to Change It: Follow below steps carefully. And If you face any problem, you can tell me by comment.





Step 1. Go to Dashboard >> Template >>click on the >> Edit HTML button


Step 2. Click anywhere inside the code area and to open a search box type CTRL+F from keyboard.


Step 3.Type or paste following code into the search box and hit enter.

</body>




Step 4.Just above the tag, add the following code:


<script> var oldSrc = '//img1.blogblog.com/img/blank.gif'; //Default blogger image link var newSrc = 'https://3.bp.blogspot.com/-UNjtW9_9fcs/VrvrBJi_8CI/AAAAAAAABP4/jjFMkoCi6Ig/s1600/blank-user-avatar.png'; //New image link $('img[src="' + oldSrc + '"]').attr('src', newSrc); </script>





Step 5. Save the changes by clicking on the Save Template button. Thats all, found it helpful share with friends.
Read More »

Sunday

Reasons Why Traffic So Hard To Get

There is a small secret to it, or well, not a secret but a method I discovered when I first got into blogging for income.

Stop thinking about traffic, income and all of that. Blog about something YOU like and that you KNOW something about. How does this work?
Image

Simple, I used to run an old blog in the gaming niche, I wrote maybe ten posts and after a month, no results. I kinda gave up. Then suddenly one day, I got a traffic report that I had over a thousand daily visitors. I was quite shocked as the only SEO I actually did was using my keywords in the posts.
What made the blog fairly popular in that specific niche was simply that I was human. I didn't act like someone who wanted to make a quick dime. People liked my content and how I interacted with the readers.

While remembering SEO and all related to it, it's still important to write naturally, when it comes to blogs that is. Look at the biggest blogs out there, they write about something they love and get famous for it because of it.

And yes, writing more posts increases your traffic obviously, however make sure to write good. But remember, blogs are blogs, not ecommerce sites, not company sites but blogs.

Note: My blog also offered free products in the niche so that also helped a great deal to get traffic. Also, the niche wasn't saturated, I only had about thirty competing sites, so beating them wasn't hard when I was the only passionate and active person in the niche.

Second note: I just realized that I made a huge post when I could have summarized it all..



3 tips that I have found critical to success:


  1. Headings with questions rather than answers stimulate interest if your audience truly relates. For example, "Are you having a problem losing weight?" rather than, "Weight loss solutions". Then, once they are stimulated to read, connect in to the question in your header. For example, "If you're having a problem losing weight, you're probably feeling discouraged. I know I was, but what I found was......"
  2. Write for your audience not for yourself. Have you got a specific target audience with a real need? Because you need to be writing for them rather than yourself.
  3. Make your content viral by making it entertaining or enlightening and then syndicating it on social media sites.



There's no guarantees in the blogging world, but I hope you find these tips helpful and have great success in the future.


Read More »

Wednesday

Blogger.Com - Create A Unique And Beautiful Blog

Blogger is a platform that helps you create a beautiful blog and easy to customize with less coding. Blogger has being in existence for so long and has some wonderful features and theme which was recently updated.
Image

Blogger is powered by Google and it is very cheap for it users because you just need a domain name with a good design and that's all.



Just follow this steps carefully and if you have any issue try to drop it in the comment box below



Step 1
First you need to visit your www.blogger.com




Step 2
Now click on Sign In. It is located at the upper-right corner of the screen
Image



Step 3
Enter a Display Name and click Continue to Blogger.



Step 4
Then click on Create New Blog tab at the top.



Step 5
Now type a title for your blog, short and simple
Image



Step 6
Type a URL for your blog most time it might be unavailable just be sensitive.



Step 7
Enter the word verification and click Continue.



Step 8
Then select your template or theme, the main design and layout of your new blog.


Step 9
Now finally click on "Create blog".



Step 10
Click on "Theme". It's near the bottom of the menu on the left side of the page. This allows you to customize the look of your blog beyond the elements contained in the starter template.

Image



Step 11
Customize the design by Clicking on "Customize button" for easy customization.

OR

Click on "Edit HTML" if you know more about HTML coding




Step 12
Scroll down and click on Settings, here you can adjust other settings like "language", search engine visibility, and many more




Step 13
Then click on "Posts, comments and sharing". In this menu, you can adjust publishing, comments, and if or how your blog is shared beyond the Blogger platform.




Step 14
Finally Click on "Basic" and then +Add authors or admins.



Learn How to Create Post, Draft Post And Publish Post on Blogger Blog
Read More »

Friday

How To Write A Save Copywrite Post For Your Blog

author-pic About aauthor
olawoyin toluwase is a Nigerian base blogger, passionate tech writer, webdesigner , IT student. You can meet him on Facebook





Hello reader it’ has been a while today I will be sharing with you how to write a blog post and keep you self abstain from copy write
Image

N.B this post is first on net so I would like to see your comment below
Years back I personally, found it difficult to write posts and I hate copy and paste meanwhile I write tech, blogging, hacking, how-to, and related stuff. i made research to learn how to write post But throughout the research I made then, on how to write a post it all proved futile, none of the post could proffer solution to my problem until I come up with this very idea I`m giving you and I`m very sure after you read this post you must be able to write your own post and be free from copy and paste Without wasting much time we go with the step below 



1. Choose a topic to write on : the first thing do in writing an effective post is choosing a topic and understand the topic you choose : choose a topic your reader will love to read and be passionate to practice just as I have chosen this topic.


2. Let other write for you : Do make research on the topic nothing new under the world that still worth of cracking brain in this days of advanced technology : the best thing for a writer is to be a searcher ; read many post on that very post you are writing on at least read up to 5 post.



3. Do jutting in your research: Draft down some things out of your research take out the key (main point) of all you read even if you will not use them. relate them together, see how it look and set a book.



4. Extract out the best point : after your research, write your point in a book and mark the most relevant point you got to build your own post.


5. Arrange your point : the next thing is to arrange you draft develop it and make it meaningful.



6. Make your post vocabularies free : be mindful of this while writing post : don’t use too much grammar in you post so your reader will understand all you`ve done also let your post be typographical error free it also matter take note.


7. Do review : this is the overall main point you must consider before you lunch you post for publication, let other in that field of your write up review the write up and aft all review then you are good to go with the publication.

incase you have any question you can contact me on olawoyintoluwasee@gm­ail.com.

Read More »

How to Remove Drop down Menu from Blogger Mobile View

The awesome template created by Tina has being one of the best template and it has a Google layout and background and easy to customize

Most time your blogs new visitors find it difficult to to view most pages on your site and you don't expect all your visitors to be a blogger mostly on the entertainment niche but we have to make things more easier because 70% of our visitors or internet users today are using mobile device to access the net  so today  we  are going to be working on this with the following steps below and you after this we will want to know how you perform this if successful or not




Step 1
First you need to sign into you blogger dashboard the select your preferred blog from the list



Step 2
Now move your arrow down




Step 3
Click on "Theme" 



Step 4
Backup your template




Step 5
Then click on Edit HTML'



Step 6
Press ctlr F and search for this code below

<select expr:id='data:widget.instanceId + &quot;_select&quot;'>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<option expr:value='data:link.href' selected='selected'><data:link.title/></option>
<b:else/>
<option expr:value='data:link.href'><data:link.title/></option>
</b:if>
</b:loop>
</select>
<span class='pagelist-arrow'>&amp;#9660;</span>





 

Step 7
Then once you find the above codes, replace them with the codes below

<div align='center' class='tabs-outer'>
<strong>
<b:loop values='data:links' var='link'>
<span> <a expr:href='data:link.href'><data:link.title/></a> </span>
<!--separator-->
</b:loop>
</strong>
</div>
<div class='clear'/>



Step 8
Click "Save Template"



Step 9
Now go to "Template" > "Customize" > "Advanced" > "Add CSS"



Step 10
Copy and paste the code below, in the "Add CSS" box


.mobile .tabs-outer { 
color: #333;
text-align:center;
width:auto;
overflow:hidden;
margin:0;
padding:0px 0px 0px 0px;

}


.mobile .tabs-outer span a {
color: #fff;
padding:0 7px;
margin:0;
}

.mobile .tabs-outer span a:hover {
text-decoration:none;
color: #fff;
font-size:1.0em;
padding:0 5px;
margin:0;
}


Step 11  
 Finally click on the "Apply to Blog" button






And that's all you need your visitors can now access your pages easy and faster and keep visiting zealmat.com for more tips
Read More »