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

Free Hosting File dan Image Di Site.Google.Com

Tag : Tempat Dan Ruang Gratis Menyimpan Berbagi File Online.


  Bagi para blogger yang membuat blog di blogspot, bila belum mempunyai hosting untuk menyimpan file dan gambar , sekarang tidak usah pusing-pusing lagi, sebab kita bisa menggunakan  "Site Google Com", sebagai media penyimpan hosting online , selain tentunya hosting hosting file online gratis yang banyak bertebaran di internet. Anda bisa mencarinya di google , yahoo, ataupun bing dengan mengetikan kata kunci " Free File Hosting ".

site.google dibuat sebagai pengganti dari google page, yang kini oleh google sudah ditutup untuk pengguna baru . Untuk menyimpan file image atau gambar sebenarnya google sudah menyediakan tempat yaitu di Picasa Web Album, yang sudah langsung bisa digunakan ketika kita membuka akun di blogger.

Untuk membuka akun atau membuat halaman web di site google, caranya cukup mudah, kita tinggal menggunakan akun gmail yang kita punyai . Bila belum mempunyai akun gmail, silahkan buat dulu disini, Gratis koq !. Membuat Akun gmail.

Untuk daftar atau membuat akun di site google silahkan Daftar disini.


Belajar Bersama

**** Semoga Bermanfaat ****

Continue Reading...

Membuat Tab Di Kolom Sidebar Dengan Javascript

  Teknik membuat Tab di kolom sidebar ini menggunakan Javascript dan jquery. Kelebihan menggunakan javascript dan jquery ini adalah , waktu kita berpindah ke tab yang lain dilakukan dengan gerakan yang halus atau lembut . Jadi terlihat lebih luwes .

Selain itu juga supaya kolom sidebar di template yang kita pakai nantinya tidak terlalu berjajar kebawah, jika kita banyak memasang widget ataupun gadget, karena dengan menggunakan teknik tab ini dalam satu kolomnya kita bisa memasang 3-4 widget, itupun tergantung dari lebar kolom template yang kita pakai. Coba perhatikan gambar diatas, dalam 1 kolom terdiri dari 4 gadget yang berbeda.

Jika anda ingin membuatnya bisa mnegikuti cara dibawah ini :


Sigin Di draft Blogger
Dalam Dasbor masuk Tata Letak --> Edit HTML

   1. Memasukkan kode javascript dan jquery .

Copy semua kode javascript dan jquery di bawah ini :

<script src='http://sites.google.com/site/blogsbaru/jquery1.2.6min.js ' type='text/javascript'></script>
<script type='text/javascript'>
var starttab=0;   /* Tab pertama */
var endtab=3;   /* Jika ingin mengurangi / menambah Tab, rubah nilainya */
var sidebarname="sidebar1";  /* Ganti dengan nama kolom sidebar anda */
</script>
<script src='http://sites.google.com/site/albaniyu/bloggertabv1.0-min.js' type='text/javascript'></script>
</script type='text/javascript'>

Simpan diatas kode ini </head>
Kemudian simpan dulu .

   2. Memasukkan Kode CSS .

Setelah itu masukkan kode CSS untuk membuat Tab, copy kode di bawah :

/*--- Mulai Tab ----*/

.widget-wrapper2{ border:1px solid #7f7f7f;
background-color:#999999;
padding:8px;}

.widget-tab {-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#999999;
border:1px solid #7f7f7f;
font-family:Arial,Helvetica,sans-serif; padding:15px !important; }

.widget-tab ul {margin:0px; padding:0px 20px 0px 20px;
border-bottom:1px dashed #fff }

.widget-tab ul li {list-style:none; border-bottom:1px solid #7f7f7f;
padding-top:10px; padding-bottom:10px;
font-size:13px; }

.widget-tab ul li:last-child{ border-bottom:none; }
.widget-tab ul li a { text-decoration:none; color:#3e4346; }

.widget-tab ul li a small { color:#8b959c; font-size:9px;
text-transform:uppercase;font-family:Verdana,Arial,Helvetica,sans-serif; position:relative;left:4px;top:0px;}

.tab-content ul li a:hover{color:#a59c83;}
.tab-content ul li a:hover small{color:#baae8e;}

.active-tab{background:#999999 url(http://sites.google.com/site/blogsbaru/tabinactivebg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;border-width:1px 1px 2px !important;
color:#fff !important;}

ul.tab-wrapper{ margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; }

ul.tab-wrapper li {-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#999999 url(http://sites.google.com/site/blogsbaru/tabtopbg.gif) repeat-x scroll left top;
border:1px solid #7f7f7f;color:#3e4346;
cursor:pointer; display:inline;font-family:Verdana,Arial,Helvetica,sans-serif; font-size:9px;
font-weight:bold;
line-height:2em; list-style-image:none !important;list-style-position:outside !important;list-style-type:none !important;margin-right:1px;
padding:8px 14px;text-align:center;
text-decoration:none;text-transform:uppercase; }

/*------ Akhir Tab ----*/

Setelah anda copy, simpan atau paste diatas kode ini </b:skin>
Kemudian jangan lupa disimpan simpan .

Jika anda ingin tampilan kolomnya berbentuk kotak alias tidak bersudut lancipdi browser firefox dan opera, tinggal menghapus semua kode berikut
-moz-border-radius dan -webkit-border-radius

Pada tata letak, di kolom sidebar kita tinggal memasukkan apa saja gadget yang ingin ditambahkan, dan jangan bingung dulu bila tampilan pada tata letak,kolom nya tampil seperti biasa yaitu berjajar kebawah. Cobalah dulu masukkan gadget apa saja pada kolom sidebar tsb, baru kemudian lihat hasilnya dihalaman blog kita .


Belajar Bersama

**** Semoga Bermanfaat ****

Continue Reading...

Perancang Template | Blogger Template Design, Fitur Terbaru Dari Blogger

Tag : Membuat,Merancang,Meng custom Sendiri Web Design Template Untuk Blogspot 

Blogger kembali menambahkan fiturnya, kali ini yang ditambahkan adalah " Perancang Template "atau " Blogger Template Designer ".Dengan fitur ini kita akan lebih di mudahkan dalam meng kustomasi tampilan template atau mendesain template kita. Berikut adalah beberapa fitur yang disediakan dalam " Perancang Template " :

Pilihan Template.

• Template : Disini disediakan beberapa pilihan template seperti Simple karya Josh Peterson (ada 4 pilihan ), Picture Windows karya Josh Peterson (ada 3 pilihan), Awesome Inc karya Tina Chen (ada 4 pilihan), dan Watermark karya Josh Peterson (ada 4 pilihan) .

Warna Background.

• Background : Disni kita bisa memilih dan mengkustomisasi sendiri warna background dari template. Juga disediakan berbagai jenis background yang dikategorikan lebih dari 16, seperti abstrackt, the Arts, Business, Celebration dan lain sebagainya. Anda bisa mencarinya sendiri.

Pilihan Layout .

• Layout : Terdiri dari 3 bagian yaitu Body Layout, Footer Layout, dan Adjusment, sehingga kita diberi keleluasaan dalam pemilihan tampilan kolom body maupun kolom footer, juga lebar dari kolom template. Semuanya diatur disini .

Pemilihan Warna Dan jenis Font .

• Advanced : Disini kita bisa memilih warna, jenis font, ukuran font dan background dari font dengan menu yang lebih mudah dan komplit daripada menu pengaturan font dan warna yang dulu.

Inilah fitur terbaru yang disediakan blogger, lkita akn lebih leluasa dan diberikan kemudahan dalam mengkustomisasi tampilan template , tanpa perlu banyak berhubungan dengan kode kode html.

Kita tunggu, fitur apalagi yang akan ditambahkan oleh blogger, untuk lebih me-maksimalkan blogspot.

Belajar Bersama

**** Semoga Bermanfaat ****

Continue Reading...

Back To Top JQuery / Smooth Scroll Kembali Ke Atas

Jika kita mempunyai article yang panjang sekali kebawah, tentu untuk kembali keatas, kita harus men-scrollnya. Supaya kita tidak usah men-scroll halaman web kita jika ingin kembali ke atas, ada cara yang paling mudah, yaitu dengan di buatkan tombol kembali ke atas /gulir ke atas atau back to top, Sehingga lebih cepat karena cuma memerlukan waktu  sepersekian detik.

Teknik kembali keatas ini memakai kode javascript, sehingga nantinya ketika di klik tombol kembali ke atas, jalannya secara perlahan alias smooth. Jadi kelihatan lebih keren. Untuk memasang kode javascripnya seperti biasa kita harus :
Sigin di draft blogger
Dalam dasbor masuk Tata Letak --> Edit HTML
Simpan gambar berikut dalam format png, kemudian upload ke file hosting image anda .

Download dulu ini scrolltopcontrol.js  . Setelah anda download, sebelum menyimpannya anda bisa mengedit dulu settingan berikut , copy lalu edit dalam notepad, cari yang seperti ini :

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

Sedikit Keterangan :

startline : munculnya tombol gulir ketika kita menscroll halaman web kebawah. Kita bisa merubah nilai dari startline ini untuk menentukan kapan munculnya tombol gulir ini.

scrollto : menampilkan sampai batas mana di halaman web anda, saat tombol gulir discroll dari bawah. Tetapi kita harus membuat ID dulu untuk itu, dengan menentukan nilainya misalnya dengan 50. Jadi untuk sementara biarkan saja dengan nilai "0".

scrollduration : kecepatan waktu scroll dari bawah. Semakin tinggi nilai nya semakin lambat naik keatasnya.

controlHTML : masukan alamat url image anda disini, contohnya image yang tadi di copy diatas. Untuk ukurannya anda bisa sesuaikan dengan ukuran image anda, dengan mengubahnya dalam style.

controlattrs : penempatan posisi tombol gulir keatas, dengan merubah nilai dari offsetx dan offsety.

Setelah selesai di edit baru simpan dengan nama scrolltopcontrol.js , kemudian upload ke file hosting anda .Nantinya file ini akan ditempatkan didalam kode dibawah ini.
Kemudian kita copy kode javascript berikut :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="Ganti dengan URL javascript anda/scrolltopcontrol.js">
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
</script>

 Kemudian simpan atau paste di atas kode ini </head>

Setelah itu masukan kode ini :

<div id='topcontrol'>
</div>

Simpan diatas </body> .
Kemudian baru di simpan atau save. Dan coba sekarang apa sudah muncul tombol gulir keatas, jika sudah selamat anda telah berhasil.

**** Semoga Bermanfaat ****

Continue Reading...

Memasang Readmore Otomatis Dengan Javascript

Kembali soal Readmore, tapi kali ini kita akan memasang readmore yang bekerja secara otomatis Untuk memasang readmore otomatis terlebih kita harus menghapus versi readmore terdahulu,  bagi kita yang sudah memasangnya. Mungkin kita tidak usah membahas cara menghapus 2 versi readmore terdahulu, yaitu Readmore di Template Classic dan Readmore di template Baru , karena anda-anda pasti sudah tahu caranya. Sebagai gambaran saja, untuk menghapus readmore yang lama kebalikan dari cara memasangnya.

Dengan memasang Readmore Otomatis, kita tidak usah lagi memenggal kalimat dengan memasukkan  " Insert Jump Break " Lagi , Karena secara otomatis nantinya akan dipenggal sendiri .

Langsung saja kita ke cara memasang readmore Otomatis .
Sigin di draft blogger
Dalam dasbor masuk Tata letak --> Edit HTML
Centang Expand Template Widget
Readmore otomatis ini menggunakkan kode javascript, jadi copy kode javascript dibawah ini :

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 300;
summary_img = 250;
img_thumb_height = 50;
img_thumb_width = 50;

</script>

<script type='text/javascript'>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks

********************************************/

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" /></span>';

summ = summary_img;

}

var summary =  imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Paste kan diatas kode ini </head>, Silahkan di save dulu .

Sekarang Cari kode ini :

<p><data:post.body/></p>

biasanya disimpan diatas ini <!-- clear for photos floats -->
Ganti kode <p><data:post.body/></p> dengan kode dibawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id' style='text-align: justify;'>

<p><data:post.body/></p>

</div>

<script type='text/javascript'>

createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<a expr:href='data:post.url' style='float:right;padding-top:10px;'>[Read More...] - <data:post.title/></a>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<p><data:post.body/></p>

</b:if>

Jangan lupa jika beres memasukkan kode diatas di save.

Sedikit penjelasan :

var thumbnail_mode = "float";  ( float: letak thumbnail berada di  kiri atau jika tidak silahkan ganti dengan " no-float " ).
summary_noimg = 300; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 50; (tinggi Thumbnail dalam pixel)
img_thumb_width = 50; ( lebar Thumbnail dalam pixel)

Kemudian jika kita ingin menghilangkan judul post didepan Readmore, tinggal menghapus kode ini :

<data:post.title/>

Silahkan sesuaikan yang menurut anda cocok dengan lebar template anda.

**** Semoga Bermanfaat ****

Continue Reading...

Label Di Klik Tampil Judul Posting Saja Plus Ada Background

Tag : Menambah,Membuat Tampilan Label Atau Kategori Ada Variasi Di Blog

  Untuk memudahkan pengunjung mencari topik yang dicarinya, biasanya para blogger membuat kategori atau label . Sehingga bila pengunjung menemukan artikel yang  sesuai dengan topik yang dicarinya, tinggal meng klik saja judul dari label atau kategori yang disediakan. Tetapi dalam default template blogger, jika kita meng klik nama atau judul label, maka opsi yang di tampilkan adalah Judul posting dengan isinya.

Untuk menyiasati supaya yang tampil hanya judul posting saja tanpa disertai isi postingan, kita perlu merubah atau menambahkan kode html, untuk itu seperti biasa kita harus :
Sigin di draft blogger
Dalam Dasbor masuk Tata Letak --> Edit HTML
Centang Expand Template Widget ,Kemudian kita cari kode berikut:

<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

Selanjutnya kita ganti kode yang diwarnai kuning dengan kode dibawah ini, silahkan di copy :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Sekarang simpan atau save dulu.

Selanjutnya bila kita ingin tampilan judul itu ada border atau ada background sekaligus dipasangi icon, kita tinggal menyisipkan kode berikut, silahkan di copy kodenya :

<div style='padding:5px 0 5px 5px;border-bottom:1px solid #000;margin-bottom:2px;background:#eee;color:black;font-size:15px;'>
<img alt=' ' border='0' src='http://URL gambar icon anda'/>

Paste kan diantara kode ini :
<a expr:href='data:post.url'> Kode yang disisipkan <data:post.title/></a>
Jangan lupa tambahkan tag penutup </div> sebelum tag ini  </a>

Sekarang simpan, dan coba hasilnya.

Belajar Bersama

**** Semoga Bermanfaat ****

Continue Reading...

Membagi 2 Kolom Header Blogspot (versi 1)

Seperti sudah di ketahui, biasanya template default blogger setiap elemen kolom nya cuma disediakan satu, baik itu kolom header, kolom postingan, kolom sidebar, crosscol dan kolom footer. Nah,Untuk menambah kolom-kolom  di template blogger yang perlu kita lakukan adalah menambahkan kode ataupun merubah kode kode pada CSS.

Continue Reading...

Membagi 2 Kolom Header Blogspot (versi 2)

Ini merupakan lanjutan dari cara membagi 2 kolom header. Model yang pertama anda bisa membacanya disini. Sedangkan untuk model yang kedua, silahkan ikuti terus tulisan ini. Langsung saja menuju pokok bahasan biar tidak terlalu panjang tulisannya.

Continue Reading...

Menambah Background Pada Tulisan Readmore

Mungkin postingan yang mengulas tentang readmore sudah tidak terhitung lagi saking banyaknya. Coba anda ketikan kata kunci ReadMore di search engine, baik google maupun yahoo, pasti jumlahnya banyak sekali yang membahas tulisan mengenai readmore. Di blog ini juga pernah dibahas beberapa kali mengenai readmore, coba anda cek disini dan disini atau bisa juga anda baca disini.

Continue Reading...

Cara Membuat Dan Membagi Dua Kolom Sidebar

Dalam Template blogger default , biasanya kolom sidebar yang disediakan cuma satu. Fungsi dari kolom sidebar ini, tentu kita semua sudah pada tahu yaitu untuk menyimpan berbagai gadget atau pun widget, baik berupa gambar, aplikasi tambahan, file html, javascript dan masih banyak lagi, Sehingga tampilan web atau blog kita lebih rame.

Continue Reading...

Membuat Double Navigasi/Navbar Di Blogger Plus..

Setiap web biasanya menyediakan Navbar di tampilan utamanya, maksudnya tentu saja untuk memudahkan pengunjung mencari halaman yang berisi topik yang sedang dibutuhkannya. Nah, kali ini kita akan belajar cara membuat Navigasi atau Navbar sekaligus double plus link untuk Facebook dan Twitter, khususnya yang akan ditempatkan di blogger. Contohnya bisa dilihat gambar diatas.

Continue Reading...

Memindahkan / Merubah Tanggal Publikasi Dibawah Judul Posting

Bila kita menggunakan template default blogger, biasanya saat kita memposting sebuah artikel dan mempublishnya biasanya akan tampil juga tanggal publikasinya. Tetapi  tanggal , tahun , bulan dan hari itu biasanya di tempatkan diatas page title / judul posting. Nah, sekarang bagaimana caranya supaya tanggal dan tahun itu tampil dibawah posting ?. Sebagai contoh kita bisa melihat gambar di bawah ini :

Continue Reading...

Menghiasi Blog Dengan Jam dan Tanggal

Biasanya jika kita sedang browsing atau menjelajah internet suka lupa waktu saking asyiknya. Atau jika kita lagi utak-atik blog kita, baik sedang mengetik artikel, menghias blog ataupun mengutak atik kode html( bagi yang sedang Belajar) di blog kita, biasanya suka lupa waktu (seperti saya ini..he.hee..).

Continue Reading...