CONTOH SITEMAP OTOMATIS DI BLOGGER / BLOGSPOT

Nah ini dia contoh sitemap blogger / blogspot sobat yang di buat dengan kode sitemap otomatis , jadi untuk menuliskan sitemat gak susah susah lagi yaa, karena sitemap di bogger bida di buat otomatis dan mudah

Read more »

CARA MEMBUAT FORM YANG MUDAH PADA BLOG / WEB /WORDPRESS

Info contact atau kontak memang sebaiknya dipasang oleh blogger di blognya. Hal ini untuk menjalin percakapan yang lebih personal dari pengunjung blog kepada pemilik blog. Salah satu caranya adalah menampilkan alamat email. Dengan demikian pembaca blog yang ingin menghubungi blogger akan lebih mudah. Tetapi ada yang lebih mudah digunakan selain hanya menampilkan alamat email, yaitu membuat Contact Form.










Contact Form adalah formulir yang untuk mengirimkan pesan kepada kita (blogger). Orang bisa dengan mudah untuk mengirim pesan, tinggal menulis nama, alamat emailnya dan mengetik pesan. Jadi tidak perlu repot untuk login ke akun email, bisa mengirim atau menghubungi dari blog kita sendiri.

Untuk membuat Contact Form kita dapat memfaatkan penyedia contact form gratis, Kontactr, My Contact Form, dan Email Me Form. Sebenarnya hampir sama tetapi kali ini Belajar Ngeblog di BLOG akan membahas satu saja, yaitu Kontactr.

Cara mendaftarnya cukup mudah, kunjungi http://kontactr.com lalu lakukan registrasi, setelah itu akan dikirim konfirmasi ke email kamu untuk mengaktifkan akun, dan akhirnya bisa login ke Kontactr. Jangan lupa, email yang kamu gunakan adalah emailmu sendiri yang aktif dan sering digunakan.

Setelah login ke Kontactr kita akan langsung disuguhi kode HTML atau Java Script untuk menampilkan Contact Form ataupun Button, seperti gambar di atas. Untuk menampilan Contact Form kita gunakan kode yang AJAX Widget, kita bisa mengkostumisasi tampilan warna agar sesuai dengan tampilan blog kita.

Cara Membuat Contact Form di Blog

1. Login ke akun blogger.com lalu buat post, entri ataupun halaman baru.
2. Beri judul Entri Baru itu,misalnya; "Contact Me", "Hubungi Saya", dll.
3. Saat menulis pilih HTML, bukan Compose. Supaya kodenya bisa bekerja
4. Masukan kode dari Kontactr, untuk bentuk form pakai yang AJAX Widget atau yang sudah kamu kostumisasi.
5. Untuk mencoba melihat hasilnya pilih Compase dan klik Pratinjau atau Preview.
6. Jika sudah Oke, lalu klik Publikasikan.

Selesai, dan kamu sudah memiliki Contact Form. Pasang link dari Entri atau Post Contact tersebut di menu blogmu, misalnya di menu header. Kamu juga bisa tidak perlu membuat form di atas, hanya memakai Button. Ada dua pilihan yaitu K-Box dan Normal Link. Untuk yang button ini lebih canggih gunakan saja yang K-Box, sedangkan kalau normal link adalah button untuk mengarahkan ke halaman Contact di Contact Form

Button Contact ini lebih cocok dipasang di sidebar blog, caranya adalah saat di dasbor blogger.com pilih Tata Letak, lalu Tambahkan Gadget dan pilih HTML/Java Script kemudian masukan kode button dari Kontactr. Siapa tahu dengan membuat atau memasang contact kamu bisa menemukan jodoh atau rejekimu dari blog :)

Read more »

CARA BUAT ALEXA WIDGET DALAM BLOG / WEB / WORDPRESS

Alexa widget adalah widget yang berfungsi untuk memantau perkembangan, mulai dari analisis lalu lintas, kata kunci dan peringkat blog anda.Semakin kecil numerik rank alexa anda maka situs anda semakin baik. 

Sebelum kita menuju ke langkah Bagaimana Memasang Widget Alexa Rank Dalam Blogger, bagi anda yang tidak mendaftarkan blog Anda di situs alexa.com, Anda harus terlebih dahulu mendaftarkan blog Anda. Jika Anda sudah mendaftarkan blog Anda ke situs web alexa.com maka Anda siap untuk dapat menambahkan widget alexa rank di blog Anda. 

Dan berikut adalah langkah-langkah untuk instalasi Widget Alexa Rank di Blogger: 

• Pertama masuk ke Alexa Traffik Widget Klik disini
• Kemudian dalam kotak kosong kita isikan nama domain website atau blog kita. Contoh: www.googletrick.blogspot.com/

Untuk Jenis widgetnya bisa dilihat di sebelah kanan

• Setelah anda isi kemudian klik build widget dan setelah itu akan ada kode kode widget tersebut lalu anda copy

Nah untuk memasangnya di blog sangat mudah sekali.

• Masuk Dashboard dan klik Tata Letak
• Kemudian Add a gadget dan pilih HTML/Javascript dan paste kan kode tadi

selesai deh, gimana gan mudah kan oh iya berhubung postingan ini tentang alexa, kita saling review alexa yuk silahkan klik banner diatas untuk mereview situs saya, jika sudah jangan lupa di comment yah nanti saya akan balik review blog anda :D

lha itukan cara masang ALEXA WIDGET DALAM BLOGSPOT / BLOGGER, nah kalau cara buat

Widget Alexa di Blog WordPress.com, gimana  ?   tenang nih langkahnya ada di bawah

Cara Memasang Widget Alexa di Blog WordPress.com

Cara memasang widget alexa di blog WordPress.com ? Bisa gak ya?? Bisa! Tu… buktinya dipojok blog saya ada widget alexa. Tapi waktu kita ambil kodenya di alexa.com kok JavaScript? Bukannya di WordPress.com anti yang namanya JavaScript? Tapi katanya juga ada kode HTML-nya? Langsung saja deh… daripada saya dikira gila ngomong sendiri.

Tapi sebelumnya sedikit tentang alexa. Alexa adalah nama situs sekaligus perusahaan penyedia jasa informasi tentang trafik internet yang sekarang sedang populer dan para pemilik blog banyak berlomba-lomba untuk memasang widgetnya. Semakin tinggi rank Alexa suatu blog, semakin tinggi pula standar yang ditetapkan bila kita mengikuti program review.

Langkah-langkah memasang widget Alexa di WordPress.com :

• Pergi ke situsnya alexa atau langsung ke http://www.alexa.com/siteowners/widgets untuk mengambil kodenya.
• Isikan Url blog WordPress.Com anda pada kotak Alexa Site Stats Button atau Alexa Traffic Rank Button sesuai keinginan anda.
• Kemudian masukkan alamat blog anda di kotak widget yang anda pilih.
  a. Untuk widget Alexa Site Stats Button
  (co: www.bloganda.wordpress.com).
  b. Untuk widget Alexa Traffic Rank Button
  (co: bloganda.wordpress.com)
• Dan klik tombol ‘Build Widget’.
• Copy dulu di notepad kode JavaScript hanya yang alamat blog anda seperti yang dicetak merah.
  contoh kode :
  <SCRIPT type=’text/javascript’ language=’JavaScript’ src=’http://xslt.alexa.com/site_stats/js/t/b?url=katabijak.blogspot.com/’></SCRIPT>
• Jangan anda tutup dulu halaman alexa tersebut.

Kemudian untuk mengubah kode JavaScript diatas agar bisa memasang widget alexa di blog WordPress.com yang kita perlukan tinggal alamat gambar dari widget alexa yang telah anda pilih tadi. Berikut caranya :

• Kembali ke halaman alexa sewaktu kita mengambil kode tadi.
• Letakkan kursor mouse pada gambar widget alexa yang anda pilih tadi, kemudian klik kanan pada mouse anda dan klik ‘Properties’ atau ‘Copy image location’ (tergantung dari web browser anda).
• Kemudian paste-kan alamat gambar alexa tadi di notepad dulu.
  Contoh alamat gambar dari kode widget diatas:

http://xsltcache.alexa.com/site_stats/gif/s/a/ZHVuaWFiZWxhamFyYmxvZy5jb20=/s.gif

• Kemudian kita gabungkan kedua alamat tersebut menjadi sebuah link gambar agar widget alexa bisa dipasang di blog WordPress.com.

<a href=”http://www.alexa.com/data/details/main?url=http://distributormelilea.wordpress.com”>

<img src=”http://xsltcache.alexa.com/site_stats/gif/s/a/ZHVuaWFiZWxhamFyYmxvZy5jb20=/s.gif“/></a>

• Jadi deh kode widget alexa yang bisa kita pasang di blog WordPress.com dan gak kalah dengan yang JavaScript-nya.
• Kemudian copy-kan code yang telah dirubah tersebut ke widget ‘Text’ di blog anda.

Nah Sudah jadi deh widget alexa untuk blogspot atau blogger dan wordpressnya,, kalau ada pertanyaan di coment aja yaa

Read more »

CARA Menghilangkan "Buktikan Bahwa Anda Bukan Robot"

Menghilangkan "Buktikan Bahwa Anda Bukan Robot" Pada Saat Akan Menyimpan Sebuah Artikel

Apakah anda suka banyak memposting sebuah artikel ?. Anda tentunya tidak asing dengan munculnya

sebuah jendela "Buktikan Bahwa Anda Bukan robot" saat kita akan menyimpan sebuah artikel / postingan. Seperti gambar dibawah ini :

Penyebabnya ialah :

• Karena anda memposting artikel terlalu sering dalam waktu singkat.

Cara Mengatasinya :

• Logout beberapa saat. Lalu login blogger kembali.

Read more »

CARA CEPAT TER INDEX GOOGLE DENGAN SMART LINK SEO

Description: Cara Cepat Terindex Di Google Dengan Smartlink [SEO]Rating: 4.5Reviewer: haqul bahroni - ItemReviewed: Cara Cepat Terindex Di Google Dengan Smartlink [SEO]

SEO Blogger Pernah dengar plugin SEO smart link ? sebuah plugin untuk wordpress yg fungsinya mengubah setiap kata yang kita tentukan, menjadi sebuah link. Kini plugin tersebut dapat kita pasang juga di blogspot.

Semua kata "SEO" akan otomatis diconvert menjadi link

Akan tetapi sudah sejak tahun lalu script ini sudah tidak bekerja.

Tapi tenang dulu, sekarang scriptnya sudah diperbaiki berkat bantuan seorang teman, Ganda Manurung namanya. Beliau adalah salah seorang programmer indonesia terbaik. Beliaulah salah seorang sahabat blogger yang banyak memberikan saran2 bermutunya kepada juragan.

Terimakasih sekasih2nya kepada beliau. Ikuti tutorial memasang seo smart link plugin untuk blogspot/blogger dibawah ini.

Bagaimana cara kerja seo smart link untuk blogspot ini ?

Script ini akan membaca setiap kata pada setiap posting. Contohnya, jika sobat memasukkan kata "SEO" pada script tersebut maka otomatis pada semua halaman yang terdapat kata "seo" akan di link ke alamat url yang telah sobat tentukan.

Apakah script autolink ini melanggar google guidelines?

Tidak, selama jumlah link yang sobat masukkan pada kode autolink masih dalam tahap wajar. Rekomendasi juragan, cukup 1 link saja.

Bagaimana cara memasang kode autolink ini di blogspot sobat ?

• Step pertama, Login ke blogger.com lalu ke design(rancangan).
• Menuju tab edit html. Tekan ctrl+f di keyboard. Dan cari kode

 

Lihat kode scriptnya Dibawah Ini

• Setelah halaman script terbuka silahkan copy pastekan semua kode di script tersebut tepat diatas kode

Keterangan :

Lihat bagian paling akhir kode dan ganti SEO dengan kata atau kata kunci yang sobat pilih.

dibawahnya Ganti http://googletrick.blogspot.com/ dengan alamat url yang dituju.

Semoga berhasil !..

Read more »

MERUBAH RECENT POS MENJADI LABEL DI BLOGSPOT

MEMBUAT WIDGET RECENT POS MENJADI LABEL DI BLOGSPOT

DEMO

Slider ini hanya memakai innerfade jquery dan cycle jquery plugin untuk melembutkan perpindahan content slider (bener nggak ya...?), pengertian Innerfade jquery kira-kira seperti ini :

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

Source : medienfreunde.com

Wah malah bingung sendiri saya mas/mbak maklum Inggris saya dapat 6 dulu waktu sekolah, langsung saja pada cara pembuatannya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template &gt;&gt; Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]&gt;

:

#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvlNrMIRFom5T2jnHOtfVXh5PvLBs6W4kfbqgoVLTNeGeKwhRTVMyCodTk4JvSAj2s9DIw8H3LQU8p3qqpnz0ulE8N6TjBJsYpg4q6_RYx5ePUgUoPZN4b3bTdEsmRtUtP7ugRL7MLn04/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPBbLLq2s0tGB2ONaoxwc4Rxye_ptATzTO6R7dSKB4OBc-ypTZm73w__7Cgn6cT5mliMiRX8OO5qDeJD7pDmexQQ1cVJaigFVGkY3eOWaK9mZGQ83q4NS8ZaWQIEsSPPYzv_YDYFA2RLE/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}

Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode

:

Keterangan :

Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

Kode warna biru : 7 adalah jumlah slider yang ditampilkan. Sedangkan angka 340 dan 212 adalah panjang dan lebar image yang ada di slider.

Itu tadi tutorial membuat Slider image otomatis joss banget yang ada pada Johny Ganteng Banget, jika masih kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat sahur dan semoga bermanfaat.
sumber : www.maskolis.com

Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode
, kemudian letakkan kode berikut ini dibawahnya :

   

Jika Anda ingin menampilkan slider per kategori atau label tinggal ditambahkan saja kode diatas :

/feeds/posts/default?max-results

Menjadi :

/feeds/posts/default/-/your label?max-results

Silahkan ganti "your label" dengan kategori yang ingin Anda tampilkan pada slider.

Terakhir, save templates dan lihat hasilnya. 

Read more »

CARA POSTING BLOG LEWAT EMAIL

CARA POSTING BLOG LEWAT EMAIL

Semakin hari orang yang ngeblog (blogger) tak ingin susah dalam mengelola blognya, apalagi soal cara posting. Karena untuk mengumpulkan kata menjadi sebuah tulisan saja sudah semakin sulit, (baca: semakin malas mengupdate blog). Sehingga kini platform blog banyak memberikan tawaran yang memungkinkan banyak cara untuk posting ke blog, tidak harus login ke akun blognya.

CARA POSTING BLOG VIA EMAIL
Bisakah blog diupdate via email? Bisa. Teringat dengan posterous yang merupakan salah satu platform blog, memang tidak terlalu populer, karena kemudahan dalam posting yaitu bisa lewat email membuatnya banyak yang suka. Di blogger.com atau blogspot yang merupakan salah satu website yang masuk 10 besar di Indonesia versi alexa yang paling ramai, Blogger pun juga bisa diupdate via email.

Bagi yang sering ngubek-ngubek dasbor atau settingan blognya mungkin pernah menemukan. Tetapi yang belum tahu, Belajar Ngeblog di BLOG akan berbagi cara mengatur blognya agar bisa diupdate lewat email. Sehingga akan memiliki alamat email pribadi dan rahasia untuk memposting konten ke blognya.

Cara Update/Posting ke Blog lewat Email
1. Login ke akun blogger.com
2. Pilih Setelan lalu klik Seluler dan email
3. Di settingan Email, ketiak kata rahasia (scret word) untuk pelengkap alamat email

4. Selanjutnya ada pilihan segera publikasikan dll, jika ingin mengaktifkan pilih saja.
5. Jangan lupa Simpan setelah jika sudah selesai.

CARA POSTING BLOG DENGAN EMAIL
Sekarang kita sudah punya alamat email yang apabila kita mengirim ke alamat email tersebut akan segera dipublikasikan di blog. Misalnya alamat email itu, adminblogku.update@blogger.com, jika kita benar-benar mengaktifkan fitur ini jangan sampai alamat email itu dibagikan atau diberitahukan ke khalayak ramai, untuk menghindari hal yang tidak diinginkan. Kecuali jika ingin membuat blog keroyokan yang diupdate oleh beberapa orang.

Dibalik kemudahan dari update atau posting blog lewat ini tentu ada juga kekurangannya, diantaranya: Kita tidak bisa mengatur (Setelan entri) tersebut seperti label, atau meta tag description. Semoga tutorial sederhana ini memberikan pengetahuan baru dan bermanfaat. Jangan lupa update blogmu ya, dan hindari copy paste :)

 Tulisan ini di cari juga dengan term
CARA POSTING BLOG LEWAT EMAIL ,
CARA POSTING BLOG DENGAN EMAIL,
CARA POSTING BLOG VIA EMAIL
CARA POSTING BLOG OTOMATIS

Read more »

BUAT SPOILER TULISAN PADA BLOG / WEB

Blog | Fungsi spoiler Pada Blog

Membuat Spoiler | Cara Membuat Spoiler pada Blog | Fungsi spoiler pada blog


Spoiler sendiri fungsinya adalah untuk memperkecil postingan, kode script atau tulisan agar tidak makan tempat. Sebenarnya sobat juga bisa menggunakan menu dengan fungsi scroll atau bisa juga dengan menggunakan text area untuk menghemat tempat dalam penulisan kode script atau gambar. Oke langsung Saja

"Letakan script dibawah ini pada postingan sobat"


=======================================

Spoiler: 55px

; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">

Letakkan kode script, HTML dan teks anda disini









=====================================


Keterangan :

1. Untuk tulisan Open dan Close bisa sobat ganti sesuai keinginan.
2. Width : 55px untuk lebar spoiler.
3. Font-size: 11px untuk besar tulisan pada kotak spoiler.
4. Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan sobat.

Read more »

Cara Buat Kotak Scroll dengan HTML

Cara Membuat Kotak Scroll di Blog
Cara Membuat Kotak Scroll di Blog  - Kegunaan Kotak scroll adalah untuk menghemat tempat atau ruang penyimpanan pada blog seperti gambar, artikel pilihan, atau widget yang lainnya yang ingin menggunakkan kotak scroll agar menghemat ruang penyimpanan di blog, untuk cara membuat kotak scroll  tersebut silahkan sobat simak langkah di bawah ini.

Pertama Cara Membuat kotak scroll artikel pilihan dengan background yang biasa di simpan sidebar.
Kodenya seperti ini

1. simpan di sini Postingan yang ingin di tambahkan

Hasilnya seperti ini.

1. Cara Membuat Rating Bintang Rich Snippets
2. Membuat Kotak Pemasangan Iklan di Sidebar
3. Cara Membuat Komentar Facebook Berdampingan
4. Tutorial Cara Membuat Footer Tiga 3 Kolom Di Blogspot
5. Mengatasi Masalah Halaman Statis Karena Auto Readmore
6. Breadcrumbs Terindex Google
7. Memasang Fitur Reply Comments
8. Cara Membuat Recent Posts
9. Mengatur Jumlah Karakter Teks Readmore
10. Cara Membuat Contact Form
11. Cara Membuat Komentar Facebook Berdampingan Dengan Komentar Blog
12. Cara Membuat threaded Comment

Cara Membuat Kotak scroll gambar kodenya seperti ini.

Simpan gambar di sini sesuaikan ukuran gambar

Hasilnya seperti ini.

Demikian postingan saya Cara Membuat Kotak Scroll di blog, Cara Membuat kotak scroll dengan gambar, Cara membuat kotak scroll artikel pilihan semoga bermanfaat.

Read more »