Showing posts with label Tips. Show all posts
Showing posts with label Tips. Show all posts

Optimasi Blog dengan Google Page Speed dan Yahoo! YSlow

Postingan kali ini merupakan kelanjutan dari tulisan saya sebelumnya mengenai bahasan 15 Cara Optimasi Blog Agar Tampil Lebih Cepat, buat yang sudah baca silahkan lanjutkan baca artikel ini, kalau belum..silahan baca dulu, karena untuk bahasan kali ini kita langsung praktek menganalisa menggunakan tools, dan artikel yang saya tulis sebelumnya itu sebagai pegangan saja biar nanti gak bingun memilah apa saja halaman yang sekiranya wajib dioptimasi.

Optimasi kali ini sebenarnya bertujuan untuk mengurangi pesan kesalahan ketika browser melakukan rendering pada suatu halaman. Logikanya yaitu semakin sedikit kesalahan tentu akan semakin baik karena ini akan mengurangi kerja berat dari Browser atau paling tidak kita berusaha menghemat pemakain Bandwith.

Google Page Speed
Untuk Tools Optimasi yang pertama, saya biasanya menggunakan Google Page Speed, selain karena tools ini besutan langsung dari Google, tools ini juga memberikan informasi cukup lengkap mengenai laporan kesalahan pada halaman. Setiap halaman blog yang kita analisa secara otomatis akan dilaporkan kedalam tabel list. Page Speed akan memilah dan menginformasikan secara rinci apa saja kesalahan yang ditemukan, selain pesan kesalahan, disitu juga di-informasikan pesan kebenaran, yang berarti ditemukan sebagian element halaman yang tidak perlu lagi diperbaiki karena dianggap sudah benar.


Halaman yang selesai dianalisa Google Page Speed biasanya akan diberi nilai (score). Nilai score terbaik adalah 100, ingat! tidak mudah untuk bisa mencapai nilai 100,  saran saya cukuplah mencapai score antara 80-90/100, inipun sudah terbilang angka yang lumayan bagus. 

Lalu bagaimana memperbaiki kesalahan?
Setiap pesan error yang ditampilkan dalam list semuanya tentu sudah ada solusinya, misalkan pesan tersebut menampilkan "Remove unused CSS" yang berati kita diminta untuk membuang kode CSS yang tidak digunakan. Silahkan klik link yang  menampilkan kesalahan, secara otomatis Google akan memberikan solusi terbaik untuk mengatasi masalah tersebut. Nah, tugas kita tinggal pelajari saja intruksi dan tips optimasi dari Google.

Yahoo! YSlow
Selain Google Page Speed ada satu lagi tools yang biasanya saya gunakan yaitu Yahoo! YSlow. Pilihan pada YSlow karena saya menyadari tools ini dikembangkan langsung oleh Yahoo, tentu saja keakuratannya gak perlu diragunakan lagi. Sebenarnya cara kerja YSlow mulai dari informasi laporan kesalahan dan tetek bengeknya hampir sama saja dengan Google Page Speed, keduanya sama-sama memberikan informasi perbaikan dan tentu saja cara menangani kesalahan. Perbedaan yang mecolok terletak pada pemberian Nilai halaman, jika Google Page Speed berdasarkan pada Score, Yahoo YSlow sendiri berdasarkan pada Grade A-F dimana nilai Grade A adalah nilai terbaik dan Grade F adalah nilai yang terjelek. Seperti saya bilang diatas tentu sulit sekali untuk mencapai nilai sempurna, saran saya cukup diantara Grade B-C saja.


Nah, sekarang terserah rekan saja memilih dari kedua tools diatas, keduanya sama bagusnya. Hemat saya pilih salah satu saja, karena kedua tools diatas sudah pasti memberikan nilai score yang berbeda.

Cara Installasi:
Sebelum mencoba kedua Tools diatas pastikan rekan sudah menginstall firefox plugin untuk Firebug, ok! kalau sudah, silahkan install plugin untuk Google Page Speed dan Yahoo! YSlow. trus ngapain....apa ya?....ya tinggal langsung dicoba aja bro hehehe

15 Cara Optimasi Blog Agar Tampil Lebih Cepat

Need for speed up your blog? Yups, siapa yang tidak ingin halaman blog-nya tampil lebih cepat, pada kenyataannya selain kualitas konten, faktor kecepatan loading page lah yang sangat besar pengaruhnya buat kenyamanan pengunjung. Sudah menjadi sifat dasar manusia dimana menunggu adalah pekerjaan yang sangat membosankan, ini yang harus kita cermati bersama, jangan sampai pengunjung kabur dan pindah ke situs lain hanya karena blog kita sangat lambat ketika dibuka..walaupun itu hanya telat beberapa detik saja. Faktor kecepatan koneksi juga bisa dikatakan sebagai salah satu biang kerok, meskipun kita berpikir halaman blog kita tampil secepat kilat ketika dibuka pada komputer kita sendiri, tapi tidak begitu khan dengan koneksi pengunjung :)

Nah, disini saya mencoba memberikan tips cara Optimasi blog agar bisa tampil lebih cepat, tentunya cepat dalam batas wajar :)

15 Cara Optimasi Halaman Blog Agar tampil lebih cepat:

1. Aktifkan Kompresi dengan GZIP
Browser modern biasanya mendukung kompresi untuk HTML, CSS dan Javascript. Melakukan kompresi pada ketiga file tersebut tentu akan menghemat waktu loading halaman dan secara otomatis tentu akan terjadi pengurangan waktu download. Para Webmaster pintar diluar sana sangat menyarankan kita menggunakan kompresi dengan Gzip. Untuk teknik dan tutorial Gzip silahkan disearch aja ya..sudah banyak sekali yang membahasnya. Jika pembaca menggunakan Platform Blogspot abaikan saja kompresi ini karena secara default blogspot sendiri sudah mendukung teknik tersebut. Untuk pengguna Plaform lain seperti Wordpress silahkan menggunakan Kompresi Gzip ini atau kalau gak mau repot pake Gzip sebaiknya gunakan saja plugin WP Super Cache.

2. Buang Spasi kosong pada kode HTML
Membuang Spasi kosong termasuk juga dalam teknik kompresi, yaitu dengan memadatkan kode HTML, XML atau PHP dengan cara membuang spasi yang dirasa tidak berguna. Salah satunya  termasuk juga dalam Inline untuk kode Javascript dan CSS. Dengan menghapus ruang kosong tentunya akan menyimpan banyak byte data dan imbasnya akan mempercepat waktu proses download. Untuk membuang Spasi yang tidak perlu saya biasanya menggunakan Tools Editor seperti Notepat++. Caranya sangat mudah, yaitu dengan mem-blok semua kode yang ingin dibuang spasinya kemudian pilih menu TextFX -> TextFX Edit dan pilih Delete Blank Lines atau Delete Surplus Blank Lines.

3. Lakukan Kompresi CSS (Stylesheet)
Teknik kompresi CSS ini sebenarnya cukup sederhana, hampir sama dengan cara diatas yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean CSS juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada CSS, silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor dan cssmin.js.

4. Letakan CSS (Stylesheet) di Atas
Adakalanya kita tidak meletakan CSS di header, biasanya cara tersebut kita gunakan untuk membuat Style tunggal untuk gaya tertentu pada widget. Para webmaster yang ahli biasanya menyarankan kita sebaiknya memanggil semua kode CSS pada halaman HEAD entah itu CSS Internal maupun CSS External semuanya sebaiknya dijadikan satu pemanggilan dalam Header.

5. Buang CSS (Stylesheet) yang tidak perlu
Ketika browser mengakses halaman, biasanya harus melalui proses download dan menganalisa setiap baris kode dalam CSS (stylesheet) terlebih dahulu, bayangkan jika banyak kode CSS percuma yang harus diproses namun  tidak dieksekusi sama sekali! ini akan sangat mengganggu karena akan menghambat proses rendering yang harusnya lebih cepat!

6. Periksa Validasi CSS (Stylesheet)
Walaupun sering terjadi kesalahan dalam menulis kode CSS, broser tidak akan menampilkan pesan kesalahan apapun dalam layar, semua eksekusi akan terus dijalankan tanpa adanya laporan error meskipun itu hanya salah dalam satu huruf saja. Sebaiknya jangan abaikan kesalahan ini, silahkan check validasinya. Untuk lebih mudahya silahkan gunakan tools online gratis seperti W3C CSS Validations

7. Kombinasi CSS (Stylesheet) dalam file External
Kekurangan CSS Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan kode CSS melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua kode CSS hanya dalam satu file saja.  (untuk pengguna blogger abaikan teknik ini karena akan lebih bagus dengan pemanggilan internal)

8. Lakukan Kompresi Javascript
Teknik kompresi Javacsript hampir sama dengan CSS yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean Javacript juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada javascript silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor, Closure Compiler dan JSMin

9. Buang Javascript yang tidak Perlu
Suka tidak suka penggunakan javacript (JS) kadang sangat diperlukan, walaupun JS kadang membuat loading halaman akan semakin berat. Ketika browser mengakses suatu halaman, biasanya harus melalui proses download dan menganalisa kode dalam JS terlebih dahulu, bayangkan jika banyak pemanggilan JS secara percuma yang harus diproses namun tidak dieksekusi sama sekali! Silahkan teliti kembali kode JS yang menurut kita tidak berguna, cek ulang dan jangan sampai parkir terlalu lama, jika tidak digunakan lagi mending hapus saja!

10. Kombinasi Javascript dalam file External
Hampir sama kasusnya dengan CSS External diatas, Kekurangan javascript Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua koding JS hanya dalam satu file saja.  (untuk pengguna blogger jika memungkinkan sebaiknya panggil melalui file internal saja, silahkan baca kembali solusi hosting javasript internal)

11. Lakukan Optimasi Gambar
Website dinamis tanpa dihiasi gambar tentu tidak akan menarik, namum penggunaan gambar yang berlebihan akan menjadi masalah ketika browser melakukan download pada halaman. Sebaiknya kurangi gambar yang tidak perlu, terlebih pada gambar yang mempunyai ukuran cukup besar. Jika memang terpaksa menggunakannya, sebaiknya lakukan optimasi pada gambar tersebut dengan cara melakukan kompresi tanpa harus mengurangi kualitas gambar. Saran saya silahkan gunakan Yahoo! Smush.it

12. Jangan Paksa Skala Gambar dalam HTML
Hindari menggunakan gambar yang besar hanya karena kita dapat mengatur lebar dan tinggi dalam HMTL, Kita memang bisa mengatur ulang gambar sesuka hati melalui CSS atau dalam tag <Img> seperti pada html berikut ini <img width="100" height="100" src="gambar.jpg"/> walaupun ukuran gambar sebenarnya adalah 200x200px sebaiknya jangan mengecilkan dengan mengatur ulang skala gambar, akan lebih baik kita membuat gambar 100x100px sesuai dengan ukuran gambar sebenarnya.

13. Hindari Gambar SRC kosong
Pemanggilan tag SRC untuk gambar biasanya ada pada dua kemungkinan, bisa melalui HTML <img scr=""> atau memalui Javascript var img = new Image(); img.src = ""; walaupun browser mengabaikan permintaan ini jika gambar dalam keadaan kosong, tetap saja ini melalui proses rendering yang harusnya tidak membebani server. Silahkan perikasa kembali blank SRC, Jika memang tidak digunakan mending dihapus saja.

14. Periksa Kembali Broken link
Link yang telah mati bakal tidak disukai pembaca, jangankan pembaca..search engine sekalipun tidak menyukai hal ini. Lakukan pengecekan broken link sesering mungkin, banyak tools di internet yang bisa melakukan tugas ini, salah satunya yang terbaik bisa menggunakan tools dari W3C Checklink

15. Buang Widget atau plugin yang tidak Perlu
Widget yang terlalu banyak hanya membuat halaman jadi semakin berat, apalagi widget tersebut tidak begitu berguna. Silahkan kita pilah-pilah kembali widget yang sekiranya tidak ada maanfaat sama sekali seperti memasang jam dan kalender. Tanyakan pada diri kita sendiri apa gunanya memasang jam di blog, jika hanya sebagai penunjuk waktu..trus apa gunanya jam pada taksbar windows? untuk lebih jelas mengenai bahasan ini coba buka kembali catatan lama saya dilink ini 17 tips agar halaman blog tampil profesional

Meningkatkan Traffic Blog Melalui Tweetmeme

Banyak sekali usaha untuk meningkatkan trafik, salah satunya mungkin membagikannya melalui jejaringan sosial twitter. Namun sekedar hanya berbagi artikel melalui twitter sendiri saja tidak cukup lho, tidak masalah kalo list friend di Twitter kita sudah mencapai ribuan follower, tapi kalo cuman 50-100 sepertinya tidak terlalu efektif. Nah, dari pada pusing tiap hari mem-follow orang2 yang gak jelas, apalagi tujuan utama hanya kesedar memperbanyak teman, alangkah baiknya kita meminta bantuan pembaca sendiri untuk membagikan link artikel kita di twitter mereka masing2. Cara yang paling mudah salah satunya bisa dengan memasang button dari Tweetmeme atau Retweet.

Untuk memasang button Tweetmeme ini sangat mudah, pertama masuk kehalaman EDIT HTML, kemudian beri tanda centang pada Expand Template Widget. Kalo sudah, cari kode yang warna merah dan letakan kode button warna hijau tepat dibawahnya.

<div class='post-header-line-1'/>

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

 
Hampir sama dengan cara diatas, memasang button Retweet ini juga sangat mudah, pertama masuk kehalaman EDIT HTML, kemudian beri tanda centang pada Expand Template Widget. Kalo sudah, cari kode yang warna merah dan letakan kode button warna hijau tepat dibawahnya.

<div class='post-header-line-1'/>

<script type="text/javascript">
url = '<data:post.url>';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>


Jika ingin ukuran kecil:


<script type="text/javascript">
url = '<data:post.url>';
size = 'small';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

Sedikit informasi, Tweetmeme atau Retweet memiliki nilai counter tersendiri untuk menilai seberapa banyak link kita yang telah dibagikan oleh pembaca. kita dapat melihat nilai tersebut langsung pada buttonnya.

Membuat Recent Posts Pada Blogspot dengan Menggunakan Feed URL dengan Kategori, Indeks dan Gambar Thumbnail

Pengertian Feed
Feed adalah suatu sarana untuk menampilkan sebagian isi posting atau artikel, baik itu berupa kalimat, gambar, ataupun suara. Dengan menggunakan Feed, baik melalui email, gadget yang di pasang di blog atau situs, ataupun melalui sarana Feed Reader seperti Google Reader, seseorang dapat mengetahui artikel-artikel terbaru suatu blog atau situs tanpa perlu datang mengunjunginya. Jika ada hal yang menarik, barulah berkunjung untuk membaca ataupun berkomentar mengenai artikel tersebut.

Selain untuk mengetahui artikel-artikel di blog atau situs lain, Feed ini juga bisa digunakan untuk menampilkan artikel-artikel pada blog sendiri (dalam bentuk gadget Recent Posts atau Posting Terbaru) agar para pengunjung blog dapat mengetahui dan membacanya jika tertarik. Hal ini akan dapat meningkatkan traffic pada blog tersebut ya.

Dari banyak blog atau situs yang membahas mengenai penggunaan Feed untuk membuat gadget Recent Posts atau Posting Terkini, aku akhirnya bisa mendapatkan Feed URL (alamat Feed) yang dapat digunakan untuk menampilkan artikel yang tidak hanya dapat menampilkan artikel terbaru berdasarkan label atau kategori artikel saja, tapi juga bisa berdasarkan indeks atau urutan artikel tertentu, atau bahkan berdasarkan keduanya, kategori dan indeks artikel.

Pada blogspot, secara default, Feed URL blog adalah seperti dibawah ini:
http://namablog.blogspot.com/feeds/posts/default
Feed URL ini akan menampilkan seluruh artikel terbaru yang ada di blog.

Untuk menampilkan artikel dengan indeks tertentu, maka Feed URL nya adalah sbb:
http://namablog.blogspot.com/feeds/posts/default/?start-index=5
Feed URL ini akan menampilkan artikel terbaru yang ada di blog yang dimulai dari artikel ke 5.

Sedangkan untuk menampilkan artikel dengan kategori tertentu, maka Feed URL nya akan menjadi sbb:
http://namablog.blogspot.com/feeds/posts/default/-/tanaman
Feed URL ini akan menampilkan artikel terbaru yang mempunyai kategori tanaman.
 
Sedangkan jika ingin menampilkan artikel dengan kategori tertentu dan dimulai dari artikel nomor tertentu, maka Feed URL nya akan menjadi seperti berikut:
http://namablog.blogspot.com/feeds/posts/default/-/Tips%20Diet?start-index=3
Feed URL ini akan menampilkan artikel dengan kategori Tips Diet dan dimulai dari artikel nomor 3.

Catatan: ganti namablog.blogspot.com dengan nama blog yang diinginkan, ganti kategori dengan kategori yang diinginkan yang ada pada blog, dan ganti nilai indeks dengan angka yang diinginkan.
Penulisan spasi pada kategori dilambangkan dengan %20. Misal kategorinya adalah Tips Bisnis, maka penulisan kodenya menjadi Tips%20Bisnis.

*****

Cara Membuat Recent Post Menggunakan Feed URL
Cara yang paling mudah untuk membuat Recent Posts dengan menggunakan Feed URL dengan kategori dan atau indeks pada blogspot ini adalah dengan memanfaatkan gadget Feed yang sudah disediakan oleh blogspot.

Login ke Blogspot --> Tata Letak (Layout) --> Elemen Laman
Lalu klik link Tambah Gadget di tempat yang diinginkan untuk memasang Recent Post ini.


Setelah itu pada menu Tambah Gadget, pilih Feed.


Lalu masukan alamat Feed URL yang kita inginkan, dan klik tombol 'Lanjutkan' untuk melihat atau mengedit tampilan Recent Post yang dibuat.



Setelah semua oke, klik Simpan.

Tampilannya nanti akan terlihat seperti pada gambar dibawah ini:


Kekurangan dari menggunakan gadget Feed untuk membuat Recent Posts adalah jumlah posting yang bisa ditampikan maksimal hanya 5 saja. Oleh karena itu jika ingin menampilkan lebih dari 5 posting dalam Recent Posts, ada alternatif lain yang bisa digunakan, yaitu menggunakan skrip kode berikut ini yang berasal dari JACKBOOK.COM
<script src="http://files.lifewg.googlepages.com/blogger-widget.js"></script>
<script>
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<h2>RECENT POSTS</h2>
<script src="http://NAMABLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

dimana:
var numposts = 10; /* Jumlah posting yang ingin ditampilkan
var showpostdate = false; /* Menampilkan tanggal atau tidak? (true=ya; false=tidak)
var showpostsummary = false; /* Menampilkan ringkasan posting atau tidak? (true=ya; false=tidak)
var numchars = 100; /* Jumlah karakter yang ditampilkan jika ingin menampilkan ringkasaan postuing
Kalimat RECENT POSTS dapat diganti dengan kalimat lain jika ingin.
NAMABLOG ganti dengan nama blog sesungguhnya.

Kopi kode tersebut diatas, lalu login ke Blogspot --> Tata Letak --> Elemen Laman
Lalu klik link Tambah Gadget di tempat yang diinginkan untuk memasang Recent Post ini.
Pilih gadget HTML/JavaScript dan masukan (paste) kode tadi ke dalamnya dan simpan.




Tampilan Recent Posts-nya nanti akan terlihat seperti pada gambar dibawah ini:


Catatan:
Jika ingin membuat Recent Post berdasar kategori tertentu, maka baris kode yang paling bawah pada kode diatas bisa diganti dengan baris kode berikut, dimana kalimat yang berwarna merah diganti dengan kata yang sesuai dengan blog yang ada.
<script src="http://NAMABLOG.blogspot.com/feeds/posts/default/-/kategori?orderby=published&alt=json-in-script&callback=rp"></script>

Jika ingin membuat Recent Post dengan indeks tertentu, maka baris kode yang paling bawah pada kode diatas bisa diganti dengan baris kode berikut, dimana kalimat yang berwarna merah diganti dengan kata yang sesuai dengan blog yang ada dan angkanya disesuaikan dengan urutan artikel yang dinginkan.
<script src="http://NAMABLOG.blogspot.com/feeds/posts/default/?start-index=5&orderby=published&alt=json-in-script&callback=rp"></script>

Jika ingin membuat Recent Post berdasar kategori dan indeks tertentu, maka baris kode yang paling bawah pada kode diatas bisa diganti dengan baris kode berikut, dimana kalimat yang berwarna merah diganti dengan kata yang sesuai dengan blog yang ada.
<script src="http://NAMABLOG.blogspot.com/feeds/posts/default/-/kategori?start-index=5&orderby=published&alt=json-in-script&callback=rp"></script>

*****
Sedangkan jika ingin menggunakan Feed URL untuk membuat Recent Post yang mempunyai gambar Thumbnail dan dengan kategori atau indeks tertentu, maka bisa membuatnya dengan mengunakan Recent Post Thumbnail Generator.
Setelah masuk, masukan saja Feed URL yang diinginkan dan edit tampilan yang diinginkan, seperti jumlah posting yang ingin ditampilkan, ukuran gambar thumbnail dll.


Untuk melihat preview tampilan gadget Recent Posts yang dibuat, klik link 'Preview Feed' yang ada di sebelah kanan atas.


Jika semua sudah sesuai dengan keinginan, klil link 'Generate JavaScript' yang ada di sebelah bawah link 'Preview Feed' untuk mendapatkan kodenya.


Kopi kode tersebut, lalu login ke Blogspot --> Tata Letak --> Elemen Laman
Lalu klik link Tambah Gadget di tempat yang diinginkan untuk memasang Recent Post ini.
Pilih gadget HTML/JavaScript dan masukan (paste) kode tadi ke dalamnya dan simpan.




Tampilan Recent Posts-nya nanti akan terlihat seperti pada gambar di bawah ini:


*****
Catatan: Jika hanya ingin membuat Recent Post dengan gambar thumbnail saja tanpa ingin membuatnya berdasarkan kategori dan indeks tertentu, blogspot sudah menyediakan gadgetnya ya.

Login saja ke Blogspot --> Tata Letak --> Elemen Laman
Lalu klik link 'Tambah Gadget'.
Pada menu 'Tambahkan Gadget', klik tombol Unggulan disebelah kiri atas, lalu pilih gadget Recent Post yang ada di bawah (no 14), ikuti petunjuknya dan lalu simpan
.

 

Tampilan gadget Recent Posts-nya nanti akan terlihat seperti pada gambar dibawah ini:


Alternatif lain untuk memasang Recent Posts dengan Thumbnail tanpa berdasarkan pada kategori atau indeks adalah dengan menggunakan kode dari Blogger Triks.

Kodenya seperti terlihat dibawah ini. Untuk menggunakannya tinggal di kopi saja dan diletakan pada gadget HTML/JavaScript di tempat yang diinginkan.
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 260;
cellspacing = 5;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = false;
icon = " ";
text = "";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = http://NAMABLOG.blogspot.com/;
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Dimana:
boxwidth = 260 adalah lebar gadget yangdiinginkan
thumbwidth = 40
ukuran lebar gambar thumbnail
thumbheight = 40 ukuran tinggi gambar thumbnail
http://NAMABLOG.blogspot.com/ ganti dengan nama blog yang diinginkan

Tampilan recent postnya akan seperti terlihat pada gambar di bawah ini:

Kode Anti Copy Paste Untuk Menghindari Para "Penjiplak Sejati"


Selama beberapa tahun ini ngeblog, banyak juga blogger yang menyatakan bahwa blognya itu dilarang dijiplak dan mereka telah memproteksinya dengan berbagai macam metode (kalo nggak salah, salah satunya yaitu CopyScape). Menurut saya sah-sah saja sih kalo si blogger melindungi content blognya, walau bagi saya yang namanya ilmu itu harus dibagi.
Kebetulan saya menemukan beberapa kode (bentuknya JavaScript) untuk menghambat penjiplak blog anda melakukan aksinya. Silakan merujuk ke halaman http://www.hypergurl.com/norightclick.h

Cara Menampilkan Judul Postingan Saja di Homepage dengan Auto Read More

Postingan ini adalah bagaimana cara menampilkan "judul posting" saja pada halaman blog anda, jadi di blog anda tidak akan ada thumbnail atau pun segala jenis lainnya yang berupa keterangan singkat. ya sudah, jangan terlalu lama membahasnya, langsung saja cara membuatnya ..
  • Masuk ke blogger
  • Pilih Design/Rancangan
  • Pilih Edit HTML
  • Cari kode noimg , kira-kira kodenya seperti ini
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height =120;
img_thumb_width =120;
</script>
  • Nah, ketemu noimg , terus jadikan nol semua, seperti ini,
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 0;
summary_img = 0;
img_thumb_height = 0;
img_thumb_width = 0;
</script>
  • Simpan, dan selesai.
Nah, untuk menghilangkan tulisan "READMORE" :
  • Centang expand Widget template
  • Cari kode <data:post.body/>
  • Nanti akan ada 2 kode tersebut, misalnya kodenya seperti ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink'>
<a expr:href='data:post.url'>read more...</a></span>
</b:if>

  • Hapuslah kode biru nya. Sehingga tulisan "READMORE" akan hilang
Untuk menghilangkan ( . . . )
  • Cari saja ... (tiga titik), misal kodenya seperti ini nanti,
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
  • Titil-titik yang warna hijau dihapus
  • Selesai
Untuk Judul Rata Tengah
  • Cari Kode h3 ,misal
h3.post-title, h4 {
font: $(post.title.font);
color: $(post.title.text.color);
}
  • Tambahkan kode text-align:center; dalam kode di atas, seperti ini,

h3.post-title, h4 {
font: $(post.title.font);
color: $(post.title.text.color); text-align:center;
}
Simpan 

Membuat Scroll pada Label, Arsip Blog Ataupun Widgets Lainnya

Scroll itu adalah sesuatu yang bisa ditarik ke atas dan ke bawah, seperti pada halaman utama blog ini. Atau Pada arsip  di blog ini maupun NEW dan Blogger ter'buwel, Yang mana widgets2 tadi adalah widgets yang berupa bawaan dari blogger atau blogspot. Atau bisa juga widget2 lainnya yang memang pengin diberikan scroll... :-)

Dan Langsung ke cara membuatnya yaitu

1.Sign in seperti biasa di blogger
2.Ke Tata letak---> terus ke Edit Html
3.Cari Kode:

<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='HTML6' locked='false' title='Jam' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
<b:widget id='HTML7' locked='false' title='Statistik Blog Ini' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Kotak Chatting' type='HTML'/>

4.Lha trus cari nama widgets yang akan anda beri scroll.
Misalkan anda pengin mengasih scrollnya untuk Arsip Blog, maka kodenya kira2 seperti ini

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

Nah kode id yang nanti di pakai untuk Arsip blog ini adalah BlogArchive1

5. Kemudian Pastekan Kode dibawah ini di atas kode ]]></b:skin>

#BlogArchive1 .widget-content{
height:200px; /* Tinggi yang diinginkan */
width:auto;
overflow:auto;
}

Kemudian simpan Templete.
Nah kalo berhasil nggak akan Error, dan Arsip Blog kita akan terscrollkan.

Cara ini bisa juga untuk membuat scroll pada label, Seperti contoh script diatas (script no 3) yang mengambarkan id Label yaitu Label1, maka kita tinggal mengganti kata BlogArchive1 pada script nomer 5 dengan Kata Label1.
Sedang Untuk tinggi scroll bisa diatur sesuai selera yang kalo yang diatas itu tulisan 200px ea...

Udah gitu ajah, moga ada manfaatnya bagi anda. 

Cara Membuat Menu Navigasi Breadcrumbs

Navigasi seperti di atas lebih di kenal dengan nama “breadcrumb”. Dengan adanya “breadcrumb” maka pembaca dapat dengan mudah melihat posisi artikel yang sedang di baca serta pembaca dapat mencari artikel dalam satu kategori yang berkaitan dengan posting.
Untuk membuatnya, caranya cukup mudah, sobat ikuti trik dibawah ini :
1. Silahkan login ke blogger.

2. Klik Rancangan>>Edit HTML

3. Click Download Full Template (untuk berjaga-jaga).

4. Silahkan beri tanda centang Expand Template Widget.

5. Silahkan cari kode ]]></b:skin>

6. Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

7. Silahkan cari kode berikut pada template sobat :

<div class='post hentry uncustomized-post-template'>

8. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

9. Klik tombol Save Template dan lihat hasilnya :D

Cara Membuat Menu Keren Dengan Dynamic-FX Slide-In Menu (v 6.5)

slide in menu
Kali saya akan berbagi Tips Membuat yang ada diblog saya tersebut di namakan dengan Dynamic-FX Slide-In Menu (v 6.5), original source code serta contoh dari menu tersebut bisa anda lihat di dynamicdrive.com. Apa keunikan dari Dynamic-FX Slide-In Menu (v 6.5)? keunikanya yaitu menu atau navigasi tersembunyi di sebelah kiri layar monitor dan yang terlihat hanyalah bar menu nya saja, apabila menu tersebut di sorot oleh mouse komputer maka keluarlah menu-menu yang ada di dalamnya. Yang lebih menarik perhatian adalah menu tersebut selalu bergerak mengikuti gerakan scrolling sehingga akan selalu muncul di layar sebelah kiri layar monitor.

Tertarik membuat menu tersebut di blog anda, saya bagi tuliskan tutorial cara membuatnya :

Silahkan download dahulu source code yang nanti akan anda pakai. Klik 
di bawah : 

DOWNLOAD 

Setelah anda download file yang tadi, silah di ekstrak terlebih dahulu dengan software ekstraktor seperti winzip atau winrar.

ekstrak seperti ini!

Apabila file tersebut sudah diekstrak, maka akan menghasilkan dua buah file java seperti yang tampak pada ilustrasi gambar di atas. dua buah file java tersebut mempunyai nama ssm.js dan ssmItems.js, yang harus anda lakukan sebelum file tersebut di upload ke file server adalah melakukan editing untuk file ssmItems.js yaitu mengganti link-link yang ada dengan link yang anda inginkan untuk di simpan pada menu tersebut. Bagaimana cara mengedit file tersebut? agar tidak terlalu repot, maka saya akan menerangkan mengedit file tersebut dengan hanya menggunakan notepad, caranya adalah seperti ini : 



  1. Klik kanan pada file yang bernama ssmItems.js, kemudian pilih open with lalu pilih notepad karena yang akan di gunakan adalah software tersebut.
  2. Setelah itu anda akan melihat file seperti ini :
<!--
/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="OKTRI MENU"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["MENU"] //create header
ssmItems[1]=["Home", "http://www.unozoneu.co.cc", ""]
ssmItems[2]=["Daftar Isi", "http://www.unozoneu.co.cc/p/accordion-toc.html",""]
ssmItems[3]=["Tips Blog", "http://www.unozoneu.co.cc/search/label/Tips", ""]
ssmItems[4=["Forum","http://www.facebook.com/pages/UnoZoneucocc/131696713546329", "_new"]
ssmItems[5]=["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""]
ssmItems[6]=["Link to Us", "http://oktridarmadi.blogspot.com", ""]

ssmItems[7]=["FAQ", "#nogo", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "rifq.synist09@gmail.com", "",1]

ssmItems[9]=["External Links", "", ""] //create header
ssmItems[10]=["UnoZoneu™", "http://www.unozoneu.co.cc", ""]
ssmItems[11]=["Trick", "http://www.unozoneu.co.cc/search/label/Trick", ""]

buildMenu();

//-->

Pada prinsip dasarnya, kode-kode di atas adalah untuk mengatur tampilan dari Dynamic-FX Slide-In Menu (v 6.5) semisal warna tulisan warna background, bentuk hurup, besarnya hurup dan lain-lain. Akan tetapi karena keterbatasan waktu (cape dhenk kalo di bahas atu-atu mah), maka saya hanya akan menerangkan acara mengganti tulisan menu serta link yang ada dengan link yang anda inginkan untuk dipasang pada menu ini, untuk kreasi yang lainnya silahkan explor sendiri oleh anda. Untuk mempermudah pengeditan, pada kode di atas sengaja kang rohman bedakan, ada yang berwarna hijau, biru serta warna merah. Tulisan yang berwarna hijau dengan tulisan SIDE MENU adalah tulisan yang akan muncul pada bar menu tersebut, anda bisa mengubahnya sesuka hati anda, misal mengganti tulisan tersebut dengan MY MENU, MENU GUE, NAVIGASI atau apa sajalah terserah anda. Tulisan yang berwarna biru adalah tulisan link yang akan muncul pada menu tersebut, tulisan-tulisan ini tentu saja bebas untuk anda ubah sendiri sesuai dengan keinginan, misal tulisan Home anda ingin ubah menjadi Depan atau apa saja. 


Tulisan yang biru ini akan berpasangan dengan tulisan yang berwarna merah yang ada di sampingnya. Tulisan yang berwarna merah adalah link target yang anda inginkan, misal : tulisan Home apabila di klik ingin menuju halaman yang beralamat http://www.unozoneu.co.cc, nah alamat http://www.unozoneu.co.cc harus di ubah dengan alamat yang anda inginkan. Mudah-mudah dapat di mengerti. 

Apabila anda sudah mengedit kode-kode di atas tadi, maka langkah selanjutnya adalah menyimpan file tersebut, caranya adalah klik pada file yang ada di bar menu, kemudian klik Save.
Setelah anda melakukan semua hal-hal yang saya tulis di atas, langkah yang harus anda lakukan adalah mengupload kedua file java tersebut ke server,terserah anda akan upload dihosting mana,heheheheh...
Kalau sudah di upload, jangan lupa untuk meng copy alamat URL kedua file tersebut.  

Sekarang kita waktunya untuk beraksi, silahkan ikuti langkah-langkah berikut ini :

  1. Silahkan logi ke blogger dengan ID anda.
  2. Klik Tata Letak.

  3. Klik Edit HTML.
  4. Copy paste kode berikut di atas kode </head>
<style type="text/css">
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>

<SCRIPT SRC="http://h1.ripway.com/oktri/ssm.js" language="JavaScript1.2">
//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>
<SCRIPT SRC=" http://h1.ripway.com/oktri/ssmItems.js" language="JavaScript1.2"></SCRIPT>

 

  1. Gantilah kode yang berwarna merah dengan kode milik anda (file yang tadi di upload).
  2. Klik tombol SIMPAMN TEMPLATE.
  3. Selesai. Silahkan lihat hasilnya.
Semoga Membantu

Membuat Email Dengan Domain Yang Unik

(Gambar, Cara membuat Email, Email Unik, Unix Email, Email yang unik, Domain email keren selain yahoo, Domain Buat email)
Walaupun di kesibukan offline membuat saya harus tersendat-sendat membuat postingan walau begitu saya akan berusaha update blog yang sedikit kumuh ini.

Waktu itu saya pernah Share cara membuat email dengan domain sendiri nah kali ini membuat email dengan domain yang unik-unik, kalau yahoo dan gmail mungkin itu udah biasa tapi kalau misalkan namaanda[at]follower.com kan lumayan keren. bukan hanya itu masih banyak pilihan-pilihan yang keren.

Silahkan aja berangkat ke Mail.com
Kemudian anda klik daftar seperti biasa anda daftar di yahoo.

Semoga bisa bermanfaat.

Cara Membuat E-mail Dengan Domain Sendiri

Pastinya anda kepingin kan punya email dengan domain anda sendiri? Siapa si yang enggak mau, seperti punya saya ini rifq.synist09@unozoneu.co.cc wiihh keren bukan, seperti blogger profesional bukan? biarpun serba gratis enggak jadi masalah kan. Sebenarnya saya dapatkan cara ini dari blog orang, ya ga apa-apa lah sepele ...hhi

Sebelum membuat email dengan domain sendiri, lebih baik anda membuat akun baru di co.cc agar tidak mengganggu kinerja blog anda, masalahnya saya pernah mendapat keluhan dari seorang teman alamat blog-nya tidak mengarah dengan baik, tapi ada juga yang tidak mengalami masalah apapun. Nah lebih baik anda jaga-jaga aja, sebelum terjadi kesalahan. Misal alamat blog anda rhoedal.co.cc, nah jadi anda membuat domain baru di co.cc khusus untuk email anda. Misalnya lagi jadi seperti saya gitu rifq.synist09@unozoneu.co.cc jadi anda kalau membutuh saya bisa hubungi di email saya itu hha ...
Buat yang belum pernah mendaftar silahkan baca cara daftar dan setup di co.cc

Jika anda sudah mempunyai domain baru di co.cc mari ikuti langkah demi langkah berikut ini,

Pertama
>> silahkan kunjungi Google Apps
Kemudian pilih tombol radio Administrator: I own or control this domain
Kemudian anda masukkan domain anda di bawa Enter your domain name

gambar, cara membuat email sendiri

Jika domain yang anda daftarkan sudah di masukkan klik Get Started kemudian anda akan di bawa ke form pendaftaran, isikan data lengkap anda begitupun nomer handphone jangan lupa di awali dengan +62 jadi enggak boleh angka 0 (nol) satu lagi dalam pendataran anda pilih type-nya personal. Kalau pendaftaran sudah selesai klik Continue

Anda akan di bawa lagi ke pembuatan email-nya plus kata sandinya juga

gambar, cara membuat email sendiri gratis dengan co.Cc

kemudian klik button peraturan-nya I accept. continue with setup
setelah itu anda di bawa lagi ke halaman berikutnya, di sini anda di kasih dua pilihan. Lebih baik anda pilih, pilihan ya ke dua aja klik button radio Change namadomain-yang-anda-daftarkan.co.cc CNAME record
kemudian klik Continue setelah anda klik continue, anda di bawa lagi ke halaman yang lain (perasaan di bawa-bawa melulu nih) kemudian anda akan di berikan kode verifikasi untuk di host di co.cc, kode verifikasi contohnya seperti ini google8246ceeb66eb83e6 atau berbentuk http. Contoh lagi http://google8246ceeb66eb83e6.mabes-rhoedal.co.cc lebih baik anda pilih yang pertama aja jangan yang http. Copy kode verifikasi yang di berikan google ke notepad, jangan di tekan dulu button I've completed the steps above kemudian anda meluncur ke co.cc klik domain yang anda daftarkan di google apps, kemudian klik setup (setup, pada zone record) nah kemudian isi seperti ini

Host : isi dengan kode verifikasi yang di berikan google
TTL : biarkan default
Type : CNAME
Value : google.com

setelah itu klik setup.

Di co.cc sudah selesai, sekarang anda berangkat lagi ke google apps, untuk mem-verifikasi sekarang klik button I've completed the steps above seperti biasa anda akan dibawa ke halaman lain kemudian klik link skip this guide di deket tombol launch skip

Anda akan dibawa lagi (jadi kebiasaan nih) ke halaman Dashboard kemudian klik Active Email

gambar, cara membuat email gratisan dari co cc

Anda akan pindah lagi ke halaman MX record, kemudian anda di kasih kode-kode MX record untuk di host di co.cc biasanya seperti ini kodenya

MX server addres
ASPMX.L.GOOGLE.COM
ALT1.ASPMX.L.GOOGLE.COM
ALT2.ASPMX.L.GOOGLE.COM
ASPMX2.GOOGLEMAIL.COM
ASPMX3.GOOGLEMAIL.COM
ASPMX4.GOOGLEMAIL.COM
ASPMX5.GOOGLEMAIL.COM

Priority
10
20
20
30
30
30
30

Anda loncat dulu ke co.cc
kemudian anda setup lagi domain yang anda daftarkan di google apps, sekarang setup-nya seperti ini

HOST: isi dengan MX server addres yang di berikan google
TTL:biarkan default
Type: pilih MX
Priority isi dengan nomer yang di kasih google,
Value: isi dengan ghs.google.com

CONTOH setup di co.cc
Host: ASPMX.L.GOOGLE.COM
TTL: 1D
Type: MX
Priority: 10
Value: ghs.google.com

Lakukan ini berulang sampai ke tujuh kode itu ter hosting.

Kalau sudah selesai di co.cc kembali lagi ke Google apps, kemudian klik button I Have Completed These Step

selesai sudah, biasanya anda di suruh menunggu 48 jam (biasanya dalam beberapa jam sudah bisa di gunakan)... sekarang anda mempunyai email dengan domain sendiri, anda pun bisa mengganti alamat untuk login email anda. Semoga bermanfaat...