Kumpulan Tutorial Blogspot

Tips Blog | Tutorial Blog | Belajar Blog

Home → Arsip Untuk 2010

Koleksi Icon Social Bookmark

Write a comment √ Read More... »

Google Rilis Top Searching di Tahun 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.
Write a comment √ Read More... »

Jampete Blogger Template

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.
Write a comment √ Read More... »

Recent Post Dengan Thumbnail

Hai sobat, gimana kabarnya nih ?, semoga dalam keadaan sehat. Nah kali ini saya mencoba menulis lagi tentang widget pada blogspot, tak lain adalah widget recent post yang sebelumnya sudah pernah saya tulis di blog ini dengan berbagai versi.
Namun kali ini sedikit agak berbeda dengan bentuk widget ini dengan adanya tambahan gambar thumbnail yang ada di postingan, dengan tujuan agar pembaca blog kita tertarik dengan postingan yang kita suguhkan setelah melihat thumbnail gambar yang mungkin unik, lucu, mempesona dsb.

Widget ini cocok bagi Anda yang mempunyai blog bernuansa gallery, misalnya gallery template, foto, desain dan sebagainya.

Untuk membuatnya silahkan ikuti langkah-langkah dibawah ini .

Pada menu Dashboard klik menu "Design - > Page Elements"

Lalu pilih area pada layout anda dan klik "Add a Gadget" dan pilih "HTML / JavaScript"

Dan taruh script dibawah ini kedalamnya.


<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image1.gif";

imgr[1] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image2.gif";

imgr[2] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image3.gif";

imgr[3] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image4.gif";

imgr[4] = "http://i725.photobucket.com/albums/ww258/anasceria/Tutorial-jitu/no-image5.gif";
showRandomImg = true;

boxwidth = 230;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "transparent";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://sangmerak.blogspot.com/";

</script>

<script src="https://sites.google.com/site/anasceria/recentposts_thumbnail.js" type="text/javascript"></script>

Keterangan :

boxwidth = 230; untuk menentukan lebar dari widget yang harus Anda sesuaikan dengan lebar Layout Anda.
Ganti URL "http://sangmerak.blogspot.com/" dengan alamat blog Anda.
Dan untuk modifikasi yang lain silahkan ubah keterangan-keterangan yang ada diatas.

Nah kalau sudah tinggal SAVE.

Sekian sobat blogger, semoga tutorial ini dapat anda gunakan dan bermanfaat bagi Anda. Sampai jumpa lagi di lain kesempatan.
Write a comment √ Read More... »

Cara Pasang Slidshow di Blog

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8yMTwrtCOQoAMjNLiKY1tv3zRXgxnRac56RD1sU9ajixaaJwd2rdEIkvgeri3OdAsmP-JdumiPgSq_kLAogcMUUPEJHFBC2_XQXwFHXU992HTOijnIW6FmsW2s5mEOMQMLEMEo_6gKg/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJIHCkDq717O_pcQfK2yyo_0Y0S4RJDYkL6AiMipWk8874L0RjCp5-BdpA0UUXvpmPAJlpQyqNkMw7Zyjpr3L2RVO_kX6CoLMzScbuCMipNQUlpZcSrBN3Mau-pZbZH7ZqyhfG6Z2hfw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO_djceC8sSrApeTCPzDoRHuEjj6bfOTktd19LO5CH2xTR54xyymhUukKKbctuWJ3HB5KpqR8s58VVy-X8qsHzLXAOpHcgSq0uXvgrS_KT8SkSRWtMyOQl4a5CHu8GEpW1JZQEN1yFGEk/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj11pFtWdDDY6eQnMLdSWcp6JdOTHaI4cxdz5e-IEkCAltHj-41MDrniE9U6w7_GSseXvdmc6_IAT44onbH6AnRmVZiQCktsZwX6G7JlSEBcPDu9Bq96e9nbYH_yj6oxEURbeqGJY3r3j4/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFj8Pg6eUfO6R8yeC8W6_snxyHpWL82cBPAxPVxY8VJa3V8ec6K0AR2CwDRStnSgsLOlCLfKY670VrFPYTCXTkTE1QZQNx3JtBI6r4oQY5iE91lkAUKGCK1PkYt0NNvMAOMiYT1ygbut4/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 !
Write a comment √ Read More... »

Alakadarnya Blogger Template

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.
Write a comment √ Read More... »

Update Post Ke Twitter Via FeedBurner

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 !
Write a comment √ Read More... »
Cara Membuat Tulisan Besar Pada Awal Postingan

Cara Membuat Tulisan Besar Pada Awal Postingan

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
Write a comment √ Read More... »

Google�s URL Shortener

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.

Write a comment √ Read More... »

Tool Lengkap Untuk Tes Kecepatan Loading Blog

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.
Write a comment √ Read More... »

Free Ping Service

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.
1 comment √ Read More... »

Google Belum Update Pagerank, Apa Yang Terjadi?

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?
Write a comment √ Read More... »

Template Dore Zot Terlaris

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.

Write a comment √ Read More... »

Tutorial Image Bubbles Menggunakan CSS3

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
Write a comment √ Read More... »

CSS Untuk Tulisan/Gambar Berbayang

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFmZTomGSvZ5vyWyFMPANAU0tpQwWNQldKZWfbtJTyN2ApPPVGGrAowQUGrSx-4hymBS9Yi2z3Q9I-l4H2rQQ3gAjbN9h2ffp5TmZWN6R0lDjDRrKBSYGfNXRrh0ZL4nAqpktmaoSt7dY/s1600-r/miscah.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFmZTomGSvZ5vyWyFMPANAU0tpQwWNQldKZWfbtJTyN2ApPPVGGrAowQUGrSx-4hymBS9Yi2z3Q9I-l4H2rQQ3gAjbN9h2ffp5TmZWN6R0lDjDRrKBSYGfNXRrh0ZL4nAqpktmaoSt7dY/s1600-r/miscah.png" /></div>


Untuk tutorial css image yang lain akan saya bahas lain waktu, semoga bermanfaat.
Write a comment √ Read More... »

Backlink Gratis di Google Profiles

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 !
Write a comment √ Read More... »

Coba Typography di FontTester.com

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.
Write a comment √ Read More... »

Corst

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.
Write a comment √ Read More... »

Selamat Idul Fitri 1431H

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.

Write a comment √ Read More... »

Green Spitial

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.
Write a comment √ Read More... »

Navigasi Halaman Menggunakan Javascript

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://miscah.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 !
Write a comment √ Read More... »

Membuat Tepi Gambar Bershadow Dengan CSS 3

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :
  1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
  2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {
Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.
Write a comment √ Read More... »

Top 1000 Website Versi Google

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
Write a comment √ Read More... »

Keyboard Shortcuts Untuk Posting Di Blogger

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.
Write a comment √ Read More... »