Showing posts with label Blogging. Show all posts
Showing posts with label Blogging. Show all posts
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:
Thursday, November 14, 2019

Background Blog Berganti Warna Secara Otomatis

Kelas Math - Mungkin Anda pernah berkunjung kesebuah blog dengan berubah-ubah warna backgroundnya, bagaimana kira-kira menurut Anda? Menarik bukan? Menggonta-ganti warna secara otomatis ini dapat dilakukan para pembaca blog lebih merasa nyaman dan tidak merasa jenuh ataupun bosan. Namun bagaimanakah cara membuatnya? Apakah susah? Tenang, disini akan saya bantu cara membuatnya. Mudah aja koq sebenarnya hanya butuh tambahan kode css sedikit saja.

Baiklah Trik kali ini akan membantu Anda dalam mengubah warna latar belakang secara otomatis. sehingga saya kasih aja judul tulisannya Background Blog Berganti Warna Secara Otomatis
Memberikan tampilan segar untuk pengunjung blog Anda setiap kali mereka mengunjunginya dengan menunjukkan warna latar belakang yang keren agar mereka tidak cepat bosan. 

Apakah Berpengaruh pada Kecepatan blog?

Tidak. Karena Cara yang saya pakai untuk membuat warna background blog ini berubah secara otomatis tidak menggunakan Scripts ataupun kode yang memberatkan loading blog. Cara yang saya gunakan hanya menggunakan css yang tentunya tidak akan menjadikan loading blog Anda menjadi lambat.
Trik ini tidak akan mempengaruhi kecepatan halaman blog Anda. Itu hanya menambahkan kode warna setiap kali pengunjung menyegarkan blog Anda dan warna yang dipilih secara acak sebagai warna latar belakang.

Bagaimana cara membuat Background Blog Berganti Warna Secara Otomatis?

Caranya cukup mudah. Namun, Anda terlebih dahulu harus login ke akun blogger anda dan buka edit html template Anda. Jika sudah berada di halaman edit template,
  1. Cari kode ]]> </ b: skin> Gunakan saja
    Ctrl
    +
    F
    secara bersamaan pada area edit html untuk mempermudah dalam mencarinya. Maka Anda akan langsung menemukan kode ]]> </ b: skin>. 
  2. Copy kode berikut ini, dan pastekan tepat diatas kode ]]> </ b: skin> yang tadi.


body {
 animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
 -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */
 -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */
 -o-animation: colorBackground 20s infinite; /* Opera 12.00 */
 }
@keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }
 }
 @-webkit-keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }
 }
 @-moz-keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }
 }
 @-o-keyframes colorBackground {
 0% { background-color: #fbcf61; color: #fbcf61; }
 20% { background-color: #6bd57e; color: #6bd57e; }
 40% { background-color: #ff6f6f; color: #ff6f6f; }
 60% { background-color: #57cff4; color: #57cff4; }
 80% { background-color: #0ed4c8; color: #0ed4c8; }
 100% { background-color: #fbcf61; color: #fbcf61; }
 }

3. Selanjutnya save template Anda, dan lihat hasilnya.

Pada kode diatas, warna tulisan akan sama dengan warna background. Jika Anda tidak menginginkannya, setiap tulisan color: #kodewarna; diakhir setiap baris kode, Silahkan disesuaikan saja. Dan untuk demo silahkan bisa lihat di blog ini.