Aneka Tutorial Pemrograman: Tutorial Blogspot

Showing posts with label Tutorial Blogspot. Show all posts

Jika Anda berkeinginan merubah tampilan blog anda agar lebih cantik dan terlihat seperti di Emboss jika dalam gambar yang kita edit pada Photoshop,maka itu bukan lah perkara atau hal yang sulit jika anda mengerti dalam penempatan kode Css yang saya berikan.

Kode CSS Inti nya adalah seperti di bawah ini :

untuk Warna bayangan kode nya adalah seperti ini :
box-shadow:0 0 20px #0f1;

untuk membuat garis di sekitar nya adalah seperti ini :

border:1px solid #fff;
(#fff = Putih - #000 = Hitam - #0f1 = Hijau )

Lengkap nya adalah sebagai berikut :

border:1px solid #fff; box-shadow:0 0 20px #0f1;

Nah.. kode yang berwarna hijau tersebut tinggal anda sisipkan saja di antara kode - kode pada setiap Kode Css yang ingin anda beri warna bayangan tersebut.

Seperti untuk menambah warna bayangan pada Post.

Kode awal nya adalah sebagai berikut :

/* -- Post -- */
.sidebar .widget {
padding:10px;
margin-bottom:5px;
}

Lalu anda sisip kan Kode yang berwarna Hijau tersebut di antara nya,seperti contoh berikut ini :

/* -- Post -- */
.sidebar .widget {
padding:10px;

border:1px solid #fff; box-shadow:0 0 20px #0f1;

margin-bottom:5px;
}

dan untuk Widget pun sama saja hal nya seperti di atas,jadi anda tinggal menyisipkan nya saja di antara kode CSS yang sudah ada,seperti berikut ini :

Untuk Halaman Web

/* Main
--------------------- */
.main-outer {
Sisipkan di sini
}

atau

Untuk Judul Blog

/* Header
--------------------- */
.header-outer {
Sisipkan di sini
}

Atau
Untuk Sebagian Halaman Blog

/* Content
-------------------- */
.body {
Sisipkan di sini
}

atau
Untuk Tab Menu

/* Tabs
-------------------- */
.tabs {
Sisipkan di sini
}

Atau untuk Widget

/* -- Widget -- */
.sidebar .widget {

border:1px solid #fff; box-shadow:0 0 20px #0f1;

margin-bottom:5px;
}

Jika Anda dalam menyisipkan penempatan Kode yang berwarna Hijau tersebut benar,Maka hasil nya nanti akan tampak seperti pada gambar di bawah ini,atau seperti pada Blog saya.

Oke Sobat Bogger.. Semoga yang saya share bisa berguna dan bermanfaat untuk kalan semua.. Tararengkiyu... Salam Bogger.

Tutorial Blogspot

Meningkatkan Pengunjung Blog dan Menghasilkan Dollar

Joe Patsatu

Meningkatkan Visitor atau Pengunjung pada Blog itu tidak mudah,selain Template yang di Gunakan harus SEO,dan juga materi atau isi dari Artikel atau Postingan nya harus Ringan,sehingga mudah di deteksi Oleh Search Engine.

Dan Selain dengan Template yang SEO serta Isi dari Artikel nya yang ringan,ada juga beberapa cara untuk meningkatkan Traffic Visitor atau pengunjung Blogs,salah satu nya dengan cara mengikuti Link-link yang memang menyediakan jasa untuk meningkatkan Visitor atau Pengunjung pada blog.

Disini saya coba menyarankan kepada anda untuk mengikuti atau Join dengan Web http://www.easyhits4u.com, cobalah anda Register pada Web itu,di dalam nya menyediakan Jasa untuk Meningkatkan Traffic Pengunjung.

Gambaran Screen Shot nya Sebagai Berikut :

Gambar.1

Gambar.2

Gambar.3

Gambar.4

Gambar.5

Jika Anda Mencoba Untuk Register,silahkan ikuti Petunjuk dari gambar-gambar tersebut di atas.. Selamat Mencoba...!!

Tutorial Blogspot

Merampingkan Traffic Alexa Rank Hingga 500rb sampai 1 Juta Dalam 1 Hari

Joe Patsatu

Untuk merampingkan Traffic Alexa Rank tidak mudah,berdasarkan pengalaman yang saya lakukan,ada beberapa hal yang saya lakukan,dan alhamdulillah dalam hitungan hari Traffic Alexa Rank saya mulai ramping hingga jutaan perhari nya,saya melihat hasil nya cukup memuaskan untuk Traffic Alexa Rank pada blog saya,yang awal nya saya register ke Alexa Rank berada pada posisi 10jt ke atas,hingga 9Jt - 8Jt - 6Jt - 5Jt dan terakhir saya membuat Postingan ini berada pada posisi seperti pada gambar di bawah ini.

Adapun Kiat - kiat yang saya lakukan dalam merampingkan Traffic Alexa Rank saya tersebut adalah sebagai berikut :

1. Sebelum nya anda Claim terlebih dahulu Web atau Blog anda pada Situs Alexa.com

2. kemudian Anda tempatkan kode "alexaVerifyID" untuk web atau Blog anda pada template - edit HTML di blog anda di bawah kode <head>,nampak seperti pada gambar di bawah ini.

3. Jika tahap 1 dan 2 seperti pada gambar tersebut di atas telah anda lakukan,selanjut nya anda masuk kembali ke Alexa.com untuk memverifikasi kode yang telah anda masukan ke dalam blog anda agar blog anda teregister pada Alexa Rank.

Jika anda klick "Verify My ID" kemudian keluar tanda centang hijau seperti pada gambar di atas,berarti blog anda sudah terdaftar pada Alexa Rank.

4. setelah semua tahap di atas anda lakukan,kemudian tempatkan Widget Alexa pada Blog anda.

tidak usah malu menempatkan Widget Alexa Rank pada blog anda karena Traffic Rank blog anda pada Alexa masih 10 juta ke atas,karena dengan begitu Alexa akan dengan mudah mendeteksi kegiatan situs anda,hingga nanti nya secara perlahan Traffic Rank situs anda akan terus meningkat pada Alexa.

5. Untuk semakin lebih meningkatkan Traffic Rank Alexa blog anda,ada baik nya juga anda meng Install Toolbar Alexa pada Browers anda,untuk lebih cepat meningkatkan Traffic Rank Alexa,ada baik nya juga install lah Alexa Toolbar dengan Alexa I.D anda tersebut pada PC Warnet,karena banyak pengguna lain yang melakukan Browsing pada toolbar tersebut,sehingga Alexa akan semakin senang dengan lalu lintas Browsing tersebut,dan Traffic Rank Alexa anda pun akan semakin meningkat.

Maka jadi nya akan seperti pada Gambar di bawah ini :

6. Setelah semua tahap petunjuk di atas anda lakukan,maka langkah selanjutnya adalah tinggal anda membuat Artikel pada Postingan,minimal dalam satu hari cukup satu Postingan saja,selanjut nya anda juga harus rajin mengunjungi Blog teman-teman anda atau blog lain nya,kalo bisa berikan komentar pada blog mereka,sehingga Alexa Rank bisa mendeteksi kegiatan lalu lintas Blog anda,dan dari situ maka Traffic Rank Blog anda Pada Alexa akan ramping hingga Jutaan nilai nya.

Atau jika anda tidak mau capek dan Repot dengan tehnik di atas, silahkan anda Gunakan alexaboostup,yaitu sebuah web yang dapat merampingkan Rank sebuah blog dengan cepat,dengan cara sebelum nya anda Register terlebih dahulu pada web tersebut,Silahkan anda Klick Di Sini untuk Register.

Untuk Tutor nya nanti akan saya jelaskan,atau silahkan anda coba terlebih dahulu,jika anda kurang paham cara atau system prosedur setelah registrasi nya seperti apa,silahkan tanyakan kepada saya.

Oke Blogger.. kira nya cukup segitu dulu informasi yang saya dapat berdasarkan pengalaman yang saya lakukan,semoga bermanfaat.. Selamat mencoba..!!

Tutorial Blogspot

Menuai Rupiah Dari PPC KumpulBlogger.com

Joe Patsatu

Ok sobat blogger.. untuk sementara Tutorial - tutorial nya kita Break dulu,kepala saya dah pusing dan tangan saya dah capek mengetik dan memindah kan source code - source code,sebagai selingan kita ulas dulu bagaimana cara nya menuai rupiah pada PPC KumpulBlogger.com.

Bagi sobat blogger yang sudah tau,ya sukur,berarti tinggal metik hasil nya,bagi yang belum tahu,silahkan registrasi dulu ke alamat nya di sini www.kumpulblogger.com/

Lumayan aja Sob daripada lumanyun,setidak - tidak blog kita ada duit nya walaupun cuma Seribu rupiah.. Haha.

Tutorial Blogspot

PPC Indonesia Yang Terbukti Membayar

Joe Patsatu

Inilah salah satu dari sekian banyak PPC indonesia yang bisa di percaya dan bisa membayar Blogger,jika anda berminat silahkan Register atau Join ke alamat Web nya http://surgaklik.com

Kira-kira tampilan Web nya seperti di bawah ini :

Informasi Sistem Pembayaran PPC

Pay Out Yang Telah di Keluarkan Oleh SurgaKlik.com

Oke Sobat.. Selamat Mencoba..

Semoga Blog kalian ga cuma berisi Informasi dan juga pengetahuan saja,tapi juga bisa menghasilkan uang,biar kata sedikit hasil awal nya,lama-lama juga nanti nya bisa jadi membukit.. Hehehe

Tutorial Blogspot

Memasang Hari,Tanggal,Bulan dan Tahun Di Atas Judul Blog

Joe Patsatu

Untuk memasang Hari,Tanggal,Bulan dan Tahun di atasa judul Blog,bisa anda masukan kode Script nya di mana saja,baik di "Element Widget atau Tambah Widget" maupun di "Edit HTML" Blog anda.

Di sini pada blog saya,saya memasukan Script "Date" tersebut pada Template "Edit HTML" blog,bukan pada "Element Widget - Tata Letak",kode Script tersebut saya letak kan tepat di bawah kode

<b:widget id='Header1' locked='true' title='JUDUL BLOG ANDA (Header)' type='Header'>
<b:includable id='main'>

Kode Script nya seperti ini :

<script type="text/javascript">
now = new Date();
if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))
else (a=now.getTime());
now.setTime(a);
var tahun=now.getFullYear()
var hari=now.getDay()
var bulan=now.getMonth()
var tanggal=now.getDate()
var hariarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu")
var bulanarray=new Array("Januari","Pebruari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember")
document.write(hariarray[hari]+" "+tanggal+" "+bulanarray[bulan]+" "+tahun)
</script>

Nah seperti itulah penempatan nya guys,maka hasilnya akan seperti pada Blog saya ini.. Selamat mencoba..!!

Tutorial Blogspot

Membuat Tulisan Berjalan Atau Gambar Di Atas Header atau Navbar

Joe Patsatu

Silahkan Anda masukan kode CSS di bawah ini ke dalam "Edit Html" Blog anda,letak kan kode di bawah ini tepat di atas Kode </head>

<center><img alt='zwani.com myspace graphic comments' border='0' src='http://images.zwani.com/graphics/animated/images/animated119.gif'/></center>

<span style='font-family: 'Arial';'><marquee behavoir='”alternate”'><span style='color: yellow;'><b>Silahkan anda Ganti Teks ini sesuai dengan keinginan Anda</b></span></marquee></span>

Setelah itu anda Save Template anda,kemudian silahkan anda coba lihat hasil nya..

Oke Sobat Blogger,selamat mencoba.. Good Luck.

Tutorial Blogspot

Membuat Tulisan Seperti Di Ketik

Joe Patsatu

Setelah Anda Masuk ke blog Anda,Silahkan Pilih "Tata Letak"

Kemudian Anda Pilih "Tambahkan Gadget"

Setelah itu anda Pilih "HTML/JavaScript"

Lalu anda masukan Kode Script di bawah ini ke dalam HTML/JavaScript tersebut.

Inilah Kode Script nya yang di masukan ke dalam "HTML/Javascript tersebut.

Ok Guys.. Selamat Mencoba.. Good Luck.

Tutorial Blogspot

Membuat Garis Tepi Untuk Halaman Blog

Joe Patsatu

Masukan Kode Css di bawah ini ke dalam Template - Edit Html Blog Anda,letak kan tepat di bawah kode
/* Content
----------------------------------------------- */

Seperti inilah kode yang harus di letakan di bawah kode di atas tersebut.

body {
background: $(body.background);border:2px solid #fff;box-shadow:0 0 10px #fff;
text-align:left;color:#fff;width:960px;margin:15px auto
}

Lengkap nya seperti ini

/* Content
----------------------------------------------- */
body {
background: $(body.background);border:2px solid #fff;box-shadow:0 0 10px #fff;
text-align:left;color:#fff;width:960px;margin:15px auto
}

Jika kode tersebut yang berwarna Merah tidak ada dalam Edit Html blog anda,letak kan saja kode yang berwana Hijau Muda tersebut tepat di atas kode ]]></b:skin>

Ok Guys.. Selamat mencoba.. semoga blog anda semakin Cantik dan indah kaya orang nya.. Hehe

Tutorial Blogspot

Membuat Link Pada Blog Berkedip Bintang

Joe Patsatu

Seperti anda Masuk ke dalam Blog anda,kemudian pilih Template - Edit HTML lalu masukan Kode CSS di bawah ini tepat di atas Kode ]]></b:skin>.

a:link {
text-decoration:none;
color: $(link.color);
}

a:visited {
text-decoration:none;
color: $(link.visited.color);
}

a:hover { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAFxAMQV9LmI7_WRgmAAe7jiBZgTP3dERm6ahFIpphm3eTjyjwLyQfOpvorESd4y2Dpf_swvWDeBRYuZvHx-KRKdaL-fY50kcijHhQjUzbxh-Ra-6h82ZpWVYC7OWuHcCVpMBROOJ8Tmxz/s128/bintang.gif);}

Setelah itu anda Save,kemudian silahkan anda coba buka Blog anda,maka hasil nya pada link di setiap blog anda akan berkedip seperti bintang pada

saat mouse mengarah ke Link tersebut.

Selamat Mencoba..!!

Tutorial Blogspot

Membuat Widget Hadist Online Pada Blog

Joe Patsatu

Mungkin pengunjung sekalian sudah mengetahui ada beberapa halaman baru dalam blog ini. Diantaranya adalah Al-Qur’an Online dan Hadits online , untuk kali ini saya akan share kepada pengunjung sekalian bagaimana cara memasang Al-Qur’an Online kedalam Blog kita.

Tentu disamping bisa menjadi daya tarik pengunjung, motivasi yang paling utama adalah sebagai Syiar Islam. Pengunjung akan terbantu dengan adanya Al-Qur’an Online ini, karena bisa belajar membaca, mencari terjemah, mendengarkan tartil dll.

Sumber dari Al-Quran Online yang akan saya share ini bersumber langsung pada situs http://www.alquran-indonesia.com, jadi selama situs tersebut masih exist maka kita masih bisa memasang kedalam Blog kita.

Cara nya :

1. Seperti Biasa Anda Masuk ke Blogspot anda

2. Kemudian langsung Pilih "tambah Gadget"

3. Lalu pilih Html/Java Script

4. Masukan Kode berikut di bawah ini

Sesuaikan lebar dan tinggi border dengan angka yang anda inginkan ( saya beri warna biru), Dan yang saya beri warna Hijau adalah situs asli dari Al-Qur’an Online yang kita pasang di Blog kita.

Selamat Mencoba..!!

Tutorial Blogspot

Membuat Feeds Judul Postingan Berjalan Pada Footer Blog

Joe Patsatu

Untuk membuat feed Judul Postingan anda berjalan pada footer atau di bawah blog anda,silahkan anda masukan kode di bawah ini ke dalam "Edit HTML" blog anda di atas kode </body>.

Pada tulisan yang berwarna kuning,silahkan anda ganti dengan nama Blog anda,setelah kode tersebut anda letakan,silahkan anda Save template anda,kemudian lihat hasil nya akan seperti pada blog saya.

Selamat mencoba..!!

Tutorial Blogspot

Membuat Kolom Untuk Artikel Postingan

Joe Patsatu

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span></div>
<div style="text-align: justify;">
<b><span style="font-family: Georgia, Times New Roman, serif;">Masukan Kode berikut di bawah ini ke dalam Widget HTML/JAVA SCRIPT</span></b><br />
<b><span style="font-family: Georgia, Times New Roman, serif;"><br /></span></b></div>
<b><span style="font-family: Georgia, Times New Roman, serif;"> </span></b><br />
<div>
<div style="text-align: justify;">
<b><span style="color: blue; font-family: Georgia, Times New Roman, serif;"><table border=”1″><tr><td>Nama Sahabat></td></tr></table><br/></span></b></div>
</div>
<div>
<div style="text-align: justify;">
<b><span style="color: blue; font-family: Georgia, Times New Roman, serif;"><table border=”1″ width=”300″></span></b></div>
</div>
<div>
<div style="text-align: justify;">
<b><span style="color: blue; font-family: Georgia, Times New Roman, serif;"><tr><td>Nama Sahabat</td><td>Hoby</td></tr></span></b></div>
</div>
<div>
<div style="text-align: justify;">
<b><span style="color: blue; font-family: Georgia, Times New Roman, serif;"></table></span></b><br />
<b><span style="color: blue; font-family: Georgia, Times New Roman, serif;"><br /></span></b></div>
</div>
<b><span style="font-family: Georgia, Times New Roman, serif;"> </span></b><br />
<div style="text-align: justify;">
<b><span style="font-family: Georgia, Times New Roman, serif;">Maka hasil nya akan terlihat seperti di bawah ini</span></b></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span></div>
<table border="”1″" style="text-align: justify;"><tbody>
<tr><td><span style="font-family: Georgia, Times New Roman, serif;"><b>Nama Sahabat></b></span></td></tr>
</tbody></table>
<div style="text-align: justify;">
<br /></div>
<table border="”1″" style="text-align: justify;"><tbody>
<tr><td><span style="font-family: Georgia, Times New Roman, serif;"><b>Nama Sahabat</b></span></td><td><span style="font-family: Georgia, Times New Roman, serif;"><b>Hoby</b></span></td></tr>
</tbody></table>
</div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span></div>
<div>
<div style="text-align: justify;">
<b><span style="color: red; font-family: Georgia, Times New Roman, serif;">MEMBUAT KOLOM DENGAN BACKROUND</span></b></div>
</div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span></div>
<div style="text-align: justify;">
<b><span style="font-family: Georgia, Times New Roman, serif;">Masukan Kode berikut di bawah ini ke dalam Widget HTML/JAVA SCRIPT</span></b></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span></div>
<b style="text-align: justify;"><i><span style="color: blue; font-family: Georgia, Times New Roman, serif;"><div style="border: 1px solid rgb(202, 61, 217); padding: 1px; overflow: auto; height: 100px; background-color: black; "><br></span></i></b><br />
<b><span style="color: blue; font-family: Georgia, Times New Roman, serif;"></span></b><br />
<div style="text-align: justify;">
<b><span style="color: blue;"><b><i><span style="font-family: Georgia, Times New Roman, serif;"><a href="http://www.komputerseo.com/">Komputer SEO</a> <a href="http://mycomputerdummies.blogspot.com/">Dummies</a><br></span></i></b></span></b></div>
<b><span style="color: blue; font-family: Georgia, Times New Roman, serif;">
<i><div style="text-align: justify;">
<b><i></div></i></b></div>
</i></span></b><br />
<div style="text-align: justify;">
<b><span style="font-family: Georgia, Times New Roman, serif;"><i><span style="color: yellow;"> </span></i><span style="color: white;">Maka</span><span style="color: white;">  Hasil nya akan terlihat seperti di bawah ini</span></span></b></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><span style="color: black;"> </span></b><b> </b></span></div>
<div style="background-color: white; border: 1px solid rgb(202, 61, 217); height: 100px; overflow: auto; padding: 1px;">
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><br /></b></span></div>
<div style="text-align: justify;">
<span style="font-family: Georgia, Times New Roman, serif;"><b><a href="http://www.komputerseo.com/">Komputer SEO</a> <a href="http://mycomputerdummies.blogspot.com/">Dummies</a></b></span></div>
<div style="text-align: justify;">
<br /></div>
</div>
</div>

Tutorial Blogspot

Membuat Al-Quran Online Pada Blogspot

Joe Patsatu

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: 'Comic Sans MS';"></span><br />
<div style="text-align: justify;">
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Mungkin pengunjung sekalian sudah mengetahui ada beberapa halaman baru dalam blog ini. Diantaranya adalah Al-Qur’an Online dan Hadits online , untuk kali ini saya akan share kepada pengunjung sekalian bagaimana cara memasang Al-Qur’an Online kedalam Blog kita.</span></b></div>
<div style="text-align: justify;">
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></div>
<div style="text-align: justify;">
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Tentu disamping bisa menjadi daya tarik pengunjung, motivasi yang paling utama adalah sebagai Syiar Islam. Pengunjung akan terbantu dengan adanya Al-Qur’an Online ini, karena bisa belajar membaca, mencari terjemah, mendengarkan tartil dll.</span></b></div>
<div style="text-align: justify;">
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL2GE_YNrhhAMBaBP8KBzGb40hCu4bV-lENA_4IZWFTOlNHVTas8r4IHJKjAy8CXcVzCm8qdB0a__gZlMcG8n4XEbs3kJC6zXiSpu32E97vHULmg8hgD_zBLqZvzv4Rotihr6PqXJ8ZMQs/s1600/alquranonline.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL2GE_YNrhhAMBaBP8KBzGb40hCu4bV-lENA_4IZWFTOlNHVTas8r4IHJKjAy8CXcVzCm8qdB0a__gZlMcG8n4XEbs3kJC6zXiSpu32E97vHULmg8hgD_zBLqZvzv4Rotihr6PqXJ8ZMQs/s320/alquranonline.jpg" width="320" /></span></b></a></div>
<div style="text-align: justify;">
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></div>
<div style="text-align: justify;">
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Sumber dari Al-Quran Online yang akan saya share ini bersumber langsung pada situs  http://www.alquran-indonesia.com, jadi selama situs tersebut masih exist maka kita masih bisa memasang kedalam Blog kita.</span></b></div>
<div style="text-align: justify;">
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></div>
<div style="text-align: justify;">
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Cara nya :</span></b></div>
<div style="text-align: justify;">
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">1. Seperti Biasa Anda Masuk ke Blogspot anda</span></b></div>
<div style="text-align: justify;">
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">2. Kemudian langsung Pilih "tambah Gadget"</span></b></div>
<span class="Apple-style-span" style="border-collapse: collapse; line-height: 20px;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">3. Lalu pilih Html/Java Script</span></b></span><br />
<div style="text-align: justify;">
<span class="Apple-style-span" style="border-collapse: collapse; line-height: 20px;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">4. Masukan Kode berikut di bawah ini </span></b></span></div>
<div style="text-align: left;">
<span class="Apple-style-span" style="border-collapse: collapse; line-height: 20px;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></span></div>
<div style="text-align: left;">
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="border-collapse: collapse; line-height: 20px;"><span class="Apple-style-span" style="color: red;"><iframe style="overflow: auto; background-attachment: scroll; background-repeat: no-repeat; background-position: left top; text-align: left; border: 1px solid #cccccc; -moz-border-radius: 8px 8px 8px 8px; padding: 10px; </span><span class="Apple-style-span" style="color: blue;">width: 400px;</span><span class="Apple-style-span" style="color: red;"> </span><span class="Apple-style-span" style="color: blue;">height: 900px;</span><span class="Apple-style-span" style="color: red;">" src="</span><span class="Apple-style-span" style="color: lime;">http://m.alquran-indonesia.com/mquran/index.php/quran</span><span class="Apple-style-span" style="color: red;">" frameborder="0"> </iframe></span></span></span></b></div>
<div style="text-align: left;">
</div>
<div style="text-align: justify;">
<span class="Apple-style-span" style="border-collapse: collapse; line-height: 20px;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Sesuaikan lebar dan tinggi border dengan angka yang anda inginkan ( saya beri warna biru), Dan yang saya beri warna Hijau adalah situs asli dari Al-Qur’an Online yang kita pasang di Blog kita.</span></b></span></div>
<div style="text-align: justify;">
<span class="Apple-style-span" style="border-collapse: collapse; line-height: 20px;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></span></div>
<div style="text-align: justify;">
<span class="Apple-style-span" style="border-collapse: collapse; line-height: 20px;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Selamat Mencoba..!!</span></b></span></div>
<div>
<span class="Apple-style-span" style="border-collapse: collapse; color: #202020; line-height: 20px;"><a href="http://www.blogger.com/rearrange?blogID=817968632741015828&sectionId=main-left&action=editWidget&widgetType=HTML&referrer=directory" style="color: #1155cc; text-decoration: none;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img alt="Tambah" class="addButton" src="http://www.blogger.com/img/plus.png" style="border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; float: right; line-height: 2.2em; text-align: justify;" /></span></b></a></span><br />
<div style="text-align: justify;">
<br /></div>
</div>
</div>

Tutorial Blogspot

Widget Animasi Untuk Blogspot

Joe Patsatu

Masukan Kode Java Script Ini ke Dalam HTML/JAVA SCRIPT

1. Animasi Gajah Loncat

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img border="0" rc="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

2. Animasi Icon Booring

<div style="position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

3. Animasi Tuyul Ketawa

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

4. Animasi Robot Ketawa

<div style="position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

5. Animasi Panda Main Bola Sambil Tiduran

<div style="position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi-Blog</a></center></small></div>

6. Animasi Tuyul Ketawa Sambil Tiduran

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Free-Widget-Animasi</a></center></small></div>

7. Animasi Icon Main Panah

<div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

8. Animasi Bunga Mawar Bergerak

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:160px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

9. Animasi Anjing Laut

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

10. Animasi Ikan Lumba lumba

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

11. Animasi Helikopter Terbang

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

12. Animasi Pinguin Joget

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

13. Animasi Naga mengeluarkan Api

<div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

14. Animasi Ikan Mas Koki

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://www.Johariibnudimyati.blogspot.com" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a>

</center></small></div>

Aneka Tutorial Pemrograman

Di sini tempat nya kita berbagi Tutorial

Membuat Warna Bayangan Pada Setiap Komponen di Blogspot

Meningkatkan Pengunjung Blog dan Menghasilkan Dollar

Merampingkan Traffic Alexa Rank Hingga 500rb sampai 1 Juta Dalam 1 Hari

Menuai Rupiah Dari PPC KumpulBlogger.com

PPC Indonesia Yang Terbukti Membayar

Memasang Hari,Tanggal,Bulan dan Tahun Di Atas Judul Blog

Membuat Tulisan Berjalan Atau Gambar Di Atas Header atau Navbar

Membuat Tulisan Seperti Di Ketik

Membuat Garis Tepi Untuk Halaman Blog

Membuat Link Pada Blog Berkedip Bintang

Membuat Widget Hadist Online Pada Blog

Membuat Feeds Judul Postingan Berjalan Pada Footer Blog

Membuat Kolom Untuk Artikel Postingan

Membuat Al-Quran Online Pada Blogspot

Widget Animasi Untuk Blogspot

Popular Posts

SAMSUNG Galaxy A12 [6/128GB] - Black

Shopee Mall Computer & Digital

Translate

Tutorial

Visitor