• Featured : 2 columns, Right sidebar, 3 kolom footer, Blockquote Indah, Full color, readmore,... Design By Utta Vifer Moons
  • Featured : 2 columns, Right sidebar, 3 kolom footer, Blockquote, Full color, Slider Post, Rotate Miring, readmore,... Design By Utta Vifer Moons
  • Tutorial Blogger, Free Download, Games, Tips dan Trik Lengkap

0 CSS Tutorial

Minggu, 03 April 2011
Share

Membuat Top atau Bottom Fixed Bar

Oke langsung saja, siapkan satu buah file dengan nama sesuai dengan yang anda inginkan, misalnya, fixedbar.html, lalu isikan seperti ini …
<html>
<head><title>Top Fixed Bar</title>
<style type=”text/css”>

#content
{
width:700px;
margin:100px auto;
font-family : Arial ;
font-size: 13px;
line-height: 20px;
}

#top_bar {
display: block;
position: fixed;
top: 0;

text-align: center;
background: #DFDFDF;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
border-right: 1px solid #333333;
color: #999999;
clear: both;
padding:6px 0;
width: 1030px;
height: auto;
margin: 0 110px 0 110px ;
}

.content_bar
{
font-family : Tahoma ;
font-size: 10px;
}

</style>
</head>
<body>

<div id=”content”>
Dari Abdullah, Nabi S.A.W bersabda:

<p>Beberapa penjelasan penting mengenai Hari Akhir adalah sebagai berikut: Selama kekacauan mengerikan di hari akhir, Allah akan memerintahkan seorang hamba yang mempunyai akhlak yang mulia, yang dikenal sebagai Al Mahdi (pemberi petunjuk ke arah kebenaran), untuk mengajak umat manusia kembali ke jalan yang benar. Tugas pertama Al Mahdi akan berupa dikobarkannya perang pemikiran di dalam dunia Islam dan mengembalikan umat Muslin yang telah jauh dari intisari Islam sejati, menuju iman dan akhlak sesungguhnya. Dalam hal ini, Al Mahdi mempunyai tiga tugas dasar:</p>
<p>1. Menghancurkan seluruh sistem filsafat yang mengingkari keberadaan Allah dan mendukung ateisme.</p>
<p>2. Memerangi takhayul dengan membebaskan Islam penindasan orang-orang munafik yang telah menyimpangkan agama, dan kemudian mengungkap dan melaksanakan akhlak Islam sejati yang didasarkan pada aturan Al Qur’an.</p>
<p>3. Memperkuat seluruh dunia Islam, baik secara politik maupun sosial, dan kemudian mengembangkan perdamaian, keamanan, dan kesejahteraan serta memecahkan berbagai masalah kemasyarakatan.</p>

<p>Menurut sejumlah besar hadits, Nabi ‘Isa AS akan turun ke bumi pada waktu bersamaan dan akan menyeru seluruh pemeluk Kristen dan Yahudi, khususnya, untuk meninggalkan berbagai kepercayaan takhayul yang diyakini oleh mereka pada saat ini dan hidup menurut Al Qur’an. Ketika pemeluk Kristen telah mendengarkannya, umat Islam dan Kristen akan bersama di bawah satu keimanan dan dunia ini akan mengalami zaman perdamaian, keamanan, kebahagian, dan kesejahteraan terbesar yang dikenal sebagai Masa Keemasan.</p>
<p>TANDA-TANDA KEDATANGAN AL MAHDI</p>
<p >Penyimpangan mendalam</p>
<p>Sementara lingkungan yang menyimpang justru dapat membuat orang-orang beriman dengan iman yang kuat meningkat keimanan dan kesabaran mereka, dan pahala mereka di Hari Akhirat, lingkungan seperti ini menyebabkan orang-orang dengan iman yang lemah dan dangkal menjadi kehilangan keimanan mereka atau semakin memperlemahnya. Al Mahdi akan datang ketika lingkungan yang menyimpang ini sudah sangat dalam dan parah.</p>
<p><i>Al Mahdi, salah satu kaumku, muncul sebagai manusia dengan ridha Allah, saat Hari Pembalasan sudah dekat dan melemahnya hati orang-orang beriman karena kematian, kelaparan, dan hilangnya sunah, dan munculnya kemajuan teknologi dan hilangnya makna memerintahkan kebenaran dan melarang kemungkaran. Kemakmuran dan keadilannya akan memudahkan hati orang-orang yang beriman, dan persahabatan serta saling mencintai akan menyelesaikan perselisihan di antara bangsa-bangsa non-Arab dan Arab. (Al-Muttaqi al-Hindi, Al-burhan fi ’Alamat al-Mahdi Akhir al-Zaman, halaman. 66)</i></p>
<p><i>Kekacauan, penyimpangan, dan ketakutan akan muncul di Barat …. Penyimpangan akan meningkat pesat. (Mukhtasar Tazkirah Qurtubi)</i></p>
<p align=”left”><i>Sejenis penyimpangan akan muncul ke permukaan. Tidak satu pun pihak mampu melindungi dirinya dari penyimpangan itu, dan penyimpangan itu menyebar segera ke setiap penjuru. Situasi ini akan bertahan hingga seseorang datang dan berkata, “Hai umat manusia, mulai saat ini pemimpinmu adalah Al Mahdi.” (Ibnu Hajar Haytahami, Al-Qawl al-Mukhtasar fi’alamat al-Mahdi al-Muntazar, hal. 23)</i>
<p>Hadits ini berbicara mengenai sebuah penyimpangan yang akan menyentuh setiap orang dan menyebar dengan cepat. Dengan kata lain, sejenis penyimpangan yang dikenal oleh setiap orang dan menjadikan orang-orang beriman sebagai sasarannya. Penyimpangan ini menentang agama dan Allah. Saat ini, filsafat materialis adalah kecenderungan utama terbesar yang dirancang untuk menolak keberadaan dan penciptaan Allah. Landasan filsafat ini adalah ‘teori evolusi’, yang memberikan dasar, yang oleh pencetusnya disebut sendiri sebagai hal “ilmiah”. Walaupun tidak didasarkan pada bukti ilmiah dan logika apa pun, kalangan materialis tertentu di seluruh dunia tetap berusaha agar teori ini diterima, dengan menggunakan cara-cara yang dikaitkan dengan propaganda yang kuat, kebohongan, dan bahkan penipuan. </p>
<p>Pada saat ini, ketika teori ini telah merasuki hampir setiap rumah tangga melalui media massa dan televisi, maka setiap orang di dunia Islam dan di mana pun berada telah mendengarkannya. Teori ini adalah teori pertama yang dinyatakan sebagai kenyataan ketika seseorang masih kanak-kanak dengan cara kebohongan dan penipuan yang tidak terhitung banyaknya. Ketika mereka tumbuh semakin dewasa, mereka terus disesatkan oleh omong kosong lucu ini, bahwa mereka dan seluruh umat manusia muncul sebagai makhluk hidup hanya karena kebetulan dan bahwa mereka adalah keturunan monyet. Para pemuda dari semua usia dicuci otaknya di seluruh tingkatan pendidikan melalui kebohongan para evolusionis.</p>
<p>Ada sebuah poin penting yang perlu digarisbawahi di sini. Sebagaimana ditekankan oleh Rasulullah SAW pada salah satu haditsnya, penyimpangan yang menyebar cepat dan merata di seluruh dunia hanya bisa mengemuka ketika perangkat teknologi yang tepat tersedia, seperti yang ada sekarang (misalnya, media massa, penerbitan, media elektronik, internet, dan komunikasi satelit). Ketika teknologi tersebut belum muncul di masa lalu, penyimpangan tidak akan menyebar ke seluruh dunia. Akibatnya, tidak ada bentuk penyimpangan lain yang telah menyatakan perang atas keberadaan, penciptaan dan agama Allah terlihat di masa lalu. Semua hal ini adalah di antara tanda-tanda penting, sehingga datangnya Al Mahdi bertepatan dengan masa sekarang.</p>
</div>

<div id=”top_bar”>
<div>
<h2>Iklan/banner di sini …</h2>
</div>
</div>

</body>
</html>

Save, kemudian buka di browser. Inti dari stylenya adalah, elemen :
<div id=”top_bar”>
dan style nya

#top_bar {
display: block;
position: fixed;
top: 0;

top bisa di ganti menjadi bottom, sesuai dengan artinya, top : 0 berarti diletakkan di atas halaman, sedangkan bottom:0 diletakkan di bawah halaman.
posisiton : fixed inilah yang menjadikan elemen div tidak bergerak ke mana-mana, meskipun halaman digeser ke bawah, ataupun di geser ke atas.
Anda bisa melihat demo nya disini
Sangat mudah sekali ya? Oke, selamat mencoba.

 

Read more

0 BELAJAR Membuat WEBSITE - Basic HTML

Share

BELAJAR WEBSITE

Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up Language). Meskipun anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun HTML, Sangat disarankan bahkan nyaris diharuskan, agar anda mengerti bahasa HTML. Untuk itu langkah pertama bagi Anda yang bercita-cita memiliki website sendiri adalah belajar HTML.

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga Dreamweaver. Untuk mudahnya, kita gunakan program Dreamweaver.

Apa yang dimkasud dengan file HTML?

-    HTML merupakan kependekan dari Hyper Text markup Language

-    Sebuah file HTML merupakan sebuah file teks yang berisi 
tag-tag markup

-    Tag markup memberitahukan browser bagaimana harus menampilkan 
sebuah halaman

-    File HTML harus memiliki ekstensi htm atau html

-    File HTML dapat dibuat menggunakan editor teks yang biasa 
kamu pakai.
PENGENALAN KODE HTML
>>New >> Basic Page >> HTML , setelah itu atur ke mode Code
tutorial dreamweaver
disini anda akan menemui tag - tag semacam ini:
<HTML>
</HTML>
Penjelasan:
Masing-masing baris di atas disebut tag. Tag adalah kode yang digunakan untuk me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan tanda kurung runcing. 
Ada tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML> yang ditandai dengan tanda slash (garis miring) di depan awal tulisannya.
Tag di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan dalam browser.

Sekarang kita akan beralih pada tag selanjutnya.
<HTML>
<BODY>
</BODY>
</HTML>
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:
<HTML>
<BODY>
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Sekarang simpanlah file ini dengan meng-klik menu File lalu Save. Nah, lihatlah hasil karya anda yang pertama dengan menekan F12 disitu akan muncul tulisan "Tulisan ini akan tampak dalam browser by ilmugrafis." tanpa tag HTML. Sekarang anda mungkin mulai mengerti cara kerja HTML dan markup tag, begitulah cara kerjanya, jadi yg muncul di broser hanya tulisan saja sedangkan tagnya hanya merupakan suatu perintah bagi browser untuk menampilkan perintah kita.

Apakah tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web? Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atau tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag BODY.
<HTML>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Simpanlah kembali file ini (klik File lalu Save). Untuk melihat bagaimana hasilnya tekan F12 atau klik tombol Refresh pada browser atau bisa juga dengan menekan tombol F5 pada keyboard. Dengan demikian, browser akan memanggil ulang file yang kini sudah mengalami perubahan. Maka akan tampaklah hasilnya:
tutorial dreamweaver
Perlu diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis dalam format heksa contohnya seperti #rrggbb.

Ok setelah menguasai tag di atas maka kita lanjutkan ke inspeksi tag HEAD dan TITLE. Di sini terlihat bahwa kita mempunyai tag <HEAD> dan tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD. Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan judul halaman web ini:
<HTML>
<HEAD>
<TITLE>WEBSITE BUATANKU</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
Simpan lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan Title Bar) dari program browser akan menampilkan judul atau titel dari halaman web anda yaitu: WEBSITE BUATANKU
previewnya kurang lebih seperti ini, disini saya menggunakan browser Firefox:
tutorial dreamweaver
 selesailah latihan pertama Belajar Membuat Website - HTML.
Selamat belajar HTML di Dreamweaver
Sampai ketemu lagi di Tutorial berikutnya
Semoga Bermanfaat ^_^/
Read more

0 Membuat Brush Bubble (gelembung Sabun) dengan Adobe Photoshop

Share
Kita buat dokumen yang agak gede biar brush na nanti rada bagus gambarnya :)

warnai dokumen baru dengan warna hitam dengan brush tool

Buat layer baru.. klik Layer > new > layer
buat lingkaran dengan elliptical Marquee tool , drag sambil klik tombol SHIFT biar lingkaran nya bener-bener bulet..

Klik Edit > Stroke .. beri warna abu-abu agak gelap atau

Klik Select > Save Selection
untuk menyimpan lingkaran tadi biar nanti bisa di load dengan besar dan tempat yang sama..

Klik Channel palette.. sebelahnya layer palette..  terus klik Alpha 1

Ini seleksi kita yang sudah di simpen.. jadi nanti gak usah ribet-ribet lagi buat lingkaran dengan besar dan di tempat yang sama.
Sekarang klik RGB channel

klik lagi Layer palette
Tekan CTRL + D untuk menghilangkan seleksi
Klik Filter > blur > Gaussian blur

Sekarang buat layer baru di atas layer 1..
Klik layer > new >  layer
kita buka seleksi yang tadi kita simpan..
Klik select > load selection
Pilih channel Alpha 1

Klik Edit > Stroke ini untuk membuat lingkaran tipis.. beri warna abu-abu terang .. lebih terang dari yang pertama…

turunin opacity nya menjadi sekitar 20% .. biar lebih soft keliatannya :D

Klik layer 1 ..
Klik Edit > Free Transform
Perkecil lingkaran dengan Blur sehingga tepi nya sama dengan lingkaran tipis.. sambil tekan ALT +SHIFT .. klik + drag pojok kotak seleksi ke tengah..
Jangan lupa waktu perkecil lingkaran sambil tekan tombol ALT + SHIFT bersamaan biar si lingkaran besar tidak mencang menceng.. halah.. bahasa apalagi tuh :p

sekarang buat layer baru lagi di atas layer 2..
Klik layer > new > layer
Klik brush tool .. buat lingkaran yang agak besar.. dengan settingan soft round di Brush setting .. atau klik kanan aja di layar .. nanti muncul ukuran brush nya..setting opacity brush nya sekitar 50%
buat 2 brush seperti di gambar yah.. kalo gak nurut gak akan jadi !! hehehehe..

udah blum ?
yang udah sabar yah.. itu yang duduknya di pojok blom katanya..  :D
udah semua yah..
sekarang klik Select > Load selection .. untuk menampilkan seleksi lingkaran lagi..jangan lupa pilih channel alpha 1

Klik Filter > distort > PINCH
ini untuk membuat lingkaran tadi jadi agak melengkung dikit..

Buat layer baru lagi.. Klik layer > new > layer
gambar 2 garis tebal dengan brush tool..
settingan brush nya liat gambar yah..

buat layer baru lagiiiii… hehehe..
klik layer > new > layer
karena masih ada seleksi lingkaran.. langsung aja Klik Edit > Stroke

jadinya kayak gini nih..

Hapus sebagian lingkaran dengan eraser tool..  jadinya seperti gambar dibawah

turunkan Nurdin Halid Opacity menjadi 35%

Sekarang buat kotak dengan menggunakan rectangle marquee tool..

Klik Edit > copy merged
Klik Edit Paste
Nanti secara otomatis terbentuk layer baru dengan gambar desain bubble yang sudah di beri seleksi kotak tadi dengan kondisi semua layer tergabung (merged)

Matiin semua layer.. kecuali layer yang baru terbentuk..

ini saat-saat menegangkan.. mengkonversi gambar menjadi brush !!
Intinya brush harus memiliki background Putih..
Supaya warna background jadi putih kita invert..
Klik Image > adjustment > invert

Klik Edit > Define Brush
beri nama Brush hasil karya temen-temen.. jangan sampe di Klaim sama Malaysia hehehe..

Selesai deh….
Semoga bermanfaat yah..
Read more
 
Frengky FULL - ONLINE © 2011 | Design Template by Frengky-Online | Template Blogger Name | Online Transparent V. Frengky