Minta Voting Untuk Mendukung Saya

Minta Voting Untuk Mendukung Saya

Dalam rangka lomba Blog Se-SMA Kab. Jepara, Saya mewakili SMA Saya yaitu SMAN 1 Mayong dalam lomba blog tersebut. Blog yang Saya buat adalah http://smanmayong.blogspot.com.

Penentuan pemenang lomba blog ini salah satunya melalui Voting di blog komep. Nah maka dari itu Saya sebagai Author blog SMAN Mayong meminta dukungan dari Anda melalui voting.

Caranya

Kunjungi http://komep.blogspot.com dan di sidebar kanan ada Voting Area, Lalu pilih SMAN 1 MAYONG dan klik tombol Vote.

Saya ucapkan terima kasih sebesar-besarnya untuk yang udah Voting. Semoga perjuangan Saya akhir-akhir ini tidak sia-sia..

Ayo Voting sebelum tanggal 30 Desember 2009

Salam Blogger
Dasar CSS

Dasar CSS

Taukah Anda apa itu CSS (Cascading Style Sheet) ?, CSS adalah bahasa scripting untuk memformat tampilan website secara keseluruhan. Misalnya Anda ingin mengatur jenis dan ukuran huruf, background, posisi element dan sebagainya. Sebagai contoh kita akan memformat tag p (parapraph) keseluruhan pada satu element dengan menggunakan cara HTML seperti ini <p font="tahoma">text</p>. Akan lebih efisien lagi jika kita memformat tag p dengan menggunakan CSS agar tidak terlalu rumit. Dan Anda juga bisa menyusun element layout dengan CSS tanpa harus menggunakan table yang menurut saya terlalu rumit dalam codingnya.
CSS juga bisa di akses oleh bahasa pemrograman, misalkan javascript, PHP dll.

Pengguna'an CSS ada 3 cara yaitu

  1. Langsung disisipkan didalam tag <head></head>. Untuk menyisipkan di dalam tag head harus diawali dengan tag <style type="text/css"></style>

  2. Menggunakan file external, artinya script css ditulis dalam file tersendiri dengan akhiran .css. dan sisipkan file ini di dalam tag <head> dengan cara seperti ini <head><link rel="stylesheet" href="css/style.css" type="text/css" /></head>

  3. Langsung pada tag yang bersangkutan, misalkan <div style="style_nya"></div>
Ada aturan dalam penulisan CSS ini, CSS ditulis dalam bentuk block-block script yang disebut style. Dan Saya akan mencoba menerangkan lebih detail lagi dalam cara menuliskan CSS.

  1. Menggunakan tanda # sebagai awalan style, contohnya

    #gaya{
    background-color:blue;
    }

    tanda ini berarti untuk menggunakan style ini harus menggunkana atribut id, dan setiap tag pasti memiliki atribut id, misal <div id="gaya">ini teks</div>. Sifat dari id adalah unik, tidak boleh ada elemen yang memiliki id yang sama, makanya style ini hanya bisa digunakan sekali.

  2. Menggunakan tanda dot (.) sebagai awalan style, contohnya

    .gaya{
    background-color:blue;
    }

    tanda ini berarti untuk menggunakan style ini harus menggunakan atribut class, setiap tag pasti memiliki atribut class. Misalkan <div class="gaya">ini teks</div>. Sifat dari class adalah tidak unik, artinya dalam 1 dokumen HTML boleh memiliki lebih dari 1 class yang sama. Dengan menggunakan tag

  3. Tanpa tanda, tetapi langsung mengarah pada tag HTML, misalkan

    div{
    background-color:blue;
    }

    artinya semua tag div akan dikenai style tersebut

  4. Turunan, baik # maupun dot (.) bisa menurunkan style. Style anak juga akan memiliki style dari induk.
    Contohnya

    #induk .anak{
    background-color:red;
    }
    cara menggunakannya
    <div id="induk">
    <div class="anak">bla_bla</div>
    </div>

    artinya class anak adalah turunan dari id induk. Jika id induk dihilangkan, maka class anak tidak akan bekerja.
Penggunaan tanda # atau dot(.) tergatung pada kasus yang dihadapi, dan sangat bervariasi. Awalnya binggung cara menggunakanya, kayaknya sama saja sih, tetapi jika anda sering menggunakannya, ada saat yang tepat apakah anda akan menggunakan tanda # atau dot(.) atau malah turunan.

Sedikit tentang dasar CSS dan semoga dapat membantu Anda yang pastinya CSS tidak bisa ditinggalkan dalam pengolahan halaman web dan browser juga sudah ada yang membuat script CSS yang hanya support dengan browser tersebut misalnya Mozilla Firefox, dll.

dirangkum dari berbagai sumber dan disederhanakan. salah satunya adalah http://bimoweb.com/dasar-css-scripting.html

Panduan Awal Membuat Blog

Blog sebuah gaya hidup baru era digital yang sudah meluas di berbagai kalangan, dengan tujuan masing-masing orang membuat blog untuk kepentingan personal, komersial maupun organisasi. Untuk saling bertukar pikiran, opini maupun saran itulah salah satu tujuan orang membuat blog. Tapi sebagian orang masih belum bisa tentang cara membuat blog. bagaimanakah membuat blog secara gratis itu?

langkah pertama yang harus Anda punya adalah alamat email. Jika belum mempunyai alamat email silahkan ikuti panduan dibawah ini.


Penulis meyarankan membuat email di gmail (google mail) karena satu layanan dengan blogger yang menyediakan layanan blog secara gratis.

Panduan Membuat Email Gmail
  1. Masuk alamat www.gmail.com

  2. Lalu klik tombol "Buat akun"


  3. Lalu setelah itu akan muncul form-form yang harus Anda isi dengan benar dan sesuai data diri Anda.

  4. Setelah semuanya terisi dan vertifikasi kata sudah diisi dengan benar klik tombol "Saya Menerima. Buat Akunku."


  5. kalau semua form diisi dengan benar alamat dan mengklik tombol "Saya menerima. Buat.." alamat emailpun sudah jadi.

Nah setelah kita punya alamat email kita bisa membuat blog dengan cara sebagai berikut :

Selain email dari Gmail kita pun bisa mendaftar blog dengan alamat email yang lainya misalnya Yahoo Mail, Plasa dan yang lainya
Oke kita bahas cara membuat blog dari awal.

Cara Membuat Blog di Blogger
  1. Masuk alamat www.blogger.com

  2. Lalu klik tombol navigasi "Ciptakan Blog Anda"

  3. Lalu isi form yang mucul dengan benar sesuai data diri Anda

    Setelah diisi dengan benar contreng kotak "Saya Menerima..." Lalu klik tombol "Lanjutkan"

  4. Lalu akan muncul konfigurasi nama blog Anda seperti dibawah ini, isi judul blog dan alamat blog Anda



    Setelah diisi klik tombol "Lanjutkan"

  5. Setelah langkah ke empat selesai sekarang pilih sebuah template Anda. Pilih template yang Anda sukai kemudian klik tombol "Lanjutkan"

  6. Dan blog Anda sudah jadi apabila ingin memposting silahkan klik tombol "Mulai Blogging"
Mudah kan membuat blog itu? dengan blog Anda bisa lebih keren lho . Happy blogging!! celebrate
ASCII Generator Dan Pengertian ASCII

ASCII Generator Dan Pengertian ASCII

Halo sobat blogger dimanapun Anda berada kali ini Saya akan membahas tentang ASCII (American Standard Code for Information Interchange), asing bukan yah kata-kata itu? tapi secara tidak menyadarinya kita sering menjumpainya nah sebenarnya apa itu ASCII?

ASCII (American Standard Code for Information Interchange) adalah suatu standar internasional dalam kode huruf dan simbol seperti Hex dan Unicode tetapi ASCII lebih bersifat universal, contohnya 124 adalah untuk karakter "|". Ia selalu digunakan oleh komputer dan alat komunikasi lain untuk menunjukkan teks. Kode ASCII sebenarnya memiliki komposisi bilangan biner sebanyak 8 bit. Dimulai dari 00000000 hingga 11111111. Total kombinasi yang dihasilkan sebanyak 256, dimulai dari kode 0 hingga 255 dalam sistem bilangan Desimal. (http://id.wikipedia.org/wiki/ASCII).

Nah sekarang bahasan utamanya adalah membuat karya seni dengan ASCII art, sering kita mendapat sebuah seni text yang berbentuk gambar misalnya :

Gambar Mobil.
   ___________________
|,-----.,-----.,---.\
||     ||     ||    \\
|`-----'|-----||-----\`----.
[       |    -||-   _|    (|
[  ,--. |_____||___/.--.   |
=-(( `))-----------(( `))-==
  `--'             `--'
Dan masih banyak contoh yang lainya kunjungui situs ini. Dan pada zaman dahulu printer tidak bisa membuat grafis dan ASCII art inilah alternatifnya. encem

ASCII generator memudahkan Anda yang ingin membuat ASCII art dengan text atau gambar, mau tau caranya kunjungi saja http://ascii.mastervb.net/
Silahkan ikuti petunjuk dari situs itu dan buat kreasimu sendiri.

Untuk tips biasanya untuk membuat ASCII art pada HTML menggnuakan tag <pre> dan ditutup </pre> agar code-code ASCII tersusun rapi dan tidak terpecah-pecah.

Nah sedikit tentang ASCII silahkan mencoba mengembangkan kreatifitas.
untuk lebih banyak situs yang menyediakan ASCII generator silahkan brwosing.


:wave:

Membuat Gambar Graffiti Online

Tau gak graffiti itu apa?, yang menurut saya graffiti itu yang biasanya tulisan-tulisan keren yang digambar oleh seniman graffiti di tembok-tembok kota itu lho? untuk mengexpresikan kebebasanya. Biasanya berupa tulisan-tulisan yang dibuat sedemikian unik dan artistik dan bahkan berupa gambar-gambar. Nah bisa gak Anda membuat tulisan bergaya graffiti dengan mudah?

Graffiti creator jawabnya karena disitu Anda bisa membuat tulisan-tulisan bergaya graffiti dengan mudah. Selain itu?
Anda juga bisa melihat gallery para seniman graffity manca negara yang memamerkan karyanya di situs itu. Pokoknya asyik dan keren deh. Kunjungi aja nih www.graffiticreator.net




Gambar diatas keren gak? sengihnampakgigisengihnampakgigisengihnampakgigi

Cara Membuat Forum

Forum atau media diskusi yang memungkinkan member dapat saling bertukar pikiran dan saling tanya dan menjawab antara anggota, atau dalam artian pendek adalah bertemunya sang newbie (pemula) dengan master (jagoan) dalam sebuah topik pembicaraan, wah saya sedikit ngawur untuk lebih jelasnya tanyakan saja pada mbah google .

Kita dapat membuat forum sendiri secara gratis. Mau tau caranya?

berikut langkah-langkahnya :

  1. Buka situs www.forumotion.com

  2. Lalu klik tombol "Creat a free forum"

  3. Lalu pilih sebuah sistem forum : phpbb3, phpbb2, invison atau punBB.

  4. Kemudian pilih sebuah templatenya dan klik tombol "continue"

  5. Lalu isi form forum information dan form admin information sesuai dengan data Anda

  6. Kalau langkah ke 5 sudah diisi dengan benar kemudian centang "I Agree...." dan klik tombol continue.

  7. Kemudian ada test admin password diisi samakan dengan password Anda tadi dan klik continue.

  8. Jadi deh.sengihnampakgigi dan silahkan ikuti keterangan berikutnya untuk memanagement forum Anda.
Nah diatas sedikit tutorial cara membuat forum dan untuk versi indonesiannya masuk saja situs www.indonesianforum.net, semoga bermanfaat.


babaibabaibabai

Perubahan Bentuk widget Follower

Dapet kabar dari blogger buzz serta mas ade sanusi katanya widget follower berubah tampilan menjadi sekaligus widget google friend connect, ternyata setelah saya buktikan benar apa katanya. widget follower yang memberikan fasilitas subscribe pada dashboard blogger yang mengikuti dan sekarang ada tambahan "google friend connect" pada widget tersebut.



Dengan perubahan tampilan dan tambahan fitur ini semoga para blogger lebih suka dan menikmati fasilitas yang baru dan keunggulannya. Untuk blogger maju terus memberikan tren gaya hidup digital.

PDF E-book Search Engine

Untuk para penggemar "Electronic Book" atau yang sering disingkat E-book berbentuk PDF (Portable document format) yang bisa dibaca dengan PDF reader misalnya Adobe Reader atau software sejenis, untuk mencari E-book sudah tersedia search engine yang melayani kita untuk mencari E-book dengan format PDF.
pdf-search-engine memberikan fasilitas PDF search engine dari berbagai situs yang menyediakan PDF dengan gratis.

Jadi tak usah pusing jika kita mau mencari e-book secara online tinggal cari di pdf-search-engine dengan cara masukkan kata kunci buku yang dicari kemudian klik tombol "search books" nah maka akan muncul e-book berformat PDF sesuai dengan kata kunci Anda.
Jika mau mencoba mencari PDF silahkan kunjungi disini.
Widget Penerjemah Dari Google

Widget Penerjemah Dari Google

Widget penerjemah bahasa dari google ini sudah banyak digunakan dikalangan blogger dan webmaster, apabila ada pengunjung dari manca negara yang tidak bisa mengartikan bahasa indonesia kedalam bahasa yang diinginkan maka widget google translate bisa membantu menerjemahkan situs kita, tapi jika kita menggunakan bahasa yang tidak baku google translate akan kesulitan menerjemahkanya, jadi diharapkan menggunakan bahasa baku jika ingin sempurna diterjemahkan oleh google translate ini.

dibawah ini adalah bentuk widget tool dari google translate :



Udah dicoba belum? kalau sudah jika mau pasang widget ini silahkan baca dibawah ini.

Copy paste code dibawah ini kedalam blog Anda dengan cara :

1. Masuk menu Layout kemudian masuk menu Page Elements
2. Pilih box layout yang diinginkan kemudian klik Add a gadgets
3. Pilih Gadget HTML/JavaScript dan taruh code dibawah ini :

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>

Code yang berwarna merah diatas adalah ukuran dari widget yang bisa kamu ubah-ubah. Kalau sudah kemudian SAVE.

Nah sedikit info dari saya dan jika Anda mau menggunakan layanan dari google translate yang lain kunjungi : http://translate.google.com

Membuat Menu Tab View

Menu tabview adalah menu yang berbentuk tabel dengan pengelompokan halaman sesuai dengan tabel menu diatasnya. Menu ini banyak diapakai untuk menghemat tempat pada blog dengan sistem menampilkan atau menutupi halaman tabel sesuai dengan tabel menu diatasnya. Jadi jika kita mengklik menu diatasnya maka halaman tabel yang muncul adalah halaman tabel yang dibuat sesuai dengan menu tabel diatasnya, dan jika kita mengklik menu tabel lain maka yang muncul adalah halaman tabel yang bersesuain namun tetap pada satu tempat itu.

Coba perhatikan dibawah ini :


Gimana sudah paham belum? mau cara buatnya?

Oke kita pakai teori dari Mas Kendhin saja karena mudah dipahami.

Pertama yang harus kamu lakukan adalah Log In dan masuk menu Layout kemudian masuk bagian Edit HTML

Selanjutnya taruh code CSS dibawah ini diatas code ]]></b:skin>


div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


Perhatikan text yang berwarna merah itu keterangan dari menu tab view yang bisa kamu edit sesuai keinginan kamu, untuk code warna bisa dilihat disini.

kalau sudah pasang script dibawah ini diatas code </head>



<script src='http://sites.google.com/site/anasku2000/tabview.js' type='text/javascript'/>


kalu sudah silahkan "Save Template" Anda.

kemudian masuk bagian "Layout -> Page Elements, lalu cari tempat gadgetnya kemudian klik Add new gadget kemudian pilih HTML/JavaScript dan taruh Code dibawah ini :



<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :

  1. Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
  2. Code yang berwarna hijau adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)
  3. Code yang berwarna merah diatas adalah halaman dari tabel yang bisa kamu pasangi code-code gagdet, gambar atau link.
  4. Dan jika ingin menambah halaman tabel perhatikan code yang berkedip, dan tambah seperti itu dibawahnya.
Kalau sudah tinggal SAVE.

CSS Background

Masih membahas tentang CSS (Cascading Style Sheets) background yang memungkinkan Anda dapat mengatur posisi background, warna elemen background, pengulangan background dan yang lainya. Saya akan membahas CSS yang digunakan dalam pengaturan background secara singkat dan jelas, semoga bisa sedikit membantu Anda dalam mengontrol background dari elemen.

Ada beberapa macam property background yang memungkinkan Anda dapat mengontrol background dari elemen.

1. background-color

Memungkinkan Anda memberikan warna pada background











PropertyKeterangan
transparent
Mengosongkan warna background atau membuat elemen menjadi transparan dengan elemen dibawahnya.
#FF3366
Memberi warna pada background, code #FF3366 adalah code warna hex dari warna merah, Anda bisa mengubah dengan code warna rgb atau nama warna misalnya: red (merah), black (hitam), dan sebagainya.

Contoh :
#kotak
{
background-color:#FF3366;
}

Menjadi


ELEMEN KOTAK


2. background-image

Memungkinkan Anda menambahkan gambar pada background











PropertyKeterangan
url(URL_GAMBAR)
memberi gambar pada background elemen, code URL_GAMBAR bisa Anda ganti dengan url server gambar Anda.
none
Mengosongkan background gambar pada elemen.

Contoh:

#elemen-gambar
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg)
}

Menjadi :

ELEMEN GAMBAR

3. background-attachment

Memungkinkan Anda mengatur background gambar dengan pergeseran scroll bar











PropertyKeterangan
scroll
Memungkinkan elemen background mengikuti penggeseran scroll bar.
fixed
Memungkinkan elemen background tidak mengikuti pergeseran dari scroll bar.

Contoh

#elemen-attachment
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-attachment:fixed
}

Menjadi


BACKGROUND FIXED

GESER SCROLL

BACKGROUND FIXES

GESER SCROLL

4. background-repeat

Memungkinkan Anda mengatur pengulangan background gambar
















PropertyKeterangan
repeat
Membuat elemen gambar background menjadi berulang-ulang
no-repeat
tidak ada pengulangan
repeat-y
pengulangan vertikal
repeat-x
pengulangan horizontal

Contoh :

#elemen-ulang
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-repeat:repeat-y;
}

Menjadi :
PENGULANGAN BACKGROUND SECARA VERTIKAL


PENGULANGAN BACKGROUND SECARA VERTIKAL


PENGULANGAN BACKGROUND SECARA VERTIKAL

PENGULANGAN BACKGROUND SECARA VERTIKAL

5. background-position

Memungkinkan Anda mengatur posisi background gambar Anda.











PropertyKeterangan
top leftPenempatan posisi background gambar, top left adalah posisi background berada kiri atas, Anda bisa mengganti posisi menjadi :
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%mengatur posisi background secara sumbu horizontal dan vertikal, misalnya 5% 30% adalah penempatan gambar horisontal 5% dan vertikal 30%. Atau bisa menggunakan pixel, 20px 30px artinya posisi horizontal berada pada 2o pixel dan vertikal 30 pixel.

Contoh:

#elemen-posisi
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-position:top left;
background-repeat:no-repeat;
height:200px
}

Menjadi :


ELEMEN BACKGROUND

PENGULANGAN

ATAS KIRI

Dari semua perincian diatas Anda dapat menggunakan satu perincian property background saja. misalnya :

#kotak
{
background:#FFFFFF url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg) no-repeat top left fixed
}

Nah sedikit tutorial dari Saya semoga dapat membantu Anda. Sekian semoga bermanfaat.
Langganan: Postingan (Atom)