Kamis, 10 Januari 2013

0 Cara membuat Artikel terkait otomatis

Jika Ada yang belum tahu artikel terkait itu apa silahkan lihat di blog ini pada bagian akhir artikel saya ini ada tulisan Artikel Terkait. Fungsinya selain untuk seo, related post / artikel terkait ini juga membantu pengunjung untuk membaca yang lain mungkin yang belum di ketahuinya. Hal ini menyebabkan pengunjung bisa betah berada di blog kita.

Langsung saja cara membuat related post / artikel terkait :


  1. Masuk blogger
  2. Rancangan 
  3. Edit html 
  4. Centang expand template widget
  5. cari kode </head> kemudian letakkan script di bawah ini tepat di atas kode </head> 
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>  
Kemudian cari kode <data:post.body/> kemudian letakkan script berikut ini di bawah kode <data:post.body/>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
Tutorial </b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
terakhir simpan template.

0 cara menghilangkan navbar blogger

Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.


Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.
Menu Navbar Standar
Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :


/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :

<style type='text/css'>
#navbar-iframe {display:none;}
</style>
Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :







  • Untuk template klasik


    1. Sign in di blogger
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
    5. Copy kode berikut lalu paste di atas kode </style>

    6. /* hilangkan navbar
      ----------------------------- */

      #navbar-iframe {
      height:0px;
      visibility:hidden;
      display:none
      }

    7. Klik tombol Simpan Perubahan Template
    8. Selesai.






  • Untuk template baru

    1. Sign in di blogger
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
    5. Copy kode berikut lalu paste di atas kode ]]></b:skin>

    6. /* hilangkan navbar
      ----------------------------- */

      #navbar-iframe {
      height:0px;
      visibility:hidden;
      display:none
      }

    7. Klik tombol Simpan Template
    8. Selesai.
    9. Tutorial

    Selamat menikmati blog tanpa navbar !

    Jumat, 18 Januari 2013

    0 cara membuat efek gambar berputar pada widget popular post

    Widget Populer Post
    Nah untuk Tutorial Blog kali ini Kita akan menerapkan trik tersebut ke dalam widget Populer Post Standar Blogger dimana Gambar didalam Widget Populer Post tersebut akan berputar dan membesar ketika kursor mouse di sorot atau diletakan diatas gambar tersebut. Bagaimana caranya ?, Tidak usah hawatir gan caranya mudah hanya perlu edit HTML sedikit.

    Langsung saja berikut Cara Membuat Efek Gambar Berputar Pada Widget Populer Post Blog  :

    1. Pastikan Sobat Sudah Login Ke Akun Blogger Masing-Masing
    2. Jika Sudah Silahkan Back-Up template Blog kamu untuk mengantisifasi kesalahan saat Edit HTML 
    3. Jika sudah sekarang silahkan masuk kehalaman Edit HTML 
    4. Setelah kamu berada di halaman Edit HTML, sekarang kamu cari kode ]]></b:skin>. Agar mudah mencari kode silahkan gunakan tombol CRTL + F Dan F 3.
    5. Sudah ketemu Kodenya, sekarang Copy kode dibawah ini dan letakan dibawah kode ]]></b:skin>.
    6. <style type='text/css'>
      .PopularPosts .item-title{display:none}
      .PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
      .PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
      .PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
      </style>
    7. Sekarang Klik Simpan Template
    8. Selesai dan Lanjut Kelangkah Berikutnya.
    Secara umum tahap diatas sudah selesai namun supaya widget populer pos dapat ditampilkan dihalaman blog sobat, maka sobat perlu menambahkan widget populer post. caranya sangat mudah jika ada yang belum paham ikuti langkah-langkah berikut untuk Memasang Widget Populer Post Kehalaman blog Sobat.
    1. Pada bagian Dashbord blog kamu Pilih Menu Tata Letak
    2. Menu Tata Letak
    3. Sekarang klik Tambah Gadget Atau Add a Gadget
    4. Tambah Gadget
    5. Jika sudah cari Widget Populer post dan klik tanda tambah disampingnya
    6. Entri Populer
    7. Pengaturan, kamu bisa mematikan centang cuplikan jika ingin menampilkannya tetap centang.  Thumbail gambar berikan tanda centang dan silahkan atur jumlah populer post yang ingin ditampilkan.
    8. Jika dirasa sudah klik Simpan
    9. Selesai dan Lihat Hasilnya                                                 tutor

    Kamis, 10 Januari 2013

    0 Cara agar halaman blog terindeks di google

    Cara Agar Halaman Blog Terindex Google - Bagi yang suka dengan namanya SEO pasti selalu ingin mengejar apa yang diperlukan agar blog kita SEO secara maksimal, tapi taukah Anda untuk mencapai SEO halaman blog kita juga butuh Index dari Google lho!, berikut ini akan saya ulas sedikit masalah SEO tentag index halaman blog.
    Hal pertama yang harus kita lakukan adalah menuju ke https://www.google.com/webmasters/tools/ setelah itu tambahkan blog kita dengan cara klik ADD A SITE



    Jika sudah didaftarkan klik gambar blog kita atau alamat blog kita.

    Langkah selanjutnya
    Sekarang kita menuju ke Optimization > Sitemaps



    Nanti akan ada tulisan "No sitemaps found for this site."

    Sudah ketemu kan? jika sudah kita klik ADD/TEST SITEMAP nanti akan keluar kolom seperti dibawah ini



    Nah inti tutorial yang saya sampaikan itu pada tahap ini, pada tahap ini lalu kita masukkan beberapa url yang gunanya untuk mengindex halaman/posting dalam blog kita berikut url yang harus kita sublimt kan dalam kolom tersebut dan untuk caranya masukkan satu persatu secara berurutan url dibawah ini, setelah yang pertama maka di refresh dan dilanjutkan yang kedua...dan seterusnya.
    atom.xml?

    atom.xml?redirect=false

    feeds/posts/default?orderby=updated

    atom.xml?redirect=false&start-index=1&max-results=500

    Dan tambahkan juga url dibawah ini jika posting kamu sudah lebih dari 500.

    atom.xml?redirect=false&start-index=501&max-results=500

    Begitu juga yang ini jika posting kamu sudah lebih dari 1000 tambahkan pula url berikut.

    atom.xml?redirect=false&start-index=1001&max-results=500

    Setelah semua di sublimt maka akan terperoleh hasil seperti berikut:
    Tutor



    Hasil ini menunjukkan bahwa halaman yang ada di blog saya telah terindex semua oleh Google, jika ada diantara sobat yang belum terindex semua mohon untuk bersabar siapa tahu di bulan depan sobat coba Resublimt hasilnya akan sempurna.

    0 Memasang tags ALT dan TITLE Pada Gambar Secara Otomatis



    Secara teknis untuk mencapai SEO pengguaan tag ALT dan TITTLE pada gambar sangatlah penting, karena jika tanpa itu robot google tidak bisa membaca gambar yang kita unggah dan untuk mengatasi masalah itu mari kita terapkan tutorial ini pada blog kita.
    Cara penerapannya letakkan kode berikut diatas kode  </body>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
      $('img').each(function(){
        var $img = $(this);
        var filename = $img.attr('src')
        $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
      });
    });
    //]]>
    </script>


    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
      $('img').each(function(){
        var $img = $(this);
        var filename = $img.attr('src')
        $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
      });
    });
    //]]>
    </script>

    Scripttersebut akan langsung membuat tags alt dan title untuk foto yang sobat unggah secara otomatis, maka dari itu pastikan terlebih dahulu nama file foto sebelum di upload.

    0 Memebuat recent post dengan thumbnail

    Memebuat recent post dengan thumbnail


      Salah satu gadget yang sangat penting adalah recent posts. Jadi selain melihat postingan paling baru pembaca juga bisa tahu beberapa postingan yang paling baru (jumlah sesuai keinginan kita yang menyediakan informasi). Selain itu, kita jadi tidak perlu menampilkan banyak postingan pada halaman utama karena takut postingan yang 'agak baru' bukan terbaru jadi tak terlihat. Langsung saja tambahkan script berikut pada widget HTML Anda. Copy Code Script Dibawah ini :


    <style type="text/css">
    #dte_recent-post {
      margin:0 0;
      padding:0 0;
      font:normal 11px Arial,Sans-Serif;
      color:#333;
      margin:0 auto;
      min-height:100px;
      background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
    }
    
    #dte_recent-post li {
      list-style:none;
      margin:0 0;
      padding:7px 7px;
      background-color:white;
      border-bottom:1px solid #ddd;
    }
    
    #dte_recent-post li a img {
      float:left;
      margin:0 10px 0 0;
      padding:0 0;
      border:none;
      background:transparent;
      outline:none;
    }
    
    #dte_recent-post li a.title {
      display:block;
      font-size:12px;
      text-decoration:none;
      color:#1155CC;
    }
    
    #dte_recent-post li a.title:hover {
      text-decoration:underline;
    }
    
    #dte_recent-post li span.foot {
      clear:both;
      display:block;
      color:#ccc;
      margin-top:7px;
      font-size:10px;
    }
    </style>
    <ul id="dte_recent-post"></ul>
    <script type="text/javascript">
    //<![CDATA[
    var rp_homePage    = "http://yogaronglovers.blogspot.c", // Your blog homepage
        rp_numPosts    = 5, // How many posts?
        rp_thumbWidth  = 72, // Thumbnail width. Change to 0 if you want to disable the post thumbnail
        rp_numChars    = 100, // Number of posts summary
        rp_sortByLabel = false, // Replace false with your specific label name to display posts by specific label
                                // Example: rp_sortByLabel = "JQuery", to sort posts by label "JQuery"
        rp_noImage     = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipD1RT4df9gz8yIv4xJRbkLoraGGO7y1lQhSxY5Ym0H-Orikh8rx6678HWNQxe7aH1KI2KpB_M_zBgl0JiSwrZB7JB2FPNdvoKuK7OeEQo-VqKRizfiKH4siMPRc60UBT64GGMVxuHAhM_/s320/cooltext748217035%25281%2529.png", // A 'no-image' imageTutorial
        rp_monthNames  = [
            "Januari",
            "Februari",
            "Maret",
            "April",
            "Mei",
            "Juni",
            "Juli",
            "Agustus",
            "September",
            "Oktober",
            "November",
            "Desember"
        ],
        rp_newTabLink  = true, // If true, then all the widget links will automatically opens in new window/new tab
        rp_loadTimer   = "onload"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...)
    //]]>
    </script>
    <script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"></script>

    Konfigurasi Widget

    OpsiKeterangan
    rp_homePageGanti dengan URL blog Anda
    rp_numPostsDigunakan untuk menentukan jumlah posting yang akan ditampilkan
    rp_thumbWidthDigunakan untuk menentukan lebar thumbnail. Ubah lebarnya menjadi 0 untuk menghilangkan thumbnail
    rp_numCharsDigunakan untuk menentukan jumlah karakter ringkasan posting
    rp_sortByLabelGanti nilai false menjadi nama label untuk menampilkan posting berdasarkan label yang spesifik. Contoh: rp_sortByLabel = "JQuery" akan menampilkan semua posting dengan label JQuery
    rp_noImageThumbnail cadangan jika posting yang tampil dalam widget tidak memiliki gambar
    rp_monthNamesTentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Anda
    rp_newTabLinkJika bernilai true, maka semua tautan dalam widget akan terbuka di tab/jendela baru saat diklik
    rp_loadTimerDigunakan untuk menentukan seberapa lama widget akan menunda proses pemuatan sebelum akhirnya mulai memuat. Secara normal bernilai "onload". Artinya bahwa widget akan memuat setelah semua elemen halaman telah berhasil termuat. Anda juga bisa mengganti nilainya dengan satuan waktu milidetik untuk menunda waktu pemuatan selama beberapa detik ke depan. Contoh: rp_loadTimer = 3000 akan menunda pemuatan JSON
     

    Rabas games Copyright © 2011 - |- Template created by Y digi - |- Powered by Blogger Templates