Put the Title of the Post in front of the Blog Title to make it more SEO

Putting the title of the post / article is in front of the blog title on the Google search search results so that it is more SEO friendly, is one method / SEO tips that are usually done by most blog owners to improve the SERP position. Because the value of the article title is above the blog title in the eyes of the search engine. So if the target audience for the sampean blog is from the article title query, then this method is powerful enough to improve the SERP. On the other hand, for a very well-known website or blog whose ads often travel on TV or other mass media, I don't think this method needs to be applied. Because most visitors come from the query results of the blog name.

Most of the external templates, free or premium, usually have implemented this method, but there are still some templates that still put the blog title / name in front of the article title, especially the default template from Blogger. Where this will cause a long article title to be cut off on the search engine index results. Surely this is very detrimental right?

To change the post title in front of the blog name in the search engine index results, please follow the steps below:

1. Login to Blogger >> select blog >> click Template >> click edit html. 
2. Look for the code line as below
<title><data:blog.pageTitle/>
</title>

3. Delete the code, then replace it with the code below
<b:if cond='data:blog.pageType == &quot;index&quot;'>
      <title>
        <data:blog.pageTitle/>
      </title>
      <b:else/>
          <title>
            <data:blog.pageName/> ~ <data:blog.title/>
          </title>
</b:if>
4. Save the template

The ~ sign is the delimiter between the title of the article and the blog title in the search engine index results. Please change it according to your taste, with a sign | or >>.

Note: Changes to the search index results will not be immediately visible to old articles / posts, it can take 1 day or 1 week or more, to speed up changes can be by resending the article url (submit url / take as google). 

Also read the article How to delete blog widgets that cannot be deleted

So many tutorials on how to place the article title in front of the blog title. Sorry if there is something wrong in this paper. Hopefully useful and good luck.
No comments:
Labels: ,

How to Make a Back To Top Responsive Button

How to make / install a back to top responsive button with Awesome Fonts like  - What is the back to top button? surely, you already understand the meaning and usefulness of this feature on a blog. The existence of this one button is very necessary for blog visitors to return to the top page, especially if your blog has a very long article and added with many comments, of course this button will be very useful. Besides being able to enhance the appearance of the blog, installing the back to top button can also make your blog user friendly.

There are many ways to make or install the back to top button on the blog, but in this tutorial Bakul Oreg wants to share how to make the button back to top with Font Awesome. You can see an example on this blog (simple but cool hhhh)

The advantages of this method are lighter and responsive because the images that are loaded are not from an image url, but rather a letter (code) that represents an icon (image).


Please follow the steps below: 
First method
Login to Blogger >> select blog >> template >> edit html.
1. Install the Font Awesome bootstrapcdn code just above the code </ haed> (first check if the code already exists, if there is a step past this)


<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>


2. Install the css code below, just above the code ]]></b:skin>or</style>


#back-to-top{background:#53bd84;color:#ffffff;padding:8px 10px;font-size:24px;border-radius:6px}

.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}


3. Install the code below, just above the code </body>


<div class='back-to-top'>
      <a href='#' id='back-to-top' title='back to top'>
        <i class='fa fa-chevron-up'/>
      </a>
</div>

    <script>
      $(window).scroll(function() {
        if($(this).scrollTop() &gt; 200) {
          $(&#39;#back-to-top&#39;).fadeIn();
            } else {
            $(&#39;#back-to-top&#39;).fadeOut();
            }
            });
          $(&#39;#back-to-top&#39;).hide().click(function() {
            $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
            return false;
            });
    </script>


After that, click the template preview to make sure all the codes are installed correctly. If buttonback to top appears in the lower right, that means you have successfully installed the button back to top.
4. Before saving, you should click Format template first, order code javascriptcan function properly, after a new formatted template click save template. 

Second way:
In this second way we will make it as widget back to top.


For steps 1 and 2 the same as in the first way, then click save template.

Next you click layout >> + add gatget (it's up to the sectionsidebar or footer) then click HTML/Javascript. Paste the code in step 3 above (don't forget to give the title temporarily). Then click save.

Note: 
If the Back To Top button appears immediately when the blog page is opened, that means in the template you don't have the following line of code:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

Please copy then paste the code just above the code </head> then click save and see the results, if the button Back To Top nothing and only appears when the page is scrooled then the button is installed Back To Tophas been perfect. 

For those of you who use the standard template from blogger you should use the second method, this button only appears on the web display, to appear on the mobile view, follow the steps below:

Login to Blogger >> select the blog >> template then click the gear icon under the mobile view, then select the special template, then click save.

The next step you click edit html, look for the widget code back to top (here is the use of giving a title to the widget that is to make it easier to search), after finding add the following code: mobile='yes'and don't forget to save the template.
Example:
<b:widget id='HTML6' locked='false' title='Back to top' type='HTML' visible='true'>

After adding the code it will be like this:
<b:widget id='HTML6' locked='false' title='Back to top' mobile='yes' type='HTML' visible='true'>

No comments:
Labels:

How to Change the Next Prev Blogspot Button with Numbers

How to Change the Next Prev Blogspot Button with Numbers


One of the typical traits default template Blogger is the navigation button next prev (blog pager) between the item page and the home page that both still use three choices, namely old posts, new posts, and homepage. And the three navigation buttons will not change even though we have changed the standard template to be responsive . For that, I want to share how to make the next page button on the blog with numbers, or rather change the nextprev button Blogspot that already exists becomes a row of numbers or sequence number 1 2 3 and so on.

Next Prev Navigation


This next page number button will only appear on the main page, label, and archive. Where the page contains a list of articles which are divided into several pages containing a number of articles according to the specified amount. For Blogger default settings are 7 posts / articles per page. By changing the nextprev button with numbers, it will make the appearance of the blog look more beautiful and attractive. 

Before you follow the tutorial how to make the blogspot next page button become a number. It's good to backup / back up your blog template first. 

Also read:



1. As always, enter the Edit HTML template. 
2. Copy and paste the following CSS code above the code .]]></b:skin>

  1. .home-link {

  2. display: none;

  3. }

  4. #blog-pager {

  5. clear: both;

  6. text-align: center;

  7. padding: 15px 0;

  8. background: none;

  9. color: #4d4d4d;

  10. }

  11. .displaypageNum a,

  12. .showpage a,

  13. .pagecurrent, .blog-pager-older-link, .blog-pager-newer-link {

  14. padding: 5px 13px;

  15. margin-right: 8px;

  16. color: #2b2b2b;

  17. border:solid 2px #ebebeb;

  18. display: inline-block;

  19. line-height: 20px;

  20. -moz-border-radius: 2px;

  21. -webkit-border-radius: 2px;

  22. border-radius: 2px;

  23. margin-top: 10px;

  24. font-family:Oswald;

  25. }

  26. .displaypageNum a:hover,

  27. .showpage a:hover,

  28. .pagecurrent, .blog-pager-older-link:hover, .blog-pager-newer-link:hover {

  29. background: #47a7d7;

  30. text-decoration: none;

  31. color:#fff;

  32. }

  33. #blog-pager .showpage,

  34. #blog-pager {

  35. padding: 5px 10px;

  36. font: normal 13px arial;

  37. text-align: center;

  38. color: #000;

  39. float: center;

  40. }

  41. .showpageOf {

  42. display: none!important;

  43. overflow: hidden;

  44. }

  45. #blog-pager .pages {

  46. margin: 10px 0;

  47. border: none;

  48. }



3. Install the javascript code just above the code </body>.
<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;item&quot;,&quot;error_page&quot;}'>
<script type="text/javascript">
  /*<![CDATA[*/
    var perPage=7;
    var numPages=5;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
<script type="text/javascript">
 /*<![CDATA[*/
  if (typeof firstText == "undefined") firstText = "First";
  if (typeof lastText == "undefined") lastText = "Last";
  var noPage;
  var currentPage;
  var currentPageNo;
  var postLabel;
  pagecurrentg();

  function looppagecurrentg(pageInfo) {
      var html = '';
      pageNumber = parseInt(numPages / 2);
      if (pageNumber == numPages - pageNumber) {
          numPages = pageNumber * 2 + 1
      }
      pageStart = currentPageNo - pageNumber;
      if (pageStart < 1) pageStart = 1;
      lastPageNo = parseInt(pageInfo / perPage) + 1;
      if (lastPageNo - 1 == pageInfo / perPage) lastPageNo = lastPageNo - 1;
      pageEnd = pageStart + numPages - 1;
      if (pageEnd > lastPageNo) pageEnd = lastPageNo;
      html += "<span class='showpageOf'>Page " + currentPageNo + ' of ' + lastPageNo + "</span>";
      var prevNumber = parseInt(currentPageNo) - 1;

      //Iccsi was here, doing magic     
      if (currentPageNo > 1) {
          if (currentPage == "page") {
              html += '<span class="showpage firstpage"><a href="' + home_page + '">' + firstText + '</a></span>'
          } else {
              html += '<span class="displaypageNum firstpage"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + firstText + '</a></span>'
          }
      }

      if (currentPageNo > 2) {
          if (currentPageNo == 3) {
              if (currentPage == "page") {
                  html += '<span class="showpage"><a href="' + home_page + '">' + prevText + '</a></span>'
              } else {
                  html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + prevText + '</a></span>'
              }
          } else {
              if (currentPage == "page") {
                  html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + prevNumber + ');return false">' + prevText + '</a></span>'
              } else {
                  html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + prevNumber + ');return false">' + prevText + '</a></span>'
              }
          }
      }
      if (pageStart > 1) {
          if (currentPage == "page") {
              html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
          } else {
              html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
          }
      }
      if (pageStart > 2) {
          html += ' ... '
      }
      for (var jj = pageStart; jj <= pageEnd; jj++) {
          if (currentPageNo == jj) {
              html += '<span class="pagecurrent">' + jj + '</span>'
          } else if (jj == 1) {
              if (currentPage == "page") {
                  html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
              } else {
                  html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
              }
          } else {
              if (currentPage == "page") {
                  html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a></span>'
              } else {
                  html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a></span>'
              }
          }
      }
      if (pageEnd < lastPageNo - 1) {
          html += '...'
      }
      if (pageEnd < lastPageNo) {
          if (currentPage == "page") {
              html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
          } else {
              html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
          }
      }

      var nextnumber = parseInt(currentPageNo) + 1;
      if (currentPageNo < (lastPageNo - 1)) {
          if (currentPage == "page") {
              html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + nextnumber + ');return false">' + nextText + '</a></span>'
          } else {
              html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + nextnumber + ');return false">' + nextText + '</a></span>'
          }
      }

      if (currentPageNo < lastPageNo) {
          //Iccsi was here, doing magic
          if (currentPage == "page") {
              html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastText + '</a></span>'
          } else {
              html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastText + '</a></span>'
          }
      }

      var pageArea = document.getElementsByName("pageArea");
      var blogPager = document.getElementById("blog-pager");
      for (var p = 0; p < pageArea.length; p++) {
          pageArea[p].innerHTML = html
      }
      if (pageArea && pageArea.length > 0) {
          html = ''
      }
      if (blogPager) {
          blogPager.innerHTML = html
      }
  }

  function totalcountdata(root) {
      var feed = root.feed;
      var totaldata = parseInt(feed.openSearch$totalResults.$t, 10);
      looppagecurrentg(totaldata)
  }

  function pagecurrentg() {
      var thisUrl = urlactivepage;
      if (thisUrl.indexOf("/search/label/") != -1) {
          if (thisUrl.indexOf("?updated-max") != -1) {
              postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))
          } else {
              postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))
          }
      }
      if (thisUrl.indexOf("?q=") == -1 && thisUrl.indexOf(".html") == -1) {
          if (thisUrl.indexOf("/search/label/") == -1) {
              currentPage = "page";
              if (urlactivepage.indexOf("#PageNo=") != -1) {
                  currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
              } else {
                  currentPageNo = 1
              }
              document.write("<script src=\"" + home_page + "feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")
          } else {
              currentPage = "label";
              if (thisUrl.indexOf("&max-results=") == -1) {
                  perPage = 20
              }
              if (urlactivepage.indexOf("#PageNo=") != -1) {
                  currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
              } else {
                  currentPageNo = 1
              }
              document.write('<script src="' + home_page + 'feeds/posts/summary/-/' + postLabel + '?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')
          }
      }
  }

  function redirectpage(numberpage) {
      jsonstart = (numberpage - 1) * perPage;
      noPage = numberpage;
      var nameBody = document.getElementsByTagName('head')[0];
      var newInclude = document.createElement('script');
      newInclude.type = 'text/javascript';
      newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
      nameBody.appendChild(newInclude)
  }

  function redirectlabel(numberpage) {
      jsonstart = (numberpage - 1) * perPage;
      noPage = numberpage;
      var nameBody = document.getElementsByTagName('head')[0];
      var newInclude = document.createElement('script');
      newInclude.type = 'text/javascript';
      newInclude.setAttribute("src", home_page + "feeds/posts/summary/-/" + postLabel + "?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
      nameBody.appendChild(newInclude)
  }

  function finddatepost(root) {
          post = root.feed.entry[0];
          var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);
          var timestamp = encodeURIComponent(timestamp1);
          if (currentPage == "page") {
              var pAddress = "/search?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
          } else {
              var pAddress = "/search/label/" + postLabel + "?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
          }
          location.href = pAddress
      }
      /*]]>*/
</script>
</b:if>


Note: 
Adjust the value by setting the number of posts per page on your blog. The value is used to make how many number buttons you want to display. 4. Change all Url menus in the template that display post labels to be as follows. Example:var perPagevar numPages


  1. /search/label/NAMA-LABEL?&amp;max-results=7



  1. <a href='/search/label/Info?&amp;max-results=7'>Info</a>

  2.  

  3. <a href='/search/label/Tutorial%20Blogger?&amp;max-results=7'>Tutorial Blogger</a>




To create a label menu in the page widget (PageList) use the following code format. Example: 5. Look for all the codes as below in the Blog1 widget Delete or change to the following 6. If there is a Label widget in your blog. Look for the code like the following Delete and replace it with the code below. There are 2 similar codes, the first code for List display and the second code for Cloud display. If confused just change everything. 7. Save Themes / Templates. Note: If you change the value (number) on , then also adjust the value on all label Urls.
  1. /search/label/NAMA-LABEL?&max-results=7


  1. /search/label/English%20Article?&max-results=7



  1. <a expr:href='data:label.url' rel='tag'>


  1. <a expr:href='data:label.url + &quot;?&amp;max-results=7&quot;'rel='tag'>



  1. <a expr:dir='data:blog.languageDirection'expr:href='data:label.url'>


  1. <a expr:dir='data:blog.languageDirection'expr:href='data:label.url + &quot;?&amp;max-results=7&quot;'>






var perPagemax-results
No comments:
Labels:
Subscribe to: Posts (Atom)