Membuat Slide Background dengan Backstretch.js

Hai sobat kelas mat, kembali lagi saya melalui blog ini akan membagikan sebuah tutorial mengenai bagaimana caranya membuat slider background dengan beberapa gambar dengan memanfaatkan javascript yang bernama Backstretch.js. Dengan menggunakan Backstretch.js kita bisa dengan mudah membuat background blog kita menjadi berganti-ganti secara otomatis.

Sekilas Backstretch.js

Backstretch.js adalah sebuah javascript yang dikembangkan oleh Scott Robbin. Sesuai dengan deskripsi singkatnya yaitu

a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element

maka dengan menggunakan script ini, tidak akan terlalu menambah beban blog kita. Karena Gambar background akan diambil setelah halaman kamu selesai dimuat, sehingga pengguna tidak perlu menunggu gambar untuk diunduh sebelum menggunakan situs kamu.

Cara menggunakan Backstretch.js untuk background body blog

Caranya cukup sederhana ya sobat, pertama-tama kamu cuma perlu menambahkan script berikut ini pada template blog sobat sebelum kode </head>.

<script src='https://raw.githack.com/kelasmat/others/master/jquery.backstretch.min.js' type='text/javascript'></script>

Kemudian carilah kode </body>, simpan kode berikut ini tepat diatas/sebelum kode </body> tadi.

<script>
//<![CDATA[
.backstretch([
      "https://3.bp.blogspot.com/-g25CVl-Nirs/Xr4pWGqyDvI/AAAAAAAACoM/N6RUWZgmZ9wBTj_5WFLBzQHO6e5iqZEqgCLcBGAsYHQ/s1600/laptop-min.png" ,"https://2.bp.blogspot.com/-z48NsOxABs8/XsPM8JeRJxI/AAAAAAAACqo/MyrWYDdtH5AbCqlELu3Ff7jR3nkR8AM3gCLcBGAsYHQ/s1600/cuptea-min.jpg"
    , "https://2.bp.blogspot.com/-zoToRTEP2CI/VEjOnexQ82I/AAAAAAAAAkE/y01KpoluTTY/s1600/image4.jpg"
    , "https://4.bp.blogspot.com/-eHK6ZQ-X018/Xr4p_zdl70I/AAAAAAAACoU/hyzN4JPCB0U_CriXmpo4EpMq4jzTbbrfACLcBGAsYHQ/s1600/cangkirteh-min.png"
,"https://3.bp.blogspot.com/-GCysCESsfhc/VEjOnMcFQSI/AAAAAAAAAkA/yGpFHJNCK6o/s1600/image2.jpg"
  ], {duration: 6000, fade: 750});
//]]>
</script>

Silahkan ganti url gambar dengan gambar kamu sendiri. kamu juga bisa menambah atau mengurangi banyaknya gambar background sesuka kamu.

Cara menggunakan Backstretch.js untuk background box atau elemen tertentu

Caranya masih sama dengan langkah-langkah diatas, hanya saja pada kode script yang ditaro diatas kode </body> tadi ditambahkan dengan nama id dari box/element yang ingin kita beri background. Contoh nya saya ingin memberi elemen pada box id='featured', maka scriptnya menjadi :

<script>
//<![CDATA[
$("#featured").backstretch([
      "https://3.bp.blogspot.com/-g25CVl-Nirs/Xr4pWGqyDvI/AAAAAAAACoM/N6RUWZgmZ9wBTj_5WFLBzQHO6e5iqZEqgCLcBGAsYHQ/s1600/laptop-min.png" ,"https://2.bp.blogspot.com/-z48NsOxABs8/XsPM8JeRJxI/AAAAAAAACqo/MyrWYDdtH5AbCqlELu3Ff7jR3nkR8AM3gCLcBGAsYHQ/s1600/cuptea-min.jpg"
    , "https://2.bp.blogspot.com/-zoToRTEP2CI/VEjOnexQ82I/AAAAAAAAAkE/y01KpoluTTY/s1600/image4.jpg"
    , "https://4.bp.blogspot.com/-eHK6ZQ-X018/Xr4p_zdl70I/AAAAAAAACoU/hyzN4JPCB0U_CriXmpo4EpMq4jzTbbrfACLcBGAsYHQ/s1600/cangkirteh-min.png"
,"https://3.bp.blogspot.com/-GCysCESsfhc/VEjOnMcFQSI/AAAAAAAAAkA/yGpFHJNCK6o/s1600/image2.jpg"
  ], {duration: 6000, fade: 750});
//]]>
</script>

Perhatikan #featured diatas. itu adalah id dari box/elemen yang ingin saya kasih background. Silahkan sesuaikan dengan id/class pada template kamu masing-masing. Semoga cara Membuat Slide Background dengan Backstretch.js ini bisa dipahami dengan mudah.

Menggunakan Highlight.js untuk menampilkan Code pada Blogspot

Hai sobat kelas mat, kali ini kelas mat membuat selingan artikel mengenai tutorial bagaimana cara menggunakan Higlight.js untuk menampilkan Kode-kode programing pada blogspot dengan beberbagai model style yang bisa kamu pilih sendiri.
Sebelum kita mulai Menggunakan Highlight.js untuk menampilkan Code pada Blogspot, Coba kamu lihat dulu contoh penampilan dari highlight.js di bawah ini:

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}
body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
  --heading-1: 30px/32px Helvetica, sans-serif;
}
@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}

Contoh tampilan: css
Contoh style: monokai-sublime

Bagaimana Keren bukan? mau tau cara buatnya? kalo mau, Yuk lanjutkan membacanya.

Tentang Highlight.js

Highlight.js sendiri merupakan syntax highlighter yang ditulis dalam javascript dan suport pada semua browser. Yang menjadi keunggulan utama dari highlight.js ini adalah dapat mendeteksi secara otomatis bahasa apa yang sedang di tuliskan. Berikut ini adalah pengertian sebenarnya:

Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework, and has automatic language detection

Adapun keunggulan-keunggulan dari higlight.js tersebut diantaranya adalah :

1. Mendukung 189 bahasa dan 91 gaya/Style
2. dapat mendeteksi bahasa pemograman secara otomatis
3. penyorotan kode multi-bahasa
4. tersedia untuk node.js
5. bekerja dengan markup apa pun
6. kompatibel dengan framework js

Menyiapkan Highlight.js pada blogspot

Untuk dapat menggunakan Highlight.js pada blog kamu, terlebih dahulu silahkan copykan kode berikut ini di atas kode </head> blog kamu.

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.2/styles/default.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.2/highlight.min.js"></script>

Perhatikan kata default yang saya beri tanda kuning. itu adalah style default atau style standar. Untuk mendapatkan style yang kamu inginkan silahkan ganti kata default tadi dengan nama style kesukaan mu. Lihat daftar demo/info/button/#EA80FC. Di bawah ini saya berikan contoh akan menggunakan style monokai-sublime. Maka Cara menggantinya tinggal di copy saja nama style monokai-sublime nya. lihat gambar.

Ganti kata default tadi dengan monokai-sublime. Sehingga nantinya akan menjadi seperti ini :

<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.2/styles/monokai-sublime.min.css" rel="stylesheet">

Kemudian, masih dalam edit html blog kamu, Carilah kode </body>. Gunakan saja ctrl + F untuk mempermudah mencarinya. Kalau sudah ketemu, copykan kode berikut ini dan taro di atas kode </body> tadi.

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});
</script>

Sehingga akan menjadi seperti ini:

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});
</script>
</body>

Cara Penerapan Highlight.js pada postingan

untuk dapat menggunakannya, kamu cukup mengawalinya dengan tanda <pre><code class="html"> dan mengakhirinya dengan </code></pre>. Lihat contoh berikut ini.

Untuk Menampilkan Kode CSS
<pre><code class="css">
Masukkan kode css disini
</code></pre>

Untuk Menampilkan HTML
<pre><code class="html">
Masukkan kode html disini
</code></pre>

Untuk Menampilkan Javascript
<pre><code class="javascript">
Masukkan kode javascript disini
</code></pre>

Sampai disini saja tutorial Menggunakan Highlight.js untuk menampilkan Code pada Blogspot, semoga dapat dipahami dengan mudah. Namun jika masih ada kendala atau pertanyaan, silahkan tuliskan pertanyaan mu di kolom komentar di bawah ini ya.. Oh ya perlu di ingat, dalam membuat postingannya harus dalam mode HTML, bukan compose.

Animasi Teks Berputar Dengan JQuery

Kelas Mat - Melalui blog kelasmat ini kemarin saya telah menuliskan sebuah trik untuk membuat animasi Teks Seperti Bernafas dengan CSS dan sebuah script yang bernama splitting.js dengan judul artikelnya adalah Animasi Teks Bernafas dengan CSS. Nah masih dalam konteks yang sama, yaitu tentang animasi teks, pada kali ini saya juga akan membuat sebuah animasi teks Berputar dengan Memanfaatkan Jquery.

Jadi Pastikan dalam blog kamu sudah terpasang Jquery nya berapapun versinya tidak masalah namun lebih baik lagi menggunakan jquery yang terbaru.

Cara Membuat Animasi Teks Berputar dengan CSS

Pertama-tama tentu kamu harus sudah berada pada editor template blogger kamu, kemudian baru Kita tentukan dulu gaya/style dari teks yang akan kita beri efek berputarnya. Misalnya h1 atau h2 atau yang lainnya dengan cara menambahkan kode berikut ini sebelum kode ]]></b:skin> :

Kode CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,300,600,700,800);
h1 {
  margin: 0;
  padding: 0;
  font-family: 'Raleway';
  font-weight: 400;
  font-size: 3em;
  color: #9A12B3;
}
.letterDrop {
  position: relative;
  top: 0;  
  display: inline-block;
  text-transform: Uppercase;
  letter-spacing: 0em;
  opacity: 0.8;
  transform: rotateX(-90deg);
  animation: letterDrop 1s ease 1 normal forwards;
}
@keyframes letterDrop {
    10% {
        opacity: 0.5;
    }
    20% {
        opacity: 0.8;
        top: 3em;
        transform: rotateX(-360deg);
    }
    100% {
        opacity: 1;
        top: 3em;
        transform: rotateX(360deg);
    }
}
span:nth-child(2n) {
  color: #663399;
}

Kode Scriptnya

Setelah itu kita Buat scriptnya seperti di bawah ini. Copy dan Pastekan/Letakkan script berikut ini sebelum kode </body> :

;(function($) {
  $.fn.letterDrop = function() {
  return this.each( function() {
  var obj = $( this );
   var drop = {
    arr : obj.text().split( '' ), 
    range : {
      min : 1,
      max : 9
    },
    styles : function() {
      var dropDelays = 'n', addCSS;    
       for ( i = this.range.min; i <= this.range.max; i++ ) {
         dropDelays += '.ld' + i + ' { animation-delay: 1.' + i + 's; }n';  
       }
      addCSS = $( '<style>' + dropDelays + '</style>' );
        $( 'head' ).append( addCSS );
    },
        main : function() {
      var dp = 0;
      obj.text( '' );    
      $.each( this.arr, function( index, value ) {
        dp = dp.randomInt( drop.range.min, drop.range.max );
        if ( value === ' ' )
          value = '&nbsp';
          obj.append( '<span class="letterDrop ld' + dp + '">' + value + '</span>' );
      });
    }
  };
     Number.prototype.randomInt = function ( min, max ) {
    return Math.floor( Math.random() * ( max - min + 1 ) + min );
  };
   drop.styles();
  drop.main();
  });
};
}(jQuery));
$( 'h1' ).letterDrop();

Lihat tag h1 yang saya beri tanda kuning di atas, itu tag yang akan kita beri efek berputar. Jadi Sekarang kita bisa gunakan teks berputarnya pada tag html h1 misalnya seperti ini :

<h1>Kelasmat.Com</h1>

Jika langkah-langkah tadi tidak ada yang salah seharusnya hasil yang tadi kamu buat akan seperti di bawah ini:

Kelasmat.com
Semoga Bermanfaat dan jangan lupa jika artikel ini berguna, silahkan share keteman-teman kamu melalui tombol sosmed di bawah ini.
NB: Untuk melihat kembali Efek Animasi teks Berputar dengan Jquery ini, silahkan Lakukan refresh halaman ini dengan menekan tombol

f5

pada keyboard kamu.
Untuk Demo penerapannya kedalam blog untuk animasi judul blog, silahkan kunjungi halaman ini. Perhatikan Judul/Header Blognya.

Demo Click here

Animasi Teks Bernafas dengan CSS

Kelas Mat - Beberapa hari yang lalu, saya telah membuat tulisan tentang Membuat Sticky Widget di Blogger dengan javascript. Nah untuk kali ini saya akan membuat tutorial sederhana mengenai cara membuat animasi Tulisan atau Text dengan CSS.

Animasi ini cocok diterapkan pada judul atau Header Blog kamu yang tidak mau menggunakan image atau gambar. Kita tahu, dengan mengganti judul blog dengan gambar, maka akan sedikit memberatkan loading blog tersebut. Sehingga tentu saja ini menjadi masalah bagi beberapa orang yang sangat memperhatikan kecepatan blognya. Meskipun Sebenarnya masalah image ini bisa diakali dengan mengganti nya dengan SVG, namun tidak ada salahnya juga saya memberi sedikit alternatif bagi kamu yang tidak ingin blog nya bertambah berat namun tetap 'berkelas' dengan menambahkan sedikit animasi pada teks atau judul blog nya.

Cara Membuat Animasi Teks Bernafas dengan CSS

Sebenarnya Cara membuat animasi ini tidak murni menggunakan CSS, karena kita tetap membutuhkan script yang bernama

Splitting.js Meskipun file nya kecil namun yang namanya script tetap saja membutuhkan waktu untuk meloadnya.

Untuk dapat memulai membuat Animasi Teks Bernafas ini, seperti yang saya katakan sebelumnya bahwa trik ini membutuhkan script, jadi pastikan kamu mengimport script splitting tersebut. Caranya adalah :

Pertama-tama tentu saja kamu sudah harus login diblogger dan sudah berada di halaman editor template. Kemudian silahkan cari kode </body> dan pastekan kode berikut ini tepat sebelum </body> tadi.

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<script> Splitting(); </script>

Masih dalam halaman yang sama, silahkan cari </head> dan letakkan diatasnya kode berikut ini :

<style>
@font-face {
 font-family: "IBM Plex Sans Roman";
 src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
}
logo { font-family: "IBM Plex Sans Roman", Times;
    font-weight: 100;
    font-size: 10vw;
    line-height: 10vw;
    font-variation-settings: 'wght' 100, 'wdth' 85;
}

logo .char {
    --delay: calc((var(--char-index) + 1) * 400ms);
    animation: breathe 4000ms infinite both;
    animation-delay: var(--delay);
}

logo:hover span {
    animation-play-state: paused;
}

@keyframes breathe {
    0% {
        font-variation-settings: 'wght' 100, 'wdth' 85;
        font-size: 10vw;
    }
    60% {
        font-variation-settings: 'wght' 700, 'wdth' 100;
        font-size: 11vw;
    }
    
    100% {
        font-variation-settings: 'wght' 100, 'wdth' 85;
        font-size: 10vw;
    }
}
</style>

Cara Menggunakannya, cukup gunakan kode berikut ini:

<logo data-splitting>Kelasmat</logo>

Jika langkahnya sudah benar, maka hasilnya akan terlihat seperti di bawah ini: Kelasmat

Semoga bermanfaat dan silahkan kamu kembangkan lagi sesuai kebutuhan kamu serta jika artikel ini bermanfaat silahkan bantu blog ini dengan cara bagikan keteman-teman atau media sosial kamu.

Membuat Sticky Widget di Blogger

Kelas Mat - Sudah lama sekali rasanya saya tidak menuliskan tutorial mengenai Blog, terakhir kali saya membuat sebuah tutorial tentang blog di kelas math ini pada bulan lalu yaitu mengenai Cara Membuat Teks Warna Pelangi. Nah dalam Kesempatan ini saya ingin membuat sebuah trik agar Widget atau sidebar blog menjadi sticky alias diam di tempat dengan beberapa cara.

Cara Pertama Membuat Sticky Widget

Cara yang pertama ini sudah banyak yang menggunakannya dan memang yang paling umum. Untuk membuatnya silahkan login ke blogger terlebih dahulu (Namun, sebelum memulai, silahkan backup dulu template Kamu untuk antisipasi kalau-kalau Kamu gagal menerapkannya), kemudian buka tema editor dan tambahkan kode style berikut ini sebelum kode ]]></b:style> atau </style>:

#HTML1{width:100%;max-width:300px}
@media only screen and (max-width:768px){
#HTML1{width:100%;max-width:100%}
}

Pada kode di atas, #HTML1 adalah id dari widget atau sidebar yang ingin dibuat menjadi sticky. sedangkan 300px adalah lebar/width dari sidebar. silahkan sesuaikan dengan lebar sidebar blog Kamu.
Kemudian, masih dalam tema editor, silahkan pasang script berikut ini tepat sebelum </body> :

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#HTML1').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#HTML1');
    var stickyTop = $('#HTML1').offset().top;
    var stickyHeight = $('#HTML1').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Pada kode di atas, yang saya tandai dengan warna kuning adalah id pembatas bawah sampai mana widget atau sidebar berhenti untuk sticky. dalam halam ini saya atur sampai #footer-wrapper, sesuaikan saja dengan tema blog Kamu masing-masing. Sedangkan top : 20 adalah batas atas posisi widget berhenti.
Untuk mencari id sidebarnya, kamu bisa lakukan inspect elemen pada blog kamu, lalu arahkan pada widget mana yang akan dibuat sticky. Perhatikan contoh gambar hasil inspect element pada blog ini.

Cara Kedua membuat Sticky Widget

Jika cara pertama di atas gagal, Kamu bisa menggunakan cara yang kedua ini. Namun, Seperti biasa, sebelum Memulai mengedit tema, pastikan selalu backup tema Kamu terlebih dulu sebagai antisipasi.
Silahkan Kamu masuk pada halaman tema editor blog Kamu, kemudian sisipkan script di bawah ini sebelum kode </body> :

<script type='text/javascript'>
//<![CDATA[
// Theia Sticky Sidebar v1.3.0 - https://github.com/WeCodePixels/theia-sticky-sidebar
// Tutorial: https://goo.gl/szhFRE
!function(i){i.fn.theiaStickySidebar=function(t){function o(t,o){var a=e(t,o);a||(console.log("TST: Body width smaller than options.minWidth. Init is delayed."),i(document).scroll(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)),i(window).resize(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)))}function e(t,o){return t.initialized===!0?!0:i("body").width()<t.minWidth?!1:(a(t,o),!0)}function a(t,o){t.initialized=!0,i("head").append(i('<style>.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>')),o.each(function(){function o(){a.fixedScrollTop=0,a.sidebar.css({"min-height":"1px"}),a.stickySidebar.css({position:"static",width:""})}function e(t){var o=t.height();return t.children().each(function(){o=Math.max(o,i(this).height())}),o}var a={};a.sidebar=i(this),a.options=t||{},a.container=i(a.options.containerSelector),0==a.container.size()&&(a.container=a.sidebar.parent()),a.sidebar.css({position:"relative",overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),a.stickySidebar=a.sidebar.find(".theiaStickySidebar"),0==a.stickySidebar.length&&(a.sidebar.find("script").remove(),a.stickySidebar=i("<div>").addClass("theiaStickySidebar").append(a.sidebar.children()),a.sidebar.append(a.stickySidebar)),a.marginTop=parseInt(a.sidebar.css("margin-top")),a.marginBottom=parseInt(a.sidebar.css("margin-bottom")),a.paddingTop=parseInt(a.sidebar.css("padding-top")),a.paddingBottom=parseInt(a.sidebar.css("padding-bottom"));var n=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight();a.stickySidebar.css("padding-top",1),a.stickySidebar.css("padding-bottom",1),n-=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight()-d-n,0==n?(a.stickySidebar.css("padding-top",0),a.stickySidebarPaddingTop=0):a.stickySidebarPaddingTop=1,0==d?(a.stickySidebar.css("padding-bottom",0),a.stickySidebarPaddingBottom=0):a.stickySidebarPaddingBottom=1,a.previousScrollTop=null,a.fixedScrollTop=0,o(),a.onScroll=function(a){if(a.stickySidebar.is(":visible")){if(i("body").width()<a.options.minWidth)return void o();if(a.sidebar.outerWidth(!0)+50>a.container.width())return void o();var n=i(document).scrollTop(),d="static";if(n>=a.container.offset().top+(a.paddingTop+a.marginTop-a.options.additionalMarginTop)){var r,s=a.paddingTop+a.marginTop+t.additionalMarginTop,c=a.paddingBottom+a.marginBottom+t.additionalMarginBottom,p=a.container.offset().top,b=a.container.offset().top+e(a.container),g=0+t.additionalMarginTop,l=a.stickySidebar.outerHeight()+s+c<i(window).height();r=l?g+a.stickySidebar.outerHeight():i(window).height()-a.marginBottom-a.paddingBottom-t.additionalMarginBottom;var h=p-n+a.paddingTop+a.marginTop,f=b-n-a.paddingBottom-a.marginBottom,S=a.stickySidebar.offset().top-n,u=a.previousScrollTop-n;"fixed"==a.stickySidebar.css("position")&&"modern"==a.options.sidebarBehavior&&(S+=u),"legacy"==a.options.sidebarBehavior&&(S=r-a.stickySidebar.outerHeight(),S=Math.max(S,r-a.stickySidebar.outerHeight())),S=u>0?Math.min(S,g):Math.max(S,r-a.stickySidebar.outerHeight()),S=Math.max(S,h),S=Math.min(S,f-a.stickySidebar.outerHeight());var m=a.container.height()==a.stickySidebar.outerHeight();d=(m||S!=g)&&(m||S!=r-a.stickySidebar.outerHeight())?n+S-a.sidebar.offset().top-a.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==d)a.stickySidebar.css({position:"fixed",width:a.sidebar.width(),top:S,left:a.sidebar.offset().left+parseInt(a.sidebar.css("padding-left"))});else if("absolute"==d){var y={};"absolute"!=a.stickySidebar.css("position")&&(y.position="absolute",y.top=n+S-a.sidebar.offset().top-a.stickySidebarPaddingTop-a.stickySidebarPaddingBottom),y.width=a.sidebar.width(),y.left="",a.stickySidebar.css(y)}else"static"==d&&o();"static"!=d&&1==a.options.updateSidebarHeight&&a.sidebar.css({"min-height":a.stickySidebar.outerHeight()+a.stickySidebar.offset().top-a.sidebar.offset().top+a.paddingBottom}),a.previousScrollTop=n}},a.onScroll(a),i(document).scroll(function(i){return function(){i.onScroll(i)}}(a)),i(window).resize(function(i){return function(){i.stickySidebar.css({position:"static"}),i.onScroll(i)}}(a))})}var n={containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,sidebarBehavior:"modern"};t=i.extend(n,t),t.additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,o(t,this)}}(jQuery);
$(document).ready(function(){$("#sidebar-wrapper").theiaStickySidebar({additionalMarginTop:10,additionalMarginBottom:10})});
//]]>
</script>

Perhatikan pada kode di atas yang saya tandai dengan warna kuning #sidebar-wrapper adalah kode id pembungkus sidebar terluar dari widget yang ingin di buat sticky. Sesuaikan dengan blog Kamu.
Untuk dapat mengetahui id pembungkus sidebar terluar dari widget Kamu dengan mudah, kamu bisa coba inspect element pada blog Kamu, dan arahkan ke sidebarnya. Lihat contoh Gambar berikut ini agar lebih jelas dalam mencari id pembungkus terluar dari sidebar blog ini.

Kemudian jangan lupa Simpan dan lihat hasilnya. Semoga berhasil.

Cara Membuat Teks Warna Pelangi dengan CSS

Kelas Math - Cara Membuat Warna Tulisan Pelangi atau berGradasi ini sebetulnya sudah banyak yang membuat tutorialnya. Namun, dari beberapa sumber yang saya baca, mereka membuat atau memberikan efek pelangi pada teks nya menggunakan javascript. Sebetulnya cara seperti itu tidak masalah dan sah-sah saja, hanya saja bagi sebagian orang yang paham tentang teknik seo terutama pada segi kecapatan blog (karena yang saya baca kecepatan web mempengaruhi hasil indeks google) tentu saja cara Membuat Teks Warna Pelangi dengan menggunakan javascript akan mengurangi kecepatan web ataupun blognya meskipun tidak terlalu signifikan menurunkan kecepatan blog.

Oleh karena itu, disini kelas math akan memberikan sebuat tips tentang cara Membuat Teks Warna Pelangi dengan CSS agar kecepatan blognya tetap kencang atau tidak terpengaruh. Untuk contohnya, Kamu bisa lihat pada contoh teks yang saya beri efek pelangi di bawah ini.

Teks Ini Berwarna Pelangi hanya dengan CSS

Bagaimana cara saya membuatnya?

Pertama silahkan copy kode css di bawah ini dengan Ctrl + C

.gradien {
    background: #fed369;
    background: -moz-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%);
    background: -webkit-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%);
    background: linear-gradient(to right,
#55acee 0,#da84ab 50%,
#fcac5e 100%);
    background-clip: border-box;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 );
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color:
    transparent;
}

Untuk Warna pelanginya silahkan Kamu sesuaikan dengan selera. Ganti saja angka-angka yang didepannya ada tanda # nya. Untuk Kode warna dan cara penggunaannya bisa kamu lihat di bawah ini

---

Cara Pemakaian:

1. Klik Tombol warna, maka akan muncul pilihan warna lain.
2. Setelah seleasi menetukan warna yang diinginkan klik OK. 3. Terakhir untuk memunculkan kode warna silahkan klik Get Color

Pick a Color:

---

Cara Menerapkannya, cukup berikan class='gradien' pada teks yang ingin diberi efek pelangi. Sebagai contoh, saya ingin memberikan efek pelangi pada judul blog atau kata Kelas Math yang terletak dipojok kiri blog ini.
Kode awalnya adalah

<h1 class='judulblog'>Kelas Math</h1>

maka saya cukup memberikan kata gradien pada class nya. Sehingga kode tadi menjadi :

<h1 class='judulblog gradien'>Kelas Math</h1>

Namun, Jika efek pelanginya hanya ingin dimunculkan pada teks yang didekati kursor saja, maka ada sedikit tambahan :hover pada css gradien tadi, sehingga kode nya akan menjadi seperti ini :

.gradien:hover {
    background: #fed369;
    background: -moz-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%);
    background: -webkit-linear-gradient(to right,#55acee 0,#da84ab 50%,#fcac5e 100%);
    background: linear-gradient(to right,
#55acee 0,#da84ab 50%,
#fcac5e 100%);
    background-clip: border-box;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 );
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color:
    transparent;
}

Sedangkan untuk cara menggunakan/menerapkannya masih sama dengan cara yang tadi.
Mungkin itu saja yang perlu dilakukan untuk Membuat Teks Warna Pelangi dengan CSS, semoga tulisan ini dapat membantu bagi kamu yang ingin memberikan/membuat judul tulisannya atau teks menjadi berwarna pelangi.

Cara Membuat Warna Menu Blog Berbeda Tiap Halaman

Kelas Math - Setelah kemarin kelas Math memberikan trik cara membuat background blog berubah warna secara otomatis, maka kali ini kelas math akan membagi kan sebuah script yang berfungsi untuk merubah warna suatu elemen agar berbeda warna tiap halaman dengan cara otomatis.

Sebenarnya trik ini bisa di gunakan untuk merubah elemen mana pun yang kita kehendaki. Hanya saja kita harus tau telebih dahulu Id atau class mana yang akan kita beri efek agar berubah warnanya secara otomatis tiap kali user pengguna melakukan reload halaman atau merefresh.

Apakah memperlambat loading blog

Menurut saya tidak begitu berpengaruh, karena scriptnya kecil dan hanya terdiri dari beberapa baris saja. Asalkan penempatannya tidak ditaruh di atas melainkan di taruh pada elemen body bisa setelah <body> atau sebelum </body>

Cara Membuatnya

Pertama tentunya, Anda harus sudah berada dalam halaman edit html tema blog anda. kemudian cari lah kode . Untuk memudahkan Anda dapat menggunakan tombol keyboard Ctrl + F lalu tuliskan </body> dan enter. Setelah ketemu, silahkan copy atau Ctrl + C kode script di bawah ini, dan letakkan/pastekan atau gunakan Ctrl + V di atas kode </body> tadi.

<script type='text/javascript'>
//<![CDATA[
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 14)];
}
return color;
}
$(function() {
$("nav").each(function() {
$(this).css("background-color", get_random_color());
});
});
//]]></script>

Kata "nav" yang saya beri tanda, bisa anda ganti dengan id atau class elemen yang anda kehendaki. Misalnya saya ingin memberikan efek warna berubah otomatis pada area postingan, maka saya cukup mengganti "nav" dangan "#post". Untuk hasil nya anda bisa mengunjungi halaman berikut ini https://lab-myarcive.blogspot.com.

Cara Mudah Membuat Slider Post Otomatis di Blogspot

Kelas Math - Sesuai dengan judul tulisannya yaitu Cara Mudah Membuat Slider Recent Post Otomatis, maka kali ini saya tidak akan berbasa-basi memperpanjang cerita. Karena saya rasa judul di atas sudah sangat jelas maksudnya. Ya, disini saya akan menerapkan kode yang sudah siap pakai. Jadi menerapkannya bisa lewat widget atau pun dipasang langsung di templatenya.

Baca Juga

• Cara setting alamat url blogger seperti url pada wordpress
• Cara Mudah Membuat Slider Post Otomatis di Blogspot
• Cara Membuat Menu Tersembunyi di Blogspot
• Membuat Bentuk Bangun Datar dengan CSS

Untuk Penampakannya silahkan kunjungi halaman https://lab-myarcive.blogspot.com/

Cara Membuatnya :

Silahkan Copy Kode dibawah ini, kemudian tinggal letakkan di widget HTML blog Anda.

<style>
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://www.kelasmat.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
<div id="featuredpost"></div>

Silahkan ganti https://www.kelasmat.com dengan url blog Anda sendiri. Jika ada yang mau ditanyakan silahkan saja tinggalkan komentar dibawah.

Cara Membuat Menu Tersembunyi di Blogspot

Anda mungkin pernah mengunjungi beberapa website yang menu navigasinya tersembunyi dan hanya akan muncul jika kita menekan tombol open terlebih dahulu. Nah bagi yang penasaran dengan bagaimana membuatnya, silahkan simak penjelasan berikut ini.

Cara Membuat Menu Tersembunyi di Blogspot

Sebelum kita belajar membuatnya, Silahkan klik kata Open di bawah sebagai contoh hasil yang akan kita buat nanti

×
About
Services
Clients
Contact

Open

Bagaimana Cara Membuatnya?

Caranya cukup mudah, silahkan anda masuk ke edit html pada blog Anda. Kemudian, salin kode css dibawah ini dan letakkan sebelum kode </style>. Gunakan Ctrl + F untuk mencari nya.

.sembunyi {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sembunyi a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sembunyi a:hover {
  color: #f1f1f1;
}

.sembunyi .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sembunyi {padding-top: 15px;}
  .sembunyi a {font-size: 18px;}
}

setelah itu cari juga </head>, setelah ketemu, masukkan script dibawah ini.

<script>
function openNav() {
  document.getElementById("sembunyian").style.width = "250px";
}

function closeNav() {
  document.getElementById("sembunyian").style.width = "0";
}
</script>

Setelah itu, Pasang kode Html berikut ini dimanapun sesuai keinginan Anda, bisa di samping header, dalam navigasi, disidebar atau pun bisa juda didalam halaman postingan Anda.

<div id="sembunyian" class="sembunyi"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
<a href="#">About</a><br />
<a href="#">Services</a><br />
<a href="#">Clients</a><br />
<a href="#">Contact</a><br />
</div><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Open</span>
<br />

10 Strategi Menjaring Traffic Bagi Blogger Pemula Menurut Barb Sibbing

Kelas Math - Persaingan yang ketat dalam mengejar posisi nomor 1 di hasil pencarian google, membuat beberapa orang melakukan berbagai cara untuk mengejarnya.. Mulai dari pengoptimalan seo, bertukar link dengan cara blogwalking hingga cara-cara lain yang menurut mereka yang sudah menerapkan cukup ampuh. Begitu pula menurut Barb Sibbing. Bahwa setidaknya ada  10 Strategi yang dapat dilakukan untuk menjaring Traffic/pengunjung blog. Cara ini cocok dilakukan atau dikerjakan oleh para blogger terutama Bagi para Blogger Pemula. Namun sebelum kita membahasa apa saja 10 strategi itu, alangkah baiknya terlebih dahulu kita mengenal siapa sih Barb Sibbing. Nama ini mungkin tidak familiar bagi para blogger, namun tulisan beliau mengenai strategi mengejar traffic blog menurut saya pribadi masih cukup masuk akal. oleh karena itu tidak ada salahnya saya membuat tulisan ini mengingat strategi yang beliau buat bisa sangat membantu bagi para blogger pemula seperti saya ini.

Siapa Barb Sibbing?

Barb Sibbing adalah seorang  wanita Internet Marketer yang telah jatuh cinta dengan sebuah platform wordpress. Sejak tahun 2007 beliau mengembangkan bisnisnya dengan mempelajari cara-cara yang cukup efektif dalam membangun bisnisnya hingga beliau sukses dalam bidang Internet marketing. Setelah perjalanan panjang, menurut beliau setidaknya ada 10 Strategi yang harus dilakukan oleh para blogger pemula untuk dapat sukses di internet. Apa saja 10 strategi itu, berikut ini saya uraikan satu persatu.

Baca Juga

• Cara setting alamat url blogger seperti url pada wordpress
• Cara Mudah Membuat Slider Post Otomatis di Blogspot
• Cara Membuat Menu Tersembunyi di Blogspot
• Membuat Bentuk Bangun Datar dengan CSS

10 Strategi Menjaring Traffic Blog bagi Blogger Pemula 

1. Bagikan eBook Viral untuk Blogger Pemula

Strategi Pertama menurut Barb Sibbing adalah membagikan EBook secara gratis kepada para Blogger pemula. Tentu disini Anda dituntut untuk mampu membuat sebuah tulisan yang dibutuhkan oleh para blogger pemula. Biasanya para Blogger akan membutuhkan cara-cara atau tutorial membangun sebuah blog atau situs. Jadi Anda bisa membuat langkah demi langkah dalam membangun sebuah blog atau situs secara lengkap. Jangan Lupa untuk menampilkan Kata Kunci Bisnis atau Nama Brand Anda di setiap halaman, sehingga dengan secara tanpa disadari, mereka akan mengingat nama brand anda. Dan jangan lupa anda memberikan Informasi lengkap mengenai Bisnis/Blog Anda seperti alamat Website, kontak, email dan Alamat anda. Dengan demikian, suatu saat eboook tadi akan tersebar maka traffic yang akan menuju blog Anda juga akan meningkat. Perlu di ingat, Pembuatan Ebook ini harus semenarik mungkin, gunakan bahasa yang sederhana yang mudah dipahami oleh para blogger pemula, dan juga sediakan gambar-gambar atau ilustrasi yang sesuai dengan tema.

2. Self Promotion untuk Blogger Pemula

Strategi yang kedua adalah self Promotion. Ada banyak cara yang anda dapat gunakan untuk memporomsikan Situs atau Brand anda. Salah satu yang sudah lumrah dilakukan oleh para blogger adalah dengan cara Blog Walking. Blog walking ini artinya sesama blogger saling mengunjungi blog nya masing-masing secara bergantian. Biasanya blog walking dilakukan oleh mereka yang sudah tergabung dalam sebuah komunitas misalnya komunitas blogger pemula. Blog walking ini biasanya dilakukan dengan cara saling berkomentar dan meninggalkan link blog atau websitenya dikolom komentar yang telah disediakan. Dengan adanya link tersebut, maka diharapkan teman2 yang lain juga dapat berkunjung ke blog Anda. Namun, yang perlu di perhatikan dalam Blog Walking ini adalah jangan terlalu banyak meninggalkan link aktif, karena kalau terlalu sering bisa-bisa anda akan di anggap Spam atau sampah oleh pihak yang punya blog atau pun oleh situs search engine.

3. Buatlah Konten yang Berkualitas

Strategi yang keempat adalah dengan cara membuat Konten yang berkualitas. Membuat konten atau artikel untuk blog, bukan hanya banyaknya kata yang harus diperhatikan, namun juga kualitasnya. Apakah konten anda memang original ataukah hasil copy Paste. Jika anda menginginkan para pembaca anda berkunjung balik keblog atau website anda, maka kualitas konten menjadi point penting yang harus anda jaga. Jika anda sudah tercap sebagai plagiat, maka akan susah untuk mendapatkan kepercayaan dari para pembaca blog setia anda.

4. Buatlah artikel yang memiliki nilai jual

Strategi yang keempat adalah dengan membuat artikel yang memiliki nilai jual. Mungkin banyak orang menganggap membuat artikel adalah hal yang buang-buang waktu. Karena diluar sana sudah banyak orang yang membuat artikel dengan tema atau topik yang sama. Memang benar, diluar sana banyak orang yang membahas tentang topik yang sama dengan anda, namun tahukah anda tidak semua orang suka dengan artikel yang kita buat entah itu karena gaya bahasanya yang terlalu formal, atau karena faktor-faktor lain. Oleh karena disini anda disarankan dalam membuat artikel, harus memiliki daya jual, misalnya target anda adalah para pemula, maka gunakanlah bahasa yang sederhana namun tetap informatif. Berikan tips-tips atau cara-cara termudah, dengan demikian orang-orang tersebut akan betah berlama-lama diblog atau situs anda. dan tentunya diharapkan dikemudian hari akan kembali menyambangi blog anda.

5. Bangun Jejaring Sosial

Strategi yang ke lima adalah membangun Jejaring Sosial. Banyak Sosial Media yang bisa anda manfaatkan untuk menarik pengunjung agar datang keblog anda. diantara sosial media yang paling sering digunakan adalah Faceboook, twitter, linkedin, youtube, pinteres, Path, instagram dan lain-lain. Agar lebih efektif dalam menjalankan strategi ini, anda bisa menggunakan beberapa aplikasi yang bisa mengshare artikel anda secara otomatis begitu anda selesai membuatnya. Silahkan saja anda googling, sangat banyak penyedia jasa gratisan untuk mempromosikan situs anda ke situs jejaring sosial media hanya dengan cara sekali klik. Jadi anda tidak akan kewalahan dalam memanfaatkan jejaring sosial media tersebut.

6. Seo dan Keyword

Sebelum Anda menulis, setidaknya anda harus memperhatikan kata kunci relevan apa yang akan anda targetkan. Idealnya menurut Barb Sibbing, kata kunci atau keyword ini harus mencapai 8% dari konten yang anda buat. Jangan lupa menambahkan tag alt pada setiap gambar yang mewakili conten atau artikel anda. Jadi, ketika anda menuliskan sebuah artikel, anda harus ingat yang akan membaca konten anda bukan hanya manusia saja, melainkan juga robot mesin pencari yang akan membacanya. Oleh karenanya keduanya harus anda perhatikan.

7. BookMarking Sosial

Sediakan Kolom Bookmarking atau subscribe di halaman blog anda, ini bertujuan agar anda bisa mengirimkan postingan terbaru anda kepada para pelanggan anda. Cara ini memungkinkan orang yang pernah berkunjung, akan kembali mengunjungi blog anda.

8. Berbagi Dokumen

yang tak kalah pentingnya adalah dengan berbagi dokumen. dokumen ini bisa dokumen apa saja, misalnya hasil tulisan anda diblog anda kemudian anda convert ke pdf, lalu anda membaginya di situs berbagi dokumen seperti scribd, google drive dan masih banyak lagi yang lainnya. Jangan lupa untuk menuliskan alamat url blog anda disetiap dokumen yang anda sebar tadi.

9. Video Marketing

jangan lupa juga untuk membuat beberapa video untuk melengkapi konten yang anda buat. misalnya anda membuat konten tentang tutorial membuat blog dengan blogspot. maka buatlah versi videonya juga untuk mempermudah para pemula supaya lebih mudah untuk memahaminya. Anda bisa memanfaatkan youtube untuk menyimpan video-video anda.

10. Siapkan Feed RSS Blog

Menyiapkan feed RSS untuk situs web / blog Anda sangat cepat dan mudah untuk menghasilkan lalu lintas GRATIS ke situs web / blog Anda. karena dengan cara ini, orang-orang akan dengan mudah mengunjungi blog kita tanpa harus mengingat nama blognya. Mereka hanya butuh mengklik link yang tersedia didalam rss feed tersebut.

Itulah 10 Strategi yang dapat anda lakukan untuk mendapatkan Pengunjung/traffic Blog menurut Barb Sibbing. Semoga dapat bermanfaat terutama untuk para pemain blogger pemula seperti saya ini. Kebetulan saya sendiri juga belum bisa melaksanakan 10 strategi tersebut, jadi mohon jangan dibully jika blog ini masih sepi pengunjungnya. hehehe

7 Cara Agar diterima Adsense Tanpa Menunggu Lama

Kelas Math - Tak sedikit dari para blogger yang saya tahu dan yang saya kenal, baik melalui blog walking dari blog satu keblog yang lain maupun dengan brtanya secara langsung bahwa salah satu tujuan utama mereka membuat blog atau situs adalah untuk mengembangkan bisnisnya dan juga untuk mendapatkan penghasilan tambahan melalui program google adsense. mengapa google adsense menjadi pusat perhatian para blogger? Nah pada tulisan saya kali ini, sebenarnya hanya untuk mengupdate blog saja, karena bingung mau nulis apa lagi, maka saya putuskan saja untuk iseng-iseng menulis tentang google adsense. Jadi bagi para suhu atau master blogger, mohon jangan dibully ya.

Cara Membuat Daftar Isi untuk Label Tertentu

Kelas Math - ScreenShot di atas adalah contoh tampilan daftar isi untuk menampilkan label tertentu dalam halaman statis blogger secara otomatis. Dalam contoh di atas, saya menampilkan Label Download. Jadi Semua postingan/artikel yang dikasih label download, akan secara otomatis masuk kedalam daftar tersebut.

Manfaat Daftar Isi untuk Label Tertentu

Cara seperti itu diharapkan dapat membantu atau mempermudah pengunjung blog dalam menelusuri postingan/artikel berdasarkan kategori tertentu, selain itu juga dapat membantu mesin /robot google dalam mengindex semua postingan blog.

Bagaimana cara Membuatnya?

Untuk dapat membuatnya, sebenarnya cukup mudah, yaitu dengan menggunakan script dan memodifikasinya sesuai keinginan kita.

Langkah-langkah Cara Membuat Daftar isi Untuk Menampilkan Label Tertentu

1. langkah Pertama, Anda harus masuk/login kedalam akun blogger anda. 2. Kemudian Buka halaman --> Tambah Halaman baru. Lihar gambar di bawah ini. 3. Buat judul Entri sesuai keinginan anda misalnya Daftar isi Download. Kemudian Dalam mode HTML atau bukan compose, pastekan kode skrip ini.

<div id="sitemap6">Loading....</div><script> //<![CDATA[
var label = 'Download';
var text = 'Jumlah Postingan Dalam Kategori';
var sortby = 'date'; /* 'date' OR 'title' */

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('i a=["\\f\\v\\g\\h\\r\\d","\\v\\g\\b\\e\\d\\b\\1f\\c\\b\\B\\b\\l\\d","\\f\\g\\v","\\m\\w\\b\\b\\j\\f\\m\\r\\u\\f\\d\\f\\m\\j\\b\\w\\e\\k\\c\\d\\m\\S\\m","\\1q\\e\\c\\d\\q\\I\\f\\u\\l\\R\\v\\e\\c\\c\\Z\\e\\v\\1c\\q\\f\\h\\d\\b\\B\\e\\r\\1a\\R\\f\\d\\e\\g\\d\\S\\h\\l\\j\\b\\1g\\q","\\R\\B\\e\\1g\\S\\g\\b\\f\\k\\c\\d\\f\\q","\\e\\r\\r\\b\\l\\j\\1y\\x\\h\\c\\j","\\Z\\u\\j\\P","\\f\\h\\d\\b\\B\\e\\r\\1a","\\W\\b\\d\\1f\\c\\b\\B\\b\\l\\d\\1C\\P\\1B\\j","\\h\\l\\l\\b\\g\\1A\\1z\\1D\\1E","","\\w\\b\\b\\j","\\c\\b\\l\\W\\d\\x","\\b\\l\\d\\g\\P","\\1K\\d","\\d\\h\\d\\c\\b","\\c\\h\\l\\1c","\\g\\b\\c","\\e\\c\\d\\b\\g\\l\\e\\d\\b","\\x\\g\\b\\w","\\r\\k\\f\\x","\\I\\k\\j\\k\\c","\\f\\u\\g\\d","\\p\\c\\h\\o\\p\\e\\y\\x\\g\\b\\w\\q\\t","\\k\\g\\c","\\t\\y\\d\\h\\d\\c\\b\\q\\t","\\t\\o","\\p\\m\\e\\o\\p\\m\\c\\h\\o","\\p\\j\\h\\Y\\y\\v\\c\\e\\f\\f\\q\\t\\I\\k\\j\\k\\c\\t\\o","\\y","\\1h\\y","\\p\\m\\j\\h\\Y\\o\\p\\u\\c\\o","\\p\\m\\u\\c\\o"];i T=1,H=1G,K=1F 1H();V M(){i U=O[a[1]](a[0]);U[a[2]]=a[3]+1b+a[4]+T+a[5]+H;O[a[7]][a[6]](U)}V 1x(X){i J=O[a[9]](a[8]);C(!J){1d};J[a[10]]=a[11];i A=X[a[12]];C(A[a[14]][a[13]]>0){N(i G=0;G<A[a[14]][a[13]];G++){i D=A[a[14]][G];i E=D[a[16]][a[15]];N(i z=0;z<D[a[17]][a[13]];z++){C(D[a[17]][z][a[18]]==a[19]){i F=D[a[17]][z][a[1o]];C(F&&F[a[13]]>0&&E&&E[a[13]]>0){K[a[1I]]({"\\k\\g\\c":F,"\\I\\k\\j\\k\\c":E})};1l}}};C(A[a[14]][a[13]]>=H){T+=H;M()}1i{i Q=a[11],n;i n=(1J===a[16]?K[a[1w]](V(n,1e){1d n[a[L]]>1e[a[L]]?1:-1}):K);N(i s=0;s<n[a[13]];s++){Q+=a[1L]+n[s][a[1v]]+a[1s]+n[s][a[L]]+a[1k]+n[s][a[L]]+a[1j]};J[a[10]]=a[1u]+1m+a[1t]+1b+a[1r]+n[a[13]]+a[1n]+Q+a[1p]}}}M()',62,110,'||||||||||_0x73e9|x65|x6C|x74|x61|x73|x72|x69|var|x64|x75|x6E|x2F|_0x6718x10|x3E|x3C|x3D|x70|_0x6718x12|x22|x6F|x63|x66|x68|x20|_0x6718xd|_0x6718x9|x6D|if|_0x6718xb|_0x6718xc|_0x6718xe|_0x6718xa|max|x6A|_0x6718x8|sitemap6Arr|22|runSitemap6|for|document|x79|_0x6718xf|x26|x2D|start|_0x6718x5|function|x67|_0x6718x7|x76|x62|||||||||||x36|label|x6B|return|_0x6718x11|x45|x78|x3A|else|28|27|break|text|32|20|33|x3F|31|26|30|29|25|23|sitemap6|x43|x54|x48|x49|x42|x4D|x4C|new|150|Array|21|sortby|x24|24'.split('|'),0,{}));
//]]> </script>

Perhatikan pada var labe di atas, kode itu saya gunakan untuk menampilkan semua postingan yang ada pada label Download. Silahkan sesuaikan dengan label yang akan anda tampilkan. Perlu di ingat, penulisan label ini harus sama persis dengan yang anda buat. jadi harus teliti penggunaan spasi atau tanda lainnya.
4. Kemudian Publikasikan/simpan Halaman. Lihat hasilnya.
5. Untuk Mempercantik tampilannya, saya menambahkan beberapa pengaturan dengan menambahkan CSS atau stylenya. Caranya : Simpan Kedo Style Berikut ini dalam template anda, Masuk kedalam Template --> Edit Html, kemudian Cari Kode <style> letakan kode ini dibawahnya atau bisa juga ditambahkan sebelum kode </style> .

#sitemap6 {font-family: 'Exo', sans-serif;font-size:16px; font-weight:400; background-color: #92dff4;}
#sitemap6 .judul {font-family: 'Exo', sans-serif;font-size:150%; background-color:#3498db; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap6 a {font-family: 'Exo', sans-serif;color:#666; background-color: #92dff4; text-decoration:none; transition:all .3s ease;}
#sitemap6 a:hover {color:#000;}
#sitemap6 ol {margin:30px; padding:0px; background-color: #92dff4;}
#sitemap6 ol li {color:#666; list-style-type:decimal; background-color: #92dff4; margin-left:20px; padding:5px; line-height:1.5em; -webkit-margin-start:40px !important;}

6. Kemudian Simpan Tema anda dan lihat hasilnya.
Sekian saja bagaimana cara membuat daftar isi blog khusus untuk menampilkan kategori atau label tertentu nya. Semoga dapat membantu. Untuk demo nya anda bisa mengunjungi halaman download pada blog ini. atau bisa juga dengan klik

Demo Click here

Template Blogger Gratis Super Cepat dan Responsive - Soft Kelasmat 1

Kelas Math - Template Blogger Gratis yang Super Cepat dan Responsive ini saya beri nama Soft Kelasmat 1. Karena Template ini merupakan template pertama yang akan saya berikan kepada siapapun yang menginginkan untuk menggunakannya. Template Blogger Gratis Super Cepat dan Responsive - Soft Kelasmat 1 ini khusus untuk pengguna blogger ya. Karena saya memang masih belum bisa dalam membuat template untuk cms wordpress. Berikut ini adalah screenshoot Template Blogger Gratis Super Cepat dan Responsive - Soft Kelasmat1. Untuk dapat melihat lebih jelas atau demo nya Anda bisa mengunjungi alamat : https://softkelasmat.blogspot.com/

Bagaimana Memilih Platform yang Pas?

Bagaimana cara memilih platform blog yang Pas buat Blogger Pemula?

Kelas Math - Ada banyak macam/jenis platform yang dapat anda gunakan untuk memulai ngeblog. Diantaranya adalah Wordpress, Blogger, Drupal, Joomla, prestashop dan masih banyak lagi yang lainnya. Bagi anda yang masih baru di dunia blogging, tentunya perlu mengetahui Platform mana yang pantas untuk anda. Hal ini dikarenakan masing-masing plaltform memiliki keunggulan dan kelemahannya masing-masing. Namun dari sekian banyaknya Platform, ada dua platform yang saya rekomendasikan bagi anda yang masih pemula. Yaitu Wordpress atau Blogger. Karena kedua platform ini lebih user friendly alias lebih mudah digunakan dan lebih familiar bagi para bloger pemula. Untuk itu, supaya anda tidak ragu menentukan mana yang cocok untuk anda gunakan, simak beberapa ringkasan berikut ini.

A. Blogger atau Blogspot

Kenapa Blogger atau Blogspot.com saya tempatkan pada urutan yang pertama? Karena merupakan salah satu platform blogging yang banyak digunakan selain WordPress. Selain karena gratis dan sangat mudah dibuat, tampilan dan fitur Blogger juga sangat user-friendly.

Ada banyak alasan kenapa Blogger menjadi salah satu pilihan utama bagi pemula seperti saya dalam membuat blog dengan mudah dan cepat. Salah satu alasannya adalah selain yang sudah saya ungkapkan di atas bahwa Blogger adalah salah satu produk yang dimiliki oleh perusahaan raksasa Google sehingga akan menjadi daya tarik tersendiri bagi para blogger baik yang pemula maupun yang sudah mahir dan malang melintang didunia perbloggeran.

Pada mulanya Blogger ini bukanlah milik perusahaan google, melainkan produk milik Pyra Labs, yang kalo tidak salah diluncurkan pada 23 Agustus 1999. Namun, kemudian Google mengakuisisinya atau membelinya pada tahun 2003 sehingga membuat Blogger menjadi salah satu produk andalan bagi google.

Sejak dibeli nya blogger dari Pyra Labs, banyak sekali perubahan-perubahan yang dilakukan oleh Google dalam memenuhi keinginan para penggunanya, misalnya saja:

• mengintegrasikan Picasa di tahun 2004 sehingga Blogger memiliki fasilitas penyimpanan Foto. Fitur ini bisa digunakan untuk menyimpan foto maupun untuk berbagi.
• Servernya datanya dipindahkan ke server Google
• Standarisasi gadget/widget
• penambahan template Blogger
• penambahan fitus https
• bisa costum domain tanpa upgrade akun di google
• bisa ikut jadi publisher adsense
• dan masih banyak perubahan lain yang membuat Blogger menjadi
• platform blogging tangguh seperti yang kita kenal sekarang.

Untuk anda yang baru mencoba blogging, tidak ada salahnya untuk mempertimbangkan platform yang satu ini, apalagi kalau anda ingin memonetasi blog yang anda buat tanpa harus keluar modal terlebih dahulu.

Supaya anda tidak ragu dalam memilih Blogger sebagai penunjang blog pertama anda, berikut ini saya uraikan keunggulan-keunggulan dari blogger.

Kelebihan Blogger atau Blogspot

1. Gratis

Ini adalah salah satu alasan utama bagi kebanyakan orang memilih Blogger termasuk juga saya..hehehe
Dengan Blogger, Anda tidak perlu lagi mengeluarkan uang kecuali untuk membeli pulsa internet. Semua Fasilitas yang ada pada Blogger diberikan secara cuma-cuma alias gratis oleh perusahaan Google. Anda bahkan bisa membuat sampai 100 blog untuk setiap akun Google. 100 Blog itu bukan sedikit loh.. mengurus 1 blog saja sudah pusing apalagi sampai 100. Tapi itulah hebatnya google. Semuanya digratiskan tanpa harus membayar sepeserpun.

2. Mudah dan praktis

Kelebihan yang kedua adalah Mudah dan juga Praktis. Membuat blog di Blogger sangatlah mudah, dalam hitungan menit sudah langsung bisa jadi dan aktif. Anda hanya perlu masuk ke dalama Blogger.com dan login sebagai akun Google yang Anda punya. Cukup tuliskan judul dan alamat blog yang anda inginkan maka Anda sudah bisa memiliki blog sendiri dengan alamat standar : alamatblog.blogspot.com setelah itu Anda bisa menambahkan fungsi lain dari dalam dashbord Blogger anda. misalnya dengan menambahkan gadget/ widget pada tampilan blog Anda.
Selain kemudahan seperti yang saya sebutkan tadi, Blogger atau blogspot juga terbilang sangat praktis. Untuk Anda yang tidak mau repot-repot melakukan perawatan blog atau kostumasi tema dan hanya mau menulis konten atau atikel, Blogger bisa menjadi pilihan yang tepat buat anda. Karena didalam dashbord blogger sudah tersedia banyak tema yang bisa anda pakai dengan hanya sekali klik.

3. Terintegrasi dengan Google

Seperti yang saya sebutkan di atas, syarat membuat blog di Blogger adalah dengan diwajibkannya memiliki akun Google. hampir setiap orang di jaman sekarang ini pasti punya akun google. Mengapa? Karena hampir semua orang saat ini memiliki Smartphone di mana didalam smartphone untuk dapat mendapatkan aplikasi biasanya menggunakan play store sebagai pedoman. Kita tahu bahwa agar dapat menggunakan playstore, para pengguna smartphone diwajibkan membuat akun salah satunya adalah akun google.

Namun, jika anda belum punya akun google mungkin saat ini anda perlu membuatnya, gratis koq.  Dengan memiliki akun Google, anda akan dapat dengan mudah mendapatkan semua layanan dari Google hanya menggunakan satu akun. Kita tahu, layanan google ini sangat banyak yang diberikan secara cuma-cuma. Salah satu nya adalah Blogger.com

Blogger atau Blogspot dapat terintegrasi dengan layanan Google lainnya seperti Adsense, Google Anallytics, dan google search console dan Adwords bagi para penggiat bisnis marketing.

4. Blogger Dibackup oleh server yang handal

Sejak google mengakuisisi Blogger, baru pada semester akhir tahun 2007 Google berhasil memindahkan Blogger atau blogspot secara menyeluruh ke server google sendiri. Jadi kalau anda membuat blog di Blogger, maka secara otomatis anda juga menggunakan jasa layanan hosting dari Google. ini artinya anda memiliki dekingan
server yang super handal yang dapat menampung jumlah pengunjung blog (traffik) yang tinggi. Selain dapat menampung traffik yang tinggi, jaminan crash juga akan teratasi. dan selama ini yang saya tau, blogger sangat jarang crash atau server down.

5. Keamanan yang Terjaga dan Terjamin

Meskipun tidak ada garansi yang pasti dari pihak google untuk masalah keamanannya, namun sangat mustahil untuk dapat membobol akun Blogger yang anda buat. Karena pihak google telah memberikan pengamanan yang berlapis.

6. Blogger Bisa menggunakan kustom domain 

Bagi anda yang menjadikan blog sebagai penghasilan tambahan, alangkah baiknya merubah nama domain blog nya menjadi domain yang top level domain (TLD). Hal ini menunjukkan keseriusan seseorang dalam menjalani bisnis nya. berbeda dengan masih menggunakan domain.blogspot.com, orang lain masih akan meragukan keseriusannya.
Untuk mendapatkan nama domain TLD, sebenarnya didalam dashboard blogger sekarang ini sudah ada fasilitas beli domain langsung ke google, namun anda juga bisa mendaftarkannya pada situs yang khusus melayani pembelian nama domain seperti godaddy, NameCheap, atau pada penyedia layanan domain sekaligus hostingnya seperti Niagahoster, IDWebhost, idhostinger atau Masterweb dan masih banyak lagi. Untuk Anda yang mengingikan Domain Tld (.com) yang sangat murah, Anda bisa membelinya di MasterWeb. Terakhir saya membeli domain untuk blog ini yakni kelasmat.com hanya dengan Harga Rp 90 an ribu saja. Jadi apa lagi, Ayo buruan beli Domain dot com disini.

Kelebihan dari blogger, anda dapat dengan mudah menggunakan custom domain anda sendiri tanpa harus mengupgrade akun anda terlebih dahulu seperti yang ada pada wordpress atau platform yang lainnya.

7. Monetasi blog

kelebihan lain dari blogger selanjutnya adalah monetasi blog. Untuk Anda yang ingin membuat blog untuk dapat penghasilan tambahan dengan memakai jasa adsense, Blogger bisa menjadi pilihan yang paling tepat. Karena blogger adalah bagian dari google, tentu akan menjadi prioritas dibanding dengan platform lainnya. dengan menggunakan Blogger, anda juga dapat bebas mengikuti program afiliasi atau reseller atau bahkan menggunakan iklan PPC atau program lain nya.

Dengan segala kelebihannya, tentu saja Blogger juga memiliki banyak kelemahan. Apa sajakah kelemahannya?

Kelemahan blogger diantaranya adalah:

1. Kekurangan atau kelemahan Blogger yang pertama adalah tampilan dari dasboard adminnya yang sangat sederhana.
2. Dalam menulis postingan atau artikel, diblogger tidak bisa leluasa tidak seperti di dalam wordpress yang bisa ditambah dengan memanfaatkan plugin.
3. akan sedikit sulit untuk menyesuaikan tampilan blog bagi anda yang masih baru mengenal HTML dan CSS.
4. kelemahan yang terakhir, karena blogger merupakan salah satu produk Google, maka kita sebagai penggunanya harus patuh dan tunduk pada peraturan yang dibuat oleh Google.

B. Wordpress

WordPress merupakan platform sistem manajemen konten (CMS) yang paling banyak digunakan di dunia. CMS atau sistem manajemen konten itu artinya adalah aplikasi web dimana kita sebagai orang awam dan tidak menguasai bahasa pemogramanpun dapat untuk mengelola website atau menerbitkan konten tanpa harus menguasai istilah HTML, CSS, PHP, Javascript dll. Ada dua pilihan dalam menggunakan wordpress, yang pertama anda bisa membuat blog di wordpress.com untuk anda yang tidak memiliki hosting atau pilihan yang kedua anda bisa menggunakan wordpress.org untuk anda yang punya hosting sendiri (self Hosting). Untuk beda keduanya akan saya jelaskan pada kesempatan lain.

Bahasa dasar dari wordpress adalah dengan bahasa PHP dan MySql. Hampir setiap penyedia hosting didunia menyediakan platform wordpress ini. Karena memang lebih dari 30% dari website besar di dunia menggunakan wordpress. Alasannya tentu karena dalam wordpress banyak kelebihan dibandingkan blogger atau blogspot. Tapi itu jika anda sudah menguasai bahasa PHP dan MySql. Untuk anda yang masih belum menguasainya lebih baik menggunakan blogspot. Karena kalau salah-salah dalam pengoperasiannya bisa fatal error.
Mengapa banyak orang lebih memilih wordpress sebagai platform bog atau websitenya? Berikut ini adalah beberapa kelebihan wordpress di bandingkan dengan platform lain.

Kelebihan Wordpress

1. Gratis

Sama dengan blogger, wordpress juga menyediakan fitur gratis bagi anda yang tidak ingin mengeluarkan dana. Namun, tentu saja versi gratisan tidak selengkap fasilitas yang berbayar. Ini akan sangat mempengaruhi kinerja/dan performa blog anda. Dalam wordpress yang self host, anda bisa menginstal plugin sesuka anda. Sangat banyak plugin atau yang tersedia di internet. Mulai dari yang gratisan sampai yang berbayar.

2. memiliki software antarmuka yang intuitif/menarik dan mudah digunakan

Berbeda dengan blogger yang memiliki tampilan dashboard yang sangat sederhana, di wordpress tampilan admin nya sangat fleksibel dan menarik. Bahkan bagi yang mengerti bahasa pemograman, wordpress adalah cms yang paling direkomendasikan untuk para pengembang.

3. WordPress bersifat open-source

Kenapa wordpress adalah cms yang paling direkomendasikan untuk para pengembang? karena wordpress memang bersifat open-source. Open source artinya siapa saja boleh menggunakan dan mengembangkannya.

4. Bisa menambah atau membuat fungsionalitas sendiri

bagi Anda yang pemula sekali pun dapat dengan mudah menambah fungsi-fungsi tambahasan dari wordpress dengan memanfaatkan plugin yang tersedia. mulai dari plugin untuk mempercantik tampilan atau juga untuk bisnis atau jualan online sangat banyak tersedia secara gratis.

5. Panduan atau tutorial yang Lengkap

Wordpress memiliki komunitas internet yang sangat besar jika dibandingkan dengan komunitas sejenisnya. Oleh karena itu, hampir setiap permasalahan yang terjadi (bug) di dalam wordpress akan dapat dengan segera teratasi.

6. Proses Update yang mudah dan cepat

Seperti yang saya jelaskan diatas bahwa komunitas wordpress merupakan yang terbesar sehingga setiap kali ada masalah atau perbaikannya atau bahkan jika ada pembaruan, maka wordpress selalu melakukan update. dalam melakukan update ini, pengguna tidak akan mengalami kesulitan karena di dalam wordpress sudah tersedia fitur update ke versi yang lebih tinggi baik secara otomatis ataupun secara manual.

Meskipun banyak kelebihannya, namun wordpress tetap saja masih memiliki kekurangan. Kekurangannya itu antara lain:

Kelemahan atau Kekurangan Wordpress
1. Tingkat keamanan agak beresiko
Karena sebagian besar website besar dibuat dengan wordPress, maka risiko terserang hacker juga semakin besar. Namun, Anda bisa mencegahnya dengan menginstall beberapa plugin untuk mengamankannya.
2. Sering Bug
Masih banyak plugin yang belum suport dengan versi terbaru wordpress. akibatnya jika tidak hati-hati dalam mengupdate, bisa jadi website anda akan mengalami crash atau error.
3. Loading website berat.
Ada masalah yang sering dialamai bagi pengguna wordpress ketika Anda menginstall terlalu banyak plugin. Website atau blog akan terasa berat dan lambat ketika dibuka. Namun, anda tidak perlu khawatir, karena Anda bisa mengatasinya dengan menginstall plugin caching.

Kesimpulan :

Berdasarkan uraian di atas, saya harap anda sudah bisa menentukan pilihan untuk menggunakan Platform mana yang sesuai dengan kebutuhan dan kemampuan anda. Secara pribadi, bagi anda yang belum menguasai bahasa php dan MySql, saya lebih menyarankan anda untuk menggunakan Blogger. Namun, alangkah lebih baiknya anda tetap mencoba wordpress juga. Jadi anda bisa lebih memahami kedua platform tersebut.

Cara Membuat Macam-macam Tombol Menggunakan CSS

Contoh Tombol

Ada beberapa macam cara yang dapat digunakan untuk membuat link download. Bisa langsung menggunakan link biasa atau menggunakan gambar. Namun yang saya ketahui dari beberapa sumber mengatakan bahwa, link eksternal yang menggunakan gambar selain membuat loading blog agak lambat namun juga kurang baik dalam seo (Search engine optimation). Padahal Bentuk-bentuk tombol download yang unik tentu dapat mempercantik tampilan template suatu blog. Oleh karena itu, disini saya coba membagikan cara membuat macam-macam tombol download untuk blog tanpa menggunakan gambar. Cara ini murni menggunakan CSS.

Demo Tombol 1

Cara Membuat Tombol 1

Tombol ini yang paling sering saya jumpai dikala saya blogging kesana-kemari. Bagaimana cara membuatnya? Silahkan ikuti langkah-langkah berikut ini.

Cara Membuatnya
Simpan kode di bawah ini kedalam template blog atau sebelum kode </style>

input#gobutton{
    cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
    padding:5px 25px; /*add some padding to the inside of the button*/
    background:#35b128; /*the colour of the button*/
    border:1px solid #33842a; /*required or the default border for the browser will appear*/
    /*give the button curved corners, alter the size as required*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*give the button a drop shadow*/
    -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
    box-shadow: 0 0 4px rgba(0,0,0, .75);
    /*style the text*/
    color:#f3f3f3;
    font-size:1.1em;
    }
    /***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
    input#gobutton:hover, input#gobutton:focus{
    background-color :#399630; /*make the background a little darker*/
    /*reduce the drop shadow size to give a pushed button effect*/
    -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
    box-shadow: 0 0 1px rgba(0,0,0, .75);
    }

Contoh Cara Menggunakannya :

<input id="gobutton" type="submit" value="download!" />

Silahkan Ganti kata Download yang sudah saya tandai dengan warna Kuning tersebut dengan kata-kata anda sendiri. Misalnya Go! atau Klik disini.

Demo Tombol 2

Tombol yang kedua ini juga sering saya jumpai dikala saya blogging. Bagaimana cara membuatnya? Silahkan ikuti langkah-langkah berikut ini.

Cara Membuat Tombol ke2
Silahkan salin css berikut ini, tempatkan pada tag setelah </style>

input#bigbutton {
width:500px;
background: #3e9cbf; /*the colour of the button*/
padding: 8px 14px 10px; /*apply some padding inside the button*/
border:1px solid #3e9cbf; /*required or the default border for the browser will appear*/
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
/*style the text*/
font-size:1.5em;
font-family:Oswald, sans-serif; /*Oswald is available from https://www.google.com/webfonts/specimen/Oswald*/
letter-spacing:.1em;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); /*give the text a shadow - doesn't appear in Opera 12.02 or earlier*/
color: #fff;
/*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
/*give the corners a small curve*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/***SET THE BUTTON'S HOVER AND FOCUS STATES***/
input#bigbutton:hover, input#bigbutton:focus {
color:#dfe7ea;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
}

Cara Menggunakannya seperti di bawah ini:

<input id="bigbutton" type="submit" value="Download" />

Demo Tombol 3

Cara Membuatnya:
Salinlah kode dibawah ini dan tempatkan pada sebelum kode </style>

input#round{
    width:100px; /*same as the height*/
    height:100px; /*same as the width*/
    background-color:#ff0000;
    border:1px solid #ff0000; /*same colour as the background*/
    color:#fff;
    font-size:1.6em;
    /*set the border-radius at half the size of the width and height*/
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    /*give the button a small drop shadow*/
    -webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
    box-shadow: 2px 2px 15px rgba(0,0,0, .75);
    }
    /***NOW STYLE THE BUTTON'S HOVER STATE***/
    input#round:hover{
    background:#c20b0b;
    border:1px solid #c20b0b;
    /*reduce the size of the shadow to give a pushed effect*/
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    box-shadow: 0px 0px 5px rgba(0,0,0, .75);
    }

Cara Memanggilnya seperti ini:

<input id="round" type="submit" value="Go!" />

Gimana Teman-teman Contoh Tombol Downloadnya?

Untuk Menginputkan link downloadnya silahkan teman-teman pelajari sendiri cara membuat link eksternal. Browsing aja lagi digoogle banyak koq yang sudah membuat panduannya. Jika Anda masih belum puas, berikut ini saya contoh lagi beberapa contoh.

Demo Tombol 4, 5, 6, 7

30K Daftar sekarang & Download Free Join for Free & Download $20 Register right now & Download $5 Log in Now & Download
















Kode CSS nya :

.a-btn{
    background: #275713;
background: -webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background: -webkit-linear-gradient(top, #3C5A3C 0%, #508148 100%);
    background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
    padding-left:90px;
    padding-right:105px;
    height:90px;
    display:inline-block;
    position:relative;
    border:1px solid #5d81ab;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    float:left;
    clear:both;
    margin:10px 0px;
    overflow:hidden;
    -webkit-transition:box-shadow 0.3s ease-in-out;
    -moz-transition:box-shadow 0.3s ease-in-out;
    -o-transition:box-shadow 0.3s ease-in-out;
    transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
    position:absolute;
    left:15px;
    top:13px;
    border:none;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
    position:absolute;
    font-size:36px;
    top:18px;
    left:18px;
    color:#bde086;
    text-shadow:0px 1px 1px rgba(0,0,0,0.3);
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
    opacity:0;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn-text{
    padding-top:13px;
    display:block;
    font-size:30px;
    text-shadow:0px -1px 1px #5d81ab;
    color: #fff;
font-family: Oswald;
}
.a-btn-text small{
    display:block;
    font-size:11px;
    letter-spacing:1px;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:80px;
    border-left:1px solid #5d81ab;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    border:1px solid rgba(0,0,0,0.5);
    background:#5b5b5b url(http://2.bp.blogspot.com/-M7lYlHaBzc0/VGvVsR11GDI/AAAAAAAAIhs/U_7VAcGB1J4/s1600/arrow_down.png) no-repeat center center;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.a-btn:hover{
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
    opacity:0;
}
.a-btn:hover .a-btn-slide-text{
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
    background-color: #45BC32;
}
.a-btn:active{
    position:relative;
    top:1px;
    background:#5d81ab;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#80a9da;
}
.a-btn:active .a-btn-icon-right span{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}

Sedangkan Kode Html nya :

<a href="#" class="a-btn">
      <span class="a-btn-slide-text">30K</span>
      <img src="http://3.bp.blogspot.com/-9u1k9OCRfKQ/VGvU6yZgtiI/AAAAAAAAIhM/62030J7RATM/s1600/Android-FileTransfer-icon.png" alt="Android" />
      <span class="a-btn-text"><small>Daftar sekarang &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>
     <a href="#" class="a-btn">
      <span class="a-btn-slide-text">Free</span>
      <img src="http://2.bp.blogspot.com/-OLGIrTGU8nc/VGvU7d_uH6I/AAAAAAAAIhQ/5FYYzJitAj0/s1600/DivXPlayer-icon.png" alt="Player" />
      <span class="a-btn-text"><small>Join for Free &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>
     <a href="#" class="a-btn">
      <span class="a-btn-slide-text">$20</span>
      <img src="http://4.bp.blogspot.com/-2WqXLgTKM7I/VGvU8Xd_nDI/AAAAAAAAIhc/M5XEbT0eyEw/s1600/DVD-icon.png" alt="DVD" />
      <span class="a-btn-text"><small>Register right now &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>
     <a href="#" class="a-btn">
      <span class="a-btn-slide-text">$5</span>
      <img src="http://2.bp.blogspot.com/-0MbZyIBlbM0/VGvU-D42KiI/AAAAAAAAIhk/_3Ji_yqBOzU/s1600/seo-web-code-icon.png" alt="web code" />
      <span class="a-btn-text"><small>Log in Now &amp;</small> Download</span> 
      <span class="a-btn-icon-right"><span></span></span>
     </a>

Itu lah contoh tombol download yang bisa saya bagikan untuk hari ini. Jika ada pertanyaan silahkan aja tuliskan pada kolom omentar di bawah. atau juga anda bisa menghubungi saya melalui halaman kontak yang sudah saya sediakan.