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.

Tutorial Membuat Menu Dropdown Dengan Bootstrap

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Selamat pagi dan Salam Sejahtera bagi kita semua.
Semoga kita selalu dalam lindungan-Nya. Amin.

Nah pada kesempatan kali ini saya akan berbagi sedikit pengetahuan yang saya tahu dari bootstrap.
Setelah sebelumnya saya berbagi tentang "Belajar Membuat Social Button Dengan Bootstrap " dan pada hari ini kita akan membahas tentang "Membuat Menu Dropdown Dengan Bootstrap".
Berikut adalah tampilan hasil jadi dan struktur folder yang dibutuhkan:

Dan pada tutorial ini saya akan menyertakan DEMO dan DOWNLOAD filenya. Mari lanjut ke script yang digunakan.
Lihat pada bagian bawah  tutorial ini.



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title> Selamat Datang Di Buku Online SMK Negeri 1 Beringin</title>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="dist/css/sb-admin-2.css" rel="stylesheet">        
    <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="js/jquery.showpassword.js" type="text/javascript"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
    <script src="dist/js/sb-admin-2.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#pass').showPassword('#tampil');
    });
    </script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand" href="#"> BUKU ONLINE </a>

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"> <span class="fa fa-home"></span> Beranda </a></li>
<li><a href="#"> <span class="fa fa-user"></span> Profil</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="fa fa-book"></span> Kategory Buku <span class="fa fa-angle-double-down"></span> </a>
<ul class="dropdown-menu">
<li><a href=""> <span class="fa fa-book"></span> Doa </a></li>
<li><a href=""> <span class="fa fa-book"></span> Dongeng </a></li>
<li><a href=""> <span class="fa fa-book"></span> Kamus </a></li>
<li><a href=""> <span class="fa fa-book"></span> Teknologi </a></li>
</ul>
</li>
<li><a href="#"> <span class="fa fa-phone"></span> Kontak</a></li>
</ul>
</div>
</div>

</div>

</body>

</html>


Keterangan:
# Navbar-inverse digunakan untuk membuat background berwarna hitam.
ganti dengan Navbar-default untuk mendapatkan warna putih abu-abu.


Nah Sekian dari saya.

Wassalamu'alaikum Warohmatullohi Wabarokatuh.

Salam blogger teman.
Jangan lupa untuk memberikan komentar Anda disini.
Karena kritik dan saran Anda sangat membantu kemajuan blog ini.
See you!

Belajar Membuat Social Button Dengan Bootstrap

Assalamu'alaikum Warohmatullohi Wabarokatuh.

Selamat membaca dan mengikuti,
Dan semoga kita semua mendapatkan Rahmat dan Hidayahnya.
Amin Ya Robbal Alamin.

Yuk, mari kita bahas ke judul langsung.
Pertama kita siapkan beberapa filenya (Download filenya).

Beberapa folder tidak diperlukan untuk tutorial ini namun saya tetap memasangnya dikarenakan pada tutorial selanjutnya akan ada pembahasan-pembahasan mengenai bootstrap yang lainnya dimana folder tersebut akan terpak. So, ikutin terus ya tutorialnya!
Karena tak lengkap rasanya bila belajar itu hanya sedikit-sedikit tanpa dilanjutkan.
Dan di bawah ini saya sertakan script juga tampilan ketika kita load di browser.

Tombol yang telah dibuat adalah tombol yang biasa sangat sering dijumpai dan dipakai pada blogger dan media website lain.
Tanpa menambah basa-basi mari Kita lanjutkan pada langkah-langkahnya.






Buat sebuah file dengan nama button.html dan sertakan script berikut.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="bootstrap tutorial">
    <meta name="author" content="Fittra Ferdiansyah">
    <title>Membuat Tombol Share Dengan Bootstrap</title>
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
    <link href="dist/css/sb-admin-2.css" rel="stylesheet">
    <link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap-social/bootstrap-social.css">
</head>
<body>
    <button type="button" class="btn btn-default">btn-default</button>
    <button type="button" class="btn btn-primary">btn-primary</button>
    <button type="button" class="btn btn-info">btn-info</button>
    <button type="button" class="btn btn-danger">btn-danger</button>
    <button type="button" class="btn btn-warning">btn-warning</button>
    <button type="button" class="btn btn-success">btn-success</button>

    <button type="button" class="btn btn-block btn-social btn-facebook">
        <i class="fa fa-facebook"></i> Facebook
    </button>
    <button type="button" class="btn btn-block btn-social btn-twitter">
        <i class="fa fa-twitter"></i> Twitter
    </button>
    <button type="button" class="btn btn-block btn-social btn-google-plus">
        <i class="fa fa-google-plus"></i> Google <i class="fa fa-plus"></i>
    </button>
    <button type="button" class="btn btn-block btn-social btn-github">
        <i class="fa fa-github"></i> Github
    </button>
    <button type="button" class="btn btn-block btn-social btn-linkedin">
        <i class="fa fa-linkedin"></i> Linkedin
    </button>
    <button type="button" class="btn btn-block btn-social btn-tumblr">
        <i class="fa fa-tumblr"></i> Tumblr
    </button>
    <button type="button" class="btn btn-block btn-social btn-dropbox">
        <i class="fa fa-dropbox"></i> Dropbox
    </button>
    <button type="button" class="btn btn-block btn-social btn-vk">
        <i class="fa fa-vk"></i> VK
    </button><button type="button" class="btn btn-block btn-social btn-pinterest">
        <i class="fa fa-pinterest"></i> Pinterest
    </button>
    <button type="button" class="btn btn-block btn-social btn-instagram">
        <i class="fa fa-instagram"></i> Instagram
    </button>
</body>
</html>


Nah, keterangan dari script diatas kita perjelas disini.
#warna hijau adalah file yang kita gunakan untuk memanggil fungsi-fungsi pada bootstrap.
#warna biru adalah button biasa menggunakan bootstrap.
#warna ungu adalah beberapa tombol share yang kita buat.

Perbedaan untuk membuat tombol biasa dengan tombol share berada pada class-class yang kita gunakan.

Oke, sekian dahulu berhubung waktu sudah larut malam Saya akhiri terlebih dahulu sampai disini.
Danbagi Anda yang ingin melihat DEMO nya ada disini.

See you!
Wassalamu'alaikum Warohmatullohi Wabarokatuh.
Komentar Anda Saya tunggu untuk memperbaiki kesalahan-kesalahan yang ada.

Terima Kasih.