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 »

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 >> 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 ]]>

:

#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 »

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 MEMBUAT KODE HTML UNTUK BERTUKAR LINK

Informasi Bisnis Online

Cara Membuat Script/kode tukar link atau link exchange
atau blogroll di blog/Web


 

Bagi rekan netter, kini bertukar link juga bisa untuk meningkatkan page rank
blog/web anda. Terkadang kita merasa kesulitan untuk melakukan tukar link
tersebut karena anda harus copy/paste link blog dari blogger lain ke blog anda.

Mau Tukar Link? Copy/paste code HTML berikut ke blog anda.

<a href="http://linkmatic.blogspot.com" target="_blank"><img border="0" alt="Tips, Triks AdSense, Tutorial Blog, Tutorial SEO, Download Template Blogger, cara membuat blog, daftar google adsense, bisnis internet, pusat bisnis online, pulsa murah" src=" http://i653.photobucket.com/albums/uu258/k12tronik/k12tronik.gif "/></a>

Dengan memasang widget seperti contoh diatas, anda bisa membantu blogger lain
agar lebih mudah dalam bertukar link. Mereka tinggal copy/paste script blogroll tersebut sidebar blog mereka atau bisa juga ditempatkan kebagian lain pada blog. Anda bisa sesuaikan sesuai dengan kebutuhan tampilan blog anda.
Bagaiman cara membuat script tukar link? Nah, ini dia cara membuat script/kode tukar link atau link exchange atau blogroll di blog/web. Ikuti langkah-langkah berikut :

1. Browsing ke http://cooltext.com
2. Pada menu sebelah atas klik Logos, hingga muncul seperti pada gambar
    dibawah ini:

3. Pilih/klik logo yang anda suka
4. Logo dibagi atas dua bagian yaitu sebelah kanan dan kiri. Silahkan anda
    melakukan pengaturan atau desain sesuai dengan kebutuhan anda.
5. Klik pada Image Width untuk mentukan ukuran logo, jika sudah selesai
    klik tombol Render Logo. Tunggu beberapa saat sampai proses membuat logo
    selesai, seperti gambar dibawah ini.

6. Klik Download Image untuk langsung menyimpan logo/image ke hardisk
    atau flashdisk anda. Get HTML Code untuk mendapatkan script, akan
    tetapi anda diminta untuk register terlebih dahulu.
    sebaiknya pilih cara pertama saja Klik Download Image.

7. Berikutnya tugas anda adalah menyimpan file logo tersebut ke harddisk online
    atau penyimpanan online. Misalnya :
7. Berikutnya tugas anda adalah menyimpan file logo tersebut ke harddisk online
    atau penyimpanan online. Misalnya : http://www.photobucket.com, jika belum
    punya silahkan register dulu. Ambil kode HTML yang pendek, karena terdapat
    banyak pilihan kode HTML yang tersedia, pilih pilihan paling bawah seperti contoh :
    http://i653.photobucket.com/albums/uu258/k12tronik/k12tronik.gif

8. Login ke akun blogger anda, klik Tata Letak, Element Halaman, Tambah Gadget,
    HTML/JavaScript, klik tombol + (tambah). Lalu copy/paste script dibawah ini ke
    sidebar blog atau bisa juga dibuat posting khusus untuk bertukar link seperti ini.

Berikut Contoh Script yang yang bisa dipakai untuk menampilkan widget tukar link pada blog/web anda :

Mau Tukar Link? Copy/paste code HTML berikut ke blog anda

http://linkmatic.blogspot.com/
" target="_blank">Tips & Tutorial" src="http://i653.photobucket.com/albums/uu258/k12tronik/k12tronik.gif" border="0" />

<a href="</font><font color="#0000FF" size="2">http://linkmatic.blogspot.com</font><font color="#000000" size="2">" target="_blank"><img border="0" alt="</font><font color="#FF00FF" size="2">Tips, Triks AdSense, Tutorial Blog, Free Download E-Book, Bisnis Penghasil Dollar, cara buka Paypal/Alertpay, tips google adsense, bisnis internet, pusat bisnis online, pulsamurah</font><font color="#000000" size="2">" src=" </font><font color="#87A002" size="2"> http://i653.photobucket.com/albums/uu258/k12tronik/k12tronik.gif</font><font color="#000000" size="2"> "/></a>




Keterangan:
Ganti yang warna Biru dengan URL blog dan descripsi blog anda, Warna merah judul image anda sedangkan yang warna hijau ganti dengan URL logo/image tempat anda menyimpan image yang baru saja anda simpan di http://www.photobucket.com

Ketika dipasang di sidebar blogger/Website hasilnya akan terlihat seperti ini:

Mau Tukar Link? Copy/paste code HTML berikut ke blog anda.

<a href="http://linkmatic.blogspot.com" target="_blank"><img border="0" alt="Tips, Triks AdSense, Tutorial Blog, Free Download E-Book, Bisnis Penghasil Dollar, cara buka Paypal/Alertpay, tips google adsense, bisnis internet, pusat bisnis online, pulsamurah" src=" http://i653.photobucket.com/albums/uu258/k12tronik/k12tronik.gif "/></a>


9. Bagaimana Mau Mencoba? Salam Sukses.

Read more »

MEMBUAT WIDGET SEARCH / PENCARIAN KATA DI BLOG / WEB /BLOGGER

 Saya yakin temen-temen semua pasti sudah tidak asing lagi dengan yang namanya search box. Karena kita rata-rata mencari alamat website atau informasi dengan tool ini.

Secara singkat, search box adalah sebuah tool yang digunakan untuk mencari data-data atau alamat website dengan memasukkan kata kunci yang ingin kita cari. Namun search box atau kotak pencari yang biasa kita gunakan hanya memungkinkan kita untuk mencari data di mesin pencari seperti Google, Yahoo, dan MSN. Lalu bagaimana kalau kita ingin mencari data hanya pada blog kita saja?

Mungkin sekarang sudah banyak template yang sudah disediakan kotak pencari atau search box. Tapi bagi template yang tidak dilengkapi dengan fasilitas ini. Anda juga bisa memasangnya sendiri dengan cara sebagai berikut:

1. Login ke Blogger. Klik menu Design -&gt; Page Elements. Lalu klik pada Add a Gadget.

2. Klik Add a Gadget -&gt; HTML/Java script


3. Masukkan kode dibawah ini kedalam kotak dan klik Save

ALAMAT URL BLOG

/search" style="display:inline;" method="get"&gt;
NAMA KOTAK


Ganti ALAMAT URL BLOG dengan alamat URL blog Anda. Misalnya, http://creatingwebsite-maskolis.blogspot.com dan ganti NAMA KOTAK dengan nama yang ingin Anda tampilkan pada kotak. Misalnya, Cari &gt;artikel disini, Cari disini, dan lain-lain.

4. Jika sudah selesai, klik Save lalu klik View Blog untuk melihat tampilannya di blog.


Jika Anda merasa kotaknya terlalu panjang atau pendek. Anda bisa mengubah ukurannya dengan mengganti nilai pada size. Anda juga bisa mengganti nama tombol Search dengan nama lain misalnya, Cari atau lanjut. Sebagai contoh, saya mengganti "size=30" dan "value=cari" maka hasilnya akan seperti yang dibawah ini.

Semoga bermanfaat

sumber : www.maskolis.com

Read more »

membuat kode HTML UNTUK TUKAR LINK

Pada postingan kali ini saya akan membahas seputar tips blog lainnya. Hal ini karena banyak dari teman2 saya menanyakan kenapa tips blog-nya masih sedikit.
Pada tips blog yang akan dibahas ini akan dibahas cara Membuat Kotak Tukar Link. Tukar link atau dengan istilah kerennya Links Exchange adalah salah satu cara meningkatkan pagerank atau jumlah kunjungan ke blog kita.
Terkadang kita merasa kesulitan untuk melakukan tukar link tersebut karena anda harus copy/paste link blog dari blogger lain ke blog anda.
Mau Tukar Link? Copy/paste code HTML berikut ke blog anda

<a href=”http://supriatno.blogdetik.com” target=”_blank”><img border=”0″ alt=”Belajar Dengan Menulis” src=” <a href="http://images.cooltext.com/929532.gif" title="http://images.cooltext.com/929532.gif" target="_blank">http://images.cooltext.com/929532.gif</a> ”
Dengan memasang widget seperti contoh diatas, anda bisa membantu blogger lain agar lebih mudah dalam bertukar link. Mereka tinggal copy/paste script blogroll tersebut sidebar blog mereka atau bisa juga ditempatkan kebagian lain pada blog. Anda bisa sesuaikan sesuai dengan kebutuhan tampilan blog anda.
Bagaiman cara membuat script tukar link? Nah, ini dia cara membuat kotak tukar link atau link exchange atau blogroll di blog/web . Ikuti langkah-langkah berikut :
1. Browsing ke http://cooltext.com
2. Pada menu sebelah atas klik Logos,
3. Pilih/klik logo yang anda suka
4. Logo dibagi atas dua bagian yaitu sebelah kanan dan kiri. Silahkan anda
melakukan pengaturan atau desain sesuai dengan kebutuhan anda.
5. Klik pada Image Width untuk menentukan ukuran logo, jika sudah selesai klik tombol Render Logo. Tunggu beberapa saat sampai proses membuat logo selesai, seperti gambar dibawah ini.

6. Klik Download Image untuk langsung menyimpan logo/image ke hardisk atau flashdisk anda. Get HTML Code untuk mendapatkan script, akan tetapi anda diminta untuk register terlebih dahulu. Silahkan register dulu.

7. Tahap selanjutnya adalah login ke acount blog anda, saya ambil contoh blogdetik, pada menu Dashboard, klik widget, pilih Text, lalu pada Text tersebut klik Edit. Lalu copy/paste script dibawah ini ke sidebar blog atau bisa juga dibuat posting khusus untuk bertukar link seperti ini.
Berikut Contoh Script yang yang bisa dipakai untuk menampilkan widget tukar link pada blog/web anda :
Mau Tukar Link? Copy/paste code HTML berikut ke blog anda
<p>Mau Tukar Link? Copy/paste code HTML berikut ke blog anda</p>
<p><a href=”http://supriatno.blogdetik.com/” target=”_blank”><img alt=”Belajar Dengan Menulis” src=”http://images.cooltext.com/846202.gif ” border=”0″ /></a></p>
<p><textarea rows=”3″ cols=”20″><a href=”http://supriatno.blogdetik.com” target=”_blank”><img border=”0″ alt=”Belajar Dengan Menulis” src=”http://images.cooltext.com/863910.gif ” ></a></textarea></p>
Keterangan:
Ganti yang warna Biru dengan URL blog dan descripsi blog anda, Warna merah judul image anda sedangkan yang warna hijau ganti dengan URL logo/image tempat anda menyimpan image yang baru saja anda download di http://cooltext.com. Lalu Klik DONE, dan Save
Ketika dipasang di sidebar blogger/Website hasilnya akan terlihat seperti ini:
Mau Tukar Link? Copy/paste code HTML berikut ke blog anda

<a href=”http://supriatno.blogdetik.com” target=”_blank”><img border=”0″ alt=”Belajar Dengan Menulis” src=” <a href="http://images.cooltext.com/929532.gif" title="http://images.cooltext.com/929532.gif" target="_blank">http://images.cooltext.com/929532.gif</a> ”
9. Bagaimana Mau Mencoba? Salam Sukses.
Jangan lupa kalau sudah sukses kita tukaran links biar menambah teman baru atau KLIK DISINI untuk keterangan bagaimana caranya tukaran link dengan blog saya
Semoga tips sederhana Membuat Kotak Tukar Link ini bisa membantu anda. Dan dapat mempererat tali silahturahmi antar blogger lainnya. Jangan lupa juga untuk blogwalking ke blog teman, dan minta blog teman untuk menaruh blog kita

Read more »