How To Make Responsive Table On Blog Posts

How To Make Responsive Table On Blog Posts - Table is a list contains an overview of a number of facts and information. Typically facts or information as names and numbers arranged in the order of columns and rows. The function of the table is to explain a fact or information in a concise and more interesting than in words. Besides the table also serves to support the authors convey an idea or ideas that can influence and convince the reader.

Then, How To Make Responsive Table On Blog Posts? Now, infoBlog will share a blogging tutorial about How To Make Responsive Table On Blog Posts. Follow the steps below . .

How To Make Responsive Table On Blog Posts :

1. Visit ›› TablesGenerator ‹‹
2. After that, click File ›› New table...
   
3. Then, specify the rows and column of the table you want to create. After that, click Create.
   
*NOTE
› Rows to make vertical column
› Columns to make horizontal column
4. Design the table that you create as good as possible.
5. After you finish creating tables, click Generate.
6. Copy all of the code and then, paste it on your blog posts by converting to HTML mode.
   
7. Finally, click Publish.

For Result :

infoBlog - Learning About The World Of Blogging & Internet
Tutorial	Tips	Science
Blogging	Blogging	Blogging
Internet	Internet	Internet

Enough of tutorial about How To Make Responsive Table On Blog Posts. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.

Thanks For Your Visiting

How To Add Responsive Back To Top Button On Blog

How To Add Responsive Back To Top Button On Blog - Back To Top Button is a blog widget that serves to facilitate the visitor back to the top of the blog. So, with that button, visitors don't bother to scroll up. Usually this button appears in the footer or at the very bottom of the blog.

Therefore, infoBlog will share a tutorial about How To Add Responsive Back To Top Button On Blog. Follow the steps below . .

How To Add Responsive Back To Top Button :

This widget uses jQuery, so please add the code below before </head>

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

1. Go to your Blogger Dashboard ›› Layout ›› Add a Gadget ›› HTML/JavaScript.
2. Copy and paste the code below on HTML/Javascript column.
   <style>
   .mbw-back-to-top {
       position: fixed;
       bottom: 2em;
       right: 10px;
       text-decoration: none;
       padding: 1em;
       display: none;
       cursor:pointer;
   }
   </style>
   <img class="mbw-back-to-top" src="Back To Top Image URL" />
   <script type="text/javascript">
   /* Responsive Back To Top Button by infoBlog */
   jQuery(document).ready(function() {
       var offset = 220;
       var duration = 500;
       jQuery(window).scroll(function() {
           if (jQuery(this).scrollTop() > offset) {
               jQuery('.mbw-back-to-top').fadeIn(duration);
           } else { //www.infoaboutblog.blogspot.com
               jQuery('.mbw-back-to-top').fadeOut(duration);
           }
       });   
       jQuery('.mbw-back-to-top').click(function(event) {
           event.preventDefault();
           jQuery('html, body').animate({scrollTop: 0}, duration);
           return false;
       })
   });
   </script>


*NOTE
›› Replace Back To Top Image URL with your own back to top image URL
3. Then, click Save.

Back To Top Image URL by infoBlog :

Style 1 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhlsONLK3RrCjPaV19bfACo3uoXgkB8CjnZI7v0bCE1MZ-wzYAICWOKRYRX3Y-T7fO_XYUaubts9W3nWI8EZT3XE6HG6GWrDGJb5wFj_XKYJ1EXzy6Y7IgaG3w8jBMCzbwQOzUklH7gK6/s1600/back+to+top10.gif

Style 2 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUWooJfLqLcpExykUn3bApwP9sNuqqEzTbzzJtzdW2POGDhu3v82rQwcQTtDg-Gvu8ZZzwauIwEPP-GjZVWzn2lgazV7EdSF62kh2bNr015l09UzY2OjQcWA53dDjT1k6W5-pDzsCruOk/s1600/back+to+top.png

Style 3 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBAE_otVghVgWJKag46uHQLqmAEDSzMBJ3fRDlS590pmE7_EstSI2cr3QAzLLVhAB_enyT_Vr4N10Tl5vp6gJ6-NXsNdGH39zEA1wHgk7oMt7UNTwH9tBDdMcAuj_1P34pjspbh97dgiM/s1600/back+to+top.png

Style 4 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiddn1Jg527orrFF5rgPJvWlGj4U21kHgsPsHowKPFgoOHGyjazmtjZ1EQiqt-_Gq5DVorAOvuzxhWFsAC8WtKD9nMsBFGFe0PBclbydMtlnq5A5GNPBUzGxlkwqqe6szSRkh4EBFKCg_0/s1600/back+to+top.png

Style 5 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNKF4VmPkoci9HGpYBbUjuKr2mtUMewFiyRFCXGiYBhFJS4OpZhiEixUG6dJrJD8C28RnhhiYeWiSVccWc_6RyNHceJodOjb4YWCJMYMWzYKxDVvHHIrQ9vm5P3_YcUq5SMFhLXN43m4M/s1600/back+to+top.png

Style 6 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1moMQ1Oo0TTk1SKjXclenpun88MNBUNPPwuJCGhWM_wO56OqMhirx_c5Hw5jScVH8N6esZcrmf7SYNWcDLQDvOQ6LklVi39Se7mjdq_p7WR6UpMdJgTEp6PVn21FsIAWWLJcH3jMGEXU/s1600/back+to+top+button.gif

Style 7 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1iL5ZP2rrIgPc39kC04COxu2ubCkVq4tKXgfptnY9cfzvWj9l36Lxyv7o_6oPOkHMob1b8akiAOfQXqxVXJ8V8wiR7GomPfU98_SGK6Z4t9FaoUajfd6xxkbhb8zn1rloLHFNau53seA/s1600/back+to+top+button.png

Style 8 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja5gHkyV3os5Gf7mCKooiU38vhTRONxpXCViKkO-OM9D70iYbLNGOob6C77LfdE8WpzRaCTP1nVDBA3Rzp5MINVyKk4R9FbMjRaeE0acYGgLB6ETAbmXfrgnfi_p3Y2hnSoOSrXNZVrGM/s1600/back+to+top+button.gif

Style 9 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16leSktSa-LqrcWDKRL8-3blRsEtbLXcJjWHJGdj4BDiLlqeYGHoLj6wL1a15b-5JgPfAT8HWdPZQx0txjFVA62MFBqxE6XTGM9chfXe5OzRMaOrQaMb50mIZYx3ya_FWhBbd7GvJdOA/s1600/back+to+top+button.png

Style 10 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJYi4VUggCFm5jCVr8l7E8fzJPS03rm8toF8LdPj9VZbhw8osvqJD6L0PRDQGj2kB3hizRuEqOcue1B-zmyNnQSxBBHBlG2K1k0wcinHXU_UBbBXpN2CGkfDh8SbQ0d7Zq9grVYd0NPw/s1600/Back-To-Top.png

Style 11 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheoKtmhICPutNYc8bfEP9QUXJl9Hpe5Y3sjgeFRXd4qslCfQeJ9GZJN_Hh8qTgALbe-KUuaeJcfwOod-8VKYFsx3W4Iv2gFJ5ithR1qSoRK7uT-opYcrNZoRzxH33iQLW3-i8xNiA3rHs/s1600/back-to-top-button.png

Style 12 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_yNPZdxtU78MzPWccHsOWjlJQLXyhBtk7L7OfQv__jmAi0F2A17Tdj-WysEi_mZx57hU6D8WWmMPwOI_GGw6NddFLXgs0tSIjRL-fvDKnNBt9r09U2tbbV-dyizSyTLcynjX0JhcxaQ/s1600/back-to-top-button.png

Style 13 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyYSriPmsTWjp923yipum31AN9luFTbNO89JVo01-_-yxnZRzMyJ6UCMyrlzFqd24kGcWqPOT7R6yKmByJrVZG3Dshbnl5RN-fgFcsWslx4BP388ChwEBUJVBY4AKaF0aXvpTPjoKVS3k/s1600/back-to-top-button.png

Style 14 ››

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgltlbjB0nGxaqejk70iBMRvBaFYswroB-0MJB9LnyoZMx7LtXk_9T8gUCy9AsddIoXJpK2i-8IuMuRV5JTMZLHRGkH73xWbDFtSjJeXFjh3tl12ZGhVzmgI-qGTHuZtRw87i-zizfcSZQ/s1600/Back-To-Top.png

Enough of tutorial about How To Add Responsive Back To Top Button On Blog. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.

Thanks For Your Visiting

How To Make Your Blog Content Can't Be Copied By Others

How To Make Your Blog Content Can't Be Copied By Others - To keep the content of your blog can not copy is the best way to minimize the occurrence of theft of content on your blog articles. However, if your blog is about Tutorials and contain Script code, CSS code, or whatever should not be installed anti copy paste.

Follow the steps below  To Make Your Blog Content Can't Be Copied By Others . .

How To Make Your Blog Content Can't Be Copied :

*First Ways ››

1. Go to your Blogger Dashboard ›› Template ›› Edit HTML.
2. Add the script below after </head>
/* Anti Copy Paste 1 by infoBlog */
<script type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</script >
3. Then, click Save Template.

*Second Ways ››

1. Go to your Blogger Dashboard ›› Layout ›› Add a Gadget ›› HTML/JavaScript.
2. Add the code below.
/* Anti Copy Paste 2 by infoBlog */ <script> var pesen="Sorry, Can't Copy And Paste This Content"; /////////////////////////////////// function clickIE4(){if (event.button==2){alert(pesen);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(pesen);return false;}}} if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;} else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;} document.oncontextmenu=new Function("alert(pesen);return false") </script>
3. Then, click Save.

*Third Ways ››

1. Go to your Blogger Dashboard ›› Template ›› Edit HTML.
2. Add the code below before ]]></b:skin> or </style>.
/* Anti Copy Paste 3 by infoBlog */
.do-not-copy {
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
3. Then, click Save Template.
4. After that, to apply it, add the code below on your blog posts ( HTML mode ).
 <div class="do-not-copy"> Put your content that should not be copied </div>
5. Finally, click Publish.

Enough of tutorial about How To Make Your Blog Content Can't Be Copied By Others. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.

Thanks For Your Visiting

How To Change ScrollBar Colour On Blogs

How To Change Scroll Bar Colour On Blog - Basically, the default scroll bar at blogspot mediocre. Therefore, infoBlog will share a tutorial about How To Change Scroll Bar Colour On Blog so your blog look more attractive and cool. But, on Mozilla Firefox browser, it doesn't support this CSS.

Follow the steps below To Change Scroll Bar Colour On Blog . .

How To Change Scroll Bar Colour On Blog :

1. Go to your Blogger Dashboard ›› Template ›› Edit HTML.
2. Add the CSS code below before ]]></b:skin> .
   /* Scrollbar by infoBlog*/ ::-webkit-scrollbar{width:8px;background:white} ::-webkit-scrollbar-thumb{background-color:red;border-radius:10px}


*NOTE
› Replace white with your scroll bar background colour
› Replace red with your scroll bar colour
3. After that, click Save Template.

Enough of tutorial about How To Change Scroll Bar Colour On Blog. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.

Thanks For Your Visiting

How To Make HTML Scroll Box On Blog Posts

How To Make HTML Scroll Box On Blog Posts -  A few days ago, infoBlog ever share a tutorial about How To Make HTML Box On Blog Posts. Now, infoBlog will share a tutorial about  How To Make HTML Scroll Box On Blog Posts. You can use HTML Scroll Box to save space if you want to share Scripts, CSS, or Javascript.

Read Also ›› Theory About HTML, CSS, and Javascript

Follow the steps below To Make HTML Scroll Box On Blog Posts . .

How To Make HTML Scroll Box :

Horizontal Scroll ››

<div style="background-color: #999999; border: 3px solid black; height: 150px; overflow-x: scroll; overflow-y: hidden; width: 300px;"> <div style="width: 100%;"> Your Script Code </div> </div>

Vertical Scroll ››

<div style="border : 3px solid #999 ;padding : 10px ;background-color : black ;overflow: auto; height : 150px ;width : 300px ;text-align : left ;"> Your Script Code </div>

Enough of tutorial about How To Make HTML Scroll Box On Blog Posts. If you have any questions or suggestions, please write in the comments field below or directly send questions through the Contact Us service. Hopefully this article useful and you willing to share this article through social media accounts you have.

Thanks For Your Visiting