SEO Blogger | Google Adsense

Curhat Tentang HTML 5

Ahmad Maryuki Monday, December 12, 2011 HTML, SEO 12 comments

Mohon maaf pada teman2 setia blog ini, yang lama sekali gak update dikarenakan banyak urusan di dunia nyata. hahaha. Nah posting kali ini berkaitan dengan penggunaan html 5 di blog. Sejuta trik blogger mau curhat tentang HTML 5. Bagi yang sudah master HTML 5 mohon pencerahannya.

Bagi para master penggunaan HTML 5 mungkin lebih mudah penggunaannya dibanding model sebelumnya. Tapi tidak bagi saya yang masih coba coba penggunaan HTML 5 sangat sulit sekali. Belum lagi kode yang masih baru. Nah berikut ini curhat tentang penggunaan template bassic HTML 5 di blog saya Status-Status Lucu

1. Di HTML 5, ternyata proses indeks ke google lebih cepat dari yang sebelumnya. Padahal metode yang digunakan dengan blog saya ini sama.

2. Di HTML 5, apabila kita memasukkan kode <div> yang diikuti css yang sama atau yang memiliki karakter sama, misal membuat 2 menu dengan css yang sama, apabila di cek di validasi V3 ternyata menjadikan eror karena mengandung duplikat atau kode yang sama. Padahal kode strukturnya sudah benar.

3. Blog yang menggandung HTML 5, kadang tidak bisa diterjemahkan ke dalam goolge terjemahan.

4. Untuk SEO jika menggunaan meta tag yang tidak benar, tenyata mempengaruhi posisi serp. Nah untuk no.4 ini perlu master-master yang menjawabnya.

5. Untuk HTML 5 pada masalah webmastertool, akan diindikasi tanpa masalah, padahal saya tidak memasukkan deskripsi, meta tag, autor, atau apalah itu, yang jelas blog masih tidak ada bawaan keyword dll, kok bisa-bisanya tidak ada masalah di webmaster tool. Padahal posting juga sudah belasan.

6. Untuk Masalah Validasi HTML 5, ternyata paling mudah dari semua pendahulunya. Dikarenakan penggunaan <div> yang sedikit sekali. Tapi untuk template yang bukan bawaan HTML 5, alitas modifikasi, masalah Validasi juga sama sulitnya. Jadi gunakan yang bawaan HTML 5 dan kita harus rela berkorban memotong beberapa fungsi yang banyak mengandung error.

7. Beberapa fungsi blogger yang menerapkan HTML 5 kadang bekerja lambat ataupun tidak berjalan. Seperti proses pengindeksan. Saya mencentang pada setting agar blog saya tidak terindeks ke google, tapi kenyataannya tetap terbaca oleh google. Nah untuk fungsi dan pengaturan yang lain kurang lebih seperti itu, seperti google frined connect yang berjalan agak lama dari biasanya.

Nah emang kalau curhat HTML 5 di sini banyak yang tidak tersampaikan. Bagi sobat yang mau membantu blog saya atau mengalami kejadian serupa dengan blog saya, mohon share di kotak komentar. Makasih.

Happy Blogging! by. Sejuta Trik Blogger

Membuat Komentar Facebook Valid HTML 5

Ahmad Maryuki Sunday, December 04, 2011 Jejaring Sosial, Komentar, SEO, Widget 12 comments

Membuat Komentar Facebook Valid HTML 5 adalah pilihan ke2 setelah menambah komentar discus di blog untuk membuat kotak komentar yang valid HTML 5. Memang kotak komentar facebook memiliki banyak sekali eror. Belum lagi jika komentar pengunjung sudah saking buanyaknya. Justru akan menambah eror yang lebih banyak lagi.

Bagi sahabat yang sampai hari ini belum juga memasang komentar yang valid html 5. Ataupun bagi sahabat yang masih menggunakan template doctype STRICT atau TRANSITIONAL yang masih belum berhasil, Berikut cara yang mungkin dicoba.

DEMO

1. Silakan Menuju ke http://developers.facebook.com/setup/
2. Klik Aplikasi
3. Anda akan dibawa pada gambar di bawah ini (Isikan sesuai selera) Toh tidak terlihat siapa pun.

4. Klik lanjutkan dan Anda akan di bawa ke gambar di bawah ini

5. Klik Kirim, dan akan menjumpai seperti di bawah ini

6. Simpan hasilnya. Dan menuju ke https://developers.facebook.com/docs/reference/plugins/comments/

7. Jika sudah klik Get Code

8. Kode di atas akan kita tempatkan berbeda tempat.

9. Kode no.1 kita taruh pada EDIT HTML di bawah <body>

10. Jika sudah, Klik simpan. Untuk kode no.2 kita taruh di ADD ELEMENT seperti menambahkan widget. (ukuran kotak komentar secara default adalah 500. Silakan edit sesuai selera.

11. Taruh dimana anda suka, entah dibawah posting, di bagian header atau footer terserah kita.

PENTING!
Kode HTML pada gambar 7 adalah kode untuk HTML 5. Jadi apabila kita menggunakan strict atau transitional silakan klik dulu iframe.

Nah. Itu saja tentang membuat komentar facebook valid html 5. Semoga membantu.

Update !
Untuk teman-teman yang ingin memiliki template valid HTML 5 sekaligus SEO Friendly khusus blogger silakan Download Template SEO Friendly Valid HTML 5

Happy Blogging! by. Sejuta Trik Blogger

Sekarang New Page Blogger Menjadi 20 Page

Ahmad Maryuki Friday, November 25, 2011 Info Blog, Posting, SEO 2 comments

Baru beberapa hari yang lalu saya menyembunyikan komentar pada posting tertentu. Cara tersebut saya maksudkan untuk menambah page yang dahulu kuota new page atau halaman page baru di blogger hanya 10. Dikarenakan kuota tersebut sudah saya pakai semua. Eh sekarang new page blogger menjadi 20 page. Nah berikut penampilan sebelum update dan sesudah update.

1. New page blogger yang masih 10 page atau halaman

2. New page blogger yang ditambah menjadi 20 page atau halaman

Entah dari kapan newpage blogger dari 10 menjadi 20. Yang jelas ini membuat saya senang dan tidak lagi menyembunyikan komentar pada posting tertentu. Nah bagi sobat yang belum mengetahui. Coba dilihat halaman edit pagesnya. Mudah-mudahan sama juga. Saya sudah membuka semua blog saya dan hasilnya pun sama. Ada penambahan kuota untuk new page di halaman blog. Tentu ini kelebihan blogger memudahkan SEO Blogger kita dengan urlnya bukan?

Akhir kata sekian update blog ini. Mudah-mudahan update dengan judul Sekarang new page blogger menjadi 20 page bermanfaat.

Happy Blogging!
by. Sejuta Trik Blogger

Macam-macam Script Link Hover

Ahmad Maryuki Monday, November 21, 2011 Link, SEO 19 comments

Hai sob, ketemu lagi dengan posting saya yang selanjutnya. Kali ini sejuta trik blogger ingin berbagi Macam-macam Script Link Hover. Apa sih Link Hover itu?

Link hover adalah sebutan untuk perubahan warna bila link tersebut ~~disentubuh~~ disentuh oleh mouse. Sebagai contoh arahkan pointer atau anak panah mouse ke salah satu menu label blog ini. Maka akan otomatis berubah warna. Maka dari itu disebut Link Hover.

Sebenarnya banyak sekali yang sudah memposting tentang link hover ini hususnya Raninbow. Dalam web asing malah disebutkan Link Fader dan lain-lain. Entah apa bedanya? Kalau menurut saya kurang lebih tidak jauh berbeda.

Baik tanpa banyak kata-kata lagi langsung saja pilih yang disuka. Kode dalam gambar kertas di bawah adalah scrool. Jadi dimohon jangan ada yang ketinggalan! Tinggal Copas di notepad ya!. Supaya hasilnya sama dengan aslinya.

1. Rainbow (Pelangi)

    <script type='text/javascript'>

    //<![CDATA[

    var rate = 20;

    if (document.getElementById)
    window.onerror=new Function("return true")

    var objActive; // The object which event occured in
    var act = 0;    // Flag during the action
    var elmH = 0;   // Hue
    var elmS = 128; // Saturation
    var elmV = 255; // Value
    var clrOrg;     // A color before the change
    var TimerID;    // Timer ID

    if (document.all) {
        document.onmouseover = doRainbowAnchor;
        document.onmouseout = stopRainbowAnchor;
    }
    else if (document.getElementById) {
        document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
        document.onmouseover = Mozilla_doRainbowAnchor;
        document.onmouseout = Mozilla_stopRainbowAnchor;
    }

    function doRainbow(obj)
    {
        if (act == 0) {
            act = 1;
            if (obj)
                objActive = obj;
            else
                objActive = event.srcElement;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }

    function stopRainbow()
    {
        if (act) {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }

    function doRainbowAnchor()
    {
        if (act == 0) {
            var obj = event.srcElement;
            while (obj.tagName != 'A' && obj.tagName != 'BODY') {
                obj = obj.parentElement;
                if (obj.tagName == 'A' || obj.tagName == 'BODY')
                    break;
            }

            if (obj.tagName == 'A' && obj.href != '') {
                objActive = obj;
                act = 1;
                clrOrg = objActive.style.color;
                TimerID = setInterval("ChangeColor()",100);
            }
        }
    }

    function stopRainbowAnchor()
    {
        if (act) {
            if (objActive.tagName == 'A') {
                objActive.style.color = clrOrg;
                clearInterval(TimerID);
                act = 0;
            }
        }
    }

    function Mozilla_doRainbowAnchor(e)
    {
        if (act == 0) {
            obj = e.target;
            while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
                obj = obj.parentNode;
                if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                    break;
            }

            if (obj.nodeName == 'A' && obj.href != '') {
                objActive = obj;
                act = 1;
                clrOrg = obj.style.color;
                TimerID = setInterval("ChangeColor()",100);
            }
        }
    }

    function Mozilla_stopRainbowAnchor(e)
    {
        if (act) {
            if (objActive.nodeName == 'A') {
                objActive.style.color = clrOrg;
                clearInterval(TimerID);
                act = 0;
            }
        }
    }

    function ChangeColor()
    {
        objActive.style.color = makeColor();
    }

    function makeColor()
    {
        // Don't you think Color Gamut to look like Rainbow?

        // HSVtoRGB
        if (elmS == 0) {
            elmR = elmV;    elmG = elmV;    elmB = elmV;
        }
        else {
            t1 = elmV;
            t2 = (255 - elmS) * elmV / 255;
            t3 = elmH % 60;
            t3 = (t1 - t2) * t3 / 60;

            if (elmH < 60) {
                elmR = t1; elmB = t2; elmG = t2 + t3;
            }
            else if (elmH < 120) {
                elmG = t1; elmB = t2; elmR = t1 - t3;
            }
            else if (elmH < 180) {
                elmG = t1; elmR = t2; elmB = t2 + t3;
            }
            else if (elmH < 240) {
                elmB = t1; elmR = t2; elmG = t1 - t3;
            }
            else if (elmH < 300) {
                elmB = t1; elmG = t2; elmR = t2 + t3;
            }
            else if (elmH < 360) {
                elmR = t1; elmG = t2; elmB = t1 - t3;
            }
            else {
                elmR = 0;   elmG = 0;   elmB = 0;
            }
        }

        elmR = Math.floor(elmR).toString(16);
        elmG = Math.floor(elmG).toString(16);
        elmB = Math.floor(elmB).toString(16);
        if (elmR.length == 1)    elmR = "0" + elmR;
        if (elmG.length == 1)    elmG = "0" + elmG;
        if (elmB.length == 1)    elmB = "0" + elmB;

        elmH = elmH + rate;
        if (elmH >= 360)
            elmH = 0;

        return '#' + elmR + elmG + elmB;
    }

    //]]>

    </script>

2. Link Hover Lost (Link berubah warna kemudian akan menghilang)

<script>
/******************************************************************
*    Script name: Link fader
*    Version: 0.5
*    Date: 02.05.02
*    Usage: Freeware (as long as you don't remove this comment)
*
*    Script by: Fayez Zaheer (viol8r on #webdesign [uk.zanet.org.za])
*    Email: fayez at impenetrable.org
*    Web site: http://impenetrable.org
*     Original idea: http://anarchos.xs.mw/fade.phtml
******************************************************************/

// Make sure not to add a # to fcS and fcE - use hex values 6 characters in length ONLY
var fcS = "ffffff";
    // Original colour of your links
var fcE = "ff0000";
    // Fade to which colour?
var fBy = 5;
    // Changing this will affect how accurately the fade to colour is "reached". A value of 1 is most accurate
var speed = 10;
    // Delay in milliseconds of the change from each individual colour to the next during the fade

// Unless you want the ability to let your visitors change the
//    fade to colour, you can delete the following function
function fadeTo()
    {
        var c = prompt("What colour do you want to fade to (no #)?", "ff0000");
        convertHex(c);
        fcEr = r;
        fcEg = g;
        fcEb = b;
    }
// Stop deleting.

// IF YOU DON'T KNOW WHAT YOU ARE DOING,
// DON'T EDIT ANYTHING BEYOND THIS POINT
var r , g, b, fcEr, fcEg, fcEb, fcSr, fcSg, fcSb, fi, fo, x = 0, h = new String();

function convertHex(hex)
    {
        r = hex.substring(0, 2);
        r = parseInt(r, 16);
        g = hex.substring(2, 4);
        g = parseInt(g, 16);
        b = hex.substring(4, 6);
        b = parseInt(b, 16);
    }

convertHex(fcE);
    fcEr = r;
    fcEg = g;
    fcEb = b;

convertHex(fcS);
    fcSr = r;
    fcSg = g;
    fcSb = b;

function fadeIn(x)
    {
        if ((r > fcEr) && (r-fBy >= 0)) r -= fBy;
        if ((g > fcEg) && (g-fBy >= 0)) g -= fBy;
        if ((b > fcEb) && (b-fBy >= 0)) b -= fBy;
        if ((r < fcEr) && (r+fBy <= 255)) r += fBy;
        if ((g < fcEg) && (g+fBy <= 255)) g += fBy;
        if ((b < fcEb) && (b+fBy <= 255)) b += fBy;
        document.links[x].style.color = "rgb(" + r + "," + g + "," + b + ")";
        if ((r == fcEr) && (b == fcEb) && (g == fcEg))
            clearInterval(fi);
    }

function fadeOut(x)
    {
        if ((r < fcSr) && (r+fBy <= 255)) r += fBy;
        if ((g < fcSg) && (g+fBy <= 255)) g += fBy;
        if ((b < fcSb) && (b+fBy <= 255)) b += fBy;
        if ((r > fcSr) && (r-fBy >= 0)) r -= fBy;
        if ((g > fcSg) && (g-fBy >= 0)) g -= fBy;
        if ((b > fcSb) && (b-fBy >= 0)) b -= fBy;
        document.links[x].style.color = "rgb(" + r + "," + g + "," + b + ")";
        if ((r == fcSr) && (b == fcSb) && (g == fcSg))
            clearInterval(fo);
    }

function findLink()
    {
        convertHex(fcS);
        clearInterval(fo);
        clearInterval(fi);
        document.links[x].style.color = "#" + fcS;
        x = 0;
        while (!(this.id == document.links[x].id) && (x < document.links.length))
            x++;
        if (this.id == document.links[x].id)
            fi = setInterval("fadeIn(" + x + ")", speed);
    }

if ((!document.layers) && (document.links))
    {
        for (var i = 0; i < document.links.length; i++)
            {
                document.links[i].id = "link" + i;
                document.links[i].onmouseover = findLink;
                document.links[i].onmouseout = function mouseOut() { clearInterval(fi); clearInterval(fo); fo = setInterval("fadeOut(" + x + ")", speed); };
            }
    }
</script>

3. Link Hover Blink ~~182~~ (Link berubah warna dan akan berkedip)

<SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>

</SCRIPT>
<style>
a:hover {
color:#00FFFF;
text-decoration:blink;
border-bottom:1px dotted #003300;
}
</style>

Penting !

1. Untuk kode no1. Bisa kalian ubah kecepatan berubah warnanya pada warna hijau ganti angka lebih sedikit untuk lebih pelan, dan kebalikannya.
2. Semua kode di atas akan berjalan baik di setiap posting atau di sidebar blog. Jika di tempatkan pada urutan widget teratas. Ini dimaksudkan agar pemanggilan script pengubah warna atau hover ini lebih diprioritaskan.
3. Mohon maaf dikarenakan tutorial merupakan script. Untuk demo hasil dari script link hover tidak saya tampilkan. Sebagai gantinya silakan dicoba saja. Toh malah tau bedanya. Ya ga?

Nah, sementara itu yang dapat sejuta trik blogger berikan tentang macam-macam script link hover. Untuk selanjutnya akan diupdate lain waktu. Itu pun kalau saya dapat script yang baru. ha ha ha ha ha.

Happy Blogging! by. Sejuta Trik Blogger