Tampilkan postingan dengan label Html. Tampilkan semua postingan
Tampilkan postingan dengan label Html. Tampilkan semua postingan

Minggu, 25 Maret 2012

Cara Membuat Text Area dan Modifikasinya

09.43    No comments

Saat menulis artikel blog, saya yakin sobat pasti ingin membuat tulisan dengan semenarik mungkin, tulisan yang menarik tentunya juga harus disertai dengan tampilan yang menarik pula. Termasuk penggunaan teks area, yaitu teknik untuk menampilkan kalimat/sekelompok kata semisal kode css atau html. Menurut saya kotak teks area terlihat baik jika antara lebar dan tinggi kotak cukup proporsional. Text area berfungsi seperti blockquote yaitu memisahkan kelompok kata/kalimat tertentu agar lebih jelas, misalnya jika blog sobat adalah blog tutorial, penggunaan text area dan blockquote sangat penting artinya. Ikuti langkah langkah berikut ini, 1. Masuk ke akun Blogger > Layout/Rancangan > Edit HTML>Expand template 2. Cari kode </b:skin> 3. Masukkan kode di bawah tepat di atas kode tadi.
.julak-textarea { padding:0;margin:0;background: #fff;width:400px;height:40px;color:#666;font:12px arial;border:1px dotted #289728; }.julak-textarea:hover {color:#289728;border:2px solid #666;}
Selesaikan dengan save template!Cara menggunakan text area. Masuk ke menu EDIT HTML pada saat menulis artikel / static page ,
<textarea class="julak-textarea" readonly="readonly">WRITE-TEXT-HERE</textarea>
Ganti tulisan WRITE-TEXT-HERE dengan text yang sobat inginkan di dalam text area.Jika Anda ingin mengubah font, warna atau singkatnya seluruh tampilan dari kotak teks maka Anda hanya perlu mengedit bidang berikut dalam kode CSS di atas,background: #fff; –> Mengubah warna background text areawidth:400px; –> Mengubah lebar kotak text areaheight:40px; -> Untuk Mengubah tinggi kotak text areacolor:#666; -> Mengubah warna font color text boxfont:12px arial; –> Mengubah ukuran huruf dan jenis font border:1px dotted #289728; } –> Untuk mengubah ukuran border/batas/garis, style (i.e dotted, solid, dashed) dan warna. .julak-textarea:hover {color:#289728; –> Ini untuk mengubah warna huruf saat mouse mengarah ke text area border:2px solid #666; -> mengubah ukuran border, style dan warna saat mouse diarahkan ke text area
Read More

Jumat, 23 Maret 2012

Cara Membuat Tombol Next Page Di Blog

10.48    No comments

Next page Number berfungsi untuk memudahkan pengunjung dalam menjelajahi situs,Next page Number ini hanya menampilkan angka 1|2|3|4..dst. Untuk lebih jelasnya silahkan lihat gambar berikut :




Langsung saja cara membuat nya :

1.Login ke blog sobat.
2.Pada tampilan Dashboard pilih Design kemudian klik Edit HTML.
3.Download Template lengkap ,untuk menjaga hal-hal yang tidak diinginkan.
4.Centang Expand Template Widged.
5.Silahkan sobat cari kode ]]></b:skin> (Ctrl+f untuk memudahkan pencarian).
6.Copy kode yang ada dibawah ini kemudian paste di atas kode ]]></b:skin>

.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#33333 

7.Kemudian cari kode </body> 
8.Copy kode yang ada dibawah ini dan paste kan diatas kode </body> 

<script type="text/javascript">
var pageCount=5;
var displayPageNum=5;
var upPageWord='Previous';
var downPageWord='Next';
</script>
<script src="http://yourjavascript.com/3043224162/blogger-page-navi.v1.js.txt.js" type="text/javascript">
</script>

9.Next simpan.
Read More

Cara Mengilangkan Navbar

10.41    No comments
Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS : 


/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


Atau bisa juga menaruh kode berikut persis di bawah kode <body> : 


<style type='text/css'>
#navbar-iframe {display:none;}
</style>


Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini : 

  • Untuk template klasik



    1. Sign in di blogger


    2. Klik menu Template


    3. Klik menu Edit HTML


    4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman


    5. Copy kode berikut lalu paste di atas kode </style>



      6. /* hilangkan navbar
      ----------------------------- */

      #navbar-iframe {
      height:0px;
      visibility:hidden;
      display:none
      }


    6. Klik tombol Simpan Perubahan Template


    7. Selesai.




  • Untuk template baru



    1. Sign in di blogger


    2. Klik menu Layout


    3. Klik menu Edit HTML


    4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data


    5. Copy kode berikut lalu paste di atas kode ]]></b:skin>



      6. /* hilangkan navbar
      ----------------------------- */

      #navbar-iframe {
      height:0px;
      visibility:hidden;
      display:none
      }


    6. Klik tombol Simpan Template


    7. Selesai.


    Selamat menikmati blog tanpa navbar !
    Read More
    next page

     
    Hubungi Kami
    Nama Anda :
    Email Anda :
    Perihal :
    Pesan Anda :

    Member Login

    Lost your password?

    Member Login

    Lost your password?