Browse » Home » All posts

Selasa, 07 Januari 2014

Title otomatis pada link label blogger

Diposting oleh di 16.02 Label: ,
Cara menambahkan title di setiap link label yang ada di blogger. Title merupakan attribute yang digunakan untuk memberikan keterangan dari sebuah link. Untuk melihat link yang ada titlenya, coba arahkan mouse ke link label, maka akan ada tulisan dengan background putih yang keluar.

Title otomatis pada link label bloggerGambar disamping adalah contoh link label yang telah diberi title. Tulisan Tips dan Trik yang berwarna hitam dengan background putih itu akan keluar ketika link label di sentuh oleh mouse. Untuk melihat contoh lainnya, coba anda arahkan mouse anda ke label/kategori yang ada di blog ini.

Sebelumnya saya juga sudah membuat artikel title link disetiap judul posting blog. Fungsinya sama agar link diposting blog ada titlenya, bedanya hanya pada kode yang digunakan.

Untuk lebih jelasnya cara membuat title otomatis pada link label blogger. Silakan ikuti langkah-langkah dibawah ini.
  1. Silakan login ke blogger, dari halaman dasbor pilih pengaturan template.
  2. Dan klik edit html, lalu cari kode expr:href='data:label.url'
  3. Setelah ketemu tambahkan kode attribute title tag seperti ini disampingnya expr:title='data:label.name'.
    4. Contoh penambahan kode attrbute title di widget label asli blogger
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
    Contoh penambahan attribute title yang lain, seperti di Breadcrumb.
    <a expr:href='data:label.url' expr:title='data:label.name'>
    <data:label.name/></a>
  4. kode expr:href='data:label.url' ini biasanya ada 2 atau mungkin lebih yang ada ditemplate blogger, silakan dicari semuanya dan tambahkan kode expr:title='data:label.name' disampingnya. Setelah itu, save template. Selesai.
Cara diatas merupakan contoh pemberian title tag di dalam template. Adapun contoh lain pemberian kode attribute title tag pada link label pada kode HTML yaitu dengan menambahkan kode title="Title yang akan diberi". Contohnya:
<a href="http://fandrajuani.blogspot.com/search/label/Header" title="Desain Header">
Fungsi menambahkan title di link label blog ini sebenarnya untuk menambah optimasi seo dari blog, agar google lebih mudah untuk membaca semua link yang ada di blog kita. Tidak di gunakan juga tidak apa-apa, karena mungkin efeknya juga tidak terlalu besar untuk blog kita.

Tapi tidak ada salahnya mencoba, kebanyakan blog atau website yang mempunyai pagerank besar juga memberikan attribute title di setiap link yang ada diblog atau website mereka. Itulah sedikit tips trik seo tentang menambahkan title otomatis pada link label blogger. Semoga bisa bermanfaat untuk anda.
    Read More
    0 komentar

    Penyempurnaan html di google webmaster

    Diposting oleh di 03.39 Label: ,
    Cara penyempurnaan html blog di google webmaster, mulai dari mengatasi duplikasi deskripsi meta, deskripsi meta panjang dan deskripsi singkat meta. Seperti keterangan yang tertulis diatasnya berbunyi kinerja dan pengalaman pengguna situs anda dapat terbantu jika hal berikut di atasi. Seperti contoh gambar dibawah ini.

    Penyempurnaan html di google webmaster

    Mengatasi duplikasi deskripsi meta
    1. Silakan login ke blogger, dari halaman dasbor pilih pengaturan Setelan.
    2. Lalu pilih Preferensi penelusuran, dan klik edit pada bagian Tag tajuk robot khusus. Lalu beri tanda all pada bagian beranda, tandai noindex dan noarchive pada bagian laman arsip dan penelusuran. Terakhir beri tanda all di default untuk pos dan laman. Seperti gambar dibawah ini.
      3. Penyempurnaan html di google webmaster
    3. Simpan perubahan, selesai.
    Mengatasi Deskripsi meta panjang
    1. Ke pengaturan Setelan > Preferensi penelusuran > dan klik pada bagian deskripsi.
    2. Pilih ya pada Aktifkan deskripsi penelusuran, lalu Kosongkan isi di dalamnya. Lalu klik simpan perubahan.
      3. Penyempurnaan html di google webmaster
    3. Selanjutnya ke pengaturan template, klik edit html dan cari kode <head>
    4. Lalu masukan meta deskripsi kamu dibawah <head>. Contoh:
      5. <head>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <meta content='Fandra Juani,Desain blog,blogger,blogspot,tutorial,cara,membuat,mengganti,merubah,modifikasi,belajar,Tips,Trik,edit template,css,html' name='keywords'/>
      <meta content='Fandra Juani kumpulan tutorial tentang cara desain blog sendiri di blogspot, serta tips dan trik edit template asli blogger.' name='description'/>
      </b:if>
    5. Save template, maka deskripsi meta panjang hanya akan ada di halaman awal blog saja, agar tidak ada duplikasi desckripsi meta panjang. selesai.
    Mengatasi Deskripsi singkat meta
    1. Pertama, login ke blogger, lalu kunjungi situs google webmaster.
    2. Dan pilih pada bagian tampilan penelusuran > penyempurnaan html > lalu klik Deskripsi meta. 
    3. Setelah itu akan ada halaman2 dari blog kita yang mempunyai deskripsi singkat meta. Contohnya.
      4. Penyempurnaan html di google webmaster
    4. Sekarang, kembali ke halaman blogger, lalu pilih pengaturan Post dan cari artikel yang sesuai dengan URL laman dari google webmaster. Seperti gambar diatas, judulnya cara menghapus akun google analytics.
    5. Setelah ketemu artikelnya, edit artikel itu, lalu klik pada bagian Deskripsi Penelusuran. Seperti gambar dibawah ini.
      6. Penyempurnaan html di google webmaster
    6. Nah disitu terlihat tulisan yang sama dengan yang di google webmaster tadi, contoh disini adalah cara menghapus akun google analytics, disitulah masalahnya. Cara mengatasunya tambahkan kata di dalamnya, kira-kira 20 sampai 30 kata dari keseluruhan kalimat di deskripsi penelusuran.Klik selesai. Dan klik perbarui. Selesai.
    Setelah melakukan cara-cara diatas, untuk melihat hasilnya tunggu 4 - 7 hari  atau sampai google memperbarui penyempurnaan html dari blog kita. Setelah diperbarui google, maka tampilan html yang sudah disempurnakan akan seperti gambar dibawah ini.

    Penyempurnaan html di google webmaster
    Itulah sedikit tips trik penyempurnaan html di google webmaster, yaitu dengan cara mengatasi masalah dari ke tiga deskripsi meta. Semoga bisa bermanfaat untuk anda.
    Read More
    0 komentar

    Senin, 06 Januari 2014

    Widget blog melayang setelah di scroll

    Diposting oleh di 04.26 Label:
    Artikel kali ini tentang widget blog melayang setelah halaman blog kita di scroll ke bawah. Dan akan kembali pada posisinya semula, jika halaman blog kembali di scoll ke atas. Widget tidak akan melayang atau mengambang jika halaman blog belum di scroll ke bawah.
    Widget blog melayang setelah di scroll
    Contohnya: Bisa dilihat di halaman blog ini, coba scroll ke bawah dan lihat pada widget Artikel Populer(jika masih saya gunakan). Widget tersebut akan melayang setelah widget mendekati halaman atas blog. Dan akan kembali seperti semula setelah halaman blog kembali di scroll ke atas.
    Posisi widget pada saat melayang dapat kita atur sesuai dengan keinginan kita. Untuk lebih jelasnya tentang cara membuat widget melayang setelah di scroll, silakan ikuti langkah-langkah dibawah ini.
    1. Silakan login ke blogger, dari halaman dasbor pilih pengaturan template.
    2. Dan klik edit HTML dan cari kode </body>
    3. Selanjutnya masukan kode berikut ini di atas </body>
      4. <script type='text/javascript'>
      $(window).scroll(function(){
      if ($(window).scrollTop() &gt;= 560){
      $(&#39;#PopularPosts1&#39;).css({position:&#39;fixed&#39;,top:30});
      } else {
      $(&#39;#PopularPosts1&#39;).css({position:&#39;relative&#39;,top:0});
      }
      });
      </script>
      Keterangan kode:
      • 560 Untuk mengatur jarak widget akan melayang, makdsudnya setelah halaman blog di scroll 560px ke bawah, maka widget baru akan melayang.
      • fixed code yang digunakan untuk membuat blog melayang.
      • top:30 posisi widget setelah di scroll 30px dari halaman atas blog.
      • relative dan top:0 agar widget kembali ke posisi semula, setelah halaman blog di scroll ke atas.
      • #PopularPosts1 kode id dari widget Artikel Populer. Silakan diganti dengan kode id dari widget yang akan dibuat melayang. Cara mencari kode id widget, lihat dibawah.
    4. Setelah itu save template. Dan buka salah satu halaman artikel blog kamu, jika belum berjalan, coba masukan kode berikut ini diatas </body>
      5. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    5. Save template, selesai.
     Cara mencari kode id widget
    1. Tentukan widget mana yang akan di buat melayang, judul widgetnya apa?contoh: Artikel Populer.
    2. Lalu ke pengaturan template, klik edit html dan cari kode Artikel Populer,  Contoh kodenya seperti dibawah ini.
      3. <b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
    3. Kode merah PopularPosts1 itu adalah kode id dari widget Artikel Populer.
    Silakan diatur sesuai dengan yang kalian inginkan, saran saya widget yang akan dibuat melayang, sebaiknya letakan dibagian paling bawah sidebar, agar tidak menutupi widget2 yang lain. Kode script pada langkah 4 itu merupakan kode script yang paling ringan menurut saya, karena sudah saya bandingkan dengan kode script yang lain. Kode script diatas itu kira2 sekitar 51.0 kb, jadi tidak terlalu memberatkan loading blog. 
    Itulah sedikit cara desain blog agar lebih menarik yaitu dengan membuat widget melayang setelah di scroll. Untuk cara widget melayang yang lebih simpel, silakan baca di artikel fungsi fixed dan cara menggunakannya dan juga artikel membuat menu menempel di dingding blog. Semoga artikel diatas bisa bermanfaat untuk anda.
        Read More
        0 komentar

        Jumat, 03 Januari 2014

        Cara membuat tombol back to top

        Diposting oleh di 10.19 Label:
        Cara membuat tombol back to top atau kembali ke atas di blog, yang akan muncul ketika halaman blog di scroll kebawah. Letaknya berada di bawah sebelah kanan dan jika tombol itu di klik, maka halaman blog akan kembali keatas dengan pelan, dan tombol itu pun akan menghilang.

        Cara membuat tombol back to top
        Seperti contoh gambar diatas, gambar cicak itu akan keluar jika halaman blog sudah di scroll ke bawah dan akan kembali menghilang ketika halaman blog yang dibuka sudah diatas lagi. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.
        1. Silakan login ke blogger, dan pilih pengaturan template.
        2. Klik edit html dan cari kode </body>
        3. Lalu masukan kode berikut ini diatas </body>
          4. <div id='ScrollToTop'>
          <img alt='Kembali Ke Atas' height='68' src='https://lh3.googleusercontent.com/-DqAYBDzBDTc/UsG2Zlef7kI/AAAAAAAABos/HM8BLePVmwI/s148/ke%2520atas.png' title='Kembali Ke Atas' width='148'/>
          <figcaption>Kembali Ke Atas</figcaption>
          </div>

          <script type='text/javascript'>
          $(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
          else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
          return false})});
          </script>
        4. Selanjutnya cari kode ]]></b:skin> dan masukan kode berikut ini ke atasnya.
          5. #ScrollToTop{
          text-align:center;
          z-index:9999;
          position:fixed;
          bottom:40px;
          right:30px;
          cursor:pointer;
          display:none;
          opacity:0.7;
          padding-top:4px}

          #ScrollToTop:hover{opacity:1;}
          figcaption {
          text-align:center;
          color:white;
          text-shadow: 5px 5px 10px #000;
          font-weight:bold;
          font-size:10px;}
        5. Save template, dan coba buka salah satu halaman blog kamu. Lalu scroll ke bawah, sudah ada atau belum tombol back to top nya. Jika sudah silakan disave template.
        6. Jika Belum, coba masukan kode berikut ini diatas </head>
          7. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
        7. Lalu save template. Selesai.
        Keterangan kode langkah 3:
        • Tulisan ini Kembali Ke Atas bisa diganti dengan kata yang kamu inginkan.
        • Nilai 500 ini, fungsinya ketika halaman blog discroll ke bawah sebanyak 500px maka tombol back to top akan muncul.
        • Dan yang ini 700 fungsinya digunakan untuk mengatur kecepatan loading scroll ke atas, ketika tombol back to top ditekan.
         Keterangan kode langkah 4:
        • #ScrollToTop{ gunanya untuk mengatur posisi dan tampilan tombol back to top
        • #ScrollToTop:hover{ ini untuk mengatur gambar ketika disentuh mouse
        • figcaption { mengatur posisi dan warna dari tulisan Kembali Ke Atas.
          Jika ingin hanya menggunakan tulisan back to top tanpa gambar, ganti kode dari langkah 3 dengan kode dibawah ini.
          <div id='ScrollToTop'>Kembali Ke Atas</div>
          <script type='text/javascript'>
          $(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
          else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
          return false})});
          </script>
          Save template, selesai. Semoga bisa bermanfaat untuk anda.
          Read More
          0 komentar

          Title di setiap judul posting blog

          Diposting oleh di 00.06 Label: ,
          Tips trik seo kali ini saya akan coba bagikan tentang cara menambahkan title atau keterangan di setiap judul posting blog secara otomatis, ketika judul posting disentuh oleh mouse. Contohnya seperti gambar dibawah ini.

          Title di setiap judul posting blog
          Seperti contoh gambar diatas, tulisan dengan warna background putih itu adalah title atau keterangan yang akan muncul ketika judul disentuh mouse. Cara membuatnya, silakan ikuti langkah-langkah dibawah ini.
          1. Login ke blogger, pilih pengaturan template.
          2. Klik edit HTML dan cari kode <a expr:href='data:post.link'><data:post.title/></a>
          3. Setelah ketemu, tambahkan kode expr:title='data:post.title' kedalamnya. Contoh:
            4. <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
          4. Kode ini <a expr:href='data:post.link'><data:post.title/></a> biasanya ada 2 diblog, lakukan hal yang sama seperti langkah 3.
          Setelah melakukan cara diatas, jangan di save template dulu, karena masih ada kode yang harus diedit. Sengaja saya pisah biar lebih mudah mengikutinya.
          1. Cari kode <a expr:href='data:post.url'><data:post.title/></a>
          2. Setelah itu tambahkan kode expr:title='data:post.title' kedalamnya. Contoh:
            3. <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
          3. Kode ini <a expr:href='data:post.link'><data:post.title/></a> biasanya ada 3 diblog, lakukan hal yang sama seperti langkah 2.
          4. Nah, baru save template. Selesai.
          Setelah melakukan cara diatas, silakan lihat blog kamu. Jika  melakukannya dengan benar, insyaallah title disetiap judul posting blog akan keluar ketika disentuh mouse. Sebenarnya saya juga tidak terlalu mengerti tentang seo, tapi yang saya tau disetiap website2 besar dengan pagerank tinggi seperti facebook, menggunakan title atau tulisan keterangan di setiap URL dari halaman websitenya.

          Tapi banyak juga website yang tidak menggunakan title di url nya. Seperti google, yahoo, twitter, ya mungkin mereka tidak membutuhkan lagi cara seperti diatas, tanpa menambahkan titlle di setiap url nya pun, masih juga rame websitenya.

          Bagi saya yang masih awam tentang seo website atau blog. Tidak ada salahnya menggunakan title disetiap judul posting, namanya juga masih belajar. Seperti keterangan di website check seo http://chkme.com/ mengatakan (translate:Meskipun tidak penting dan tidak digunakan untuk menghitung skor akhir, kita menganggap bahwa untuk link judul dapat benar-benar berguna. Mencoba memperbaiki kesalahan, jika diperlukan).

          Demikianlah sedikit tips trik seo dari saya tentang title di setiap judul posting blog. Dan silakan dibaca juga artikel tentang title otomatis pada link label blogger. Fungsinya sama agar link ada titlenya, tapi pada bagian label blogger. Semoga artikel diatas bisa bermanfaat untuk anda.
          Read More
          0 komentar

          Sabtu, 28 Desember 2013

          Cara Membuat Daftar Isi di Blog Secara Otomatis

          Diposting oleh di 01.37 Label:
          membuat daftar isi di blog
          Cara Membuat Daftar Isi di Blog Otomatis – Banyak blogger yang bertanya bagaimana membuat daftar isi secara otomatis dan dikelompokan berdasarkan label, sebenarnya sudah banyak tutorial ini diluaran sana tetapi katanya tutorialnya gak jelas dan ingin dibuatkan tutorialnya sejelas mungkin sehingga blogger pemula pun bisa membuatnya.

          Baiklah mari kita langsung saja membuat daftar isi yang dimaksud tetapi sebelum anda membuatnya kurang lebih tampilannya ketika sudah jadi akan seperti gambar dibawah ini?

          daftar isi blog otomatis
          Bagaimana? Masih tertarik untuk membuat daftar isi di blogspot ini? Jika iya silahkan ikuti langkah-langkah berikut;
          • Pada dashbor blog anda pilih LAMAN atau PAGE jika anda menggunakan bahasa inggris.

          pilih laman

          • Selanjutnya klik LAMAN BARU >> LAMAN KOSONG setelah tampil halaman seperti ketika anda akan membuat artikel.
          pilih laman kosong
          • Pilih HTML pada pilihan tempat anda menulis. Ingat HTML bukan COMPOSE. Silahkan masukan judul yang sesuai dengan keinginan anda, juga deskripsi di sebelah kanan silahkan isi sesuai kebutuhan anda.

          membuat daftar isi
          • Selanjutnya slahkan copy kode dibawah ini dan salin atau paste di Kolom HTML tadi.
          <div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:270px; background-color: none; text-align: left;">
          <script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
          <script src="http://namablogsaudara.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
          Kode warna biru ganti dengan URL blog anda
          • Jika semuanya sudah slahkan klik PUBLIKASIKAN.

          Sekarang blog anda sudah memiliki daftar isi, jika anda membuat artikel baru maka akan secara otomatis masuk kedalam daftar isi tersebut dan akan di kelompokan berdasarkan bulan ketika anda membuat artikel tersebut.

          Saya rasa sudah cukup jelas dan bagi anda yang masih bingung seperti biasa anda bisa bertanya di kolom komentar atau langsung ke halaman FACEBOOK FP TRIK SEO SIMPLE. semoga bermanfaat dan salam blogger,!!
          Read More
          0 komentar

          Senin, 16 Desember 2013

          Cara Menambahkan Blog Baru di Google Analytics

          Diposting oleh di 01.12 Label: ,
          Cara Menambahkan Blog Baru di Google Analytics
          Menambahkan Blog Baru ke Google Analytics - Baru-baru ini saya mendapat komentar dari salahsatu pengunjung blog trik seo simple ini dan menanyakan bagaimana cara menambahkan blog milik kita yang lain ke google analytics?

          Faham tidak maksudnya? perasaan agak gak enak ya di bacanya. saya perjelas lagi misal anda sudah mendaftarkankan blog pertama anda ke google analytic, sekarang anda punya blog baru dan pengen pasang ID analytics juga nah caranya seperti apa? begitulah kurang lebih maksud dari judul artikel ini.

          Baiklah kita langsung saja pada cara mndaftarkan blog baru anda ke google analytics tapi sebelumnya jika anda belum tahu cara mendaftar google analytic silahkan baca cara mendaftar google analytics dan memasang kode tracker di blog anda.
          • Pertama buka google analytic dan login menggunakan akun anda.
          • Jika sudah silahkan cari ADMIN (liat Gambar)

          Pilih admin

          • kemudian cari ACCOUNT dan klik atanda panah kecil dibawahnya.
          add new website on google analytics


          • Setelah itu pilih CREATE NEW ACCOUNT dan ikuti langkah-langkahnya seprti ketika anda pertama mendaftar google analytics disini.

          klick create account

          Yang harus di ingat adalah ketika anda memsang kode tracker GA di blog anda mungkin sedikit susah, silahkan pakai kode yang sudah saya berikan di postingan cara daftar Google analytics.

          itu saja mungkin yang bisa saya jelaskan mengenai cara menambahkan blog baru ke Google analytics, seperti biasa jika ada masalah silahkan koment dibawah. Semoga bermanfaat dan salam blogger Indonesia
          Read More
          0 komentar
          Langganan: Postingan (Atom)
           
          Newbie-Sederhana. Copyright ©2012 | Template by Blogger Templates Designer Published..Blogger Templates