Kamis, 25 April 2013

Membuat Menu Tab Horisontal Aero Glass CSS3 di Blog

Menu Tab Horisontal Aero Glass CSS3 di Blog
Membuat Menu Tab Horisontal Aero Glass CSS3 di Blog – berbeda dengan tab menu pada tutorial yang sebelumnya, karena pada sebelumnya dominan dengan warna gelap maka sekarang gilirannya untuk tab menu sederhana dengan tema warna yang terang.
Tab menu horisontal ini sangat simple dan tidak memerlukan banyak waktu saat menerapkannya kedalam blog, efisien dan ringkas tentunya. Apabila ingin disesuaikan kembali maka tidak ada salahnya jika sedikit merubah kode-kode CSS yang ada. Semisal jika terdapat warna kurang sesuai atau efek hover pada tab menu horisontal ini tidak pas dengan warna template blog bisa di ganti dengan warna lain yang mungkin bisa serasi template blog sebelumnya. Mungkin tutorial menu ini tidak sebaik dari tutorial menu sebelumnya, tapi apa daya jika mungkin ada yang tertarik untuk menerapkan kedalam blognya. Untuk memasangnya, maka berikut adalah tutorial cara Membuat Menu Tab Horisontal Aero Glass CSS3 di Blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).
Menu Tab Horisontal Aero Glass CSS3 di Blog
div.bottombar{
height: 5px;
background: #1a1109;
}

ul.aeroglass{
font: bold 14px Georgia ;
width: 100%;
background: #b1e958;
padding: 5px 0 5px 0;
margin: 0;  
text-align: left;
}

ul.aeroglass li{
display: inline;
}

ul.aeroglass li a{
color:black;
padding: 6px 8px 6px 8px;
margin-right: 15px;
text-decoration: none;
}

ul.aeroglass li a:hover, ul.aeroglass li a.selected{
color: black;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgyIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xNiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 6px;
padding-bottom: 12px
}
3. Klik Terapkan ke Blog.

Selanjutnya untuk memanggil dan menampilkan Menu Tab Horisontal Aero Glass CSS3 di Blog caranya copy kode dibawah ini, kemudian klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode ini didalamnya:
<ul class="aeroglass">
<li><a href="http://mas-andes.blogspot.com/" class="selected">Home</a></li>
<li><a href="http://mas-andes.blogspot.com/">CSS</a></li>
<li><a href="http://mas-andes.blogspot.com/">Javascript</a></li>
<li><a href="http://mas-andes.blogspot.com/">jQuery</a></li>
<li><a href="http://mas-andes.blogspot.com/">Tutorial</a></li>
<li><a href="http://mas-andes.blogspot.com/">SEO</a></li>
</ul>
<div class="bottombar"></div>
Keterangan:
Silahkan ubah tulisan yang berwarna merah dengan URL tujuan.
Silahkan ubah tulisan yang berwarna biru dengan judul menu.

Langkah terakhir klik Save, maka selesai dan lihat hasilnya dari cara Membuat Menu Tab Horisontal Aero Glass CSS3 di Blog.

Rabu, 24 April 2013

Young and Dangerous (1996-2000) Plus Trailer Reload 2013

Young and Dangerous (1996-2000) Plus Trailer Reload 2013
Young and Dangerous (1996-2000) Plus Trailer Reload 2013 – bagi pengemar hongkong movies pasti tentunya sudah mengenal bahkan hafal film ini. Young and Dangerous merupakan film faforit saya sejak saya masih kecil. Film yang di bintangi aktor ganteng bernama asli Cheng Yee Kin, pria kelahiran Hongkong pada tanggal 4 Oktober 1967 ini mampu membuat para penggemarnya histeris.
Young and Dangerous adalah Film Hongkong tentang kejahatan 1996 sekelompok anggota triad, merinci petualangan dan bahaya dalam masyarakat Triad Hong Kong. Disutradarai oleh film sinematografer Andrew Lau, film ini memiliki ensemble besar, yang meliputi Ekin Cheng, Jordan Chan, Francis Ng, Gigi Lai dan Simon Yam. Berdasarkan seri buku komik populer bernama "Teddy Boy", film ini banyak memberikan kontribusi kepada citra publik triad dan dikutuk oleh kalangan tertentu sebagai memuliakan masyarakat triad rahasia. Namun, itu sangat populer di Hong Kong dan berputar daftar panjang sekuel dan spin-off. Aktor utamanya dan aktris juga menjadi bintang utama. Perkelahian yang tiada henti membuat film ini semakin seru di tonton. Untuk melihat seperti apa filmnya, bagi yang ingin menyaksikannya berikut adalah video Young and Dangerous Seri 1-7 Plus Trailer Reload 2013: 
Young and Dangerous (1996-2000) Plus Trailer Reload 2013

1. Young and Dangerous (1996) 
Kisahnya bermula ketika sekelompok anak-anak yang sedang bermain bola, dianiaya oleh seorang bos triad lokal, Ugly Kwan (Francis Ng Chun Yu). Untunglah bos triad lainnya yang bernama Uncle Bee (Frankie Ng) menyelamatkan anak-anak tersebut sebelum terlanjur babak belur. Anak-anak tersebut merasa berutang budi sehingga memutuskan mengikuti Uncle Bee untuk bergabung ke dalam organisasi triad Hing Hung. 10 tahun kemudian, anak-anak tersebut telah tumbuh menjadi para pemuda gagah yaitu Chan Ho Nam (Ekin Cheng) yang merupakan pemimpin keempat temannya, Chicken (Jordan Chan), Pou Pan (Jerry Lamb), Chow Pan (Jason Chu) dan Dai Tin Yee (Michael TSe). Dalam organisasi triad Hing Hung, kelima pemuda tersebut masih bekerja kepada Uncle Bee. Namun dalam kegiatan sehari-harinya, Ho Nam dan kawan-kawannya hanya berjudi, mabuk-mabukan dan menggoda para gadis sehingga bos tertinggi Hing Hung, Chiang (Simon Yam) memutuskan kelima pemuda tersebut sudah waktunya bekerja dengan serius. Oleh karena itu, Ho Nam dan keempat kawannya pun pergi ke Makao untuk menyelesaikan sebuah masalah untuk Chiang. Tanpa disadari oleh kelima pemuda tersebut dan juga Chiang, masalah di Makao itu ternyata adalah jebakan yang diatur oleh Ugly Kwan. Untunglah Ho Nam, Chicken dan lain-lainnya berhasil lolos dari kematian. Rupanya selama ini, Ugly Kwan yang sebagai salah satu pimpinan teras Hing Hung ingin menyingkirkan kelima pemuda itu lantaran dendam kepada mereka. Selain itu, Ugly Kwan yang licik itu pun mengincar posisi nomer satu di Hing Hung yang kini dipegang Chiang. Begitu tahu Ho Nam dan kawan-kawannya lolos, Ugly Kwan tidak kehabisan akal. Ho Nam lalu ditipunya agar melakukan pelanggaran peraturan Hing Hung sehingga mendapat hukuman organisasi tersebut. Akibatnya terjadi perpecahan antara Ho Nam dan teman-temannya terutama Chicken. Selanjutnya Ho Nam pun keluar dari Hing Hung dan lalu membuka bar bersama kekasihnya, Smartie (Gigi Lai). Namun 10 bulan kemudian, terjadi perubahan besar dalam Hing Hung karena Uncle Bee tewas di tangan Ugly Kwan beserta konconya yang juga berhasil menjungkalkan Chiang dari posisinya. Begitu mendengar Uncle Bee yang dihormatinya tewas, Ho Nam yang kemudian bersama Chicken dan lain-lainnya hendak membalas dendam kepada Ugly Kwan dan juga mengembalikan kedudukan Chiang.

2. Young and Dangerous 2 (1996) 
Sejak pengalaman di Makao, telah terbuka mata kelompok Ho Nam bahwa menjadi anggota triad seperti kelompok Triad Hing Hung pasti ada konsekuensinya. Khususnya Chicken yang telah berubah secara drastis setelah kembali dari Taiwan untuk bergabung lagi dengan faksi Ho Nam dalam Hing Hung. Kini Chicken menjalankan tugasnya sebagai anggota Hing Hung dengan serius dan tidak lagi main-main seperti dulu. Tampaknya semua berjalan baik hingga kelompok Hing Hung didatangi oleh bos triad Taiwan Liu Kung dan wanita simpanannya, Ting Siu Yiu (Chingmy Yau). Liu Kung dan Ting Siu Yu hendak menjalin persekutuan dengan kelompok Hing Hung pimpinan Chiang (Simon Yam). Namun Liu Kung dan Ting Siu Yu rupanya ingin menguasai kelompok Hing Hung dengan bantuan anggota Hing Hung yang ambisius, Tai Fai (Anthony Wong) yang juga saingan Ho Nam dan Chicken. Terjadilah perebutan kekuasaan dalam Hing Hung sehingga faksi Ho Nam pun terancam bahaya. Repotnya, Chicken sendiri ketika di Taiwan ternyata pernah menjalin hubungan cinta dengan Ting Yiu Siu.

3. Young and Dangerous 3 (1996) 
Film dimulai menunjukkan penjahat Crow (Roy Cheung) mengutuk Guan Yu dan menyatakan bahwa tidak ada hal seperti itu sebagai kebenaran. Crow menolak untuk memberikan Ho Nam (Ekin Cheng), pemimpin leader of Causeway Bay face, dan meskipun mereka sopan satu sama lain dengan nada antagonisme yang jelas. Ho Nam pacar Smartie (Gigi Lai) terbangun dari komanya. Ho Nam bergegas ke rumah sakit hanya untuk menemukan bahwa ia tidak memiliki memori kehidupan mereka bersama. Dengan sisa geng, ia mencoba untuk kembali memberlakukan adegan dari masa lalu mereka sia-sia. Akhirnya hal itu terjadi kepada semua orang bahwa itu tidak benar-benar peduli apakah mereka masih seperti satu sama lain, mereka hanya harus melanjutkan hidup mereka. Sementara memberlakukan salah satu adegan Chicken (Jordan Chan) bertemu dengan rollerblader bermulut busuk (Karen Mok) yang berhasil memukul Chicken keluar, untuk hiburan yang lain. Chicken diminta oleh imam untuk mengurus putrinya yang baru saja kembali dari Inggris. Chicken setuju hanya untuk menemukan itu adalah blader rol yang ia temui malam sebelumnya. Untungnya untuk Chicken mereka memiliki banyak kesamaan dan segera hubungan yang mekar. Chiang (Simon Yam) meminta Ho Nam untuk mengawalnya dan pacarnya ke Belanda. Sementara mereka ada Crow mengambil kesempatan untuk membuang jika Hung Hing bos dan bingkai Ho Nam sebagai pembunuh. Ho Nam sekarang ingin tidak hanya oleh polisi tetapi dengan geng sendiri karena mereka percaya kebohongan Crow bahwa Ho Nam bertanggung jawab. Geng bantuan Ho Nam bersembunyi di rumah pendeta. Chicken membalas dendam terhadap pemimpin bernyanyi Tung, memberikan Crow kesempatan untuk juga menghapus dia dan bingkai Chicken . Mencari tempat persembunyian Ho Nam, Crow bertekad untuk menghapus dia sekali dan untuk semua. Dalam berikutnya Mayham, Ho Nam lolos tapi pacarnya diambil oleh Crow. Ultimatum yang tersisa, jika Anda ingin melihatnya lagi datang sendirian. Ho Nam tentu saja, datang untuk menyelamatkan pacarnya. Trauma menghidupkan memori Smartie dan dia menyatakan bahwa dia ingat semuanya. Crow tidak akan membiarkan Ho Nam untuk berjalan keluar dengan Smartie dan dia menembak dirinya di depannya. Sebagai Ho Nam mencoba menyelamatkan pacarnya meninggal, Crow adalah reload untuk membuang Ho Nam juga, ketika Chicken ysng dimuat ke gagang dengan granat. Dalam menghadapi rintangan yang luar biasa Crow punggung bawah dan memungkinkan mereka untuk mengambil mayat Smartie. Chicken dan Ho Nam bekerja untuk membersihkan nama mereka, untuk mengambil Crow dan membalas dendam atas Smartie.

4. Young and Dangerous 4 (1997) 
Film "Young and Dangerous 4" yang merupakan hasil karya sutradara Andrew Lau pada tahun 1997 ini masih mengisahkan petualangan Ho Nam (Ekin Cheng) dan Chicken (Jordan Chan) dari geng Hung Hing. Namun film tersebut kali ini memfokuskan pada tokoh Chicken. Kisahnya dimulai ketika bos besar Hung Hing, Chiang Tian Sang tewas dibunuh. Kini tampuk kepemimpinan geng Hung Hing kosong sehingga para ketua cabang Hung Hing seperti Ho Nam dan Hon Bun (Vincent Wang) pun pergi ke Thailand untuk memohon saudara lelaki mendiang bos besar, yaitu Chiang Tian Yeung (Alex Man). Pada mulanya Tian Yeung enggan, namun setelah didesak akhirnya setuju menduduki posisi bos besar geng Hung Hing. Baru saja Chiang Tian Yeung setuju, tiba-tiba kabar buruk tiba yaitu Dinosaur, ketua cabang Hung Hing di wilayah Tuen Mun yang merupakan saudara lelaki Hon Bun dibunuh. Kini pekerjaan pertama Tian Yeung sebagai bos besar Hing Hung baru adalah memutuskan pengganti Dinosaur sebagai ketua cabang Tuen Mun itu. Dua calon ketua yang bersaing memperebutkan posisi itu adalah sahabat karib Ho Nam, Chicken yang memang memiliki ambisi untuk meraih posisi tinggi dalam Hing Hung. Sedangkan saingan Chicken adalah mantan wakil Dinosaur yang merupakan orang kedua dalam cabang Tuen Mun itu, yaitu Barbarian (Chan Chi Fai). Rupanya Barbarian memiliki beking yang tidak lain adalah Lui Yiu Yeung (Roy Cheung), ketua triad Tung Sing yang merupakan saingan Hung Hing. Dapat ditebak bahwa Lui Yiu Yeung adalah dalang pembunuhan Dinosaur yang hendak menghancurkan Hung Hing dari dalam dengan menciptakan perang saudara. Persaingan antara Chicken dan Barbarian makin sengit dalam perebutan jabatan ketua Tuen Mun itu, apalagi kedua belah pihak tidak mau mengalah. Ho Nam yang telah mengalami banyak kesedihan akibat keterlibatannya dalam Hung Hing pun berusaha menasehati Chicken agar melupakan posisi tersebut. Ho Nam tidak mau Chicken mengalami nasib yang seperti dialami Ho Nam. Namun nasehat tersebut tidak dihiraukan bahkan Chicken makin bertekad mendapatkan jabatan itu apapula resikonya. Tampaknya perpecahan yang akan menimbulkan pertumpahan darah tidak terhindarkan lagi.

5. Young and Dangerous 5 (1998) 
Kini Chan Ho Nam datang sendirian tanpa adanya Chicken. Shu Qi bertekad untuk membantu Chan Ho Nam expose Chen Jianan untuk dipermalukan. Chan Ho Nam (Ekin Cheng) berhasil membawa hal-hal yang cukup baik oleh dirinya sendiri, tetapi tanpa Chicken (Jordan Chan) seri Young and Dangerous kehilangan aktor terbaik dan karakter yang paling menarik. Akan tetapi masih ada Chin Kar-Lok sebagai Big Head, mantan triad yang diseret kembali ke dalam permainan triad oleh mantan teman Hing Hung. Misinya: mengalahkan Tung Sing kickboxer terbaik di Tung Sing/ Hung Hing pertandingan dendam.
Sementara pengganti asli untuk Big Brother masih dipenjara dan saat Big Head Young Tim dibebaskan dari penjara, ia memikirkan kehidupan membosankan sebagai penjual koran di toko kaki lima, tetapi sering ia mendapat perlindungan yang kuat dari Chan Ho Nam karena diam-diam membantu dia, dia agak enggan untuk berbicara dengan mantan gangster terkait. Saudara asli Mr Chiang, dia tinggal di Kuala Lumpur. Dia muncul seri beberapa kali setelah penampilannya dalam film keempat. Tapi pada akhirnya, setelah semua, kembali untuk membantu Chan Ho Nam, dan atas nama Hongxing untuk melawan pertandingan tinju.

6. Young and Dangerous 6 (2000) 
Born To Be King atau juga yang biasa dikenal dengan sebutan judul Young and Dangerous 6. Sebagaimana dengan film-film sebelumnya, tokoh Chan Ho-nam (Ekin Cheng) dan Chicken Chiu (Jordan Chan) kembali muncul dalam film ini. Kisahnya dimulai dengan Ho-nam dipromosikan menjadi bos kelompok triad Hung Hing, sementara itu karibnya Chicken akan mengambil alih kepemimpinan kelompok San Luen di Taiwan. Namun langkah Chicken itu tidak mudah karena tampaknya banyak anggota triad pun menginginkan posisi tersebut. Yang menarik bahwa sosok yang bisa menjadi pesaing kuat Chicken, yaitu putra mantan bos lama San Luen, Lui Fu-kwan (Peter Ho) ternyata tidak berminat dengan urusan triad. Di sisi lain, Chicken direncanakan akan menikahi Nanako (Anya), putri Ichio Kusaraki (Sonny Chiba) yang merupakan bos klan Yamada, sebuah kelompok yakuza berpengaruh di Jepang. Pernikahan itu akan memperkuat kedudukan Klan Yamada, bahkan triad Hung Hing di dunia hitam Taiwan. Tetapi muncul berbagai kejadian yang hendak menggagalkan rencana tersebut.

7. Trailer Young and Dangerous (2013) 
Seperti diberitakan beberapa waktu lalu, sutradara dan produser Hong Kong Wong Jing mengumumkan akan membuat ulang Young and Dangerous. Film produksi 1996 yang melambungkan nama Ekin Cheng amat populer di jamannya, dibuat sampai 6 jilid. Mengangkat kehidupan triad (mafia Hong Kong), film aslinya berisi adegan kekerasan, seks, penuh darah, juga banyak bahasa kasar. Wong Jing menjanjikan, remake yang diberi judul Young and Dangerous: Reloaded ini adegan aksinya bakal lebih sadis dan adegan seksnya lebih hot dari versi aslinya. Tapi, saat rumah produksi merilis poster Reloaded, media dan netizen Hong Kong pun ragu dengan janji Wong Jing. Konsep poster masih sama dengan aslinya, lima karakter pria berdiri di tengah jalan Hong Kong nan gemerlap. Yang membedakan, kostumnya. Kalau di Young and Dangerous pertama, kostum 5 pemainnya memakai jaket kulit dan jins belel, maka dalam Reloaded 5 aktor utamanya memakai kostum serba putih. Terlihat 4 dari 5 aktor memamerkan dada mereka yang bidang.

Selasa, 23 April 2013

Membuat Tab Menu Horisontal Blackredble di Blog

Tab Menu Horisontal Blackredble di Blog
Membuat Tab Menu Horisontal Blackredble di Blog – menu dari sebuah blog merupakan bagian yang sangat penting dalam unsur membuat blog tersebut menjadi lebih SEO Friendly. Selain itu pula menu pada blog memiliki fungsi utama dalam mengarahkan visitor agar lebih mudah untuk menemukan konten yang mungkin sedang mereka cari.
Warna gelap dan warna hover yang terang sangat memanipulasi Tab Menu Horisontal Blackredble di Blog apabila pada blog tersebut menggunakan warna tema the dark template. Tidak memiliki kemewahan dan tab menu horisontal ini akan tetapi mungkin apabila digunakan bisa terlihat elegant. Style yang sangat sederhana membuat tab menu horisontal ini dapat dengan mudah mengkombinasi loading blog. Untuk mengurangi rasa penasaran maka berikut adalah tutorial cara Membuat Tab Menu Horisontal Blackredble di Blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).
Tab Menu Horisontal Blackredble di Blog
div.topbar{
height: 10px;
background: #ff0000;
}

ul.blackredble{
font-weight: bold;
width: 100%;
background: #000;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
}

ul.blackredble li{
display: inline;
}

ul.blackredble li a{
color:lime;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}

ul.blackredble li a:hover, ul.blackredble li a.selected{
color: white;
background: #00ff00;
background: -moz-linear-gradient(top, #00ff00 0%, #00ff00 12%, #2c0f05 100%); /* moz syntax for CSS3 gradient */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ff00), color-stop(12%,#00ff00), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #00ff00 0%,#00ff00 12%,#2c0f05 100%); /* webkit syntax for CSS3 gradient */
background: -o-linear-gradient(top, #00ff00 0%,#00ff00 12%,#2c0f05 100%); /* opera syntax for CSS3 gradient */
background: -ms-linear-gradient(top, #00ff00 0%,#00ff00 12%,#2c0f05 100%);
background: linear-gradient(top, #00ff00 0%,#00ff00 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #7f7fff;
-webkit-box-shadow: 0 0 5px #7f7fff;
box-shadow: 0 0 5px #7f7fff;
padding-top: 17px;
padding-bottom: 6px;
}
3. Klik Terapkan ke Blog.

Selanjutnya untuk memanggil kode agar dapat tampil maka berikut adalah markup HTML kodenya. Caranya copy kode dibawah ini, kemudian klik Tata Letak > Tambah Widget > HTML/JavaScript lalu paste didalamnya.
<div class="topbar"></div>
<ul class="blackredble">
<li><a href="http://mas-andes.blogspot.com/">Home</a></li>
<li><a href="http://mas-andes.blogspot.com/" class="selected">Contact</a></li>
<li><a href="http://mas-andes.blogspot.com/">About</a></li>
<li><a href="http://mas-andes.blogspot.com/">CSS</a></li>
<li><a href="http://mas-andes.blogspot.com/">Tutorial</a></li>
<li><a href="http://mas-andes.blogspot.com/">SEO</a></li>
</ul>
Keterangan:
Silahkan ubah tulisan yang berwarna merah dengan URL tujuan.
Silahkan ubah tulisan yang berwarna biru dengan judul menu.

Senin, 22 April 2013

Membuat Push Down Panel Dengan CSS3 di Blog

Push Down Panel
Membuat Push Down Panel Dengan CSS3 di Blog – ini merupakan fitur elegant untuk menggantikan fungsi tombol show hide pada blog. Jika kita perhatikan terkadang bagian dari konten posting di blog adalah terdapat tombol show hide yang berfungsi untuk menampilkan dan menyembunyikan konten yang berada didalamnya, dengan adanya Push Down Panel ini maka fungsi dari tombol show hide tersebut dapat digantikan atau dengan kata lain di ambil alih. Hasilnya adalah dengan menggunakan Push Down Panel ini maka konten akan menjadi variatif dan tentu saja lebih elegant. Dilain sisi, fitur dari Push Down Panel ini dapat menyesuaikan isi konten dengan mudah atau dengan kata lain apabila isi konten yang terdapat didalamnya sangat banyak maka konten tidak akan bergerak memanjang kebawah melainkan akan menampilkan fungsi scroll yang dapat meminimalis konten posting blog. Untuk melihat seperti apa lebih jelas dan detailnya maka bisa terlebih dahulu dilihat pada demo, dan untuk menerapkannya kedalam blog maka berikut adalah penyajiannya mengenai tutorial cara Membuat Push Down Panel Dengan CSS3 di Blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).
Push Down Panel
div.css3droppanel {
position: relative;
margin: 0;
margin-bottom: 1em;
}

div.css3droppanel > div {
height: 10px;
padding: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
background: #b5e5e0;
position: relative;
opacity: 0;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-webkit-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}

div.css3droppanel:after {
content: '';
display: block;
bottom: 0;
position: absolute;
width: 100%;
height: 10px;
box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset;
background: #5a1619;
background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72)));
background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
}

div.css3droppanel input[type="checkbox"] {
position: absolute;
right: 50px;
width: 60px;
height: 42px;
bottom: -34px;
z-index: 10;
cursor: pointer;
opacity: 0;
}

div.css3droppanel input[type="checkbox"]:checked ~ div {
height: 250px;
opacity: 1;
overflow: auto;
}

div.css3droppanel label {
position: absolute;
right: 50px;
width: 60px;
height: 42px;
bottom: -34px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
cursor: pointer;
z-index: 5;
background: #5a1619;
background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(124,31,32,0.72)));
background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset;
}

div.css3droppanel label:hover {
box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset;
}

div.css3droppanel label:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
border: 12px solid transparent;
border-color: white transparent transparent transparent;
top: 18px;
left: 18px;
box-shadow: 0 0 7px gray inset;
}
3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Push Down Panel Dengan CSS3 di Blog ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:
<div class="css3droppanel">
<input type="checkbox" id="paneltoggle" />
<label for="paneltoggle" title="Click to open Panel"></label>
<div class="content">
<p> TULISKAN ISI KONTEN DISINI </p>
Keterangan:
Silahkan ubah tulisan yang berwarna merah dengan teks yang di inginkan.

DEMO:

Faceblog Evolutions adalah situs blogging sederhana yang berisikan tentang tips-trik turorial blogger dan teknik maupun taktik seo serta berbagai informasi terkini yang mudah-mudahan memberikan solusi yang berguna dan bermanfaat bagi kita semua. Semoga Faceblog Evolutions dapat menjadi media informasi, solusi dan inspirasi. Faceblog Evolutions mempunyai menu navigasi yang lengkap dan tersusun rapi, yang tentunya akan mempermudah anda dalam memperoleh apa yang ada di sitemap/daftar isi menu Faceblog Evolutions dengan tepat sasaran. Saya juga berusaha menampilkan sebaik mungkin dari yang terbaik untuk selalu membuat dan menampilkan isi artikel yang SEO dan bermanfaat untuk visitor. Selalu semangat dalam mengarungi dunia maya, untuk menempuh perjalanan sejauh 1000 mil dimulai dengan 1 langkah.

Nama Admin Faceblog Evolutions adalah Andes Rizky Nugroho, pria berpostur tubuh kurus dan ganteng dunia akhirat (amin).

Demikian Selayang Pandang mengenai Faceblog Evolutions, semoga semoga bermanfaat dan bisa menjadi Media Informasi, Solusi dan Inspirasi dalam melaksanakan aktivitas sehari-hari dan dalam mengarungi Dunia Maya, untuk menempuh Perjalanan sejauh 1000 mil dimulai dengan 1 langkah. Saya berdoa untuk visitor Faceblog Evolutions semoga selalu diberikan rahmat, kesehatan, berkah. rejeki dan Sukses Dunia Akhirat (Amin).

Minggu, 21 April 2013

Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi

Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi
Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi – bisa dikatakan kurang lebih agak mirip dengan efek peel back pada gambar di blog yang sudah pernah saya posting pada sebelumnya. Efek pull out gambar dengan css3 keyframe animasi ini merupakan perpaduan dari dua gambar yang terdapat palam satu posisi yang tepatnya pada gambar utama masih terdapat backing gambar yang terletak dibelakangnya dan apabila pada gambar utama tersebut tersentuh oleh mouse maka akan hover dan pada backing gambar akan berjalan secara halus dari sisi belakang kemudian ke arah samping kanan lalu menggantikan posisi gambar utama pada posting blog. Untuk lebih jelas dan detailnya maka bisa dilihat pada halaman demo dan berikut adalah tutorial untuk cara membuat Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi di blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).
Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi
.pulloutimage{
  position: relative;
}

.pulloutimage img{
  position: absolute;
  left: 0;
}

.pulloutimage img.ondemand{
  opacity: 0;
  visibility: hidden;
}

.pulloutimage img.original{
  z-index: 1;
}


@-webkit-keyframes revealfromright{
  0%{
  z-index: -1;
  opacity: 0;
  }
  50%{
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{
  z-index: 2;
  }
  100%{
  left: 0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-moz-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-ms-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}


.pulloutimage:hover img.ondemand{
  -webkit-animation-name:revealfromright;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
 
  -moz-animation-name:revealfromright;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
 
  -ms-animation-name:revealfromright;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
 
  animation-name:revealfromright;
  animation-duration: 1s;
  animation-iteration-count: 1;
 
  visibility:visible;
  opacity:1;
  box-shadow: 8px 8px 15px gray;
  z-index:2;
}

.pulloutimage:hover img.original{
  opacity:0.5;
}
3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:
<div class="pulloutimage" style="height:250px">
<a href="http://mas-andes.blogspot.com" target="_blank"><img class="original" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcilBScKYsp0vCDaDEDyp4-wqG-BiLEORCX6y8mv5RWYd4Vp39pqRjfW08KpggKhe532eiRHLwpQTGygIj1RZoTptmso6eYEtcfvLhtfBwP09ffrkMtPYykcVPjijve6WeHzdqrdDo1go/s320/cecilia-cheung-11.jpg" width="320" /></a>
</div>
Keterangan:
Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.
Ganti URL gambar dengan yang di inginkan.
Untuk width dan height silahkan sesuaikan selera.


DEMO:

Sabtu, 20 April 2013

Membuat Background dan Border Shadow Pada Sidebar Blog

Background dan Border Shadow Sidebar Blog
Membuat Background dan Border Shadow Pada Sidebar Blog – merupakan cara sederhana untuk membuat border pada sidebar blog.
Kenapa saya posting mengenai cara Membuat Border Shadow Pada Sidebar Blog ini, karena pada tahap awal setiap template blog bawaan asli dari blogger/default blogger memang sudah tersedia sidebar, akan tetapi masih belum memiliki border maupun background. Dengan adanya hal ini maka untuk meminimalisir sahabat blogger yang mungkin ingin membuat border pada sidebar blog maka bisa dengan mudah menggunakan tutorial ini. Pada judul widget juga sudah sedikit saya modifikasi sehingga saat judul widget tersebut tersentuh mouse atau hover maka akan menampilkan teks efek 3D. Sedangkan untuk penerapannya kedalam blog, maka berikut adalah tutorial cara Membuat Border Shadow Pada Sidebar Blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).
Background dan Border Shadow Sidebar Blog
.main-inner .sidebar .widget h2 {
margin-top: 0px;
margin-bottom: 1px;
margin-left-value: 0px;
margin-right-value: 0px;
padding: 3px 3px;
color: #00ff00 !important;
text-align: center;
border: 1px solid #666666;
border-radius: 4px;
box-shadow: 1px 1px 6px 1px #7f7fff;
background: #000000;
font: bold 25px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #ff0000, 2px 2px #ff0000, 3px 3px #ff0000;
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;
}
.main-inner .sidebar .widget h2:hover {
text-shadow: 1px 1px #ff0000, 2px 2px #ff0000, 3px 3px #ff0000, 4px 4px #ff0000, 5px 5px #ff0000, 6px 6px #ff0000;
}
.main-inner .sidebar .widget-content {
margin: 0px;
padding: 2px 2px;
text-align: justify;
text-decoration: none;
border: 1px solid #674ea7;
border-radius: 4px;
box-shadow: 1px 1px 6px 1px #7f7fff;
background: #f2f2f2;
}

.main-inner .widget #ArchiveList {
margin: 0px;
}

.main-inner .widget ul,
.main-inner .widget li,
.main-inner .widget ul li,
.main-inner .widget #ArchiveList ul.flat li {
margin: 0px;
padding: 2px;
list-style: none;
}
Keterangan:
  • Untuk merubah warna background judul widget silahkan ganti tulisan berwarna merah dengan dengan warna lain yang di inginkan.
  • Untuk merubah warna font judul widget silahkan ganti tulisan berwarna biru dengan warna lain yang di inginkan.
  • Untuk merubah warna font judul widget silahkan ganti tulisan berwarna ungu dengan warna lain yang di inginkan.
  • Untuk merubah warna background konten widget silahkan ganti tulisan berwarna orange dengan warna lain yang di inginkan.
  • Untuk merubah warna border dan efek menyala silahkan ganti tulisan berwarna hijau dengan warna lain yang di inginkan.
3. Klik Terapkan ke Blog.

Jumat, 19 April 2013

Membuat Efek Teks Shadow 3D Pada Tag H4 di Blog

Efek Teks Shadow 3D di Blog
Membuat Efek Teks Shadow 3D Pada Tag H4 di Blog – sebuah tips singkat dan simpel yang mungkin banyak dari sahabat Faceblog Evolutions yang sudah paham akan hal ini.
Untuk membuat sedikit efek yang tercipta pada sebuah konten posting blog maupun setiap aspek elemen blog yang tentunya memiliki tag h4 maka dengan tips ini saat sudah diterapkan kedalam blog akan mempunyai efek tersendiri, yakni tidak lain seperti yang sudah saya sebutkan pada judul diatas. Fitur dari Efek Teks Shadow 3D Pada Tag H4 di Blog ini adalah memiliki efek hover pada teks saat tesentuh mouse maka perubahan akan terlihat pada teks akan menjadi glowing 3D dan dapat dengan mudah dikolaborasikan dengan warna yang sesuai dengan template blog anda. Untuk lebih jelasnya, maka berikut adalah tutorial tentang cara Membuat Efek Teks Shadow 3D Pada Tag H4 di Blog:
1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).
Efek Teks Shadow 3D di Blog
h4{ color: white; font: bold 24px Helvetica, Arial, Sans-Serif;
text-shadow: 1px 1px #7f7fff, 2px 2px #7f7fff, 3px 3px #7f7fff;
-webkit-transition: all 0.12s ease-out;
-moz-transition: all 0.12s ease-out;
-o-transition: all 0.12s ease-out;
}
h4:hover {
text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe, 4px 4px #02a2fe, 5px 5px #02a2fe, 6px 6px #02a2fe;
}
Keterangan:
Silahkan ubah tulisan yang berwarna biru dengan warna yang di inginkan.

3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Efek Teks Shadow 3D Pada Tag H4 di Blog ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:
<div style="text-align:center; border:2px solid #000; border-radius: 10px; padding:5px; box-shadow: 1px 1px 6px 1px #7f7fff;">
<h4>Faceblog Evolutions</h4>
<h4 style="color:lime">Admin: Andes Rizky Nugroho</h4>
<h4 style="color:black; font:bold 50px verdana;">Selamat Mencoba</h4>
<marquee align="center" direction="left" onmouseout="this.start()" onmouseover="this.stop()">
<h4><a href="http://mas-andes.blogspot.com/" target="_blank">Don't forget to Come Back to My Blog</a></h4></marquee>
</div>
Keterangan:
Silahkan ubah tulisan yang berwarna merah dengan teks yang di inginkan.
Silahkan ubah tulisan yang berwarna orange dengan URL blog anda.