Kumpulan Tutorial Blogspot

Tips Blog | Tutorial Blog | Belajar Blog

Home → Semua Post

Tips Mempercepat Loading Blog (Part II)

hosting Pada tutorial sebelumnya, saya juga membahas tentang tips mempercepat loading blog dengan mengkompress kode css, namun hasilnya tidak terlalu jauh berbeda dengan sebelum di kompress.

 

Berbeda dengan yang akan saya jelaskan kali ini, saya akan coba memberikan tips mempercepat loading blog dengan cara menyimpan kode css di tempat hosting gratis.

 

Kecepatan loading yang dihasilkan lumayan cukup signifikan dengan sebelum kode css di simpan di hosting gratis. Caranya sangat mudah, namun sebelumnya sobat harus punya dulu hosting yang akan dijadikan tempat menyimpan kode css-nya. Tidak perlu bayar, yang gratisan banyak kok, sobat bisa coba di Google Code. Silahkan daftar dulu, sudah daftar? baiklah sekarang ikuti langkah-langkahnya berikut ini :

 

  1. Login ke blogger.

     

  2. Silahkan tuju Elemen Halaman.

     

  3. Klik Edit Template.

     

  4. Biasakan backup template dulu sebelum melakukan perubahan.

     

  5. Lalu klik Expand Template Widget.

     

  6. Perhatikan kode css milik sobat, saya akan berikan sedikit contoh :

     

    #header {
        width: 960px;
        height: 150px;
        color: #888888;
        background:#000;
        font-size: 14px;
        font-weight: normal;
        margin: 0px auto;
        padding: 0px;
        overflow: hidden;
        position: relative }

    #header p {
        padding: 0px 0px 5px 0px;
        margin: 0px;
        line-height: 20px }


    #header h1 {
        color: #FFFFFF;
        font-size: 35px;
        font-family: Times New Roman, Georgia, Trebuchet MS;
        font-weight: normal;
        margin: 0px;
        padding: 20px 0px 0px 0px;
        text-decoration: none }


    #header h1 a, #header h1 a:visited {
        color: #EEEEEE;
        font-size: 40px;
        font-family: Times New Roman, Georgia, Trebuchet MS;
        font-weight: normal;
        margin: 0px;
        padding: 20px 0px 0px 0px;
        text-decoration: none }


    #header h1 a:hover {
        color: #CCCCCC;
        text-decoration: none }

     

  7. Sudah ketemu kan? nah sekarang buka notepad, lalu copy paste semua kode css milik sobat kedalam notepad.

     

  8. Setelah itu simpan file tersebut dalam bentuk css, sebagai contoh sobat bisa simpan dengan nama style.css

     

  9. Sekarang login ke hosting gratis yang sudah sobat daftarkan tadi, kemudian upload file style.css ke hosting tersebut.

     

  10. Setelah upload berhasil, sobat akan mendapatkan kode url, contoh seperti punya saya :

     

    http://miscah.googlecode.com/files/header.css

     

  11. Kemudian ubah kode url tersebut menjadi seperti ini :

     

    <link href='http://miscah.googlecode.com/files/header.css' rel='stylesheet' type='text/css'/>

     

  12. Dan letakkan kode tersebut tepat setelah kode ]]></b:skin>

     

  13. Sehingga hasilnya menjadi seperti berikut ini :

     

    ]]></b:skin>

    <link href='http://miscah.googlecode.com/files/header.css' rel='stylesheet' type='text/css'/>

    </head> 

     

  14. Jangan lupa Simpan Template.

 

Mudah kan, iya siapa bilang susah. Yang bilang susah berarti orang yang malas berpikir. Laughing Oke deh selamat mencoba !
Write a comment √ Read More... »

Blogger Sitemap Generator

Sebelumnya saya sudah pernah membahas tentang cara submit sitmap ke google webmaster. Namun yang saya jelaskan waktu itu hanya tentang cara submit saja, sehingga ada beberapa pertanyaan dari sobat blogger yang bertanya tentang tipe sitemap. Seperti beberapa hari yang lalu, sobat Randy Hawai dibuat pusing sama google webmaster karena sitemap yang dia submit selalu ditolak, tenang aja sob mudah-mudahan tutorial ini bisa membantu.

 

blogger sitemap

 

Jika sobat submit sitemap manual dengan sitemap dasar, yaitu atom.xml atau rss.xml maka yang akan sobat temukan sewaktu input sitemap di google webmaster adalah ketidakpuasan, kenapa? karena google webmaster hanya membaca 26 artikel sobat saja. Lantas bagaimana jika punya 100 artikel atau lebih? maka dari itu dengan blogger sitemap generator ini mudah-mudahan bisa mengatasi permasalahan tersebut.

 

Buat sobat yang sudah paham cara mensubmit sitemap ke google wabmaster, bisa langsung ke blogger sitemap generator, silahkan klik disini. Kemudian masukkan alamat url milik sobat, jangan lupa tutup dengan tanda slash ( / ).

 

Untuk lebih jelasnya, silahkan sobat lihat videonya dibawah ini.

 

 

 

Mantab kan..silahkan dicoba deh ! Jika belum jelas, silahkan kunjungi blognya Amit Agarwal di labnol.org smile_nerd
Write a comment √ Read More... »

Headline News Template

headline

 

demo download

 

 

Template Information

 

Name Headline News
Type Blogger Template
Properties White, gray, 3 columns, left sidebar, right sidebar, fixed width, xml

Write a comment √ Read More... »

Terjerat Google Sandbox

google_sandbox Sungguh menyakitkan rasanya bila blog yang kita cintai terkena google sandbox, memang kejam. Yah, begitulah om google, dialah yang menentukan segalanya atas website / blog.

 

Beberapa hari ini saya agak bingung dengan traffic blog ini yang menurun drastis sebanyak kurang lebih 70%, ternyata setelah saya cek beberapa artikel andalan saya di search engine google, artikel saya yang biasanya ada di halaman pertama, tiba � tiba hilang tak berbekas dari halaman search engine google.

 

Contoh satu artikel saya yang berjudul Cara Membuat Artikel Terkait biasanya jika saya ketik di search engine google dengan kata kunci �artikel terkait� maka blog saya selalu menjadi raja di halaman google. Namun nasib ya nasib, google menghukum blog go blog dengan jeratan google sandbox, artikel saya tersebut hilang dari peredaran google search engine.

 

Begitupun dengan beberapa artikel saya yang lainnya, hilang di telan kotak pasir (sandbox) google. Sedih sih, tapi mau diapakan ya sudahlah biarin saja. Mudah-mudahan google tidak menghukum blog ini terlalu lama, karena rata-rata traffic pengunjung blog ini berasal dari mesin pencari google.

 

Apa itu Google Sandbox?

Menurut beberapa sumber, GS adalah sulitnya suatu web / blog dan postingan masuk dalam halaman pencarian di mesin search engine google. Mungkin om google sedang menghukum saya karena melakukan seo yang berlebihan. Saya ingat tempo hari pernah melakukan ping secara berulang-ulang atau berlebihan dalam waktu yang singkat, saya rasa itulah yang membuat google marah dengan saya dan menghukum blog ini dalam google sandbox.

 

Kenapa Harus ada google sandbox?

Sebagai bentuk upaya google untuk mengurangi spam yang terindexs, atau sebagai penyaring / filter yang memakai trik-trik seo yang instant seperti black hat yang tidak disukai oleh google.

 

Dari penjelasan saya diatas, pastinya buat sobat newbie jadi tau arti dari google sandbox tersebut. Jika belum jelas, silahkan baca artikelnya disini. Nah, apa saja yang bisa membuat suatu blog terkena google sandbox?

 

Berikut beberapa faktor yang menyebabkan blog terjerumus dalam google sandbox :

  1. Optimasi yang berlebihan dengan cara mencari backlink yang berlebihan dengan waktu singkat, contohnya : submit link ke situs free web directory secara berlebihan.
  2. Keyword (kata kunci) yang diatas normal atau berlebihan.
  3. Melakukan Black Hat SEO (search engine optimization).
  4. Melakukan ping berulang-ulang dalam waktu singkat.
  5. Menggunakan iklan baris otomatis.

Jadi menurut saran saya, hindari hal-hal yang tercantum diatas. Usahakan jangan berlebihan jika melakukan sesuatu. Makan berlebihan aja bisa sakit perut, sama tuh sama seo, jika berlebihan bisa sakit perut juga, bisa mencret sampai keluar dari halaman mesin pencari google. Laughing 

 

Saya kira itu saja yang bisa saya informasikan buat sobat yang setia mengunjungi blog ini. Semoga sobat beruntung dan tidak terkena dampak google sandbox ! 

Write a comment √ Read More... »

Artikel Terkait Pengganti LinkWithin

Widget artikel terkait (related posts) yang disertai dengan thumbnail ini memang sangat mirip dengan widget dari LinkWithin. Sudah pernah menggunakan LinkWithin ? jika belum, sobat bisa lihat contoh gambar dibawah, nah seperti itu kira-kira bentuknya. Setiap bagian akan disorot dalam warna pelengkap ketika mouse berada di atasnya, dan ketika seluruh bagian ini di klik akan mengarah ke URL dari "pos terkait" yang ditampilkan.

 

pict 

Berbeda dengan LinkWithin yang mengacak semua post yang ada untuk ditampilkan, widget ini sesuai dengan label atau kategori dari blog kita. Jadi sama halnya dengan artikel terkait yang pernah saya jelaskan dulu, disini dan nengkene. Namun artikel terkait model pertama yang sekarang masih saya gunakan tersebut, tidak menggunakan thumbnail.

 

Gambar thumbnail ditampilkan untuk masing-masing pos terkait yang dihasilkan dari thumbnail posting yang bersangkutan. Oleh karena itu, hanya gambar yang telah Anda upload ke setiap blog post yang akan ditampilkan. Secara keseluruhan, saya sangat suka dengan script buatan Aneesh ini, selain bagus dan rapi, script ini tidak membuat blog menjadi berat.

 

Oke deh, langsung ke lokasi aja. Seperti biasa silahkan login dulu ke Blogger. Sip ! sekarang ikuti langkah-langkahnya berikut ini :

 

  1. Sekarang tuju Edit HTML.

     

  2. Jangan lupa backup template sobat dulu dengan mengklik Download Template Lengkap.

     

  3. Klik Expand Template Widget.

     

  4. Kemudian letakkan kode berikut ini, tepat diatas kode </head>

     

    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }

    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }

    #related-posts  a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->


  5. Kemudian cari kode berikut ini :
    <div class='post-footer-line post-footer-line-1'>

    atau jika tidak ada, cari kode seperti dibawah ini :

    <p class='post-footer-line post-footer-line-1'>


  6. Jika sudah ketemu, kemudian letakkan kode berikut tepat setelah kode diatas :

    <!-- Related Posts with Thumbnails Code Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=5;
    var relatedpoststitle="Related Posts";
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
    </div><div style='clear:both'/>
    </b:if>
    <!-- Related Posts with Thumbnails Code End-->

  7. Setelah selesai semua, jangan lupa Simpan Template.

Untuk mengganti jumlah related posts-nya, silahkan edit var maxresults=5, ganti angka 5 dengan angka yang sesuai lebar postingan blog sobat. Sedangkan untuk mengganti judul dari related posts, silahkan edit var relatedpoststitle="Related Posts", ganti dengan judul yang sobat inginkan.


Semoga bermanfaat ! Open-mouthed



 



�Gambar diambil dari biens-naturels�
Write a comment √ Read More... »