Search

Koleksi Icon Social Bookmark

Posted by Kimberly on Wednesday, December 29, 2010

More aboutKoleksi Icon Social Bookmark

Google Rilis Top Searching di Tahun 2010

Posted by Kimberly on Sunday, December 26, 2010

Setelah sekian lama saya mengistirahatkan blog ini, akhirnya saya kembali mencoba menulis lagi dengan informasi ringan tentang top searching google di tahun 2010. Ada yang menanjak naik drastis dan stabil, ada pula yang naik drastis dan menghilang dengan cepat. Hal ini sebagai upaya google untuk memberikan informasi buat pengguna internet yang sebagian besar juga pemilik website atau blog seperti kita agar bisa lebih selektif dalam memilih kata kunci.

 

image

 

Sebagai contoh, pencarian di bidang entertainment :

  1. justin bieber
  2. shakira
  3. eminem
  4. netflix
  5. youtube videos
  6. lady gaga
  7. kesha
  8. nicki minaj
  9. grooveshark
  10. transformers 3

 

 

atau, pencarian di bidang olahraga :

  1. mundial 2010
  2. olympics
  3. espn3
  4. fifa 11
  5. randy moss
  6. miami heat
  7. mourinho
  8. wayne rooney
  9. cricket live score
  10. david villa

 

 

dan masih banyak lagi daftar pencarian terbaik tahun 2010. Silahkan di cek sendiri, semoga informasi ringan ini bisa bermanfaat.

More aboutGoogle Rilis Top Searching di Tahun 2010

Jampete Blogger Template

Posted by Kimberly on Sunday, December 5, 2010

Jampete blogger template adalah template blogger yang sengaja saya buat dengan desain sederhana. Sama halnya dengan template green hurdico dan green spitial, jampete sengaja saya buat dengan kolom terpisah antara postingan dan sidebar. Dan seperti biasa 3 kolom pada bagian footer menjadi alternatif untuk meletakkan widget-widget yang berlebihan juga saya tambahkan pada jampete.

  image

 

Berbeda dari template-template sebelumnya, kali ini saya coba tambahkan slider menu pada bagian atas. Namun begitu slider menu tersebut tidak mutlak harus digunakan karena saya memberikan 2 pilihan yaitu jampete full version (dengan slider menu) dan jampete biasa (tanpa slider menu). Untuk itu, jika slider tersebut terasa berat maka bisa menggunakan jampete versi biasa.

 

Adapun fitur-fitur pada template ini antara lain :

2 kolom utama (post dan sidebar), menu 1 yang letaknya diatas header, banner dengan ukuran 468 x 60 pada bagian header, menu 2 diatas kolom postingan dan tentunya slider menu serta 3 kolom pada bagian footer.

 

Semoga tertarik dan tak lupa saya ucapkan banyak terima kasih buat sobat yang selama ini sudah menggunakan template-template buatan saya.

More aboutJampete Blogger Template

Cara Pasang Slidshow di Blog

Posted by Kimberly on Tuesday, November 23, 2010

Kali ini saya akan berikan tutorial cara pasang slidshow di blog. Saya mengambil kode yang paling sederhana dengan menu slidshow yang juga sangat sederhana. Slidshow sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan template gris-amarillo dan meletakkannya di dalam main post, silahkan cek disini.

 

image Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih 540px. Buat sobat yang memiliki lebar kolom post lebih atau kurang dari 540px silahkan disesuaikan saja.

 

  1. Masuk ke Edit HTML.
  2. Jangan klik Expand Template Widget karena akan membuat sobat jadi pusing dengan kode yang panjang.
  3. Copas kode berikut diatas kode ]]></b:skin>

     

    /* SLIDESHOW */
    #slider-holder{width:540px;height:300px;overflow:hidden;margin-left:-15px;padding:0}
    #s3slider{width:540px;height:300px;position:relative;overflow:hidden}
    #s3sliderContent{width:540px;position:absolute;top:0;margin-left:0}
    .s3sliderImage{float:left;position:relative;display:none}
    .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:70px;width:540px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
    .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
    .s3sliderImage span a.featured-title:hover{color:#999}
    .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
    .s3sliderImage span a:hover{color:#555}

  4. Kemudian copas kode berikut diatas kode </head>

     

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
    <script type='text/javascript'>
    <!--//--><![CDATA[//><!--

    (function($){ 

        $.fn.s3Slider = function(vars) {      
            var element     = this;
            var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
            var current     = null;
            var timeOutFn   = null;
            var faderStat   = true;
            var mOver       = false;
            var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
            var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
            items.each(function(i) {
                $(items[i]).mouseover(function() {
                   mOver = true;
                });
                $(items[i]).mouseout(function() {
                    mOver   = false;
                    fadeElement(true);
                });
            });
            var fadeElement = function(isMouseOut) {
                var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
                thisTimeOut = (faderStat) ? 10 : thisTimeOut;
                if(items.length > 0) {
                    timeOutFn = setTimeout(makeSlider, thisTimeOut);
                } else {
                    console.log("Poof..");
                }
            }
            var makeSlider = function() {
                current = (current != null) ? current : items[(items.length-1)];
                var currNo      = jQuery.inArray(current, items) + 1
                currNo = (currNo == items.length) ? 0 : (currNo - 1);
                var newMargin   = $(element).width() * currNo;
                if(faderStat == true) {
                    if(!mOver) {
                        $(items[currNo]).fadeIn((timeOut/6), function() {
                            if($(itemsSpan[currNo]).css('bottom') == 0) {
                                $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                    faderStat = false;
                                    current = items[currNo];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            } else {
                                $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                    faderStat = false;
                                    current = items[currNo];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            }
                        });
                    }
                } else {
                    if(!mOver) {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                $(items[currNo]).fadeOut((timeOut/6), function() {
                                    faderStat = true;
                                    current = items[(currNo+1)];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            });
                        } else {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                    faderStat = true;
                                    current = items[(currNo+1)];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            });
                        }
                    }
                }
            }
            makeSlider();

        }; 

    })(jQuery); 
    //--><!]]></script>

    <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;#s3slider&#39;).s3Slider({
    timeOut: 4000
    });
    });
    </script>

  5. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan sobat copas kode berikut setelah kode <div id='main-wrapper'>

     

    <div id='slider-holder'>
    <div id='s3slider'>
    <ul id='s3sliderContent'>


    <li class='s3sliderImage' style='display: list-item;'>
    <a href='LETAK LINK DISINI 1'><img src='http://4.bp.blogspot.com/_-oSBOVNdtsg/TNQ5f7zGN2I/AAAAAAAAAI8/0EtNG4JD8gI/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: block;'>
    <a class='featured-title block' href='LETAK LINK DISINI 1'>JUDUL POST 1</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>

    </li>


    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 2'><img src='http://4.bp.blogspot.com/_-oSBOVNdtsg/TNQ5gKhdH1I/AAAAAAAAAJM/vQon_Uu0Ntg/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 2'>JUDUL POST 2</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>


    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 3'><img src='http://4.bp.blogspot.com/__Ue-P3hoW1M/TM2c9Ye_X_I/AAAAAAAABNo/jpQh0WlWzvs/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 3'>JUDUL POST 3</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>

     

    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 4'><img src='http://3.bp.blogspot.com/__Ue-P3hoW1M/TM2c9ujd4EI/AAAAAAAABNw/dE2qWy2YxMw/s1600/3.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 4'>JUDUL POST 4</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>


    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 5'><img src='http://3.bp.blogspot.com/__Ue-P3hoW1M/TM2c9waMz1I/AAAAAAAABN4/SwlhrFC60t8/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 5'>JUDUL POST 5</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>


    <li class='clear s3sliderImage'/>

    </ul>
    </div>
    </div>

  6. Simpan Template

 

 

Keterangan :

  • Perhatikan lebar 540px, silahkan sesuaikan saja dengan lebar post template sobat.
  • Lihat tulisan yang berwarna ungu pada kode css-nya, saya gunakan margin-left:-15px karena menyesuaikan dengan demo template yang saya gunakan.
  • Kode yang berwarna pink adalah kode url untuk gambar yang sudah sobat upload sebelumnya.
  • dan kode dengan tulisan tebal pastinya bisa dimengerti dan jelas saya tulis disitu.

 

Cukup panjang, semoga berhasil ya !

More aboutCara Pasang Slidshow di Blog

Alakadarnya Blogger Template

Posted by Kimberly on Sunday, November 21, 2010

image Alakadarnya blogger template adalah sebuah template yang memang alakadarnya dan seadanya. Itulah sebabnya mengapa saya beri nama template ini dengan nama alakadarnya. Mengusung tema yang sama dengan sebelumnya, saya coba berikan template blogger sederhana namun tampak menarik dengan sedikit sentuhan garis lengkung pada setiap sisi. Saya berikan juga tambahan padding sebesar 20px pada garis tepi sehingga tampak seperti border.

 

Template ini memiliki 2 kolom, 1 kolom postingan dan 1 kolom sidebar yang terletak di sebelah kanan. Dan tambahan 3 kolom footer membuat alakadarnya memiliki banyak tempat untuk meletakan widget atau link. Selain itu saya tambahkan warna kontras merah pada menu horizontal, dan hover gelap selaras dengan bagian utama template. Kemudian tambahan banner ukuran 468 x 60 pada bagian header yang merupakan kebutuhan kebanyakan blogger untuk memasang banner mereka. Saya rasa itu saja penjelasan tentang Alakadarnya blogger template, semoga tertarik.

More aboutAlakadarnya Blogger Template

Update Post Ke Twitter Via FeedBurner

Posted by Kimberly on Saturday, November 13, 2010

Untuk meningkatkan pengunjung blog, update postingan ke situs-situs social bookmark merupakan hal yang mutlak dilakukan. Seperti update post di facebook, twitter juga tempat yang wajib kita isi dengan postingan-postingan blog kita. Untuk itu ada cara mudah melakukannya tanpa harus menulis manual di twitter, yaitu dengan menggunakan jasa feedburner.

 

Pertama-tama yang harus sobat lakukan adalah mendaftar di feedburner, kemudian isi dengan url atau feed blog sobat. Jika sudah, sekarang tinggal setting sedikit pada bagian social bookmark.

 

  1. Klik pada link yang sudah sobat daftarkan sebelumnya.

     

    image
  2. Kemudian klik pada tab Publicize.

     

    image
  3. Klik pada Socialize pada bagian samping.

     

    image
  4. Masukkan account twitter sobat dengan mengklik Add a Twitter account.

     

    image
  5. Login dengan account twitter sobat.
  6. Kemudian perhatikan tampilan format yang akan ditampilkan dalam postingan di twitter.

     

    image
  7. Pada bagian Post content ganti dengan Title and Body untuk menampilkan judul dan isi post.
  8. Jika sudah selesai, maka klik Active pada bagian paling bawah.

     

    image

 

Selamat mencoba !

More aboutUpdate Post Ke Twitter Via FeedBurner

Cara Membuat Tulisan Besar Pada Awal Postingan

Posted by Kimberly on Saturday, November 6, 2010

Kemarin saya mendapat email dari sobat johan yang menanyakan perihal membuat huruf yang besar pada awal postingan. Sebenarnya jika ingin tau bisa saja searching di google tentang hal ini karena memang sangat banyak bloggers yang menulis tutorial ini. Saya agak lupa apakah pernah menulis tutorial huruf besar pada awal postingan ini, jadi semalam saya bongkar-bongkar lagi semua judul post dan ternyata memang belum pernah saya tulis mengenai hal ini.

 

Sekedar info buat yang baru, huruf ini akan tampil besar dan berbeda sendiri dengan huruf lain yang ada di blog kita. Biasanya bisa kita lihat di koran atau majalah. Untuk membuatnya sangat mudah, karena hanya butuh satu kode css dan sedikit sentuhan pada saat membuat postingan.

 

  1. Setelah masuk blogger, silahkan klik Edit HTML.
  2. Tambahkan kode berikut sebelum kode ]]>< /b:skin>

    .huruf {
    float:left;
    color:#000;
    line-height:60px; 
    padding-right:5px;
    font-family:trebuchet ms,verdana;
    font-size:60px; 
    }

  3. Simpan Template.

 

 

Cara Posting

 

Tambahkan kode <span class="huruf"> sebelum huruf pertama dan </span> setelahnya. Contohnya seperti ini :

 

<span class="huruf">K</span>emarin saya mendapat email dari sobat johan yang menanyakan perihal membuat huruf yang besar pada awal postingan. Sebenarnya jika ingin tau bisa saja searching di google tentang hal ini karena memang sangat banyak bloggers yang menulis tutorial ini.

 

Sip, semoga bermanfaat ! Nerd

More aboutCara Membuat Tulisan Besar Pada Awal Postingan

Google�s URL Shortener

Posted by Kimberly on Saturday, October 30, 2010

Google baru saja mengeluarkan web dengan tipe yang berbeda dari sebelumnya yaitu url shortener. Url shortener atau yang kita kenal dengan sebutan penyingkat url, biasa digunakan untuk merubah atau mempersingkat url yang panjang dan mungkin cukup ribet untuk di ingat. Masukkan url, kemudian klik �Shorten� dan url baru sudah siap digunakan.

 

image 

 

Namanya adalah Goo.gl dan menurut Google memiliki beberapa keunggulan dibandingkan layanan url shortener lainnya yang sebenarnya sudah banyak beredar di internet. Berikut ini adalah kutipannya :

There are many shorteners out there with great features, so some people may wonder whether the world really needs yet another. As we said late last year, we built goo.gl with a focus on quality. With goo.gl, every time you shorten a URL, you know it will work, it will work fast, and it will keep working. You also know that when you click a goo.gl shortened URL, you�re protected against malware, phishing and spam using the same industry-leading technology we use in search and other products.

Setelah mencobanya saya rasa memang layanan yang satu ini berbeda dari layanan url shortener lainnya. Bagi sobat yang mempunyai url panjang dan cukup ribet sobat bisa mencoba layanan dari google ini.

More aboutGoogle�s URL Shortener

Tool Lengkap Untuk Tes Kecepatan Loading Blog

Posted by Kimberly on Thursday, October 28, 2010

Seperti yang kita ketahui bahwa kecepatan loading blog merupakan faktor yang sangat penting. Tidak hanya berpengaruh pada pengunjung blog, tetapi juga digunakan sebagai parameter pencarian peringkat oleh Google saat ini. Pada tulisan saya sebelumnya, hal ini sudah pernah saya bahas tentunya dengan tools yang lain. Dan saat ini saya melihat adanya tool online yang berkerja sangat baik untuk menganalisa kecepatan loading blog.


Sobat dapat menemukannya di WebPageTest.org. Hal yang pertama-tama sobat perlu lakukan adalah dengan memasukkan URL dari blog sobat, memilih lokasi geografis untuk melakukan tes, pilih beberapa pilihan dan kemudian klik "Submit". Dibutuhkan waktu sekitar 10-20 detik atau bahkan lebih untuk menyelesaikan tes ini, dan kemudian sobat akan melihat hasilnya seperti pada gambar berikut :

 

webpagetest

 

Disini sobat akan memperoleh waktu loading blog sobat pada kunjungan pertama dan kedua, hasilnya pun akan berbeda . Tool ini akan mempelihatkan grafik apa saja load yang gagal dan elemen apa yang paling banyak dalam blog sobat.

 

Terlihat pada saat loading pertama, blog saya terbaca sampai 8.455 detik dan 2,815 detik pada kunjungan ke-2, masih jauh dari standard. Ketika saya amati, bahwa load gambar-gambar pada blog ini yang banyak menghabiskan waktu sehingga membuat loading blog saya jadi lambat.

 

Bagaimana dengan blog sobat? silahkan di coba dan analisa kecepatan blog sobat dengan segera.

More aboutTool Lengkap Untuk Tes Kecepatan Loading Blog

Free Ping Service

Posted by Kimberly on Sunday, October 24, 2010

Sekarang saya akan berbagi tentang ping service, yang saya artikan seperti sebuah mesin otomatis yang ketika kita klik maka mesin tersebut akan mengindeks artikel-artikel dari blog kita ke beberapa mesin pencari, seperti google, yahoo, dan berbagai situs-situs social bookmark lainnya. Jadi ping service adalah sebuah alat otomatis berbentuk web yang berfungsi menyebarkan artikel blog ke berbagai situs populer di seluruh dunia yang selalu dikunjungi orang.

 

image Sebelum menggunakan ping service, saya sarankan sebaiknya lakukan ping setelah menulis postingan terbaru sehingga mesin pencari tahu bahwa sobat punya konten terbaru dan jangan terlalu sering menggunakan jasa ping service karena bisa saja dianggap spam yang mungkin bisa merugikan blog sobat. Seperti pengalaman blog ini yang pernah terkena google sandbox sehingga membuat blog ini menghilang dari mesin pencari.

 

Dibawah ini ada beberapa situs ping service yang selalu saya gunakan untuk mengupdate artikel-artikel blog saya, semoga bermanfaat.

 

  1. My Page Rank

    Submit Gratis memungkinkan sobat mengirimkan URL blog sobat ke 20 search engine populer.

  2. Pingler.com

    Gunakan Pingler.com untuk Drive Traffic Blog dan Website sobat. Gunakan Pingler.com untuk Ping Blog.

  3. Ping-o-Matic!

    Ping-O-Matic adalah sebuah layanan untuk memperbarui mesin pencari yang berbeda untuk mengetahui bahwa blog Anda telah diperbarui.

  4. Autopinger

    Ping blog otomatis.

  5. Feed Ping

    Layanan Submission Blog Multiple - Website FEED PING dan Pelayanan Feed Blog Multiple.

  6. PING.IN

    Blog dan ping, Blog Search, Speed Test.

  7. King Ping

    Update ping untuk mendapatkan hasil terbaik dari semua search engine.

  8. Pingoat

    Ping lebih dari lima puluh layanan blog secara instan. Pingoat juga memiliki server XML-RPC. Ping layanan seperti Technorati, NewsGator, feedster.

  9. Totalping

    Ping blog otomatis ke lebih dari 20 layanan blog.

  10. Ping4free

    Harus mendaftar dahulu sebelum melakukan ping.

 

Silahkan pilih yang menurut sobat bagus dan semoga bermanfaat dan bisa menaikkan traffic blog sobat.

More aboutFree Ping Service

Google Belum Update Pagerank, Apa Yang Terjadi?

Posted by Kimberly on Wednesday, October 13, 2010

Lewat sudah hari-hari ketika pertama kali saya mengetahui dunia blog dan terobsesi dengan Google PageRank. Terutama dengan nomimal PageRank yang merupakan skala 0 hingga 10 yang dapat kita lihat pada berbagai toolbar di web. Padahal jika dicermati, PageRank hanya sebuah nomimal yang dibuat oleh Google untuk menilai banyaknya pada sebuah web/blog. Hal ini tidak berdampak langsung pada bloggers yang hanya ngeblog karena hobi saja, tapi bagaimana dengan orang yang bekerja keras begadang setiap hari untuk mencari nafkah dari dunia blog? tentu PageRank nyata dan sangat ditunggu.


image Yang membuat saya penasaran dan menjadi pertanyaan saya, kenapa Google sampai saat ini belum melakukan update PageRank? Saya melihat dan mengecek disemua blog atau web yang biasa saya kunjungi dan memang hasilnya sama, Google memang belum update PageRank. Google update PageRank  terakhir 2 April 2010, dan yang seharusnya terjadi adalah akhir bulan juli atau awal agustus 2010 Google sudah update pagerank, tapi sejauh ini tidak ada yang terjadi.


Berpikir tentang masalah ini, satu pertanyaan muncul dalam pikiran saya : Bagaimana jika Google benar-benar menghapus PageRank? Artinya, bagaimana jika semua toolbar berhenti bekerja, dan tak seorang pun akan dapat melihat indikator berapa banyak  backlink web atau blog? Apa dampak perubahan tersebut pada webmaster / blogging / industri SEO? Beberapa orang berpendapat jika Google menghapus nominal pageRank maka akan membunuh pasar jual beli link. Saya tidak berpikir begitu. Selama backlink memainkan peran dalam algoritma pencarian peringkat, masih akan ada orang-orang yang membeli mereka.

 

Tetapi tanpa PageRank, proses pembelian atau penjualan link akan sedikit berubah. Saya percaya bahwa layanan backlink analisis berbayar akan mendapatkan banyak klien lagi, karena hal ini akan menjadi cara terbaik untuk mengevaluasi otoritas link dari setiap web/blog. Saya berpikir lebih penting dari itu, bagaimanapun efek perubahan tersebut akan ada di pikiran pemilik web. Mungkin sebagian besar dari mereka akan menyadari yang lebih penting bukanlah lagi nominal PageRank, tapi lebih pada kualitas konten/isi blog.

 

Saya percaya bahwa jika PageRank dihapus maka bloggers dan pemilik web lainnya akan menjadi enggan atau malas untuk saling tukar link lagi, akibatnya hubungan antar sesama bloggers akan semakin renggang, hhmm semoga saja tidak terjadi.


Tapi apa yang sobat pikirkan? Apakah perubahan ini bersifat positif atau negatif? Apa aspek-aspek lain akan dipengaruhi?

More aboutGoogle Belum Update Pagerank, Apa Yang Terjadi?

Template Dore Zot Terlaris

Posted by Kimberly on Thursday, October 7, 2010

Setelah melakukan pengecekan backlink terhadap mybloggerthemes.com, ternyata template dore zot menjadi template yang paling banyak di gunakan sobat blogger. Sebelumnya di tahun lalu, smart gradient secara mengejutkan membuat saya tergeleng-geleng karena diminati dan digunakan lebih dari 50 blogger yang rata-rata berasal dari indonesia. Kembali ke dore zot, bicara tentang dore zot sebetulnya template yang mengusung tema personal dengan background abstract ini saya buat secara tidak sengaja alias dadakan.

 

image

 

Template dengan layout 3 kolom ini sebetulnya saya buat secara sederhana, dengan pemakaian border yang sedikit tebal dan penggunaan rounded corners membuat dore zot menjadi lebih kokoh. Sebetulnya nama dore zot ini saya ambil dari verifikasi kata pada saat saya ingin membuat blog baru dan jelas tidak mengandung arti apa-apa. Mungkin cuma ini yang bisa saya sampaikan, sekedar info saja sih sebenarnya karena memang belakangan saya sedang malas berpikir untuk menulis.

 

Buat yang sudah menggunakan dore zot saya ucapkan terima kasih, apalagi jika tidak merubah atau mengganti link kredit yang ada dibawahnya. Karena biar bagaimanapun, jadilah blogger sejati untuk menghargai hasil karya orang lain.

 

Terima kasih.

More aboutTemplate Dore Zot Terlaris

Tutorial Image Bubbles Menggunakan CSS3

Posted by Kimberly on Friday, October 1, 2010

Kembali dengan yang lagi-lagi tentang css, saya harap sobat tidak bosan dengan tulisan saya yang melulu mengenai css. Karena memang saat ini css lagi mengalami perkembangan pesat, oleh karenanya saya mencoba memberikan sedikit tips mengenai css3. Yang akan saya bahas disini adalah css image bubbles transitions, dan sekedar info bahwa tutorial ini hanya bisa diterapkan pada browser firefox versi 3.5+, opera 9.5+, safari dan chrome. Untuk demo bisa sobat lihat disini.

 

image

 

Sebelum memulai ada baiknya sobat backup template sobat terlebih dahulu, biasakan untuk melakukan hal ini jika ingin melakukan pengeditan template.

 

  1. Login ke Blogger.
  2. Klik Rancangan.
  3. Masuk ke Edit HTML.
  4. Copas kode css berikut sebelum kode ]]></b:skin>
    .bubblewrap{
    list-style-type:none;
    margin:0;
    padding:0;
    }

    .bubblewrap li{
    display:inline;
    width: 65px;
    height:60px;
    }

    .bubblewrap li img{
    width: 55px;
    height: 60px;
    border:0;
    margin-right: 12px;
    -webkit-transition:-webkit-transform 0.1s ease-in;
    -o-transition:-o-transform 0.1s ease-in;
    }

    .bubblewrap li img:hover{
    -moz-transform:scale(1.8);
    -webkit-transform:scale(1.8);
    -o-transform:scale(1.8);
    }

  5. Cari kode yang mirip seperti ini :
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Nousisce (Header)' type='Header'/>
    </b:section>
    </div>

  6. Kemudian letakkan kode berikut setelah kode diatas :
    <div class='bubblewrap'>
    <ul>
    <li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkRZT8XHI/AAAAAAAAEpU/boHguF0HbX0/stumbleupon_thumb%5B2%5D.png' title='Add to Stumbleupon'/></a></li>
    <li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkLgpPqKI/AAAAAAAAEpE/MoiG31eV3gg/facebook_thumb%5B2%5D.png' title='Add to Facebook'/></a></li>
    <li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkJCcKt5I/AAAAAAAAEo8/6LdMi30Ms0o/digg_thumb%5B2%5D.png' title='Add to Digg'/></a></li>
    <li><a href='#'><img src='http://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb%5B2%5D.png' title='Add to Twitter'/></a></li>
    <li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkOKs2gnI/AAAAAAAAEpM/atV8KDhqKcI/rss_thumb%5B2%5D.png' title='Add RSS Feed'/></a></li>
    </ul>
    </div>
  7. Simpan Template.

 

Untuk kode yang berwarna ungu adalah kode url untuk gambarnya, sobat bisa ganti dengan gambar social bookmark yang sobat punya.

 

Semoga bermanfaat, and happy nice weekend ! Hot

More aboutTutorial Image Bubbles Menggunakan CSS3

CSS Untuk Tulisan/Gambar Berbayang

Posted by Kimberly

Rasanya sudah lama saya tidak posting di blog ini, konsentrasi saya sedang terpecah mengurus blog-blog saya yang lain, termasuk mybloggerthemes.com yang semakin banyak permintaan dari sahabat yang ingin mempromosikan template mereka di mybloggerthemes.com. Kali ini lagi-lagi saya mencoba memberikan tutorial css buat sobat setia pengunjung blog ini, namanya css layer.

 

Css layer ini semacam tulisan atau gambar yang berbayang yang terdiri dari 2 komponen css sederhana. Untuk membuatnya sangat mudah, hanya menerapkan sedikit kode maka tulisan atau gambar berbayang siap ditampilkan dan mempercantik blog sobat. Berikut beberapa tutorialnya :

 

? Layer 1 diatas layer 2
LAYER 1
LAYER 2
<div style="z-index:2; position:relative; font-size:40px">LAYER 1</div><div style="z-index:1; position:relative; color:blue; font-size:60px">LAYER 2</div>

? Layer 2 diatas layer 1

LAYER 1
LAYER 2


<div style="z-index:3; position:relative; font-size:40px">LAYER 1</div><div style="z-index:4; position:relative; color:blue; font-size:60px">LAYER 2</div>


? Layer Untuk Gambar Variasi 1 


<div style="position:relative"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/TEsn4YFFiQI/AAAAAAAAEXg/TiYA_Obocvo/mybloggerthemes_thumb%5B7%5D.png" /></div><div style="position:relative; margin-top:-20px; margin-left:20px"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/TEsn4YFFiQI/AAAAAAAAEXg/TiYA_Obocvo/mybloggerthemes_thumb%5B7%5D.png" /></div>



? Layer Untuk Gambar Variasi 2 


<div style="position:relative"><img src="http://3.bp.blogspot.com/_7Y9pl24WpQY/TGVZE5AgQmI/AAAAAAAAEeU/Ktj7gkUldGQ/S1600-R/newalltutorial.png" /></div><div style="position:relative; filter:alpha(opacity=20); margin-top:-10px; -moz-opacity:0.20; opacity:0.2; -khtml-opacity:0.2"><img src="http://3.bp.blogspot.com/_7Y9pl24WpQY/TGVZE5AgQmI/AAAAAAAAEeU/Ktj7gkUldGQ/S1600-R/newalltutorial.png" /></div>


Untuk tutorial css image yang lain akan saya bahas lain waktu, semoga bermanfaat.
More aboutCSS Untuk Tulisan/Gambar Berbayang

Backlink Gratis di Google Profiles

Posted by Kimberly on Tuesday, September 21, 2010

Saya tidak akan panjang lebar seperti biasanya, karena memang belakangan ini saya sedang malas menulis. Bicara masalah backlink, semua pasti tau manfaatnya, apalagi yang gratisan. Satu saja backlink akan sangat membantu dalam urusan perkembangan blog kita. Ada satu layanan google yang dapat sobat gunakan untuk mencari backlink gratis, namanya Google Profiles.

 

image Disini sobat hanya login dengan account google sobat, kemudian sobat hanya perlu mengisi beberapa informasi yang mereka tanyakan, seperti tentang diri sobat, termasuk url blog sobat. Dan tambahkan gambar profile sobat, jreng dapat 1 backlink, lumayan ! Selama sobat menambahkan informasi diri, profil sobat akan ditampilkan dalam hasil pencarian Google, dan harus dihitung sebagai backlink normal karena Google tidak menggunakan atribut nofollow pada link website.

 

Layanan ini juga berguna karena memberikan kesempatan untuk menambahkan url lebih dari satu dan mungkin dapat membuat nama sobat pada halaman pertama hasil pencarian google. Jadi apa yang sobat tunggu, buruan isi !

More aboutBacklink Gratis di Google Profiles

Coba Typography di FontTester.com

Posted by Kimberly on Wednesday, September 15, 2010

Optimasi typography blog sangat penting, untuk mempermudah pengunjung dalam membaca konten sebuah blog. Jika sobat masih ragu untuk mencobanya langsung di template, sobat bisa menggunakan fasilitas dari Font Tester. Secara garis besar semua ada, mulai dari jenis huruf, besar huruf, spasi huruf atau ketebalan huruf. selain itu masih ada beberapa fasilitas lain yang bisa sobat dapat.

Untuk mencobanya, silahkan masuk ke FontTester.com, saran saya untuk font-family gunakan saja yang web safe fonts karena web safe fonts adalah font standard bawaan windows.



Silahkan dicoba dan semoga dengan adanya font tester ini, blog sobat bisa jadi lebih menarik dari sisi huruf tentunya.
More aboutCoba Typography di FontTester.com

Corst

Posted by Kimberly

image

 

Template Information

 

Name Corst
Author http://www.blog-zone.info
Designer http://www.mybloggerthemes.com
Properties 2 Columns, Gray, White, Blue, Elegant, Fixed Width, Right Sidebar
Descriptions Green Hurdico is a simple blogger template with a combination of gradient border and soft colors, making Green Hurdico look elegant. Suitable for personal blog or web design.
More aboutCorst

Selamat Idul Fitri 1431H

Posted by Kimberly on Thursday, September 9, 2010

imageSebulan sudah kita menjalankan ibadah puasa, tak terasa waktu begitu singkat, bulan suci Ramadhan sudah meninggalkan kita lagi. Semoga kita semua termasuk orang-orang yang beruntung yang pahala puasanya diterima Allah SWT.

 

Di hari yang Fitrah ini, izinkanlah saya mengucapkan :

 

Selamat Idul Fitri 1 Syawal 1431 H

Minal Aidin Wal Faidzin Mohon Maaf Lahir dan Batin

 

Maafkan segala tutur kata atau prilaku saya selama ini yang tidak berkenan di hati sobat setia pengunjung blog ini. Semoga Allah SWT menerima semua amal ibadah dan mengampuni segala dosa-dosa kita semua, Amin.

More aboutSelamat Idul Fitri 1431H

Green Spitial

Posted by Kimberly on Monday, September 6, 2010

image

 

Template Information

 

Name Green Spitial
Author http://www.blog-zone.info
Designer http://www.mybloggerthemes.com
Properties 2 Columns, White, Green, Rounded Corner, Fixed Width, Right Sidebar, Gradient
Descriptions Green Spitial is a new styled Blogger template. Template is also very neat. Green spitial use navigation with a black shadow, making it more arise and looks elegant. Suitable for personal blog.
More aboutGreen Spitial

Navigasi Halaman Menggunakan Javascript

Posted by Kimberly on Wednesday, September 1, 2010

image Tutorial pemasangan navigasi halaman ini sudah pernah saya bahas dulu, dengan cara meletakkan langsung seluruh kode di gadget. Namun masih saja ada yang kesulitan dengan panduan peletakkan navigasi halaman tersebut. Sekarang saya akan coba berikan sedikit tips yang berbeda dan tentunya dengan variasi bentuk yang lebih menarik. Saya tidak akan panjang lebar menjelaskan tentang pengertian navigasi halaman ini karena sudah pernah saya bahas sebelumnya.

 

Kode css dan javascript ini saya ambil dari blog dengan bentuk yang sama persis. Tapi jangan menelan mentah-mentah kode css yang ada karena sobat bisa kreasikan sesuai dengan warna background blog sobat. Jika kode script ini saya pasang langsung di pasti akan membuat sobat pusing karena kode ini sangat panjang, oleh karenya saya simpan saja di . Berikut cara pemasangannya.

 

  1. Setelah login di blogger, silahkan sobat klik Rancangan.
  2. Kemudian klik tab Edit HTML.
  3. Untuk radio button Expand Template Widget tidak usah di klik karena akan menambah pusing nantinya.
  4. Letakkan kode css berikut ini sebelum kode ]]></b:skin>

     

    .showpageNum a {

    color:#FFF;padding:4px 10px;

    margin:0 2px;

    text-decoration:none;

    -webkit-border-radius:2px;-

    moz-border-radius:2px;

    background:#848484

    }
    .showpageOf {

    color:#222;

    margin:0 6px 0 0

    }
    .showpageNum a:hover {

    background:#222;

    color:#FFF

    }
    .showpagePoint {

    color:#FFF;

    text-shadow:0 1px 2px #333;

    padding:4px 10px;

    margin:0 2px;

    -webkit-border-radius:2px;

    -moz-border-radius:2px;

    background:#222;

    text-decoration:none

    }
  5. Dan letakkan kode berikut sebelum </body>

     

    <script type='text/javascript'>
    var home_page=&quot;/&quot;;
    var urlactivepage=location.href;
    var postperpage=10;
    var numshowpage=7;
    var upPageWord =&#39;&#9668;&#39;;
    var downPageWord =&#39;&#9658;&#39;;
    </script>
    <script src='http://newalltutorial.googlecode.com/files/pagenav.js' type='text/javascript'/>
  6. Kemudian Simpan Template.

 

Keterangan :

  • var postperpage=10; adalah jumlah postingan dalam satu halaman, sesuaikan dengan jumlah postingan sobat, jika jumlah postingannya 5 maka ganti angka tersebut dengan angka 5.
  • var numshowpage=7; adalah jumlah tombol navigasi dalam satu halaman.

 

Semoga berhasil ya !

More aboutNavigasi Halaman Menggunakan Javascript

Top 1000 Website Versi Google

Posted by Kimberly on Saturday, August 28, 2010

image Google sebagai raja search engine mengeluarkan daftar 1000 web terbaik. Penilaian ini berdasarkan jumlah traffic dan page view dari web tersebut. Dan sampai tulisan ini saya buat, facebook dan yahoo masih menempati urutan pertama dan kedua (tidak termasuk google). Mau tau siapa saja yang masuk dalam daftar 1000 web terbaik versi google, yuk mari �

 

Gambar dibawah ini adalah review dari list tersebut, untuk melihatnya langsung saja tuju ke halaman Daftar 1000 Web Terbaik.

 

image

 

Bagaimana, ada tidak punya sobat dalam 1000 daftar web terbaik versi google? hhmm..ga mungkin ya.  

 

Semoga suatu saat kita semua bisa sukses seperti mereka, tidak perlu muluk-muluk untuk masuk dalam daftar 1000 web terbaik. Yang penting kita menulis yang terbaik dan mempunyai nilai fungsi buat pembacanya, dan jangan lupa tetap berusaha mencari peluang bisnis yang ada di dunia maya ini.

 

Semoga bisa menghibur ! Thumbs-up

More aboutTop 1000 Website Versi Google

Keyboard Shortcuts Untuk Posting Di Blogger

Posted by Kimberly on Friday, August 27, 2010

image Keyboard shortcuts membuat pekerjaan dalam urusan posting di blogger menjadi lebih mudah. Yang paling populer mungkin dalam urusan text dalam postingan, seperti membuat tulisan bold dengan CTRL+B atau untuk tulisan italic dengan CTRL+I. Sama dengan yang biasa kita gunakan pada saat menulis di office word. Dibawah ini ada beberapa list keyboard shortcuts, semoga bermanfaat.

 

Keyboard shortcuts ini telah di uji pada browser Internet Explorer 6+ dan tidak semua bisa berfungsi pada browser Firefox, Chrome dan Opera.

 

 

Shotcut Fungsi Semua Browser ?
CTRL+B
CTRL+I
CTRL+U
CTRL+L
CTRL+Z
CTRL+Y
CTRL+SHIFT+A
CTRL+SHIFT+P
CTRL+D
CTRL+P
CTRL+S
CTRL+G
Bold Text
Italic Text
Underline text
Blockquote (hanya pada saat EDIT HTML)
Undo last operation
Redo last operation

Insert Hyperlink

Preview Post

Save as Draft

Publish Post

Autosave

Indic Transliteration

Ya
Ya
Ya
Tidak
Ya
Ya
Tidak
Tidak
Tidak
Ya
Ya
Tidak

 

Selamat menggunakan dan semoga dapat mempermudah sobat dalam membuat setiap artikel.

More aboutKeyboard Shortcuts Untuk Posting Di Blogger

Green Hurdico

Posted by Kimberly on Sunday, August 22, 2010

image

 

Template Information

 

Name Green Hurdico
Author http://www.blog-zone.info
Designer http://www.mybloggerthemes.com
Properties 2 Columns, Gray, White, Green, Elegant, Fixed Width, Right Sidebar
Descriptions

Green Hurdico is a simple blogger template with a combination of gradient border and soft colors, making Green Hurdico look elegant. Suitable for personal blog or web design.

More aboutGreen Hurdico

Worika

Posted by Kimberly on Saturday, August 14, 2010

image

 

Template Information

 

Name Worika
Author http://www.blog-zone.info
Designer http://www.mybloggerthemes.com
Properties 2 Columns, Gray, White, Elegant, Fixed Width, Right Sidebar
Descriptions

Worika is a new styled Blogger template. Template is also very neat. With a mix of white and gray, avieri looks very elegant. Suitable for personal blog or web design.

More aboutWorika
Related Posts Plugin for WordPress, Blogger...