Mengubah Efek Block Tulisan Pada Postingan

CHANGE BLOCK COLOR

Mengganti Warna Text Saat Di Block

Mengubah Warna Block Text ??
Mengubah Efek Warna Block text ??

Bagi Anda yang memiliki website atau blog ada baiknya melakukan hal yang satu ini, hal ini adalah mengganti warna text dan backgroundnya saat di block. kenapa hal ini perlu ? Penggunaan hal ini pada situs Anda akan menjadikan identitas tersendiri pada situs Anda yang dimana pada situs-situs lainnya warna text dan backgroundnya berwarna putih dan biru.

Dan jika Anda mengubahnya, tentu hal ini dapat menjadi suatu daya tarik tersendiri kepada pengunjung blog ataupun website Anda.

Bagaimanakah cara mengubahnya ?

Untuk website copy dan pastekan saja syntax berikut ini pada style.css ataupun file CSS milik Anda.

Syntax :

::selection {
background:#FF0000;
color:#FFFFFF;
}

::-moz-selection {
background:#FF0000;
color:#FFFFFF;
}

::-webkit-selection {
background:#FF0000;
color:#FFFFFF;
}

Untuk pemasangan pada blogger.com Anda bisa masuk pada Dashboard blogger milik Anda > Template > Edit HTML. Cari kode berikut ini "<b:skin>" dan pastekan syntax di bawah ini.

syntax :

::selection {
background:#FF0000;
color:#FFFFFF;
}

::-moz-selection {
background:#FF0000;
color:#FFFFFF;
}

::-webkit-selection {
background:#FF0000;
color:#FFFFFF;
}

Jangan lupa untuk menyimpan perubahan dengan "Save Template" ataupun "Simpan template".

Keterangan kode :

1. #FF0000 adalah warna merah dalam hexadecimal.
2. #FFFFFF adalah warna putih dalam hexadecimal.

Terima Kasih!!!
Wasssalamu'alaikum Warohmatullohi Wabarokatuh...

SCRIPT CSS FORM LOGIN

Buat sebuah file baru dan simpan dengan nama style.css.

kemudian hubungkan file login.php dengan style.css dengan cara menambahkan tag Link dibawah tag <title></title> pada file login.php.

<link rel="stylesheet" type="text/css" href="style.css">

Buka kembali file style.css dan buatlah CSS RESETnya seperti berikut ini :

* {

}

Kemudian hilangkan jarak pada margin dan padding dari setiap tag.

* {

margin: 0px;

padding: 0px;

}

Selanjutnya ubah warna latar belakang form login dengan memberikan background pada body.

body {

background: #eee;

}

kemudian tambahkan :

#panel-login {

width: 480px; /* lebar kotak awal */

margin: 200px auto; /* berikan jarak atas dan bawah 200 sedangkan kanan dan kiri otomatis */

overflow: auto; /* ukuran tinggi otomatis */

padding: 10px; /* jarak bagian dalam box */

background: #000; /* warna latar belakang hitam */

border-radius: 5px; /* pinggiran tepi di perhalus */

box-shadow: 1px 2px 2px #777; /* bayangan pada box */

}

form {

width: 400px;  /* lebar form */

overflow: auto; /* tinggi form otomatis berdasarkan isi */

margin: 0px auto; /* jarak form dengan box */

}

.baris {

width: 400px;  /* lebar 400px */

overflow: auto; /* tinggi otomatis  */

margin: 5px 0px; /* jarak antara tiap baris */

}

input{

padding: 7.5px; /* jarak dalam tiap input */

}

input[disabled="disabled"] {

border-radius: 5px 0px 0px 5px; /* lekukan garis bingkai  kiri atas dan bawah 5px */

margin-right: -5px; /* jarak kanan agar menyatu dengan input email dan password */

width: 20px; /* lebar */

background: #eee; /* latar belakang abu-abu */

border:1px solid #eee; /* garis pinggir 1px dengan warna abu-abu */

}

input[type="email"],input[type="password"] {

border-radius: 0px 5px 5px 0px; /* lekukan garis bingkai kanan atas dan kanan bawah 5px */

width: 320px; /* lebar 320px */

border:1px solid #eee; /* garis pinggir */

}

input[type="submit"] {

border-radius: 5px; /* lekukan bingkai pada tombol masuk */

background: #fff; /* latar belakang warna putih */

border:1px solid #eee; /* garis pinggir 1px warna abu-abu */

}

selesai

Hasil Akhir :

MENGGANTI WARNA TEXT DAN BACKGROUND SAAT DI BLOCK DI WEBSITE DAN BLOGGER

ASSALAMU'ALAIKUM WAROHMATULLOHI WABAROKATUH...

Selamat datang para pembaca yang setia.

Kali ini pada postingan ini kita akan membahas mengenai cara mengganti atau Mengubah Warna Text Ketika di Block oleh cursor mouse. Pada dasarnya pada saat di block warna text dan background nya sudah ada dengan sendirinya. Namun inginkah Anda sesekali mengubahnya untuk membuat perbedaan antara Blog Anda dengan Blog Tetangga?

Pastinya Anda harus melakukan banyak perubahan untuk membuatnya lebih berbeda dan menarik pengunjung. Oke langsung saja kita praktekkan cara-caranya tahap demi tahap.

Pertama Jika Anda akan memasang di blog.

Silahkan Anda buka Dashboard Blogger Anda =>> Masuk Ke Menu Template =>> Edit HTML . Kemudian silahkan Anda masukkan code berikut ini pada STYLE CSS nya.

        ::selection {background:#FF0000; color:#FFFFFF;}
        ::-moz-selection {background:#FF0000; color:#FFFFFF;}

        ::-webkit-selection {background:#FF0000; color:#FFFFFF;}

Atau bagi Anda yang benar-benar masih baru dalam mengenal dunia Blogger. Carilah kode berikut ini kemudian Anda pastekan Code diatas.

Untuk diletakkan di website, tentunya Anda sudah mengetahuinya dan tidak perlu lagi untuk saya jelaskan peletakannya. 

DEMO :

       Cobalah untuk memblock text yang ada di blog ini.

KETERANGAN :

• Bagian yang berwarna merah adalah kode warna yang dapat Anda ubah sesuai keinginan Anda sendiri.
• #FF0000 adalah kode warna Merah dalam Decimal.
• #FFFFFF adalah kode warna Putih dalam Decimal.

Terima Kasih :

#ADMIN FITTRA FERDIANSYAH

GALLERY PHOTO THUMB WITH BOOTSTRAP 3 (DOWNLOAD)

Assalamu'alaikum Warohmatullohi Wabarokatuh.
Apaka kabar para pembaca.
Semoga kita semua selalu dalam lindungan Allah Tuhan Yang Maha Esa.
Amin Ya Robbal Alamin.

Pada kesempatan ini saya ingin berbagi sedikit mengenai BOOTSTRAP 3.
Ya, setelah saya pelajari ternyata bootstrap 3 lebih nyaman digunakan dari pada versi yang sebelumnya,
dan saya memcoba untuk membuat sebuah template yang nantinya akan saya gunakan untuk membuat
sebuah website Directory Alumni.

Website ini nantinya akan berisi data-data siswa/i tepatnya mantan siswa/i dari sebuah sekolah.
Dimana setiap mantan siswa/i tersebut bergabung di dalamnya untuk mengobrol, berbagi kenangan masa lalu,
dan hal-hal lain.

Eits, maaf.
Kembali ke judul besar kita, template ini tidak saya bandrol dengan harga.
Yaps, benar! Ini free... for you.

Langsung saja ini tampilannya :

  

Dan link downloadnya ada disini.
DOWNLOAD


Ya,walaupun masih jelek tapi sudah cukup deh untuk digunakan sebagai template website dibanding dengan template yang di buat dengan CSS sendiri.

Terima kasih atas kunjungan Anda.
Jika terdapat kata-ata yang SALAH saya meminta maaf,
Pada Allah saya meminta Ampun.
Akhirul kalam.
Wassalamu'alaikum Warohmatullohi Wabarokatuh.

Kritik dan Saran Anda dapat menjadi hal yang paling bermanfaat untuk blog ini.

MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess dan HTML bagian 2

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Salam sejahtera sahabat.
Semoga kita selalu dalam lindungan-Nya.
Amin Ya Robbal Alamin.

Oke setelah tutorial yang saya tulis pada bagian pertama tersebut membahas tentang "MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess dan HTML bagian1" menjelaskan bagaimana langkah-langkah dalam pembuatan .htaccess.

Pada kali ini saya akan melanjutkan tutorial tersebut dengan pembuatan kode HTML dan CSS nya.
Langsung saja,
buka editor text milik Anda.

ketikan atau copy paste kode berikut.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>404 Not Found!</title>
<link href="css/404.css" rel="stylesheet" type="text/css" />
</head>

<body>
        <div class="error">The page you are looking for has not been found!</div>
    <div id="not-found">
        <div class="found">404</div>
    </div>
        <hr />
        <div class="error">Lets start again.</div>
</body>
</html>

Kemudian simpan dengan nama 404.html

Langkah selanjutnya buat sebuah folder dengan nama "css" kemudian buka lagi text editor milik Anda dan ketikkan atau copy paste kode berikut ini.

@charset "utf-8";
/* CSS Document */

* {
    padding:0;
    margin:0;
}
.error {
    width:960px;
    height:auto;
    margin:auto;
    text-align:center;
    font-family:chiller;
    font-size:3em;
    color:rgba(85,85,85,1);
    text-shadow:2px 4.5px 5px #AAAAAA;
}
#not-found {
    width:960px;
    height:auto;
    margin:auto;
    text-align:center;
}
.found {
    font-family:chiller;
    font-size:17em;
    color:rgba(255,153,0,1);
    text-shadow:2px 4.5px 5px #AAAAAA;
}
hr {
    width:31%;
    margin:auto;
    color:rgba(255,153,0,1);
    box-shadow:0px 2px 3px 2px #AAAAAA;
}

Simpan dengan nama 404.css dalam folder "css".

Selesai dan silahkan lihat tampilan 404.html tersebut pada browser kesukaan Anda.
Bagi Anda yang belum mengikuti tutorial bagian pertama bisa klik di bawah ini.
" MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess dan HTML bagian 1"

Terima Kasih!
Sekian artikel yang dapat saya bagikan kepada Anda.
Semoga bermanfaat bagi Anda dan kita semua.

Wassalamu'alaikum Warohmatullohi Wabarokatuh.

MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess dan HTML bagian 1

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Selamat membaca sahabat!
Hari ini saya mulai memposting kembali artikel di blog ini setelah beberapa minggu istirahat.
Yah, sesuai dengan judul pada postingan ini kali ini akan dibahas yaitu membuat "MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess bagian 1" .

Oke, langsung saja.
Pertama buka terlebih dahulu text editor milik Anda bisa menggunakan Notepad bawaan Windows, Dreamweaver, Sublime, Dragon, Notepad++ atau text editor lainnya.

Di localhost / server lokal milik Anda (Disini saya menggunakan xampp).
buat sebuah folder dengan nama "percobaan".
Kemudian ketikkan code seperti berikut:

ErrorDocument 404 /percobaan/404.html

Lalu save dengan nama .htaccess .
Nah sekarang hanya tinggal membuat halaman 404.html.
Belum mengerti cara membuatnya?

Lihat pada link dibawah ini.
"MEMBUAT CUSTOM 404 ERROR NOT FOUND DENGAN .htaccess dan HTML bagian 2"

Sekian tutorial dari Admin.
Wassalamu'alaikum Warohmatullohi Wabarokatuh.
Sampai jumpa di postingan selanjutnya.