Menambah Code Efek Hujan Salju Di Blog Tanpa Menggunakan Image

Tag : Membuat Snow Effect Atau Hujan Salju, Visual Snow Rain  Dengan Kode Javascript

  Menambah meriah sebuah tampilan blog biasa dilakukan oleh para blogger, salah satunya yang kali ini akan kita tambahkan adalah membuat efek hujan salju, Rain Snow. Untuk melihat contohnya silahkan lihat Demonya disini .

Seperti biasa untuk oprak oprek blog Signin di draft blogger
Dalam dasbor masuk Rancangan --> Edit HTML

Jangan centang Expand template widget.

Cari kode ini <body>

Setelah ketemu masukan javascript berikut sebelum kode <body>

<script src='http://codecariilmu.googlecode.com/files/Snow.js' type='text/javascript'></script>

Atau juga yang ini, dengan butiran salju lebih besar :

<script src=' http://codecariilmu.googlecode.com/files/Snowstorm.js ' type='text/javascript'></script>

Jangan lupa jika sudah di masukan disimpan dan coba deh lihat hasilnya.

Belajar Bersama

***** Semoga Bermanfaat *****

Continue Reading...

Hosting File Penyimpanan Gratis Dari Google Code

Tag : File Hosting Javascript Ajax, JQuery,Java, Pyton, PHP, MySQL,Game, Android, CMS Dan banyak lagi.

  Satu lagi tempat menyimpan file di internet yang gratis baik untuk di Download maupun di Upload ataupun sebagai link untuk blog / Blogspot kita yang membutuhkan link script yang mengharuskan disimpan secara online untuk pemanggilan URL nya, khususnya untuk file-file yang berbasiskan avascript Ajax, JQuery,Java, Pyton, PHP, MySQL,Game, Android, CMS, Flash, Plugin, Windows, Linux dan banyak lagi yang lainnya.

  Hosting file tersebut adalah Google Code atau Code Google yang dari namanya saja tentu kita sudah tahu siapa pemiliknya. Bagi teman-teman yang ingin menyimpan file di Code Google, bisa lihat caranya.

1. Silahkan masuk ke website Google code akan muncul tampilan seperti berikut :

 2. Untuk daftar klik Create New Project , berikutnya akan muncul tampilan berikut.

Isi Project Name, Project Summary, Description dengan nama apa saja terserah anda.
Kemudian Version control system pilih Mercurial.
Selanjutnya Source code license pilih GNU GPL v3

Project Label (s) pilih nama file yang nantinya akan kita simpan disini misal javascript. Fungsi label ini adalah untuk memudahkan kita mencari file-file dengan kategori yang sama, kurang lebih sama dengan label yang ada di blog kita. Selanjutnya tekan tombol Create Project. Berikutnya muncul halaman berikut.

 3. Untuk mengupload file dari komputer pilih menu Download lalu pilih create a new download.

 4. Pada halaman seperti diatas isikan summary, terserah dengan nama apa saja. Selanjutnya untuk mengambil file klik tombol Telusuri. Label isi seperti diterangkan di no.2, baru tekan Submit File.

5. Sekarang file kita sudah tersimpan. Untuk mendapatkan URL link dari file tersebut tinggal arahkan kursor mouse ke tombol yang ada tanda panah dan copy url link nya.


Belajar Bersama

***** Semoga Bermanfaat *****

Continue Reading...

Page Number Navigation/Navigasi Halaman Pakai Angka Di Blog

Tag : Membuat Halaman Navigasi Ala Google,  Berikutnya, Selanjutnya, prev  6 7 8 9  next, Sebelumnya.

  Ini adalah salah satu cara untuk mempermudah pengunjung mencari halaman2 postingan kita, selain tentunya untuk lebih mempercantik halaman blog kita.

Contohnya seperti di bawah ini.

Bagaimana cantik bukan. Nah untuk menerapkannya di blog, anda bisa mengikuti tutorialnya langsung di website nya Bung Abu Frahan Dan Anshul Dudeja .

Silahkan Klik link berikut untuk menuju TKP.


Numbered Page Navigation For Blogger New Script 

Page Navigation Script Baru Dari Abu Farhan.

Add Numbered Navigation For Blogger
Nah yang ini dari Anshul Dudeja


Sedangkan untuk membuat Page Navigation ala Google atau Google Style Ini nih Link nya Dari Abu Farhan juga.

Page Navigation For Blogger With Google Style Dari Abu Farhan juga.


Google Style

Silahkan untuk dicoba dan pelajari.


Belajar Bersama

***** Semoga Bermanfaat *****

Continue Reading...

Membuat Navigasi Breadcrumb Dalam Template Blogspot

Tag : Kode CSS Menambah Navigasi Breadcrumb Di Blogger Template Ala BloggerBuster


  Breadcrumb adalah salah satu cara navigasi dan teknik untuk mempermudah pengunjung blog kita mencari informasi ataupun kembali ke halaman sebelumnya yang berhubungan dengan topik yang kita baca.

Contohnya seperti berikut

Untuk membuat dan menambah supaya muncul navigasi breadcrumb silahkan masuk dulu ke Draft Blogger
Sign In di Blogger
Dalam Dasbor --> Masuk Ke Rancangan --> Edit HTML
Kemudian Centang Expand Template Widget

Cari kode berikut

<b:include data='top' name='status-message'/>

Kemudian ganti dengan kode di bawah

<div id='breadcrumb'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
      <div class='breadcrumbs'>
Welcome to <data:blog.title/>
</div>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='breadcrumbs'>

          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
              <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
            </b:if>
 &#187; <span class='post-title entry-title'><data:post.title/></span>
      </b:loop>
    </b:if>
  </b:loop>
        

      </div>
  </b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
  <b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
</div>

Kemudian Simpan dulu hasilnya.

Sekarang kita tinggal membuat kode untuk CSS nya, untuk itu copy kode CSS berikut :

#breadcrumb {
  border: 1px solid $bordercolor;
  padding: 5px 15px;
  margin: 10px 0;
  line-height: 1.4em;
}

Kemudian cari kode ini dan tempatkan kode CSS diatas kode ini </b:skin> .

Jangan lupa hasilnya di simpan.


Keterangan :

-  Tulisan " Welcome To " bisa kita ganti dengan tulisan apa saja, karena tulisan ini tampil di halaman muka ( HOME ) bagian atas postingan kita, misalkan dengan title blog kita.


-  Bila ingin ada background, tinggal menambahkan kode CSS di elemen #breadcrumb.


Belajar Bersama







***** Semoga Bermanfaat *****

Continue Reading...

Kolom Komentar Terbaru Dari Blogger

Tag : Setting Dan Fasilitas Terbaru Kolom Komentar Blogspot  Di Menu Draft.Blogger

  Saking dah lama nggak ngeblog jadi kurang tahu nih perkembangan terbaru dari menu yang ada di draft Blogger, eeh tak tahunya ada penambahan fitur baru dari menu Komentar di kolom draft blogger, coba lihat deh penampakkannya .

 Nah udah lihat kan, di menu komentar baru itu kita bisa melihat komentar2 yang ditulis pengunjung, baik komentar yang terbaru maupun yang lama. Selain itu bila ada komentar yang berupa spam nanti akan otomatis di saring dulu, tidak langsung tampil tapi menunggu persetujuan dari kita dulu, apakah akan di terbitkan atau dihapus.

  Pokoknya kita di buat lebih mudah dengan adanya seting komentar terbaru ini, jadi tidak usah pusing2 untuk melihat komentar yang baru dari pengunjung dengan mencari cari di halaman blog kita.


Belajar Bersama

***** Semoga Bermanfaat *****

Continue Reading...

Bagaimana Membuat Background Blog Ada Dua Warna

Tag : Merubah Dan Menambah Warna Background Menjadi 2 Bagian Warna

  Mungkin dari kita sudah pada tahu bagaimana cara merubah warna dari sebuah background blog baik menggunakan kode Hex warna maupun di pasangi image. Tetapi sekarang bagaimana caranya supaya background blog kita mempunyai background warna yang berbeda, seperti yang bisa pembaca lihat seperti pada blog saya ini atau seperti contoh dibawah .

Coba perhatikan gambar diatas, terlihatkan backgroundnya terdiri dari dua warna, bagian atas berwarna hijau sedangkan yang bawah orange .
Untuk membuat background menjadi 2 warna seperti diatas,caranya sangat mudah, kita tinggal menambahkan url image yang sebelumnya telah kita buat ke dalam kode CSS template pada bagian Body.

Supaya lebih jelas lebih baik kita langsung praktekan saja, tetapi sebelumnya kita buat dulu warna background untuk bagian atasnya dulu, karena bagian inilah nantinya yang akan kita tempatkan atau simpan di alamat Hosting URL penyimpanan gambar kita, supaya nantinya bisa di panggil menggunakan kode CSS.

Buatlah gambar dengan ukuran :

Panjang : 350 px  : Sesuaikan saja ukurannya nanti sesuai selera anda
Lebar    :     5 px 

Setelah selesai silahkan upload ke URL tempat anda menyimpan gambar, dan catat alamat URL gambar yang tadi telah di upload.
Sekarang kita masuk atau Sigin Ke Blogger -> Rancangan -> Edit HTML

Temukan Kode CSS ini :

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

  Perlu di ketahui kode CSS ini adalah kode Template Minima Tapi pada dasarnya kode CSS body untuk template yang lainnya juga tidak ada perbedaan. Sekarang coba perhatikan kode yang saya warnai kuning, nah cuma pada bagian inilah kita akan menambahkan kode untuk membuat background jadi dua warna.

Ganti kode diatas tadi dengan kode ini :

body {
  background:#ffffff url(http:// Alamat URL Gambar Anda.jpg) repeat-x left top;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }


Jangan lupa setelah beres kita save dulu. Coba lihat hasilnya..BELAJAR BERSAMA

***** Semoga Bermanfaat *****

Continue Reading...

Setting Domain Blogspot Pindah Domain Ke Co.CC

Tag : Cara Merubah,Mengganti Nama Domain URL Blogger Dengan Domain URL Lain

Bagi para blogger yang mempunyai blog di blogger, ada cara mudah jika domain blogspot ingin di ganti domain lain atau dipindah kan supaya namanya bukan menggunakkan domain blogspot. Selain domainnya gratis juga alamat url nya kelihatan seperti web profesional . Nama domain tersebut adalah Co.CC  .

Sebagai contoh jika sebelum diganti alamat blog kita URL nya seperti begini " contoh-domain.blogspot.com " bila telah menggunakan domain co.cc alamat URL nya jadi seperti ini " www.contoh-domain.co.cc " ataupun "contoh-domain.co.cc " . Penggantian nama domain blogspot ke Co.CC ini cuma dilakukan dengan  beberapa langkah.

   1. Cek ketersediaan nama domain yang akan digunakan dalam kotak dibawah .





   2. Jika nama domain yang digunakan belum dipakai orang lain akan muncul tampilan berikut , setelah nampak tampilan seperti gambar dibawah, selanjutnya tekan " Lanjutkan Pendaftaran ".

   3. Pada form berikutnya, akan muncul tampilan seperti dibawah .

 Jika sebelumnya sudah pernah mendaftar, tinggal isi nama pengguna dan password anda. Tetapi jika belum buatlah akun baru. Lihat pada contoh gambar yang dilingkari warna merah " Buat account baru sekarang " . Pada form berikutnya , isilah dengan data diri anda secara lengkap sesuai permintaan .Setelah berhasil mendaftar maka pada form selanjutnya akan muncul tampilan berikut .

       4. Selanjutnya tekan "setup". Cari dan klik " zone record ".

jika sudah di klik, pada add a record isi kan konfigurasi berikut :

• Host : Isi dengan nama domain yang baru di buat tadi. Diawali dengan www .
• TTL : biarkan saja, tidak usah diutak atik
• Type : pilih CNAME
• Value : isikan ini : ghs.google.com. .Jangan salah di belakang com harus pakai tanda titik.

Kemudian tekan tombol "setup" . Setelah selesai silahkan kalau mau logout .

   5. Sekarang tinggal setting di blogger, untuk itu Sigin dulu di draft blogger
Dalam dasbor masuk pengaturan --> publikasikan .
Di dalam publikasikan klik Domain Ubahsuaian kemudian klik Beralihlah ke pengaturan lanjut, akan nampak tampilan berikut :

Pada Domain Anda , silahkan isi dengan nama domain yang telah dibuat di co.cc. Kemudian isi verifikasi kata , setelah itu simpan setelan. Dalam contoh kasus ini , blog saya yang lain, yang domainnya blogspot,tidak sampai satu menit telah berganti dengan domain Co.Cc.

Tetapi bila blog anda nama domainnya belum berubah, tunggu beberapa jam dan paliing lama tunggu 1x 24 jam . Semoga berhasil .

**** Semoga Bermanfaat ****

Continue Reading...