Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts
Thursday, November 21, 2019

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

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

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