Kelas Math – Be Smart Ya kelas Math: Javascript

Enter your keyword

Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Wednesday, January 1, 2020

Animasi Teks Berputar Dengan JQuery

By On January 01, 2020
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.
Animasi Teks Berputar Dengan JQuery
Jadi Pastikan dalam blog kamu sudah terpasang Jquery nya berapapun versinya tidak masalah namun lebih baik lagi menggunakan jquery yang terbaru.

See the Pen Animasi Teks Berputar dengan Jquery by ArRahim (@kelasmat) on CodePen.

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.

Wednesday, December 25, 2019

Membuat Sticky Widget di Blogger

By On December 25, 2019
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.
Membuat Sticky Widget di Blogger

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.
id Widget di Blogger

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.
Membuat Sticky Widget di Blogger

Kemudian jangan lupa Simpan dan lihat hasilnya. Semoga berhasil. Untuk Demonya Silahkan Klik link di bawah ya..

Thursday, November 21, 2019

Cara Membuat Warna Menu Blog Berbeda Tiap Halaman

By On November 21, 2019
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.
Cara Membuat Warna Menu Blog Berbeda Tiap Halaman
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.

Friday, November 15, 2019

Cara Mudah Membuat SEO Smart Link Otomatis

By On November 15, 2019
Kelas Math - SEO smart link adalah sebuah Auto Generat Link, bisa di katakan cara membuat internal link secara otomatis. Seo Smart link ini biasanya dipakai oleh blog wordpress karena memang sudah tersedia pluginnya. jadi ketika kita memasang sebuah script tersebut ke template blog dengan keyword target dan URL tertentu yang di tujukan, maka setiap kata tersebut muncul nanti akan otomatis menjadi sebuah link dengan URL yang di tujukan/ditentukan. Misalnya saya akan membuat sebuah link otomatis dengan text anchornya kelas dan akan setiap kata kelas yang muncul di blog ini akan secara otomatis membentuk link ke alamat url yang saya tentukan misalnya kelasmat.com
Bagi para pengguna Wordpress self hosting, seo smart link bukan lah sesuatu hal yang sulit. Karena di platform wordpress sudah sangat banyak yang membuat pluginnya. Jadi para pengguna wordpress tinggal instal dan langsung pakai. Namun, bagaimana dengan platform blogspot? Nah jika anda ingin menerapkan atau membuat seo smart link di blogspot, saya akan memberikan solusinya yaitu dengan menyisipkan script didalam template kita. dan hasilnya tidak kalah juga dengan pluginnya wordpress loh. Script itu lah yang dinamakan SEO Smart Link.

Bagaimana Cara Mudahnya Membuat SEO Smart Link Otomatis

Caranya cukup mudah hanya dengan memasang/menempatkan kode dibawah ini tepat diatas </body> pada template Anda
<script type='text/javascript'>
function smartLink(){
    this.keywdHref = new Object();
    this.add = function(keyword, href){
        if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
        this.keywdHref[keyword] =  href;
    }
    this.createAnchor = function(){
        var objs = document.getElementsByTagName(&quot;div&quot;);
        for(var i=0; i&lt;objs.length; i++){
            var obj = objs[i];
            if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
                var content = obj.innerHTML;
                for(var keyword in this.keywdHref){
                    var href = this.keywdHref[keyword];
                    var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
                    obj.innerHTML = newstr;
                    content = newstr;
                }
            }
        }
    }
    this.startScript = function(){
        var onLoad = window.onload;
        window.onload = function(){
            if(onLoad){onLoad();}
            setTimeout(&quot;f.createAnchor()&quot;, 100);
        }
    }
}
</script><br />
<script type='text/javascript'>
var f = new smartLink();
 f.add(&quot;Matematika&quot;,&quot;http://www.kelasmat.com/&quot;),
 f.add(&quot;Blogger&quot;,&quot;http://www.kelasmat.com/&quot;);
 f.startScript();
</script>
Silahkan sesuaikan kata Matematika di atas dengan kata yang akan anda bidik. jangan lupa juga menentukan alamat url nya dengan mengganti https://www.kelasmat.com/ dengan url blog anda.
Anda juga bisa menambahkan banyaknya keyword dengan cara :
f.add("SEO", "https://www.kelasmat.com/");
f.add("Template", "https://www.kelasmat.com/");
f.add("Blogger", "https://www.kelasmat.com/");
Namun yang perlu diperhatikan adalah jangan terlalu berlebihan dalam menambahkan kata kunci atau keywordnya. Cukup 3 atau 4 kata kunci saja. Karena sesuatu yang berlebihan pasti tidak akan baik. Untuk melihat hasilnya Anda dapat melihat pada blog contoh di bawah ini perhatikan kata Blogger itu link otomatis yang telah dibuat:

Friday, October 4, 2019

Cara Membuat Menu Tersembunyi di Blogspot

By On October 04, 2019
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

Cara Membuat Menu Tersembunyi di Blogspot

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


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 />