Welcome To My Blog: Just Share For Us

2 TEMPLATE BLOGGER GALLERY BUKAN RESPONSIF


Saya kembali lagi dengan tampilan template non responsif, sebenarnya saya pribadi tidak begitu perduli dengan tampilan sebuah template itu responsif atau bukan, karena saya punya prinsip kekuatan utama sebuah situs atau blog bukan terletak pada tampilan blog, tapi pada isi atau konten yang ditawarkan kepada pembaca. Sampai saat ini saya belum merasakan manfaat yang nyata dari pemakaian tampilan responsif, selain Blogger sendiri sudah menyediakan fitur bawaan untuk tampilan mobile, tampilan responsif ternyata bukan pula jaminan sebuah blog ramai dikunjungi orang, apalagi saya sendiri belum pernah memakai mobile gadget modern untuk mengakses internet. Saya hanya menyarankan, jangan sampai Anda sebagai seorang blogger hanya sekedar mengikuti trend ngeblog atau istilahnya janganlah mengikuti Euforia sesaat, seperti seorang ABG yang menggandrungi boyband/girlband Korea sehingga melupakan budaya leluhur bangsa yang kian hari semakin minim peminat.

Saya akan menikung dulu ke topik budaya bangsa ya. Bukannya sok nasionalis, saya hanya kadang miris jika melihat sebuah pertunjukan seni tradisional, seperti tari Jaipong, tari Piring, seni Reog dan lainnya (dangdut nggak termasuk, karena dangdut bukan murni seni budaya bangsa kita), yang jarang diminati oleh generasi muda. Jangan salahkan bangsa lain jika suatu saat ada yang meng-klaim sebagai seni budaya mereka, karena kita sebagai generasi muda malah bersikap apatis dan tidak mau melestarikan bahkan tidak perduli dengan budaya kita sendiri. Kita bersikap reaktif ketika ada negara lain mengklaim sebagian dari budaya bangsa ini. Namun sungguh ironis, dalam kondisi tidak ada klaim dari negara lain, generasi muda negeri ini malah justru tergila-gila dengan budaya bangsa lain. Seperti contoh diatas adalah idolisme (kalau menurut saya sih idiotisme) generasi muda pada budaya Korea dan cenderung memandang rendah atau menganaktirikan budaya bangsa sendiri.

Disini saya bukan benci atau anti dengan budaya Korea atau budaya bangsa lain, apapun bentuk budaya baru, dari bangsa manapun, jangan sampai Anda mau dimanfaatkan oleh produsen hiburan sehingga dijadikan sebagai obyek eksperimental untuk memasarkan "barang dagangan" mereka. Secara materi mereka sangat diuntungkan karena mereka menganggap generasi muda bangsa ini sebagai pasar potensial. Lha.. kita dapat apa? (Ini salah satu sebab kenapa saya sangat tidak suka dengan sistem kapitalis, lihat profile Blogger)

Terus terang, saya sendiripun juga suka dengan beberapa budaya asing yang ada, suka mendengarkan seni musik dari bangsa lain tapi tentunya melalui sebuah pertimbangan rasionalitas yang wajar dan proses filterisasi diri sehingga tidak sampai melupakan budaya bangsa sendiri apalagi sampai memandang rendah. Yang jelas saya lebih memilih acara TV yang mempertunjukan budaya tradisional bangsa yang lebih memiliki unsur seni, ketimbang acara boyband/girlband Indonesia yang melenggak-lenggok bak artis-artis dari Korea. Maaf sebelumnya saya menulis ini karena rasa muak saya sudah mencapai pada titik nadir yang tertinggi, harus diungkapkan lewat tulisan daripada perasaan ini membatu di otak malah bisa jadi tumor nantinya.

Kembali ke masalah tampilan responsif, menurut subyektivitas saya yang dilindungi Undang-Undang dalam berpendapat, tampilan responsif sama halnya dengan validasi HTML, antara penting dan tidak itu beda tipis, intinya tidak mutlak untuk sebuah blog. Jika teman-teman disini merasakan manfaat yang luar biasa dari kondisi blog yang responsif dan Valid HMTL, silahkan di-implementasikan pada blog yang Anda kelola. Jika Anda merasa nyaman dengan kondisi ideal sebuah blog seperti diatas silahkan diterapkan pada blog kesayangan Anda. Disini saya hanya mengingatkan saja, jangan sampai Anda hanya fokus untuk merubah tampilan blog Anda menjadi ideal, sehingga melupakan tujuan utama Anda ngeblog, yaitu memberikan artikel yang informatif bagi para pembaca. Karena manfaat sesungguhnya membuat blog akan Anda rasakan jika pengunjung merasa artikel yang Anda buat bermanfaat bagi orang banyak, bukan dari sanjungan dan pujian karena tampilan blog Anda bagus, hebat, atraktif, modern.. bla... bla... bla.
Mohon maaf jika ada yang kurang berkenan, ini hanya opini pribadi saya, Anda silahkan berbeda tentang hal-hal diatas, itu sah-sah saja.

Lha ini template yang mau dibagi mana?

Tet.. totttt karena jam istirahat kerja habis, bagi-bagi templatenya dilanjutkan nanti malam.... wakakakakaka. Untuk mengurangi rasa penasaran template mana yang mau dibagi, dibawah ini saya kasih demonya dulu :

blogger template movie


blogger template video


Screenshot dan demo template diatas bukannya saya mau pamer, tapi karena hanya menyesuaikan dengan judul dan keterbatasan waktu kali ini, saya memutuskan untuk dilanjut nanti malam. Tenang aja, link download dan tutorial cara pemasangan akan saya berikan semua gratis seperti biasanya. 

Oke saya mau lanjut nguli dulu, silahkan berdiskusi sementara tentang topik yang saya bahas diatas, berbeda pendapat boleh, tapi harus saling menghargai pendapat orang dan jangan pernah memaksakan pendapat pribadi ke orang lain.

Tutorial Pemasangan Kedua Template Diatas

Memasang Kode Warna di BLOG


Dalam membuat sebuah blog, kita pasti dihadapkan pada pemilihan sebuah warna. Warna dalam membuat blog memiliki kode tersendiri. Kode warna bagi sebagian blogger yang senang merias tampilan dan keindahan Blog, sangat dibutuhkan untuk kemudahan mendapatkan kode HTML dari setiap warna yang diperlukan. Nah untuk lebih mudah mendapatkan kode HTML setiap warna yang diinginkan, alangkah baiknya jika temen-temen memasang tabel kode warna ini di Blog atau di dalam postingan artikel. Dengan demikian dijamin teman-teman akan lebih cepat dalam bekerja merias blog karena tabel kode warrna sudah terinstall di Blog.
Cara pasang widget kode warna pada blogger

Langkah Pertama

  1. Login ke blogger dengan id anda
  2. Klik menu Tata Letak
  3. Pada tab menu klik Edit HTML
  4. Silahkan Backup dulu template anda dengan klik Download Template Lengkap
  5. Sekarang cari kode </head>. Jika sudah ketemu, copy lalu paste kode berikut di atas kode </head>
    <script language='javascript'>
    function Barva(koda)
    {
    document.getElementById("vzorec").bgColor=koda;
    document.hcc.barva.value=koda.toUpperCase();
    document.hcc.barva.select();
    }
    function BarvaDruga(koda)
    {
    document.getElementById("vzorec2").bgColor=koda;
    document.hcc.Barva2.value=koda.toUpperCase();
    document.hcc.Barva2.select();
    }
    </script>
    
    <script type='text/javascript'>
    
    var hue;
    var picker;
    //var gLogger;
    var dd1, dd2;
    var r, g, b;
    
    function init() {
    if (typeof(ygLogger) != "undefined")
    ygLogger.init(document.getElementById("logDiv"));
    pickerInit();
    //ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
    //ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
    }
    
    // Picker ---------------------------------------------------------
    
    function pickerInit() {
    hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
    hue.onChange = function(newVal) { hueUpdate(newVal); };
    
    picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
    picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
    
    hueUpdate();
    
    dd1 = new YAHOO.util.DD("pickerPanel");
    dd1.setHandleElId("pickerHandle");
    dd1.endDrag = function(e) {
    // picker.thumb.resetConstraints();
    // hue.thumb.resetConstraints();
    };
    }
    
    executeonload(init);
    
    function pickerUpdate(newX, newY) {
    pickerSwatchUpdate();
    }
    
    
    function hueUpdate(newVal) {
    
    var h = (180 - hue.getValue()) / 180;
    if (h == 1) { h = 0; }
    
    var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
    
    document.getElementById("pickerDiv").style.backgroundColor =
    "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
    
    pickerSwatchUpdate();
    }
    
    function pickerSwatchUpdate() {
    var h = (180 - hue.getValue());
    if (h == 180) { h = 0; }
    document.getElementById("pickerhval").value = (h*2);
    
    h = h / 180;
    
    var s = picker.getXValue() / 180;
    document.getElementById("pickersval").value = Math.round(s * 100);
    
    var v = (180 - picker.getYValue()) / 180;
    document.getElementById("pickervval").value = Math.round(v * 100);
    
    var a = YAHOO.util.Color.hsv2rgb( h, s, v );
    
    document.getElementById("pickerSwatch").style.backgroundColor =
    "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
    
    document.getElementById("pickerrval").value = a[0];
    document.getElementById("pickergval").value = a[1];
    document.getElementById("pickerbval").value = a[2];
    var hexvalue = document.getElementById("pickerhexval").value ='#'+
    YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
    ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
    if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
    }
    
    </script><!--[if gte IE 5.5000]>
    <script type="text/javascript">
    
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
    {
    for(var i=0; i<document.images.length; i++)
    {
    var img = document.images[i]
    var imgName = img.src.toUpperCase()
    if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
    {
    var imgID = (img.id) ? "id='" + img.id + "' " : ""
    var imgClass = (img.className) ? "class='" + img.className + "' " : ""
    var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
    var imgStyle = "display:inline-block;" + img.style.cssText
    if (img.align == "left") imgStyle = "float:left;" + imgStyle
    if (img.align == "right") imgStyle = "float:right;" + imgStyle
    if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
    var strNewHTML = "<span " + imgID + imgClass + imgTitle
    + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
    + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
    + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
    img.outerHTML = strNewHTML
    i = i-1
    }
    }
    }
    
    YAHOO.util.Event.addListener(window, "load", correctPNG);
    
    </script>
    <![endif]-->
  6. Selesai
Langkah Kedua :


Berikutnya, memasang tabel kode warna pada blog. Ada dua pilihan, pertama dipasang sebagai posting blog dan yang kedua dipasang pada halaman utama (homepage) blog. Nah, kode untuk tabel kode warna yang akan dipasang adalah berikut ini :

Kode Warna :

</div><center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table><table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>Kode warna : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form></center>

Cara pasang kode warna sebagai posting blog :

  • Yang pasti, anda buat posting baru terlebih dahulu
  • Copy lalu paste Kode Warna tersebut pada posting anda
  • Berikan judul posting yang sesuai
  • Jangan lupa untuk memberi label posting
  • Kemudian terbitkan postingan
  • Selesai

Cara pasang kode warna di halaman utama (homepage) blog :

  • Masuk ke menu Elemen Halaman
  • Klik Tambah Gadget
  • Pilih tambahkan HTML/JavaScript
  • Copy lalu paste Kode Warna tersebut di dalamnya.
  • Berikan judul atau nama gadget
  • Klik tombol Simpan
  • Silahkan tempatkan gadget kode warna dengan men-drag ke tempat yang sesuai
  • Klik tombol Simpan
  • Selesai
Hasilnya nanti akan seperti ini :






































































































































































































Kode warna :

Sekarang widget kode warna sudah hadir di blog anda. Selamat mencoba dan mudah-mudahan bermanfaat.

Sumber :  maskolis.com

Cara memasang Widget Traffic Rank Alexa Widget


Cara Memasang Widget Traffic Rank alexa pada Website atau Blog  yang biasa juga disebut Widget Alexa tidak memakan waktu yang lama serta prosesnya mudah, dan layanan ini tentunya gratis.
Alexa.com adalah sebuah perusahaan yang memberikan informasi tentang traffic serta Ranking sebuah web atau blog. Alexa memberi peringkat kepada sebuah situs dalam dua kategori yaitu untuk Regional (negara) dan juga Global (dunia). Peringkat untuk sebuah Website atau Blog dimulai dari angka yang besar, apabila sebuah website atau blog telah mulai terindex oleh alexa biasanya di mulai dari angka rangking di kisaran 26.jt ( pengalaman sendiri ).
Bagi sebuah web atau blog baru yang belum terindex statusnya masih Not Available (n/a), semakin meningkatnya pengunjung sebuah Web atau blog akan membuatnya mulai mendapatkan traffic rank di Alexa Rank.
Tidak ada salahnya anda mencoba memeriksa website atau blog anda di alexa.com, karena alexa tidak hanya memberikan peringkat tetapi banyak lagi informasi yang bisa anda lihat tentang pengunjung ke sebuah website. Dan apabila web atau blog anda telah mendapatkan rangking dari alexa ada baiknya anda memasang Widget Traffic Rank alexa di website atau blog karena akan berkaitan dengan beberapa hal lainnya yang berhubungan dengan Alexa.
1. Langsung saja anda browsing ke www.alexa.com
Di menu pada halaman utama (home) anda klik Top Site untuk memriksa Rangking website atau blog anda baik secara global maupun Regional. Masukkan alamat website atau blog anda pada search box, dengan menulis http://domainanda.com lalu klik > ikon Search.
widget alexa rank, cara pasang widget alexa rank
2. Maka pada halaman selanjutnya akan muncul rangking (traffic rank) website atau blog anda, lalu klik Get Detail untuk melihat informasi lengkap tentang detail yang lainnya seperti gambar yang di sebelah kanan.
widget alexa rank, irformasi website di alexa.com           widget alexa rank, informasi website di alexa.com
Nah, apabila website atau blog anda telah available atau mendapatkan traffic rank dari alexa maka sekarang kita akan melanjutkan dengan cara memasang widget alexa di website atau blog.
3. Anda bisa langsung akses melalui link ini Alexa Site Widget.
widget alexa
4. Setelah berada pada halaman berikutnya anda pilih jenis atau model widget alexa yang akan anda pasang pada website atau blog, lalu masukkan alamat website atau blog: http://domainanda.com pada box yang tersedia dan klik Build Widget. Selanjutnya copy kode yang diberikan untuk diletakkan pada widget (text /Arbitrary text or HTML) di website atau blog anda.


widget alexa rank 


Sumber : barajablog.com

CARA MEMPERLEBAR HALAMAN TEMPLATE




Mungkin para sobat yang baru bikin blog merasa template yang di sediakan oleh blogger terlalu sempit atau kurang lebar. Sobat ingin merubah template sobat hingga menjadi lebih lebar? Bagaimana caranya..? Mungkin ada beberapa cara untuk merubah halaman template. Dan saya biasa menggunakan cara sebagai berikut,yang saya anggap paling sederhana.

Dan tidak perlu panjang lebar lagi kita mulai saja caranya.
Yang perlu kita ketahui beberapa bagian dari template yang nantinya kita
bisa ubah ukurannya:

Outer-wreper : Lebar template secara keseluruhan
Main-wrapper: Bagian dimana kita biasa posting artikel
Sedebar-wrapper : biasanya terletak di kanan atau kiri dari main wraper
Header- wrapper: Bagian paling atas dari template
Footer-wrapper : Dasar atau berada paling bawah

Sekarang masuk ke blog sobat, klik tata letak kemudian edit html.Pada edit
html sobat tidak perlu kasih centang pada Expand template widget.
Kemudian cari code sebagai berikut:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Sobat bisa ganti ukuran pada teks yang berwarna merah. Sobat bisa ganti dengan ukuran berapa saja,biar keliatan rapi sesuaikan ukurannya. Misal :

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 500px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 400px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Jika lebar outer-wrapper: 950px maka jarak main-wraper dan sedebar-wraper harus di sesuai:

Main-wrapper:500px
Sedebar-wrapper: 400px
Sedang sisanya yang 50px merupakan jarak agar sedebar dan postingan blog tidak berhimpitan.
Setelah itu jangan lupa sesuaikan juga lebar header-wraper dan footer-wraper sama dengan outer-wraper

#header-wraper{
width: 950px
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

Yang perlu di rubah teks yang berwana merah. Jika sudah klik pratinjau atau preview,kalau dirasa sudah cocok baru di save.

Selamat mencoba...!!!

Sumber : activekita.blogspot.com

MENGGANTI HEADER DI BLOGSPOT

 Pertama kali orang melihat blog, mayoritas mereka melihat header blog tersebut.. Kesan pertama terhadap blog yang mereka kunjungi adalah bagaimana header blog tersebut mencerminkan isi atau konten dari keseluruhan blog. Untuk blogspot blog, tampilan header (pakai gambar atau hanya tulisan saja) biasanya tergantung dari template yang kita gunakan. Ada kalanya, format keseluruhan template blogspot sudah sesuai dengan keinginan kita, namun gambar headernya tidak cocok dengan isi blog kita. Jika demikian kasusnya, kita perlu mengganti header blog agar sesuai dengan konten.

Bagaimana mengganti header blog blogspot? Untuk mengganti header blogspot, ada beberapa cara yang bisa kita lakukan. Cara termudah adalah dengan melalui pengaturan add and arrange page element (tergantung template yang digunakan. sebagian besar template blogspot mendukung penambahan gambar di header lewat menu ini). Untuk mengganti header blogspot dengan cara ini, login ke dashboard blogger.



Masuk ke tab Layout. Pada kotak Header (sesuai judul blog anda) klik Edit.

Pada jendela baru yang muncul, klik Browse untuk mencari gambar yang akan digunakan sebagai header. Sebaiknya sebelum melakukan ini, kita harus menyediakan image yang akan kita pakai sebagai header, dengan ukuran sesuai ukuran header (jika tidak tahu ukuran headernya, beri tanda centang pada Shrink to fit dimana ukuran gambar akan disesuaikan dengan ukuran header). Pilih behind title and description jika gambar yang anda masukkan tidak mengandung teks judul, karena ini berarti judul dan deskripsi blog akan ditampilkan. Sebaliknya, jika anda membuat gambar header komplit dengan tulisan judul dan deskripsinya, pilih instead of title and description yang mana pilihan ini akan menyembunyikan judul dan deskripsi. Klik Save. Kini blog anda sudah mempunyai header yang sesuai dengan keinginan anda (tentunya disesuaikan dengan tema blog).

Cara lain untuk mengganti header blogspot adalah melalui pengaturan kode CSS. Caranya, dari dashboar blogger, masuk ke blog yang akan kita ganti headernya. Masuk ke tab Layout > Edit HTML. Pastikan anda selalu membackup template sebelum mengubahnya (caranya dengan klik Download full template) agar sewaktu-waktu ada kejadian yang tidak kita harapkan, kita bisa kembalikan lagi template seperti semula.

Pada menu Edit HTML, beri centang Expand Widget Template. Tekan tombol Ctrl + F bersamaan untuk memanggil fungsi pencarian. Ketikkan header pada kolom Find untuk mencari kode css header. Anda juga bisa menscroll mouse untuk melakukan pencarian ini, tapi tidak praktis.
Cara kedua ini  tidaklah sulit, namun jika Anda tidak ingin pusing-pusing membuat gambar sendiri, Anda bisa memanfaatkan website penyedia gambar yang gratis, seperti: freewebpageheaders.com, smashingmagazine.com dan lain.

Adapun cara download gambar di freewebpageheaders.com adalah sebagai berikut:
  1. Klik Daftar Sekarang untuk membuka halaman situsnya;
  2. Klik Register untuk mendaftar.
  3. Klik Agree. Kemudian Anda akan diminta untuk mengisi Registration form. Form ini terdiri dari 2 bagian yaitu : Required info dan Optional info. Required info merupakan info yang harus Anda berikan untuk pendaftaran sedangkan Optional info merupakan info yang digunakan untuk menampilkan data Anda kepada pengunjung saat Anda login. Jika Anda merasa tidak perlu maka diabaikan saja untuk bagian ini.
  4. Klik Submit Registration Form, lalu Anda akan mendapat pesan supaya membuka email untuk mengaktifkan account Anda.
  5. Buka email yang Anda gunakan untuk mendaftar. Klik pada link yang diberikan untuk mengakftifkan account Anda.
  6. Jika sudah, Anda akan mendapat pesan bahwa account Anda sudah diaktifkan.
  7. Klik Return to the front page of free Web Page Headers.
  8. Lalu klik Login untuk mendowload gambar header.
  9. Pilih kategori header yang Anda inginkan. Jika Anda sudah menemukan gambar yang cocok. Klik pada gambar tersebut lalu klik Download.
  10. Kemudian gambarnya akan terbuka pada halaman baru. Klik kanan pada gambar lalu pilih Save Image As lalu tekan Save.
  11. Selesai. Sekarang gambar sudah tersimpan di komputer Anda.
Langkah selanjutnya Cara Mengganti Header Blog pada Blogger, yang pertama dilakukan yaitu mencari tahu berapa ukuran header pada template Anda, caranya:
  1. Klik Rancangan->Edit HTML.
  2. Cari kode #header-wrapper. Supaya mudah untuk mencarinya, tekan Ctrl+F ketikkan #header-wrapper lalu tekan Next.
  3. Jika sudah ketemu biasanya ada kode width dan height disekitarnya. Misalnya seperti ini:
    #header-wrapper {
    width:975px;
    height:130px;
    margin:0px;
    padding:0px;
    text-align:left;
    background:#FFF url("http://i977.photobucket.com/albums/ae258/SPN_photo/HeaderMaskolis-New.jpg") no-repeat right ;
    }
    Keterangan:
    width:975px; adalah panjang header
    height:130px;adalah lebar header.

    Agar gambar Anda sesuai dengan ukuran header template, maka gambar Anda harus diresize menjadi 975x130 pixel. Untuk merizenya Anda bisa menggunakan program pengolah gambar seperti Ms Paint, ACD See, Photoshop atau lainnya.
  4. Setelah selesai. Masuk ke Dashboard Blogger Anda lagi, pilih Rancangan => Page Elements.
  5. Klik Edit pada bagian Header.
  6. Kemudian akan muncul halaman baru, pilih Browse from your computer, jika gambarnya disimpan dikomputer atau Browse from the web, jika gambarnya disimpan di image hosting seperti: Imageshack, Photobucket atau Geocities.
  7. Pada bagian Placement. Pilih Behind title and description, jika Anda ingin manampilkan gambar dibelakang judul dan deskripsi blog atau pilih Instead of title and description, jika Anda ingin menyembunyikan judul dan deskripsi blog.
  8. Lalu klik Save, selesai.
CATATAN:
  • Tidak semua template bisa dipasang gambar, karena ada yang hanya menggunakan teks saja oleh karena itu pilihlah template yang sesuai kebutuhan.
  • Jika cara di atas sulit diterapkan pada blog Anda, isi kotak komentar yang ada di bawah siapa tau saya bisa bantu.
Demikian tadi tutorial memasang header dari saya semoga dapat bermanfaat bagi teman-teman semua.

Sumber : maskolis

Cara Menghilangkan Beranda atau Home Di Footer Blogspot

Cara menghilangkan beranda atau home pada footer. Pada saat kita selesai membuat sebuah blog, ada banyak hal yang harus kita tata kembali agar blog yang sudah kita buat bisa terlihat lebih rapi. Berbagai widget dipasang untuk mempercantik blog agar blog yang kita buat terlihat lebih menarik lagi bagi pengunjung.

Selain memasang berbagai widget, menurut saya ada beberapa item yang berada di footer yang menurut saya sangat "mengganggu" penampilan blog kita agar terlihat tidak terlalu ramai dan lebih rapi seperti misalnya, link Beranda, diberdayakan oleh Blogger, dsbnya.

cara menghilangkan beranda atau home di footer

Namun sobat Blogger tidak perlu khawatir, ternyata untuk menghapus link-link tersebut ada caranya. Setelah saya melakukan blogwalking, akhirnya saya mendapatkan tutorialnya. Oke deh, bila sobat Blogger tujuannya untuk menghilangkan link Beranda dan akhirnya bisa sampai pada artikel ini, yuk... kita langsung kerjakan aja.

Seperti biasa, masuk ke Dashboard Blogger kemudian pilih Template, pilih Edit HTML Centang Expand Template Widget, berikutnya silahkan cari kode yang sama persis dengan kode script seperti berikut : <data:homeMsg/>. Ingat, selalu gunakan Control+F untuk menemukan kode script seperti itu. Setelah ketemu, tinggal dihapus aja kode script tersebut. Klik Save Template. Selesai.

Silahkan direfresh untuk melihat kembali blog sobat. Salam.

Sumber : GKKB

MEMBUAT SIMPLE SLIDER OTOMATIS GAMBAR VERTIKAL

Kali ini saya akan memberikan satu lagi tutorial membuat slider otomatis untuk image atau gambar vertikal. Sebelumnya saya minta maaf belum bisa menjawab semua pertanyaan yang masuk karena banyak sekali kegiatan di luar yang harus saya kerjakan. Dan tentu saja saya juga belum bisa memenuhi permintaan teman-teman yang menginginkan sebuah template khusus atau modifikasi template yang sudah ada menjadi sebuah template yang SEO friendly dan valid HTML.

slider otomatis


Slider ini sangat sederhana, seperti juga slider-slider sebelumnya, slider inipun bekerja secara otomatis berdasarkan artikel terbaru dan kategori tertentu. Untuk lebih jelas silahkan klik demo diatas, slider ini saya letakkan di sidebar sebelah kanan dengan ukuran lebar 300px. Slider ini sekilas terlihat seperti slider yang ada pada template-template dari designer India seperti Lasantha Bandara, Lansindu, Sameera dan lainnya, yang masih memasukkan gambar dan URL secara manual.  Jika Anda pengguna template buatan mereka, dan ingin mengganti agar slider bekerja secara otomatis, silahkan simak berikut langkah-langkah pembuatannya :
  1. Setelah login ke Blogger, pilih blog yang ingin ditambahkan slider ini.
  2. Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
  3. Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
  4. Klik "Buka" dan masukkan kode berikut di atas kode ]]></b:skin> :
    /* Slider */
    .sompret-wrapper {float:right; position: relative;}
    .sompret { overflow: hidden; position: relative; width:300px; height:400px;}
    .image_reel { position: absolute; top: 0; left: 0; }
    .image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
    .paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
    .paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwGTmRBNar9g5hqQrMEl7AN4QAgTp54RrLGWuHqIeGdaZMFOi5i1iuBULFk8Ne-J2HYC3XlUsDpNKg5bzPcs_N9nFIUjvf9XmZXQ2jAIDdar2u04aYAGoFRQm2Nitybhadh_X716C3AUA/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
    .paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDqcJNWlTWW4tLsWBgRoWQOCdMninAK7lA5LNO_oSx6inHCXPUOU8Y1GitcVm7VJsxhYBAxc-ORwxFrwCkmA-LWlYquemEIslsTpPxxYziYHER7L0dQDrVcSOLaDL1g2-XHZTxda8r2cI/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
    .paging a:hover {font-weight: bold; border:none; outline:none;}
    .crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkzodE-KnQpMEzklh585n3H7xyj5jWwblKdMw7vgXyN31qcYV8F5hmaKT6hcPACCcjJhOqbSCMry48Ig19hJ5h8tRmTpoH-Xr9sSxdRfx7kIkJIDfnmomdYIzkJ9JGl7pCSvgv_7LrINvB/s1600/uj-opacity-40.png);padding:5px 10px;  }
    .crott a{color: #fff;font: 16px Oswald }
    .crott p{color: #fff;font: 12px Arial;}
    Kode warna merah diatas adalah ukuran slider, untuk lebar 300px dan tinggi 400px. Perhatikan semua dan Anda harus sesuaikan dengan ukuran sidebar pada template yang Anda gunakan.
  5. Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :
    <script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    jQuery(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");

    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".sompret").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;

    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});

    //Paging + Slider Function
    rotate = function(){
       var triggerID = $active.attr("rel") - 1; //Get number of times to slide
       var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

       $(".paging a").removeClass('active'); //Remove all active class
       $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
     
    $(".crott").stop(true,true).slideUp('slow');

    $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

       //Slider Animation
       $(".image_reel").animate({
           left: -image_reelPosition
       }, 500 );


    };

    //Rotation + Timing Event
    rotateSwitch = function(){
    $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
       play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
           $active = $('.paging a.active').next();
           if ( $active.length === 0) { //If paging reaches the end...
               $active = $('.paging a:first'); //go back to first
           }
           rotate(); //Trigger the paging and slider function
       }, 10000); //Timer speed in milliseconds (3 seconds)

    };

    rotateSwitch(); //Run function on launch

     //On Click
        $(".paging a").click(function() {  
            $active = $(this); //Activate the clicked paging
            //Reset Timer
            clearInterval(play); //Stop the rotation
            rotate(); //Trigger rotation immediately
            rotateSwitch(); // Resume rotation
            return false; //Prevent browser jump to link anchor
        });  

    });

    //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqf2M_Xpi1KLn6L5Fnwuc2KjGNPgamMe4CoYvVA5h6c2ma8GB1KSlaCsDSvClpOjLlXz80QAqg8Of_4PEPGtq_2uf5cx78XT6zADSYJ46JhIpCGgz-YEfTOYsQNnhYGgHaerHUI8159u8/s1600/no+image.jpg";
    showRandomImg = true;
    aBold = true;
    summaryPost1 = 80;
    summaryTitle = 20;
    numposts1 = 6;

    function removeHtmlTag(strx,chop){
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        s =  s.join("");
        s = s.substring(0,chop-1);
        return s;
    }

    function showrecentposts1(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
       
      for (var i = 0; i < numposts1; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
    var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'alternate') {
            posturl = entry.link[k].href;
            break;
          }
        }

    for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            pcm = entry.link[k].title.split(" ")[0];
            break;
          }
        }

        if ("content" in entry) {
          var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
          var postcontent = entry.summary.$t;}
        else var postcontent = "";
       
        postdate = entry.published.$t;

    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];

    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }

    var daystr = m+ ' ' + day + ' ' + y ;

    var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';
    document.write(trtd);    

     j++;
    }

    }

    function showrecentposts2(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
     
      for (var i = 0; i < numposts1 ; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
    var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'alternate') {
            posturl = entry.link[k].href;
            break;
          }
        }

    for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            pcm = entry.link[k].title.split(" ")[0];
            break;
          }
        }

        if ("content" in entry) {
          var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
          var postcontent = entry.summary.$t;}
        else var postcontent = "";
       
        postdate = entry.published.$t;

    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];

    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }

    var daystr = day+ ' ' + m + ' ' + y ;

    var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
    document.write(trtd);    

     j++;
    }

    }
     //]]>
    </script>
    Perhatikan kode script warna merah paling atas, jika pada template Anda sudah terpasang script itu seri berapapun, kode script itu tidak usah diikutkan, hanya satu jquery yang ada pada sebuah template jika ada dua atau lebih akan bentrok dan salah satu fungsinya tidak jalan.. numposts:6; adalah jumlah post yang tampil pada slider
  6. Sekarang Anda tinggal mau meletakkan slider itu dimana, jika ingin diletakkan di sidebar sebelah kanan paling atas seperti terlihat pada demo. Cari kode <div id='sidebar-wrapper'> atau kode pembungkus sidebar yang ada pada template Anda, kemudian letakkan kode berikut ini sebelum atau diatas <div id='sidebar-wrapper'> :
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='sompret-wrapper'>
    <div class='sompret'>
    <div class='image_reel'>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='description'>
    <script>    
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    </div>
    </div>
    <div class='paging'>
    <a href='#' rel='1'/>
    <a href='#' rel='2'/>
    <a href='#' rel='3'/>
    <a href='#' rel='4'/>
    <a href='#' rel='5'/>
    <a href='#' rel='6'/>
    </div>
    </div></b:if>
    Keterangan :

    Tampilan slider dengan menggunakan kode diatas hanya terlihat pada postingan, jika Anda ingin slider terlihat di homepage hapus kode pertama dan terakhir yang berwarna biru muda. Slider diatas menampilkan postingan terbaru Anda, jika ingin merubah menjadi tampil per label anda tinggal menambahkan kode /-/your label antara kode default dan ?, jadinya seperti ini default/-/your label?max-results karena kode tersebut diatas ada dua, Anda harus ganti dua-duanya.
  7. Terakhir save, selesai.
Slider diatas bisa Anda modifikasi sendiri, Anda juga bisa gunakan slider ini untuk gambar horisontal (tidak harus vertikal) berusahalah untuk lebih kreatif dengan merubah ukuran panjang dan lebar yang ada pada tutorial ini atau menambahkan hiasan ribbon misalnya seperti terlihat pada demo ini, sehingga tampilannya menjadi lebih menarik. Itu tadi tutorial membuat slider sederhana kali ini, jika ada yang kurang jelas silahkan tinggalkan peasan pada kolom komentar di bawah.

Dan untuk teman-teman yang sudah berpartisipasi dan meramaikan forum diskusi pada blog ini saya mengucapkan banyak terima kasih, silahkan berdiskusi dengan bebas dan sehat. Untuk sementara saya belum bisa ikutan nimbrung karena masih banyak pekerjaan yang mesti saya selesaikan. Semua pertanyaan di luar topik artikel ini silahkan masukkan pada forum diskusi, klik menu forum diskusi yang ada pada menu navigasi atas blog ini.

NB :
Jika Anda melihat gambar pada slider kadang terlihat kadang tidak, itu karena penambahan script lazy load image yang ada pada template demo.

CARA DAPAT UANG MELALUI UPDATE STATUS FACEBOOK








Tips kali ini saya akan share tentang cara mendapatkan duit melalui update status facebook.Tips trik ini saya dapat di wall salah satu teman facebook saya.
Awalnya saya tidak percaya, tetapi karena penasaran, saya telusuri system dan cara kerjanya, saya baca baik-baik dan ternyata memang masuk akal. Anda penasarn? Silahkan Ikuti langkah berikut :
  1. Silahkan daftar terlebih dahulu pada alamat berikut ini : www.bonusfantastic.com
  2. Pastikan Nama anda pada saat pendaftaran tidak memakai spasi.
  3. Lakukan instruksi selanjunnya sampai pendaftaran anda komplit dan sukses
  4. Setelah itu anda akan menerima link URL Web Replika di bonus Fantastic.
  5. Selanjutnya silahkan masuk ke facebook dan lakukan update status facebook dan jangan lupa tuliskan URL Web Replika anda tesebut. Usahakan gunakan kata kata yang menarik agar ada yang mengklik link Url anda tersebut.
  6. Selain di facebook, anda juga bisa memamfaatkan blog anda untuk share url anda dengan membuat postingan ataupun menempatkannya pada menu navigasi dan tetap akan mendapatkan bayaran
  7. Nah, setiap ada yang klik link anda tersebut, maka anda akan mendapatkan bayaran dari BONUS FANTASTIC
  8. Nah, lakukan update secara berkala karena setiap klik atau kunjungan ke link url anda akan mendapatkan bayaran,
  9. Anda tidak perlu cari downline untuk dapat bayaran, tetapi jika ada yang daftar melalui link anda, maka anda akan mendapatkan bonus tambahan.
Mengapa di bayar setiap kali ada kunjungan ke url kita?
Ternyata Web Bonus Fantastic tak lain dan tak bukan adalah Sebuah Toko Online yang Menjual dan menyediakan Produk Elektonik dan internet yang paling banyak di cari konsumen, sehingga dengan mengajak mereka, maka secara tidak langsung anda telah membantu menawarkan produk mereka.
Dan yang paling menarik adalah setiap ada penjualan produk melalui link url anda maka anda akan mendapatkan bonus komisi dari hasil penjualan anda.

Sekian tips trik kali ini semoga bermanfaat.

Sumber : http://adhy.heck.in

CARA AGAR POSTINGAN BLOG TERINDEX OLEH GOOGLE







Cara agar postingan blog terindex oleh google. Apa kabar teman-teman semuanya, hari ini saya kembali ingin berbagi pengalaman saya tentang cara agar postingan blog tampil di google. Sebuah postingan blog cepat atau lambat pasti akan terindex dan tampil di pencarian google meskipun tanpa melakukan apa-apa. Namun kita tidak tahu kapan google mengindeks postingan kita dan berada di posisi keberapa postingan kita di muat di google.

Setiap blogger pasti ingin agar postingan blognya berada di posisi teratas no 1 google atau paling tidak postingan blog kita berada diperingkat 10 besar dalam pencarian google. Untuk itu maka ada beberapa cara yang bisa kita lakukan agar postingan kita berada di peringkat 10 besar pencarian google.

Berikut ini saya uraikan beberapa hal yang saya sering saya lakukan :

1. Verivikasi Blog anda Ke google.
Untuk cara verivikasi mywapblog ke google, silahkan klik disini


2. Tentukan Keyword atau Kata Kunci Target Pencarian di Google

Sebelum memposting tentukan terlebih dahulu keyword atau atau kata kunci yang ingin anda target dalam pencarian nanti. Buat sebuah kata kunci yang menurut anda sering di ketikkan ketika seseorang melakukan pencarian lewat google.


3. Buatlah sebuah judul postingan yang SEO.

Jika anda tidak tau tentang apa itu SEO silahkan anda cari di google. Judul postingan sangat menentukan mudah tidaknya artikel anda terindeks oleh google. Sesuaikan antara keyword anda dengan judul postingan anda. Kalau perlu semua keyword anda tampilkan di judul postingan. Hindari pemakaian karakter tertentu pada judul postingan anda seperti ", _ , @ , ; , * dan karakter lainnya karena karakter karakter tersebut jarang terindeks oleh google.
4. Biasakan menggunakan kalimat atau kata-kata yang baku dalam postingan

Kalimat dan kata-kata dalam postingan sangat menentukan mudah tidaknya artikel tersebut terindeks oleh google. Hindari pemakaian kata-kata yang tidak baku dan tidak umum seperti singkatan tertentu misalnya sob, slmt mlm, que, ane, ente dll. Karena singkatan singkatan tersebut tidak mudah terindeks oleh google. Buatlah semua kata kata dalam postingan anda menjadi SEO.
5. Hindari Copy Paste dalam Postingan Anda

Buatlah sebuah postingan tanpa Copy paste dari blog lain. Usahkan postingan yang unik dan jarang di posting orang lain, karena postingan yang unik sangat di sukai oleh google.
6. Buat Backlink ke postingan blog anda

Backlink sangatlah mempengaruhi cepat tidaknya postingan anda terindeks oleg google. Anda bisa membuat backlink di blog anda yang lain, di facebook, tweeter ataupun dengan cara tukar link sesama blogger
7. Perbanyak Visitor ke Postingan Blog.

Visitor juga mempengaruhi mudah tidaknya terindeks google. Anda bisa memperbanyak visitor dengan mengiklankan postingan anda, blogwalking atau kunjungan sesama blogger.
8. Submit URL Setiap Artikel postingan anda ke google

Submit setiap artikel postingan ke google dimaksudkan untuk mendaftarkan postingan baru agar kita terdaftar dengan cepat di google dan masuk dalam database google. Klik disini untuk mensubmit URL artikel anda.
Demikianlah beberapa carayang bisa anda lakukan agar postingan blog cepat terindeks google. Mohon maaf, saya tidak tau menahu tentang SEO dan hal diatas hanya sebagai pengalaman saya dan masih banyak yang lain yang bisa anda lakukan.

Sekian postingan kali ini semoga bermanfaat

Sumber :adhy.heck.in

OPTIMALISASI FIREFOX















1. Tweak Firefox dengan About:Config
Langkah-langkah:
  • Jalankan Mozilla
  • Pada Addres bar ketik “about:config” (tanpa tanda kutip)
  • Ubahlah parameter berikut ini:
  • network.http.pipelining ubah jadi true
  • network.http.pipelining.maxrequest dari 30 jadi 8.
  • network.http.max-connections dari 30 ubah jadi 96.
  • network.http.max-connections-per-server dari 15 jadi 32.
  • network.http.max-persistent-connections-per-server dari 6 ubah jadi 8.
  • network.http.pipelining.ssl dari false ubah jadi true.
  • network.http.proxy.pipelining dari false ubah jadi true.
  • network.prefetch-next jadi false.
Setelah itu tekan F5 untuk refresh Firefox Anda. Dan rertarlah Firefox Anda.

2. Mempercepat Akses Internet dengan Fasterfox
  • Download dari http://fasterfox.mozdev.org
  • Pilih install now.
  • Restart Firefox anda.
  • Setelah firefox anda di restart, pada taskbar anda sebelah kanan bawah Firefox akan muncul ikon fasterfox.
  • Klik kanan pada ikon fasterfox, pada koteks menu yang muncul pilih Options.
  • Pada bagian Presets pilih Turbo Charged.
  • OK.

3. Memblok Iklan dengan Add-ons Adblock Plus
  • Masuk ke http://addons.mozilla.org/en-US/firfox/addon/1865
  • Tekan enter
  • Akan tampil halaman Firefox Add-ons Addblock Plus 0.7.5.5. Setelah itu klik Add to Firefox untuk mendownloadnya.
  • Klik install.
  • Setelah proses instalasi selesai, klik tombol restart firefox.
  • Setelah di restart, maka saat anda menjalankan browser Firefox akan tampil kotak dialog Welcome.
  • Klik cancel saja pada tab tersebut.
  • Pada browser, Anda akan mendapati toolbar ABP (AdBlock Plus).

4. Optimalisasi Koneksi dengan Firefox Ultimate Optimizer

  • Untuk mendownload, klik link di bawah :
  • http://firefok-ultimate-optimizer.en.softonic.com/download
  • Langkah-langkah penggunaannya :
  • Ekstrak file Firefox Ultimate Optimizer yang masih dalam bentuk zip tersebut.
  • Setelah di ekstrak, anda akan melihat beberapa file, klik dua kali pada file Firefox Ultimate Optimizer.exe
  • Jika sudah, pada tray anda akan ditempatkan ikon Firefox Ultimate Optimizer.
Sumber : hermawayne.blogspot.com