Tips Blog | Tutorial Blog | Belajar Blog

Green Spitial

image

 

Template Information

 

Name Green Spitial
Author http://www.blog-zone.info
Designer http://www.mybloggerthemes.com
Properties 2 Columns, White, Green, Rounded Corner, Fixed Width, Right Sidebar, Gradient
Descriptions Green Spitial is a new styled Blogger template. Template is also very neat. Green spitial use navigation with a black shadow, making it more arise and looks elegant. Suitable for personal blog.

Navigasi Halaman Menggunakan Javascript

image Tutorial pemasangan navigasi halaman ini sudah pernah saya bahas dulu, dengan cara meletakkan langsung seluruh kode di gadget. Namun masih saja ada yang kesulitan dengan panduan peletakkan navigasi halaman tersebut. Sekarang saya akan coba berikan sedikit tips yang berbeda dan tentunya dengan variasi bentuk yang lebih menarik. Saya tidak akan panjang lebar menjelaskan tentang pengertian navigasi halaman ini karena sudah pernah saya bahas sebelumnya.

 

Kode css dan javascript ini saya ambil dari blog dengan bentuk yang sama persis. Tapi jangan menelan mentah-mentah kode css yang ada karena sobat bisa kreasikan sesuai dengan warna background blog sobat. Jika kode script ini saya pasang langsung di pasti akan membuat sobat pusing karena kode ini sangat panjang, oleh karenya saya simpan saja di . Berikut cara pemasangannya.

 

  1. Setelah login di blogger, silahkan sobat klik Rancangan.
  2. Kemudian klik tab Edit HTML.
  3. Untuk radio button Expand Template Widget tidak usah di klik karena akan menambah pusing nantinya.
  4. Letakkan kode css berikut ini sebelum kode ]]></b:skin>

     

    .showpageNum a {

    color:#FFF;padding:4px 10px;

    margin:0 2px;

    text-decoration:none;

    -webkit-border-radius:2px;-

    moz-border-radius:2px;

    background:#848484

    }
    .showpageOf {

    color:#222;

    margin:0 6px 0 0

    }
    .showpageNum a:hover {

    background:#222;

    color:#FFF

    }
    .showpagePoint {

    color:#FFF;

    text-shadow:0 1px 2px #333;

    padding:4px 10px;

    margin:0 2px;

    -webkit-border-radius:2px;

    -moz-border-radius:2px;

    background:#222;

    text-decoration:none

    }
  5. Dan letakkan kode berikut sebelum </body>

     

    <script type='text/javascript'>
    var home_page=&quot;/&quot;;
    var urlactivepage=location.href;
    var postperpage=10;
    var numshowpage=7;
    var upPageWord =&#39;&#9668;&#39;;
    var downPageWord =&#39;&#9658;&#39;;
    </script>
    <script src='http://miscah.googlecode.com/files/pagenav.js' type='text/javascript'/>
  6. Kemudian Simpan Template.

 

Keterangan :

  • var postperpage=10; adalah jumlah postingan dalam satu halaman, sesuaikan dengan jumlah postingan sobat, jika jumlah postingannya 5 maka ganti angka tersebut dengan angka 5.
  • var numshowpage=7; adalah jumlah tombol navigasi dalam satu halaman.

 

Semoga berhasil ya !

Membuat Tepi Gambar Bershadow Dengan CSS 3

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :
  1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
  2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {
Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.

Top 1000 Website Versi Google

image Google sebagai raja search engine mengeluarkan daftar 1000 web terbaik. Penilaian ini berdasarkan jumlah traffic dan page view dari web tersebut. Dan sampai tulisan ini saya buat, facebook dan yahoo masih menempati urutan pertama dan kedua (tidak termasuk google). Mau tau siapa saja yang masuk dalam daftar 1000 web terbaik versi google, yuk mari �

 

Gambar dibawah ini adalah review dari list tersebut, untuk melihatnya langsung saja tuju ke halaman Daftar 1000 Web Terbaik.

 

image

 

Bagaimana, ada tidak punya sobat dalam 1000 daftar web terbaik versi google? hhmm..ga mungkin ya.  

 

Semoga suatu saat kita semua bisa sukses seperti mereka, tidak perlu muluk-muluk untuk masuk dalam daftar 1000 web terbaik. Yang penting kita menulis yang terbaik dan mempunyai nilai fungsi buat pembacanya, dan jangan lupa tetap berusaha mencari peluang bisnis yang ada di dunia maya ini.

 

Semoga bisa menghibur ! Thumbs-up

Keyboard Shortcuts Untuk Posting Di Blogger

image Keyboard shortcuts membuat pekerjaan dalam urusan posting di blogger menjadi lebih mudah. Yang paling populer mungkin dalam urusan text dalam postingan, seperti membuat tulisan bold dengan CTRL+B atau untuk tulisan italic dengan CTRL+I. Sama dengan yang biasa kita gunakan pada saat menulis di office word. Dibawah ini ada beberapa list keyboard shortcuts, semoga bermanfaat.

 

Keyboard shortcuts ini telah di uji pada browser Internet Explorer 6+ dan tidak semua bisa berfungsi pada browser Firefox, Chrome dan Opera.

 

 

Shotcut Fungsi Semua Browser ?
CTRL+B
CTRL+I
CTRL+U
CTRL+L
CTRL+Z
CTRL+Y
CTRL+SHIFT+A
CTRL+SHIFT+P
CTRL+D
CTRL+P
CTRL+S
CTRL+G
Bold Text
Italic Text
Underline text
Blockquote (hanya pada saat EDIT HTML)
Undo last operation
Redo last operation

Insert Hyperlink

Preview Post

Save as Draft

Publish Post

Autosave

Indic Transliteration

Ya
Ya
Ya
Tidak
Ya
Ya
Tidak
Tidak
Tidak
Ya
Ya
Tidak

 

Selamat menggunakan dan semoga dapat mempermudah sobat dalam membuat setiap artikel.