▼

Design, Tutorial and Tips Trik Blogger | Lostsector

Design, Tutorial and Tips Trik Blogger | Lostsector

Merubah Semua Link External Menjadi Nofollow Secara Otomatis / Manual

Posted: 21 Mar 2013 12:00 PM PDT

Merubah Semua Link External Menjadi Nofollow Secara Manual / Otomatis
Alasan mengapa harus menambahkan atribut rel='nofollow' pada link eksternal yakni untuk memberikan informasi kepada search engine (google, yahoo, bing, dsb) agar tidak mengindeks link eksternal yang mengarah langsung kepada halaman atau situs lain diluar blog kita sehingga search engine hanya akan mengindeks postingan atau halaman kita dan bukan situs orang lain. 

Menambahkan rel='nofollow' pada setiap link eksternal mempunyai dampak yang sangat besar dan merupakan salah langkah dalam Optimasi SEO pada blog dan bukan hanya itu saja, menambahkan rel='nofollow' ini mempunyai banyak manfaat, diantaranya :
  • Membuat blog lebih SEO Friendly
  • Meningkatkan traffict pengunjung ke blog melalui search engine
  • Meningkatkan page rank 
  • Mencegah spammer 
  • Membuat blog lebih disukai oleh search engine
Nah untuk menerapkan atau bagaimana cara memasang rel='nofollow' ini pada link eksternal pada blog, berikut caranya :

1. Menambahkan rel='nofollow' secara Manual pada link eksternal

    Cari link eksternal yang mengarah langsung ke situs lain yang ada pada blog sobat seperti link iklan, banner yang ada pada widget, di dalam postingan dan jangan lupa untuk mencari link eksternal lain didalam kode XML/HTML Template sobat kemudian tambahkan atribut rel='nofollow'. Berikut caranya:
  • Cara Pertama :
    Cari semua link eksternal kemudian tambahkan atribut rel='nofollow' dibelakang link tersebut.
<a href="http://lostsector.blogspot.com" target="_blank" rel="nofollow">Lostsector</a> 
  • Cara Kedua :
    Pada saat menambahkan link pada postingan blog, jangan lupa centang pada bagian 'Add 'rel='nofollow'. Lihat gambar untuk lebih jelasnya.
Merubah Semua Link External Menjadi Nofollow Secara Manual / Otomatis

2. Menambahkan atribut rel='nofollow' secara otomatis untuk semua link eksternal

    Cara yang kedua ini merupakan cara yang paling mudah karena untuk mencari satu persatu link eksternal tidak mungkin dilakukan apalagi jika jumlah postingan sudah mencapai ratusan bahkan ribuan. Nah maka dari itu sobat memerlukan sebuah script yang secara otomatis akan menambahkan rel='nofollow' secara otomatis.  Berikut kode script dan cara memasangnya.
  • Login ke Blogger
  • Pilih Template  » Edit HTML
  • Copy script di bawah ini dan pastekan tepat di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
<![CDATA[
jQuery('a').each(function(){var a=jQuery(this).attr('href');if(typeof a!='undefined'&&a!=""&&(a.indexOf('http://')!=-1||a.indexOf('https://')!=-1)&&a.indexOf(window.location.hostname)==-1){jQuery(this).attr("rel","nofollow")}});
]]>
</script>
  • Simpan template.
Demikian tutorial mengenai cara merubah link eksternal menjadi nofollow kali ini, semoga artikel ini bermanfaat. Terima kasih dan salam blogger...!!!

Top 10 [Ten] Widgets For Blogger

Posted: 21 Mar 2013 08:01 AM PDT

Top 10 [Ten] Widgets For Blogger
Dalam menyongsong Tahun Baru 2013 ini, beberapa harapan terlintas di dalam benak saya dan semoga apa yang belum saya capai pada tahun sebelumnya [2012] khusunya untuk blog saya ini, bisa tercapai pada tahun ini.

Sebagai ucapan rasa terima kasih saya buat pengunjung setia blog ini, maka pada kesempatan kali ini saya akan membuat sebuah artikel rangkuman top 10 widgets 2012 untuk blog yang paling banyak digunakan. Berikut top widgets tersebut.

  • Deskripsi singkat :
Satu lagi widget like box (kotak suka) fans page facebook popup yang dilengkapi dengan timer atau waktu dengan 4 skin gambar yang berbeda-beda. Kotak like box popup ini muncul ketika halaman blog dibuka dan dirancang untuk tidak muncul kedua kalinya jika pengunjung sudah mengklik like atau suka pada box tersebut serta dilengkapi dengan tombol close pada sudut kanan atas.
  • Demo by image
Top 10 [Ten] Widgets For Blogger 2012

  • Deskripsi Singkat :
Widget like facebook dengan posisi melayang dengan tombol close memang mempunyai keuntungan tersendiri buat para blogger, kenapa, karena widget ini bisa menghemat tempat dan juga bisa cepat dilihat oleh visitor blog. Selain keuntungan tersebut di atas, masih banyak lagi keuntungan lain mengenai widget ini.
  • Demo By Image
Top 10 [Ten] Widgets For Blogger 2012

  • Deskripsi Singkat :
Salah satu kegunaan dari tombol back to top yakni untuk memudahkan pengunjung blog untuk kembali ke menu header atau navigation tanpa harus melakukan scroll pada mouse.
  • Demo By Image
Not available

  • Deskripsi Singkat :
Cara kerja Popup Email Subscribe Update Pada Blog ini hampir sama dengan pembuatan Popup Like Box Facebook yang dilengkapi dengan timer countdown yakni sama-sama terbuka pada saat halaman blog di buka atau direload dan sama-sama dilengkapi script pembaca cookies browser untuk tidak muncul kedua kali jika browser di reload (refresh) atau dikunjungi kedua kalinya.
  • Demo By Image :
Top 10 [Ten] Widgets For Blogger 2012

  • Deskripsi Singkat :
Widget Social Bookmarking All in One Pada Blogger ini dirancang sedemikian rupa oleh autornya  kedalam satu widget sehingga tidak memakan banyak tempat pada blog dan didalam widget tersebut terdapat add to circles google plus, tombol like facebook, tombol follow twitter, google plus recommended, pin it on pinterest, follow in pinterest, email subscribe, rss feddburner dan lain sebagainya.
  • Demo By Image :
Top 10 [Ten] Widgets For Blogger 2012

  • Deskripsi Singkat :
Widget ini selain bisa berputar atau bergerak, juga tersedia dengan berbagai skin yang berbeda-beda dan menampilkan 5 social bookmarking seperti facebook, twitter, google plus, email subscribe dan youtube
  • Demo By Image :
Top 10 [Ten] Widgets For Blogger 2012

7. Email Subscribe di Bawah Postingan Blog Part I
  • Deskripsi Singkat :
Hanya sekedar mengisi waktu jeda sambil mengumpulkan ide untuk menulis artikel baru, pada kesempatan kali ini saya akan berbagi kepada sobat tentang bagaimana cara membuat email subscribe tepat di bawah postingan yang dilengkapi dengan fitur social bookmark lainnya seperti tombol like fans page facebook, twitter, google plus & rss feedburner.
  • Demo By Image :
Top 10 [Ten] Widgets For Blogger 2012

8.  Email Subscribe di Bawah Postingan Blog Part II
  • Deskripsi Singkat :
Widget Email Subscribe di Bawah Postingan Blog ini bisa dikatakan lebih lengkap karena sudah ditambah dengan social bookmarking pinterset dan tombol fans page like box facebook
  • Demo By Image :

Top 10 [Ten] Widgets For Blogger 2012

9. Toolbar Keren di Blog
  • Deskripsi Singkat :
Toolbar keren untuk blog. Toolbar ini sendiri berbeda dari toolbar yang disediakan oleh pihak ketiga seperti wibya.com dan pihak ketiga lainnya. Mengapa saya katakan demikian, karena toolbar yang disediakan oleh pihak ketiga termasuk dalam kategori permanen alias tidak bisa dimodifikasi
  • Demo By Image :

Top 10 [Ten] Widgets For Blogger 2012

10. Translate Gambar Bendera Pada Blogspot
  • Deskripsi Singkat :
Memasang sebuah widget translate pada adalah suatu hal yang penting apalagi jika blog tersebut mempunyai pengunjung yang datang dari penjuru dunia. Tujuan dari pemasangan widget translate yakni untuk memudahkan bagi para visitor untuk menterjemahkan artikel pada blogspot kedalam bahasa mereka masing-masing tanpa harus membuka lagi site google translate.
  • Demo By Image :
Top 10 [Ten] Widgets For Blogger 2012

Nah, itulah 10 (sepuluh) widgets yang paling populer dan paling banyak digunakan oleh para visitor lostsector pada tahun 2012 kemarin, semoga pada tahun 2013 ini, lostsector akan lebih baik lagi dan memberikan apa yang pengunjung inginkan. Terima kasih..!!!

Penduan Lengkap Cara Membuat Sitemap / Daftar Isi Pada Blog

Posted: 21 Mar 2013 09:26 AM PDT

Apa itu SiteMap...??? Sitemap adalah sebuah menu navigasi simple yang bisa diakses oleh pengguna/pengunjung ataupun robot crawler dan kebanyakan orang memberikan pengertian tersendiri seperi pada kutipan berikut ini "Sitemap merupakan sebuah peta/map yang juga bisa diberikan pengertian sebagai daftar isi sehingga pengunjung bisa mencari dan melihat semua isi blog/web dengan mudah" dan Wikipedia sendiri memberikan penjelasannya seperti kutipan dibawah ini :
A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users.
Sumber : Wikipedia
lostsector

Apakah Keuntungan Sitemap ?

Sitemap mempunyai beberapa keuntungan diantaranya adalah sebagai berikut!
  • Sebagian dari langkah SEO (Search Engine Optimization)
  • Mempermudah pengunjung mencari dan Melihat isi blog

Bagaimana Cara Membuatnya ?

Dibawah ini adalah penjelasan lengkap tentang Bagaimana Cara Membuat Sitemap Blogspot atau website.
  • Pertama, Kunjungi Webmaster Tool terlebih dahulu
  • Disamping kiri, Pilih Optimization > Sitemap
  • Pada Bagian Kanan atas, Pilih "Add/Test Sitemap" Masukkan Kode di bawah ini pada bagian yang kosong. [Perhatikan Gambar]
  1. atom.xml?redirect=false&start-index=1&max-results=900
  2. feeds/posts/default
  3. atom.xml?redirect=false
  4. feeds/posts/default?alt=rss 
  5. rss.xml 
  6. atom.xml
 Lostsector
  • Klik "Submit Sitemap" dan tunggu sampai proses selesai...

Cara Menampilkan Didalam Blog ?

Sitemap didalam postingan blog adalah sebuah site yang berbentuk daftar isi dengan model navigasi yang berbeda-beda, ada yang berbentuk standard dan ada pula yang berbentuk Daftar Isi Model Tabulasi Keren!
  • Login ke blogger > Dashboard > Buat Laman Baru
  • Tentukan Judul Laman dan Pilih HTML
  • Masukkan Script berikut :
<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="http://lostsector-project.googlecode.com/files/sitemap.js"> </script> <script src="http://lostsector.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script> </div>
  • Warna MERAH Silahkan ganti dengan nama blog sobat
  • Simpan dan Lihat Hasilnya
Untuk melihat Contoh "Sitemap", Klik DISINI...

Tambahan :

  • Cara Submit Sitemap Ke Bing >>
Copy url di bawah ini dan pastekan ke address bar anda kemudian tekan enter, namun jangan lupa untuk mengganti url berwarna merah dengan url blog anda.
http://www.bing.com/webmaster/ping.aspx?sitemap=lostsector.blogspot.com/sitemap.xml 
  • Submit Sitemap melalui Referensi dalam robot.txt file
http://lostsector.blogspot.com/sitemap.xml
Semoga bermanfaat and happy nice blogging!

    Redirect Halaman Error 404 [Page Not Found] Ke Homepage

    Posted: 21 Mar 2013 11:50 AM PDT

    Ketika visitor berkunjung ke blog, ada kalanya mereka menemukan sebuah halaman error 404 [page not found] atau halaman tidak ditemukan. Hal ini dikarenakan oleh beberapa faktor, yakni penghapusan artikel oleh admin, penggantian URL halaman, salah mengetikkan URL oleh pengunjung dan yang lain sebagainya.

    Nah, karena hal tersebut di atas, maka pada kesempatan kali ini saya akan berbagi kepada sobat tentang bagaimana cara mengakali halaman error 404 tersebut dengan meredirect mereka ke halaman beranda atau homepage pada blog. Redirect halaman ini konsepnya hampir sama dengan Desain / Design Halaman Error 404 Page Not Found yang pernah saya bahas sebelumnya, tetapi perbedaannya yakni pada penerapannya, dimana Desain Halaman Error 404 membutuhkan partisipasi visitor untuk mengklik sebuah link untuk kembali ke homepage, sedangkan Redirect Error Page ke Homepage yakni membawa pengunjung ke hompage atau halaman lain secara otomatis tanpa melakukan klik apa-apa.

    Redirect Halaman Error 404 [Page Not Found] Ke Homepage

    Cara Pemasangannya

    • Login ke Blogger
    • Pilih Setelan » Preferensi Penelusuran » Kesalahan dan Pengalihan » Pesan Khusus untuk Laman Tidak Ditemukan » Edit (Lihat gambar di bawah untuk lebih jelasnya)
    Redirect Halaman Error 404 [Page Not Found] Ke Homepage
    • Copy kode di bawah ini :
    <!-- http://lostsector.blogspot.com design -->
    <p align='center'><strong>
    <font color='#ff0000' size='25px'>
    Error 404<br/>[Page Not Found]...!!!
    </font></strong></p>
    <br/>
    <p align='center'><font color='#0000ff' style='font-size: 25px'><strong>Kami mohon maaf atas ketidaknyamanan ini.</strong></font></p><br/>
    <p align='center'><font color='#000' style='font-size: 15px'>Dalam beberapa saat, sobat akan dialihkan ke halaman lain secepatnya...!!!</font>
    <script type = "text/javascript">
    //Redirect Page Not Found - Error 404 By Lostsector
    LS_redirect = setTimeout(function() {
    location.pathname= "/"
    }, 5000);
    </script>
    • Selanjutnya, pastekan kode yang sobat copy tadi ke dalam form pengalihan (lihat gambar)
    Redirect Halaman Error 404 [Page Not Found] Ke Homepage
    • Pilih "Simpan Perubahan"
    Nah, jika sobat ingin mengalihkan atau meredirect ke halaman tertentu, berikut penjelasannya :
    pathname ganti menjadi href
    Ganti tanda "/" (slash atau garis miring) dengan URL halaman yang akan dituju.
    Jika sudah di ganti, maka hasilnya akan terlihat seperti ini :
    <script type = "text/javascript">
    //Blogger 404 Redirect v1.0 by Lostsector
    BSPNF_redirect = setTimeout(function() {
    location.href= "http://lostsector-stars.blogspot.com/2012/12/live-demo-cool-button.html"
    }, 5000);
    </script>
    Selamat mencoba dan semoga bermanfaat...!!!

    Cara Membuat Efek Text Shadow Pada Blog

    Posted: 21 Mar 2013 11:56 AM PDT

    Cara Membuat Efek Text Shadow Pada Blog
    Sahabat blogger, pada kesempatan kali ini saya akan menjelaskan bagaimana cara membuat effect text shadow atau dalam bahasa indonesianya efek teks bayangan pada blog atau website yang bisa di kombinasikan dengan berbagai warna sesuai keinginan.

    Effect text shadow ini, selain bisa digunakan pada kode CSS template blog (untuk text shadow header, widget, judul postingan, footer, dsb) juga bisa digunakan pada teks postingan blog dan cara penerapan sama saja. Untuk pilihan warna bisa disesuaikan sesuai kebutuhan baik itu pada warna dasarnya, maupun pada warna shadow atau bayangannya.

    Well, langsung saja saya berikan penjelelasan tentang bagaimana menerapkannya pada kode CSS / text postingan beserta contoh dan kodenya.

    1. Cara menerapkan pada kode CSS / isi artikel postingan.

    • Login ke blogger
    • Template Edit HTML
    • Cari kode CSS yang akan diberikan efek shadow pada textnya, contohnya pada sidebar blog kemudian tambahkan kode shadow setelah style atau warna fontnya. Berikut contoh cara memasukkan kodenya ke dalam kode CSS template :
    Sebelum
    #lostsector_bar_left{font-family:PT Sans Narrow,Arial,Helvetica,sans-serif; float:left; text-align:right; font-weight:normal; font-size:14px; color:#000;letter-spacing:0; width:25%; white-space:nowrap}
    Sesudah
    #lostsector_bar_left{font-family:PT Sans Narrow,Arial,Helvetica,sans-serif; float:left; text-align:right; font-weight:normal; font-size:14px; color:#000; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1); letter-spacing:0; width:25%; white-space:nowrap}
    • Pratinjau atau simpan template dan lihat hasilnya.

    2. Kode Efek Text Shadow


    Cara Membuat Efek Text Shadow Pada Blog
    text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
    Cara Membuat Efek Text Shadow Pada Blog
     text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
    Cara Membuat Efek Text Shadow Pada Blog
    text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
    Cara Membuat Efek Text Shadow Pada Blog
     text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
    Cara Membuat Efek Text Shadow Pada Blog
     text-shadow: 0px 3px 0px #b2a98f,0px 14px 10px rgba(0,0,0,0.15),0px 24px 2px rgba(0,0,0,0.1),0px 34px 30px rgba(0,0,0,0.1);
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1);
    Cara Membuat Efek Text Shadow Pada Blog
    text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);
    Cara Membuat Efek Text Shadow Pada Blog
    -webkit-background-clip: text;-moz-background-clip: text;background-clip: text;color: transparent;text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
    Cara Membuat Efek Text Shadow Pada Blog
    -webkit-background-clip: text;-moz-background-clip: text;background-clip: text;color: transparent;text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
    Cara Membuat Efek Text Shadow Pada Blog
    text-shadow: -10px 10px 0px #00e6e6,-20px 20px 0px #01cccc,-30px 30px 0px #00bdbd;
    Cara Membuat Efek Text Shadow Pada Blog
    text-shadow: 0px 15px 5px rgba(0,0,0,0.1),10px 20px 5px rgba(0,0,0,0.05),-10px 20px 5px rgba(0,0,0,0.05);
    Cara Membuat Efek Text Shadow Pada Blog
    color: rgba(0,0,0,0.6);text-shadow: 2px 8px 6px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);
    image and code source : http://designshack.net/
    Dari kode text shadow di atas, semuanya bisa sobat modifikasi dengan cara mengganti value dari tiap-tiap kode.

    Sekian pembahasan tentang cara membuat efek text shadow pada blog atau website kali ini, semoga ada manfaatnya... Terima kasih...!!!

    Cara Mendaftarkan Blog / Website di Google Feedburner

    Posted: 21 Mar 2013 08:15 AM PDT

    Cara Mendaftarkan Blog / Website di Google Feedburner
    Apa itu Google Feedburner? Google Feedburner menurut wikipedia, Feedburner merupakan layanan manajemen umpan web (web feed), yang terdiri dari RSS feed dan alat pengelola (management tools) untuk blogger dan podcaster, dan aplikasi publikasi lain yang berbasis web. Layanan ini menyediakan analisis lalu lintas pengunjung situs dan sistem periklanan yang dapat dipilih.

    FeedBurner memiliki banyak fitur, misalnya pengecekan statistik optimasi feed. Namun kenapa lebih baik menggunanan FeedBurner dibandingkan dengan feed bawaan blog adalah karena FeedBurner lebih cocok dipakai untuk:
    • Mempublikasikan konten dan orang lain lebih mudah untuk melakukan subscribe.
    • Mengoptimalkan pendistribusian feed karena formatnya lebih kompatibel untuk semua jenis perangkat lunak subscriber.
    • Pengguna dapat menganalisis traffic yang berlangganan feed, seperti melihat jumlah subscriber, dari mana mereka berada dan apa yang mereka sukai.
    Sumber : Wikipedia

    Nah, untuk mengaktifkan atau mendaftar pada google feedburner, sangatlah mudah. Berikut caranya :
    • Langkah Pertama, Buka http://feedburner.google.com/
    • Setelah terbuka, masukkan URL blog atau Website pada kolom yang disediakan dan jangan lupa untuk memberi tanda centang pada "I am a podcaster!" serta lanjutkan dengan mengklik tombol "Next" (lihat gambar untuk lebih jelasnya)
    Cara Mendaftar di Google Feedburner
    • Pada halaman selanjutnya, pilih opsi yang pertama dan tekan tombol "Next"
    Cara Mendaftar di Google Feedburner
    • Pada halaman ini, isi nama Feed Title (Judul Feed) beserta username Feed kemudian lanjutkan dengan menklik tombol "Next" yang ada pada sudut kiri bawah.
    Cara Mendaftar di Google Feedburner
    • Selanjutnya, sobat akan dihadapkan pada 3 (tiga) opsi lanjutan setelah feedburner sobat sudah diaktifkan dan untuk pengaturannya sendiri, silahkan disesuaikan. 
    Cara Mendaftar di Google Feedburner

    Cara Mendaftar di Google Feedburner

    Cara Mendaftar di Google Feedburner
    • Setelah semuanya sudah dilengkapi, feedburner sobat sudah benar-benar aktif dan sudah bisa digunakan.
    Cara Mendaftar di Google Feedburner

    Semoga, tutorial kali ini memberikan manfaat yang baik buat sobat, pada kesempatan selanjutnya saya akan memberikan atau membahas tentang Bagaimana Cara Memasang FeedCount pada Blog dan terima kasih telah membaca artikel ini. Salam bloggers...!!!