Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label Tertentu

Daftar Isi / Sitemap yang ada di blog akan memudahkan baik Sobat sendiri sebagai pemilik website / blog maupun pengunjung blog untuk mencari artikel yang dibutuhkan. Nah Gagaje  akan coba share cara membuat daftar isi yang otomatis menurut label / kategori yang ada di blog. Daftar isi ini saya bagikan dengan 2 versi, yaitu daftar isi biasa dan daftar isi dengan fungsi scroll, anda nantinya dapat memilih salah satunya sesuai dengan selera.

Langsung aja ke TKP Bagaimana cara membuat daftar isi / sitemap berdasarkan label secara otomatis di blogger?


1. Membuat daftar isi blog dengan label tertentu secara otomatis (daftar isi biasa)

Buat postingan baru dan masukkan kode dibawah ini pada mode HTML (bukan compose) lalu publikasikan.

<script src="http://gagaje-blogspot.googlecode.com/files/sitemap%281%29.js"></script><script src="http://dedeefendi.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

2. Membuat Daftar isi blog berdasarkan label tertentu dengan fungsi scroll :

Sama dengan cara diatas yakni buatlah postingan baru dan masukkan kode dibawah ini pada mode HTML (bukan compose), lalu publikasikan.

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://gagaje-blogspot.googlecode.com/files/sitemap%281%29.js"></script><script src="http://dedeefendi.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Keterangan :
Ganti teks warna merah dengan url blog anda
Selamat mencoba membuat daftar isi berdasarkan label tertentu di blog, semoga bermanfaat.

Cara Menghilangkan Widget Atribusi Di Blog

Cara Menghilangkan Widget Atribusi Di Blog,
Hello guys hari ini saya akan menulis di sini bagaimana untuk menghapus teks atribusi di blog blogger.
Atribusi gadget adalah gadget hadir di footer blog dan mengatakan "Didukung oleh Blogger". Gadget terkunci, ketika Anda mengklik pada link edit atribusi gadget Anda akan melihat bahwa tidak ada link "Hapus", Karena gadget terkunci secara resmi oleh blogger.
Sebagian besar blogger tidak menyukainya dan meminta mereka diperbolehkan untuk menghapus ini dari template mereka? Jawabannya adalah ya Anda diperbolehkan!
Ikuti petunjuk saya di bawah ini untuk membuka dan menghapus blogger atribusi widget.


Berikut langkah-langkah Menghilangkan Widget Atribusi Di Blog :

1. Pertama, Pergi ke Dasbor > Template > Edit HTML.
2. Cari kode ini  dengan CTRL+F (Find)
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
3. Ganti 'true' jadi 'false'
  seperti ini :
<b:widget id='Attribution1' locked=false' title='' type='Attribution'>
4. save

Cara Mengupload Script Di Google Code

Salah satu faktor dalam suatu blog yang patut kita perhatikan adalah proses loading suatu blog. Apabila loading blog terlalu berat secara tidak langsung Anda telah memberikan efek negatif kepada pengunjung Anda dan tak ayal jika pengunjung pasti akan berkurang. Seorang pengunjung tidak mau lama-lama menunggu untuk melihat isi atau artikel yang ingin dibacanya. Mereka lebih memilih mengunjungi sebuah blog yang cepat proses membukanya, disamping lebih efisien waktu, mungkin juga biaya yang dikeluarkan lebih kecil.

Kali ini saya akan membahas tentang kecepatan akses sebuah blog, yakni blogspot. Menurut sumber yang sudah terpercaya, kecepatan akses suatu blog (loading) blog yang berplatform Blogger ini tergantung pada seberapa banyak script yang ditanam dalam sebuah template blog yang mereka pergunakan.Tetapi dengan asumsi kecepatan koneksi internet yang digunakan sama.

Namun kita bisa mengurangi dampak loading yang cukup lama akibat banyaknya javascript dalam sebuah tema dengan cara menghosting javascript kita kedalam hosting Google sendiri yaitu dengan menggunakan Google Code, yakni layanan hosting dari Google. Apabila Anda memakai sebuah template dengan menggunakan banyak script yang disimpan di Google Code oleh si pembuat template, pastinya tidak hanya Anda yang memakai template tersebut, pasti ada pengguna lain yang memakai template yang sama. Jika kedua blog dengan menggunakan template yang sama loading pada saat bersamaan pasti akan terasa semakin berat, disamping itu juga untuk berjaga-jaga jika sewaktu-waktu script dari pembuat template rusak atau overload.

Untuk langkah-langkah bagaimana cara mengupload javascript atau kode lain ke Google Code bisa melihat tutorial dibawah ini :

1. Kunjungi alamat Google Code

2. Kemudian Pada Project Hosting klik "Create New Project"

3. Isikan kotak form yang diminta, sesuai dengan project (kode) yang akan Anda buat/ hostingkan. kemudian isikan data yang diperlukan, setelah semuanya selesai klik "Create Project"

4. Setelah Project terbuat, klik pada New Download untuk menambahkan kode yang akan Anda hostingkan.

5. Setelah New Download terbuat, isikan data-data yang diperlukan kemudian klik "Choose File" masukkan file kode yang akan Anda hostingkan ke Google Code kemudian klik Submit File

6. Setelah kode terupload, masih pada halaman New Download, klik pada file yang sudah terupload maka Anda diarahkan pada halaman informasi mengenai kode yang sudah di upload tadi, kemudian copy link kode  Anda (lihat gambar diatas)

Penggunaan Di Blogger :

Dengan menggunakan Google Code, Anda bisa mengganti script dari pembuat template dengan alamat kode javascript Anda sendiri yang sudah di hosting di Google Code, dengan cara mengedit template blog.

Contoh : misalnya saya menggunakan template yang menggunakan javascript dengan kode berikut :

<script src='http://cobadicoba.googlecode.com/files/related-martin.js' type='text/javascript'/>

Pertama yang Anda lakukan adalah mendownload kode javascript tersebut, dengan alamat :

http://cobadicoba.googlecode.com/files/related-martin.js

Kemudian save kode javascript tersebut setelah tersimpan silahkan ikuti langkah-langkah bagaimana cara upload kode di Google Code seperti diatas. Setelah Anda mendapatkan alamat kode yang sudah Anda upload copy URL kode tersebut (langkah 6) kemudian pada kode :

<script src='http://cobadicoba.googlecode.com/files/related-martin.js' type='text/javascript'/>

Bisa diganti dengan alamat yang sudah Anda copy.
Selamat mencoba dan Happy Blogging ^_^

Cara Membuat Link Adf.ly di Blog

1. Buka blog sobat
2. Pilih Tata letak
3. Tambah gadget
4. Pilih HTML/JavaScript
5. Masukkan code di bawah ini :

<script>
var adfly_id = 2741xxx;
var adfly_advert = 'int';
var exclude_domains = ['example.com', 'yoursite.com',];
</script>
<script src="http://adf.ly/js/link-converter.js"></script>

7. Tulisan yang berwana merah, ganti dengan ID Adf.ly anda
6. Simpan dan lihat hasilnya

Jika belum punya ID Adf.ly, sobat bisa daftar langsung di Sini

Cara Mendaftar Adf.ly :
1. Klik Join Now seperti pada gambar dibawah ini

2. Isi data - data yang diminta seperti pada gambar di bawah ini

3. Pada Account Type: (you can now do both from the same account) Pilih Link Shrinker
4. Submit (Join Now)
5. Buka email sobat kemudian klik link verifikasi yang di beri Adf.ly
6. Silahkan anda Log in, masukkan email dan password.

 7. Kembali pada pembahasan diatas klik Referrals disanalah letak ID Adf.ly anda.

Trik Agar Blog Menjadi Ringan

Memiliki blog yang ramai pengunjung adalah impian bagi para blogger, iya nggak???


Salah satu faktor yang paling mempengaruhi hal tersebut adalah berat tidaknya suatu blog yang kita miliki...karena pengunjung blog biasanya lebih senang dengan blog yang ringan dan mudah diakses, dengan begitu pengunjung akan senang mengunjungi blog kita...
tapi kalau blog yang kita miliki berat dan sulit diakses, pengunjung pasti akan malas mengunjungi blog kita kembali...Sebenarnya sih menurut saya kecepatan blog yang saya dan sobat blogger miliki itu relatif, tergantung dari kecepatan koneksi, kalau kecepatannya tinggi pasti blog kita bisa diakses dengan cepat, tetapi bagaimana kalau pengunjung blog kita memiliki kendala dengan kecepatan koneksi, atau kecepatan koneksinya sedang turun, pasti blog kita akan terlihat berat. nah disini saya sudah mengumpulkan beberapa tips & trick yang mungkin berguna bagi sobat blogger yang blognya berat...


Sobat blogger bisa mengecek kecepatant blog sobat disini Website speed test, caranya masukkan alamat blog/URL blog sobat, lalu klik check...






berikut Tips & Trinknya:






1. Pemilihan Template.


Gunakanlah Template yang ringan namun tetap terlihat menarik dimata pengunjung, dan tidak mengandung terlalu banyak kolom,dan simple dengan navigasi yang mudah. hal ini dapat mempercepat loading blog kita.






2. Pemilihan Widget.


Batasilah pemakaian widget yang tidak terlalu penting,seperti jam,kalenderdan sebagainya. jangan menggunakan widget seperti flash dan animasi yang tidak begitu diperlukan, karena akan memperlama loading blog kita.






3. Hindari Pop up Iklan.


pop up iklan sama seperti javascript dan hanya membuat blog menjadi lambat.






4. Kurangi efek marquee.


penggunaan efek marquee atau efek animasi/teks berjalan memang terlihat cukup bagus dan berguna untuk menyampaikan informasi, namun bila terlalu banyak menggunakannya maka hanya akan membuat loading blog menjadi lama.






5. Kode HTML/Script dalam postingan.


Minimalisir penggunaan font blod, italic atau underline pada postingan, dan bila postingan anda membutuhkan gambar, jangan gunakan gambar yang berukuran besar, serta kurangi pemberian warna pada teks, dan pemberian link pada postingan. karena semua itu menggunakan kode HTML tambahan.






6. Kompress CSS Template.


mengcompress CSS template kita juga sangat berguna untuk mempercepat loading blog kita.


berikut caranya:


(disarankan untuk memback up template anda terlebih dahulu)
Login ke Blogger
Masuk ke design
Pilih edit HTML, lalu centang Expand Template Widget
Copy semua kode setelah <b:skin><![CDATA[/* dan sebelum kode ]]></b:skin> (gunakan Ctrl+f agar mudah mencari kode tersebut)
Masuk ke http://www.csscompressor.com/
Paste kode yang tadi di Copy pada kotak CSS input, lalu klik Compress
Setelah selesai, Copy kode hasil Compressan dan pastekode tersebut setelah <b:skin><![CDATA[/* dan sebelum kode ]]></b:skin>
Klik "Save Template"


Sobat blogger bisa kembali mengukur kecepatan blog di Website speed test






Semoga Tips & Trick yang saya berikan ini bermanfaat bagi sobat blogger..

Pasang Widget Post Terbaru dan Komentar Terbaru

Banyak dari blogger berkeinginan untuk menginstall widget Post Terbaru serta widget komentar terbaru di bagian sidebar blog mereka, untuk hal tersebut beberapa blogger menciptakan sebuah widget Post Terbaru dan komentar terbaru dengan menggunakan javascrip seperti yang pernah saya posting di sini, namun sebenarnya memasang berbagai widget dengan menggunakan javascript sangat berpotensi sekali untuk memperlambat loading blog serta tidak terlalu baik untuk search engine, dan di samping itu pula apabila loading blog kita terlalu berat untuk di akses, maka sangat besar kemungkinan blog kita akan langsung di tinggalkan oleh para pengunjung.

Untuk keperluan hal ini, ada alternatif lain selain memakai javascript yaitu engan menggunakan alamat feed kita sendiri. Untuk Post Terbaru bisa menggunakan feed post, dan untuk komentar terbaru bisa menggunakan feed comment. berikut ini adalah alamat feed untuk Post serta feed komentar asli kepunyaan blogger. Alamat feednya adalah sebagai berikut :

Alamat Post Terbaru : http://NamaBlogAnda.blogspot.com/feeds/posts/default

Alamat Komentar terbaru :

http://NamaBlogAnda.blogspot.com/feeds/comments/default

NamaBlogAnda harus di ganti dengan alamat blog anda. Contoh : nama blog saya adalah Dede Efendi'S blogg, sehingga untuk alamat feednya sebagai berikut,

Alamat Post Terbaru : http://dedeefendi88.blogspot.com/feeds/posts/default

Alamat Komentar terbaru :

http://dedeefendi88.blogspot.com/feeds/comments/default
Untuk cara memasang di blog adalah seperti ini :

1. Sign in di blogger dengan ID anda.



2. Klik Layout



3. Klik tab Elemen Halaman



4. Klik Tambah sebuah Elemen Halaman



5. Setelah muncul window popup, klik TAMBAHKAN KE BLOG untuk yang feed.





6. Masukan alamat feed yang mau anda pasang (URL untuk post terbaru atau URL komentar terbaru). Contoh :





7. Setelah anda masukan alamatnya, klik tombol Lanjutkan



8. Ganti judul dengan Post terbaru atau Komentar terbaru, dan pilih juga berapa yang anda inginkan (maksimal 5)



9. Klik tombol Simpan Perubahan



10. Pindahkan elemen yang baru di buat ke tempat yang anda inginkan, kemudian klik tombol Simpan




11. Selesai. Silahkan lihat hasilnya.

Sekarang ada mempunyai widget Post terbaru danKomentar terbaru yang tidak terlalu membebani loading blog anda.

Selamat mencoba !

Free Logo Maker

Sebuah informasi ringan namun mudah-mudahan bermanfaat. Bagi anda yang ingin membuat sebuah logo yang unik untuk blognya, namun sedikit gaptek terhadap software-software grafik design, anda tidak usah berbingung ria dan larut dalam kesedihan yang amat sangat mendalam karena di alam cyber sana banyak sekali situs alias website yang menyediakan tool pembuat logo atau istilah kerennya yaitu Logo Maker Tool (hihihi.. ko segala istilah yang berbau bahasa bule di bilang keren ya. Padahal belum tentu lho!) yang di persembahkan untuk anda secara gratiss..tiss..tiss alias tidak bayar dhenk. Satu diantara ribuan website penyedia layanan ini yang perbah Dede Efendi jajal kemampuanya yaitu situs yang beralamat di http://www.logoease.com. Logo sederhana yang pernah saya coba adalah seperti gambar berikut ini :





Buat anda yang ingin mencoba, silahkan daftar dulu sebelum membuat sebuah logo, karena itu salah satu syarat yang dia minta. Proses cepat dan tidak rumit. Jika penasaran, coba saja kunjungi http://www.logoease.com.

Tutorial navigasi : Dynamic-FX Slide-In Menu (v 6.5)

Beberapa hari yang lalu sahabat Wizurai meminta kang rohman untuk membuatkan tutorial cara membuat menu yang ada di blognya dengan alasan banyak sekali dari teman-temannya yang menanyakan cara membuat menu tersebut kepada beliau, dan..yepp.. kang rohman buatkan nih tutorialnya.

Menu yang ada di blog sobat Wizurai 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, nih Dede Efendi tuliskan tutorial cara membuatnya :

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






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



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="SIDE 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.blogspottutorial.com", ""]
ssmItems[2]=["Free Template", "http://www.blogspottutorial.com/search/label/free%20template",""]
ssmItems[3]=["Top Download", "http://www.blogspottutorial.com/2008/05/magazine-template-1.html", ""]
ssmItems[4]=["SEO Ebook", "http://www.blogspottutorial.com/2008/05/free-seo-ebook-search-engine.html", "_new"]
ssmItems[5]=["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""]
ssmItems[6]=["Link to Us", "http://www.blogspottutorial.com", ""]

ssmItems[7]=["FAQ", "#nogo", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "#nogo", "",1]


ssmItems[9]=["External Links", "", ""] //create header
ssmItems[10]=["Dede Efendi"s", "http://dedeefendi88.blogspot.com", ""]
ssmItems[11]=["Dede Efendi Dot Com", "http://dedeefendi88.com", ""]
ssmItems[12]=["Unique Template", "http://template-unik.blogspot.com", ""]


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 kang rohman 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://dedeefendi88.blogspot.com, nah alamat http://dedeefendi88.blogspot.com 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, agar lebih mudah silahkan anda upload file tersebut ke google pages. Belum tahu cara upload file ke google pages? hihihi..... sok atuh baca dulu tulisan Dede Efendi yang ini!. 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. 
   
   
4. Klik Edit HTML.



5. 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://halamanwebmu.googlepages.com/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://halamanwebmu.googlepages.com/ssmItems.js" language="JavaScript1.2"></SCRIPT>



6. Gantilah kode yang berwarna merah dengan kode milik anda (file yang tadi di upload).



7. Klik tombol SIMPAMN TEMPLATE.



8. Selesai. Silahkan lihat hasilnya.

Selamat mencoba!

Buat Tulisan Bergaya Web 2.0 Secara Online

Mau buat tulisan bergaya web 2.0 yang ciamik tapi tidak mempunyai software pengolahnya? atau punya softwarenya namun bingung cara buatnya? atau sedang malas dan ingin yang instant? bagaimana kalau coba membuatnya secara online yang dengan satu menit saja tulisan anda sudah bisa di nikmati, misalkan tulisan yang seperti ini :

Jika anda mau mencobanya, silahkan coba di http://web2.0stylr.com. Anda tinggal tulis yang anda mau kemudian klik tombolnya dan jadilah tulisan anda bergaya web2 yang ciamik abis.

Masih bingung cara bikinnya? duuuuhhh.... ya udah deh saya tuliskan cara membuatnya.

1. Silahkan kunjungi situsnya.



2. Tuliskan kata-kata yang ingin anda buat di bawah tulisan Logo Text. contoh : Kang Rohman



3. Klik drop down menu di bawah tulisan Logo Font untuk memilih style dari hurup yang di iginkan.



4. Tulis alamat URL untuk gambar icon di bawah tulisan URL For Icon Image (Optional) jika mau.



5. Tulis alamat URL web atau blog anda di bawah tulisan Your URL Jika mau.



6. Pilih warna awal yang di kehendaki di bawah tulisan start gradient.



7. Pilih warna akhir yang di kehendaki di bawah tulisan end gradient.



8. Pilih Gradient Blend type nya di bawah tulisan Gradient Blend Type.



9. Pilih warna background yang di kehendaki di bawah tulisan bgcolor.



10. Klik tombol bertuliskan Web 2.0 Styl It!. Tunggu beberapa saat.



11. Klik kanan pada tulisan yang sudah jadi (di sebelah kanan), kemudian pilih Save Image As... jika anda memakai FF browser atau Save Picture As... jika anda memakai internet explorer.



12. Simpan pada komputer anda.



13. Silahkan upload gambar tersebut (karena tulisan yang anda buat sebenarnya adalah sebuah gambar) pada image hosting yang biasa anda pakai.
14. Silahkan tampilkan di blog anda agar blog anda tampak lebih ciamik...



15. Selesai.

Install Emoticon more-smilies Cosa Aranda ke Editor Posting

Duh apalagi ya? bagai mana kalau yang ini atau yang ini sudah pasti kenal kan? hehehe... jika anda pengunjung setia blognya mas cosa aranda so pasti kenal deh dengan emoticon di atas. ini nih emoticon lainnya yang lutu-lutu banget :





Kalau anda ingin emoticon tersebut bisa langsung muncul pada mesin editor posting blogger, maka silahkan ikuti langkah-langkahnya. Namun ini hanya berlaku untuk browser firefox dan tidak berlaku untuk browser internet explorer ataupun browser lainnya, karena script yang di gunakan adalah user script untuk grease monkey yang notabene hanya ada pada browser firefox. bagi anda yang sudah memasang yahoo emoticon atau onion emoticon seperti postingan yang ini, maka caranya sangat mudah yaitu tinggal klik di sini lalu klik install dan selesai sudah, emoticon yang lutu-lutu tadi akan langsung mampang pada editor posting blogger anda. Tapi ingat, pada saat anda membaca tutorial ini anda harus menggunakan browser fire fox bukan yang lain.

Bagi anda yang belum pernah menginstall emoticon yang sebelumnya, silahkan ikuti tutorial lengkapnya di bawah ini :

1. Download firefox.



2. Jika sudah di install tuh fire fox, lalu jalanin.



3. Lalu baca lagi postingan yang ini ( kan sudah di bilang bahwa pas baca tutorial ini harus pake fire fox)



4. Install Greasmonkey di sini.



5. Klik script ini, lalu kemudian klik install.



6. Silahkan login ke account blogger mu.



7. Klik Layout.



8. Klik tab Edit HTML.



9. Lihat ke bagian kode CSS, dan temukan kode seperti ini ]]></b:skin>.



10. Copy lalu paste kode berikut ini dan tempatkan di atas kode ]]></b:skin>.


img.emoticon {
padding: 0;
margin: 0;
border: 0;
}


11. Klik tombol Simpan Template.

Jika anda sudah melakukan langkah-langkah di atas, silahkan coba ke editor untuk posting dan anda akan melihat editor posting mempunyai emoticon yang lucu-lucu, tapi ini hanya berlaku untuk browser firefox dan pada posisi compose saja.





Selamat ngakak sampai keluar air mata dech.

Cara membagi Dua Kolom Header

Sudah siap anak-anak , padahal banyak pembaca blog ini yang sudah bapak-bapak atau ibu-ibu, pak polisi juga suka baca juga lho, ya pak prie? (tapi kemana pak blognya, ko saya cari-cari jadi ga ada sekarang, di delete ya blognya), kalo anak mudanya sih banyak seperti eko priyanto yang kerjanya nge blog mulu ampe lupa pulang kerumah, trus juga oom sang guru blogger yang walaupun ilmunya segudang masih tetep mau silaturahmi ke blog ku ini, kemudian masenchipz yang rajin komentar, dan E..alahh.. ko jadi acara kirim-kirim salam kaya di raddio aza... ya wis lah kita kemmbali ke lapppppp... pokok bahasan atuh.. emangnya mas tukul yang suka kembali ke lappppp..top.
Yup... serius nih, dah download trus diupload templatenya kan? kalo sudah sok atuh di baca sajah trik atau cara membagi dua kolom header. Nih triknya kaya gini :

1. Login ke blogger dengan ID anda dong tentunya, jangan ID saya..ntar blog saya jadi berantakan lagi.
   
2. Klik Layout.
3. Klik tab elemen Halaman, maka anda akan melihat tampilan format kolom header anda seperti ini :

4. Jika sudah di lihat, kemudian klik tab Edit HTML, lihat ke bagian kode CSS, lalu cari kode seperti ini :
/* Header =================================== */ #header-wrapper { width:900px; margin:0 auto 0px; background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center; height:190px; } #header-inner { width:900px; background-position: center; margin-$startSide: auto; margin-$endSide: auto; } #header { margin: 0px; text-align: left; color:$pagetitlecolor; }
5. hapus kode di atas, lalu ganti dengan kode berikut ini :
/* Header =================================== */ #header-wrapper { width:900px; margin:0 auto 0px; background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center; height:190px; } #head-inner { width:600px; background-position: left; margin-left: auto; margin-right: auto; float:left; } #header { margin: 0px; text-align: left; color:#ffcc66; } #r_head{ width:300px; float:left; padding-top:10px; }
6. Coba scroll ke bagian bawah, dan temukan kode seperti ini :
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/> </b:section> </div>
7. Hapus kode di atas, lalu ganti dengan kode di bawah ini :
<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/> </b:section> </div> <div id='r_head'> <b:section class='header' id='header2' preferred='yes'/> </div> </div>
8. Klik tombol Simpan Perubahan.
9. Selesai.

Untuk melihat hasilnya, silahkan anda klik lagi tab Elemen Halaman dan anda akan melihat format kolom header anda menjadi seperti ini :




Kolom header anda sudah menjadi dua bagian, yang sebelah kiri dan sebelah kanan. Trus bagaimana kalau sudah begitu? ya terserah anda, kolom sebelah kanan saya buat menjadi elemen layaknya yang ada di sidebar, jadi mau di masukan seach engine, mau iklan, mau gambar, ya terserah yang masukin.

Ya udah, cukup..cukup..dan cukup... soalnya jari saya sudah mulai pegal-pegal gara-gara ngetik mulu dari tadi... sampai ketemu lagi deh pada tutorial berikutnya.

Pasang Iklan Kliksaya.com di Bawah Read More

Apabila pada postingan terdahulu kang rohman mencoba untuk membahas bagaimana cara memasang iklan Google Adsense di bawah postingan, maka pada posting yang ini kang rohman akan membahas pertanyaan bagaimana cara memasang iklan di bawah Read more atau Selengkapnya. Agar tidak tidak terlalu melebar, maka iklan yang akan di jadikan contoh adalah iklan dari situs Kliksaya.com.

Karena topik yang di usung adalah memasang iklan di bawah Read more atau Selengkapnya, maka sudah barang tentu template anda harus memakai sistem ini, masih belum tahu cara membuat read more? silahkan di baca dulu atu di sini. Berbeda dengan kode iklan dari google adsense yang apabila di pasang pada template blogger harus di parse terlebih dahulu, maka kode iklan dari kliksaya.com tidak perlu di parse dahulu atau dengan kata lain langsung di pasang saja. Sudah tidak sabar, yuk kita mulai saja dech.

Sebagai contoh, kode iklan yang akan di pasang adalah seperti ini :


<!-- Begin: KlikSaya.com -->
<script src='http://scr.kliksaya.com/js-ad.php?zid=221' type='text/javascript'>
</script>
<!-- End: KlikSaya.com -->



Langkah-langkahnya adalah sebagai berikut :

1. Silahkan login ke blogger dengan ID anda.



2. Klik Layout.



3. Klik tab Edit HTML.



4. Klik tulisan Download Template Selengkapnya



5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula



6. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :
   
   
7. Tunggu beberapa saat ketika proses sedang berlangsung



8. Silahkan anda cari kode berikut pada kode template milik anda (dengan asumsi template anda sudah terpasang sistem readmore) :



<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>




9. Tambahkan kode iklan kliksaya.com milik anda seperti ini :



<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a>

<br /> <br />
<!-- Begin: KlikSaya.com -->
<script src='http://scr.kliksaya.com/js-ad.php?zid=221' type='text/javascript'>
</script>
<!-- End: KlikSaya.com --> </p>

</b:if>




10. Klik tombol Simpan Template.



11. Selesai. Silahkan lihat hasilnya.

Tambahan saja, kode iklannya bisa di ganti apa saja bisa iklan google adsense atau iklan yang lainnya, atau bisa juga di ganti dengan kode banner affialiasi atau kode social bookmarking.

Selamat mencoba!

Pasang Iklan Google Adsense di Bawah Posting

Setelah sekian lama absen dari aktivitas blogging, akhirnya kang rohman mencoba kembali untuk posting tutorial. Entah kenapa akhir-akhir ini kang rohman sedikit kurang semangat untuk membuat tulisan, apalagi jika membuat artikel tutorial yang sudah barang tentu harus memuat kode ataupun script yang dalam menuliskannya perlu waktu banyak sehingga sangat membosankan. Apakah kang rohman sudah kehabisan bahan untuk posting? jika di bilang kehabisan bahan posting jawabannya adalah tidak, karena di antara para pengunjung banyak sekali yang mengajukan pertanyaan, dan dari pertanyaan tersebutlah sebenarnya bahan inspirasi kang rohman, namun memang dasarnya kang rohman sedang kurang semangat untuk ngeblog, jadi ya nunggu mud nya muncul dulu baru nanti satu-satu kang rohman jawabin.

Melihat dari pertanyaan-pertanyaan yang ada, yang paling sering di tanyakan adalah bagaimana cara memasang iklan Google Adsense di bawah posting? Duh fenomenal sekali ya Google Adsense, segala sesuatu yang sekiranya sedikit asing dan menarik dan belum di ketahui pasti banyak yang berburu informasi tentangnya ...ck...ck...ck...

S ebenarnya pemasangan kode di akhir postingan yang nanti akan kang rohman terangkan, tidak khusus untuk iklan Google Adsense saja namun bisa juga di ganti dengan iklan-iklan lainnya semisal iklan dari Kliksaya.com, Adbrite, Bidvertiser, dan juga iklan-iklan lainnya yang ingin di pasang di akhir postingan termasuk juga memasang banner-banner affiliasi ataupun tombol banner social bookmarking, namun itu tadi karena Google Asense yang fenomenal maka judul postingan ini lebih sfesifik untuk memasang iklan google adsense.

Yang pertama perlu di ketahui yaitu kode iklan Google Adsense tidak bisa di pasang langsung ke dalam kode template blogger. Mungkin sudah banyak di antara anda yang pernah mencoba memasukan kode iklan google adsense kedalam kode template di bagian Edit HTML, namun hasilnya selalu muncul pesan error seperti ini :

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching "[xX][mM][lL]" is not allowed.

Trus bagaimana bisa kang rohman memasang iklan GA langsung di bawah posting? agar hal itu bisa di lakukan, sebelum kode iklan GA di pasang pada kode template anda, terlebih dahulu harus di Parse. Apa yang di maksud dengan parse? yang di maksud dengan parse di sini adalah anda harus mengubah kode yang akan di tambahkan, misalkan kode iklan Goggle adsense seperti ini :


<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxx";
google_ad_slot = "0976076963";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>


Tugas anda adalah kode di atas tadi harus di parse dulu yaitu menjadi seperti ini :


<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxx";
google_ad_slot = "0976076963";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>


Duh bingung banget ya memparse kode iklan GA? tidak usah bingung, karena ada banyak situs yang menyediakan tool yang dapat memparse kode iklan GA anda dengan sekali klik saja, salah satu contoh situs yang menyediakan tool ini adalah http://blogcrowds (sok atuh di klik biar keluar situsnya), anda tinggal masukan kode iklan Ga anda ke dalam kotak parse yang tersedia (di copy paste aja biar cepet) kemudian tinggal klik saja tombol parse dan twewewwwweeewwww... kode iklan GA anda sudah di parse dan siap untuk di pasang pada kode template anda.

Apakah boleh kita memparse kode iklan GA? kan TOS GA menyebutkan bahwa kita tidak di perbolehkan mengubah atau menambah atau mengurangi kode iklan GA yang di berikan? Nah ininih, silahkan tanyakan sendiri ke pihak google adsense, dan musti di ingat bahwa kang rohman tidak bertanggung jawab atas segala sesuatu pada account anda. Jika menurut kang rohman sendiri tidak apa-apa karena tidak mengubah struktur kode adsense, akan tetapi hanya di parse saja, dan untuk kasus ini pernah juga ada yamg mengirim email kepihak GA, silahkan baca di ini, dan jawaban dari pihak GA adalah boleh selama tidak ada penambahan kode apapun, akan tetapi walaupun demikian kang rohman sarankan untuk mengirim email sendiri ke pihak google adsense agar lebih yakin.

Setelah sedikit berbelit-belit, sekarang saatnya masuk ke bahasan utama yaitu memasang kode iklan GA di bawah postingan. Yang pertama yaitu anda di sarankan untuk memasang sistem read more yang telah Dede Efendi terangkan di sini, jika template anda sudah memakai sistem tersebut, silahkan ikuti langkah-langkah berikut :

1. Silahkan signin ke blogger dengan ID anda.
   
2. Klik layout.
   
3. Klik tab Adit HTML.
   
4. Klik tulisan Download Template Selengkapnya.
   
5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
   
6. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :
   
   
7. Tunggu beberapa saat ketika proses sedang berlangsung
   
8. Silahkan anda cari kode berikut pada kode template milik anda (dengan asumsi template anda sudah terpasang sistem readmore) :
   
   
   <b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>
   
9. Tambahkan kode iklan google adsense milik anda seperti ini (kode Ga nya harus yang sudah di parse) :
   
   
   <b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>

<br /> <br />
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-xxxxxxxxxxx&quot;;
google_ad_slot = &quot;0976076963&quot;;
google_ad_width = 468;
google_ad_height = 60;
//--&gt;
&lt;/script&gt;
&lt;script
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot; type=&quot;text/javascript&quot;&gt;
&lt;/script&gt;
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>
   
10. Klik tombol Simpan Template.
    
11. Selesai. Silahkan lihat hasilnya.

Keterangan tambahan, kode iklan di atas tentu saja hanya sebagai contoh saja, silahkan di ganti dengan kode iklan milik anda sendiri. Untuk kode iklan tidak harus iklan google adsense tapi bisa juga kode iklan lainnya seperti iklan bidvertiser, adbrite, kliksaya.com, kumpul blogger, atau banner-banner affiliasi lainnya.

Selamat mencoba!