Langsung ke konten utama

Postingan

Menampilkan postingan dari Desember, 2013

Selamat Datang Tahun 2014

INSPECT ELEMENT ISSUE Happy New Years Welcome to 2014 B Batasan waktu telah berakhir . Segala rencana tak kan punya makna . Semua angan hanya akan menjadi rentet mimpi yang tak lagi berarti. Khayal,Cita,Angan,Harap. Semua sirna dalam sekejap. A Alam terus menari dalam simponinya . Umur manusia didikte olehnya. Setiap detak memakukan kita dipersimpangan jalan. Jalan tuhan atau jalan setan. Sekular barat mengatakan " Waktu adalah dollar didalam kantong " . Namun.. R Riwayat Hassan Al Bana mengatakan " Waktu adalah pedang, potong atau terpotong" . Ternyata waktu begitu kritis bagaikan roh dalam tempurung kura-kura . Merangkai misteri dalam bingkai yang penuh tanda tanya , namun pasti. U Untuk semua itu akan kah kita membiarkan waktu berlalu tanpa sesuatu atau hanya bisa berpasrah diri . Tak ada

Responsive Tabbed Content

Setelah beberapa hari disibukan dengan berbagai persiapan menjelang event tahun baru ditambah lagi jaringan speedy yang kena amukan bus akhirnya punya sedikit waktu untuk kembali berbagi sebuah tutorial sederhana , yaitu membuat sebuah tabbed content ( tulisan ) yang sederhana dengan CSS3. Tapi memang tidak sesederhana itu karena tabbed ini memiliki fitur responsive dan lihat demonya hehehe ... SEE DEMO CSS3  .tabs { position: relative; font: normal normal 400 0 'Electrolize', Helvetica, Arial, sans-serif; color: #fff } .tabs input {display: none} .tabs label { position: relative; z-index: 1; display: inline-block; width: 25%; /* 4 TABS = 100/4 = 25% */ box-sizing: border-box; border: 1px solid #222; border-left-color: #555; font-size: 17px; line-height: 45px; cursor: pointer; user-select: none } .tabs label span { display: block; padding: 5px; background: #444 } .tabs label span span { padding: 0 20px; background: transparent; border-radius: 3px; transition: bac

Blogger Over Design

BLOGGER "OVER DESIGN" Ada satu hal yang tampak menarik ketika pada satu kesempatan saya melihat beberapa blog sahabat yang tampilannya selalu berubah-ubah setiap kali dikunjungi dari hal element yang jelas terlihat sampai hal yang paling kecil semua melakukan langkah modifikasi , baik secara total atau hanya beberapa bagian element saja. Tentu bukan tanpa alasan kenapa mereka melakukan hal itu karena memang belakangan telah terjadi pergeseran tren template seperti dengan konsep flat Design UI atau apalah namanya tapi yang jelas semua harus Responsive dan tentu akan lebih sempurna ketika hasil akhirnya bisa Valid CSS3 dan HTML5 " trending topics ". Terlepas dari kesibukan desain sana-sini saya berpendapat bahwa yang menjadi pemicu banyak blogger melakukan redesign adalah ketika melihat para master yang notabene menjadi Inspirasi telah merubah tampilan desain web/blog nya sehingga terjadilah wabah modifikasi disana-sini ( termasuk blog jelek ini ) . S

Simple Responsive Menu

Simple Responsive Menu - Pada kesempatan yang lalu saya telah membagikan sebuah menu responsive yang terdapat pada blog ini karena banyaknya permintaan . Lalu saya berfikir kenapa gak sekalian dibagikan kembali menu yang dulu sempet dipake sebelum menjadi sekarang ini karena dengan begitu lengkaplah kebaikan ini wkwkwk ... Pada menu kali ini terdapat sedikit perbedaan dengan menu yang sebelumnya dan untuk mengetahui perbedaan nya silahkan lihat pada demo dibawah ini .  Klik tombol demo untuk melihat responsivitasnya SEE DEMO   CSS /* Awae aweu Aweu */ .bolenang:before, .bolenang:after { content: " "; display: table;} .bolenang:after { clear: both;} .bolenang { *zoom: 1;} /* Style */ nav { height: 40px; width: 100%; background:#3E5553; font-size: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; position: relative; border-bottom: 2px solid #283744;} nav ul { padding: 0; margin: 0 auto; width: 600px; height: 40px;} nav li { display: in

Responsive Menu Navigation

Setelah beberapa hari of karena berbagai alasan akhirnya ada waktu juga untuk membuat postingan . Kali ini saya akan kembali pada kebiasaan lama yaitu bagi-bagi menu hehe ... Sebenarnya ini permintaan beberapa teman yang dikirim lewat email dan pesan facebook yang ingin membuat menu sama percis dengan blog ini . Awalnya sempet ragu masa menu yang dipake dibagi-bagi  , tapi setelah difikir-fikir ya biar saja yang penting jadi pahala hehe .. Sebelum lebih jauh mengenalnya silahkan perhatikan baik-baik demonya . SEE DEMO CSS   .navbar { height: 48px; width: 100%; margin-top: -5px; background-color: #222; background-image: linear-gradient(#333, #222); position: relative; border-top: 1px solid #444; border-bottom: 1px solid #555 } .navbar ul { padding: 0; margin: 0 auto; width: 640px; height: 48px } .navbar ul { list-style: none; } .navbar ul li { float: left } .navbar ul li a { color: #fff; display: inline-block; width: 105px; font:normal normal 500 15px/48px 'Yanone K

Blogazine Responsive Layout

RESPONSIVE LAYOUT Pengertian Layout merupakan penyusunan dari elemen - elemen design kedalam sebuah bidang sehingga membentuk susunan artistik. Hal ini juga bisa disebut manajemen bentuk dan bidang . Tujuannya menampilkan elemen gambar atau teks agar menjadi komunikatif dalam sebuah cara yang dapat memudahkan pembaca dalam menerima sebuah informasi tersaji . Referensi Sumber :Satria Multimedia Pada kesempatan ini saya memberikan sedikit gambaran dalam membentuk sebuah layout dengan menggunakan konsep blogazine yang terinspirasi blog Damzaky. Komposisi : sidebar-right didalam container id dengan property value position: relative atau untuk jelasnya silahkan sobat lihat menggunakan Inspect Element hehe... Sedangkan konsep blogazine yang saya gunakan bisa dilihat DISINI Hasilkan Background responsive dengan background-size: 100% 100%; . Sebenarnya inilah yang membuat tampak menarik, yaitu penggunaan gambar yang keren atau Over Creatif to Sotoshop Braka..kakak hehe Layout

Tips Menghindari Direct Linkbucks

Tips Menghindari Direct Linkbucks Linkbucks.Bukan sesuatu yang asing dengan nama itu.Pada satu kesempatan saya dibuat jengkel olehnya , karena tiap kali klik blogger.com selalu disuruh menunggu SKIP AD dan parahnya setelah menunggu 5 detik bukan nya masuk ke SIGN IN blogger tapi selalu kembali kehalaman beranda Google. Melihat hal itu berulang-ulang saya pun tidak tinggal diam dan saya mencari solusi untuk mengatasinya . Tapi parahnya setiap kali mencoba solusi berbeda saya selalu gagal. dan gagal Tapi itu tidak membawa hasil seperti yang saya harapkan , dampaknya hanya menghilangkan 5 detik SKIP ADD lalu kembali lagi ke halaman beranda Google.com Coba periksa kecepatan Speedy sobat , karena kasus yang saya pelajari malware menyerang server speedy . Indikasinya dengan akses yang lambat Biasanya setting pada internet protocol (TCP/IP) pada mode otomatis Sekarang ganti pada mode manual dengan 8.8.8.8 pada Preferred dan Alternate dengan 8.8.4.4

Modifikasi Logo Header Dengan Menu

Setelah sebelumnya membahas cara Modifikasi Header Dengan Menu , kali ini kita akan mencoba untuk menyentuh bagian navigation dengan efect toggle yang bisa dijadikan alternatif lain apabila sobat males dengan modifikasi bagian logo pada header dan kefikiran ingin menambahkan display:none  pada logo header dan mengganti posisi logonya yang ditempatkan pada bagian menu atau mungkin hanya ingin menjadikan sebuah menu biasa saja . Lebih jelasnya silahkan lihat demonya  Untuk mendapatkan hasil yang maksimal semua tergantung pada kreatifitas kita. CSS #nav{ background-color: #248080; width: 100%; height: 70px; border-bottom: 1px solid #e7e8e9; box-shadow: 0 0 5px #ccc; } #innerNav{ max-width: 960px; height: 70px; margin: 0 auto; } #logo{ font-family: 'Grand Hotel', cursive; font-size: 3em; color: #e7e8e9; padding-top: 5px; padding-left: 5px; float: left; } .toggleBtn{ float: right; height: 30px; border-left: 2px solid #e7e8e9; padding

Modifikasi Header Dengan Menu

Pada postingan kali ini cukup memuaskan karena otak bekerja maksimal hehe .. Pada satu situasi keberadaan header saya fikir menjadi hal penting dalam menciptakan/menentukan langkah lanjutan untuk sebuah desain/modifikasi template sebelum ke struktur yang lainnya dan kali ini saya akan membahas tentang modifikasi header dengan konsep simple yang didalamnya tersemat sebuah menu pada posisi right dengan menghasilkan efect sliding yang cukup atraktif , seperti pada demo dibawah ini :  Full demo bisa dilihat disini  SEE DEMO   CSS   .header { height: 100px; background: #236770; border-bottom: solid 4px#A7AAAA; } .title { color: #fff; font-size: 40px; margin: 20px; } .desc { color: #999; margin: 20px; } .nav { position: absolute; top: 0; right: 0; } .nav a { display: block; width: 200px; height: 25px; padding-left: 20px; color: #A7AAAA; border-left: solid 5px #A7AAAA; transition: all 300ms; overflow: hidden; } .nav a:hover { backg

Postingan Iseng " Mengganti Background Gambar "

Pada postingan kali ini adalah yang paling aneh dari yang pernah aneh hehe .. Malam minggu bukannya lebih fresh eh malah tambah mumet bin suntuk , padahal jalan-jalan sudah , makan-makan sudah hah entahlah apa penyebab mood belum naek-naek . daripada brada bising dengar keluh kesah ku mending kita nikmati pergantian backround pada demo dibawah ini . silahkan brada klik yang bertuliskan " Klik Disini Untuk Upload Gambar " silahkan pilih gambar pada kompi brada dan untuk ukuran bebas . Memang tidak ada yang aneh atau spesial padanya karena sesuai judulnya ini hanya postingan iseng belaka .  Sekali lagi ini hanya buah dari keluh kesah ku , dan bukan bermaksud untuk melapiaskannya pada brada sekalian hehe . Peace Love Unity & Resfect .