Horizontal Navigation Menu Fold Effect use CSS3

Bagi sobat yang template blognya belum mempunyai menu, AA Koben akan share sebuah menu full stylish. Fungsi utama dari menu tidak lain untuk keperluan navigasi. Kita akan membuat menu navigasi horisontal fold/unfold efek menggunakan CSS3 tanpa javascript. Penggunaan fungsi css rotateX (), 3D transform and transition properties untuk menciptakan efek lipat. Akan teripta dua gaya, satu dengan dua tingkat sub menu dan yang kedua dengan tingkat sub menu dan pratinjau gambar!

Sobat dapat melihat hasil akhir (demo) dan download file dari sumber artikel by Pixel Hint pixelhint.com/tutorial-css3-horizontal-navigation-menu-fold-effect
Pada sumber artikel terdapat element header & logo. AA cuma mengambil bagian nav menu saja, menghilangkan bagian header, wrapper and logo. Posisi original nav yaitu memakai float: right, dan itupun saya hilangkan. Karena kode CSS bentrok dengan emoticon, maka sikat kode CSS di undercover blogger

Gantikan IMAGES/NAV_ARROW.PNG & IMAGES/BOX-ARROW.PNG dengan link image.

<nav>
<ul>
<li>
<a href="#">Main menu I<i class="nav_arrow"></i></a>
<!-- Menu item Sub menu level 1 Style 1 -->
<div class="sm_style1_level1">
<ul>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON1.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 Style 1 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON2.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON3.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON4.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">
<span class="txt"><img alt="" title="" src="IMAGES/MENU_ICON5.PNG" class="menu_icon"/> Level 1<i class="nav_arrow"></i></span>
</a>
<!-- Menu item Sub menu level 2 -->
<div class="sm_style1_level2">
<ul>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
<li>
<a href="#">
<span class="txt">Level 2</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Main menu II<i class="nav_arrow"></i></a>
<!-- Countries item Sub menu level 1 style 2 -->
<div class="sm_style2_level1">
<ul>
<li>
<a href="#">
<span class="countries">New York</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE1.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">Germany</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE2.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">Italy</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE3.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">France</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE4.JPG" />
</a>
</li>
<li>
<a href="#">
<span class="countries">Spain</span>
</a>
<a href="#" class="preview">
<span class="preview_arrow"></span>
<img alt="" title="" src="IMAGES/IMAGE5.JPG" />
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">Main menu III</a>
</li>
<li>
<a href="#">Main menu IV</a>
</li>
</ul>
</nav>

Gantikan seluruh IMAGE!
DONE.

10 Top CSS Menu Tutorials www.inspireleads.com/10-top-css-menu-tutorials

Make PopUp Pure use CSS

Berbagai macam definisi popup, begitupun di dalam dunia CSS mempunyai popup tersendiri! AA akan share bagaimana cara membuat pop-up full murni 100% menggunakan bahasa CSS. Pop-up bergaya full open ketika melakukan klik. Berikut beberapa gaya yg sudah gue post:

• Make PopUp with CSS 3
• Popup with CSS for Image

Aku buatkan 3 variasi termasuk default, untuk tampilan tagging PRE dan display image. Ukuran height and width area sudah dipatok dengan nominal tertentu agar terlihat keseragaman :D Sudah barang tentu sobat dapat kreasikan lagi dengan kode-kode lain agar tampak full stylish b-)

.wrappop {
width:35%;
padding:0;
margin:10px auto;
display:block;
}
.area {
border:#555 1px solid;
text-align: left;
height:250px;
overflow-y:auto;
font-size:10px;
}
.area img {
width:100%;
height:100%;
display:block;
margin:0;
}
.area pre {
padding:0 5px;
font-family:Consolas,"Courier New",Courier,monospace;
}
.popup {
display:none;
}
.popup:checked ~ .area {
top:0;
bottom:0;
left:0;
right:0;
color:#ddd;
padding:10px;
font-size:14px;
position:fixed;
box-sizing:border-box;
height:calc(100% - 0px);
background:rgba(0,0,0,.9);
}

<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   --- ADD CONTENT HERE ---
  </div>
</label>

Itu merupakan cara penulisan HTML default display! Sedangkan untuk penulisan syntax gambar sbb

<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   <img src="LINK IMAGE" alt="" />
  </div>
</label>

Terakhir penulisan tagging PRE.

<label class="wrappop">
 <input type="checkbox" class="popup" />
  <div class="area">
   <pre>
   
   --- ADD CODE HERE ---
   
   </pre>
  </div>
</label>

Demo codepen.io/beben-koben/full/Ipwsc

Others:
www.script-tutorials.com/css3-modal-popups
www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3

See you \m/

Creating Cool Pages using Templates Blogger

Seperti yang sudah sering MR Beben Koben utarakan, bahwa kita sebagai blogger full stylish jika menginginkan sesuatu tinggal searching sajah :D Semua sudah ada tersedia, tinggal bermodalkan skill and kreativitas! Artikel tutorial bejibun, snippet jQuery tinggal comot, plugin/snippet script apalagi...pokoke buanyak dan semua sudah tersaji rapih ;)) Kesempatan sekarang gue akan mencoba melatih kreasi sobat-sabit cara membuat tampilan HOME.
Begini maksud & tujuan...
Sobat pernah melihat display home yg hanya menampilkan sedikit konten dan hanya menyediakan beberapa link tujuan! Kebanyakan web sering memakainya. Seperti link portfolio, project, about me, contact or etc di kemas hanya dalam satu bundel tampilan!
Contoh:

assadsyaifullahharahap.blogspot.com - techno-39.blogspot.com

Cool kan b-)
Inti trik & tut's dari itu semua tidak lain adalah blank template blogger.
Kode .xml blank template blogger

Beberapa usefully link:

• subinsb.com/make-a-blank-blogger-template
• www.mybloggertricks.com/2012/09/turn-blogger-to-blank-page.html
• stackoverflow.com/questions/10011090/simplest-blogger-template-blogspot
• www.widgetgenerators.com/2012/11/blank-blogger-template-or-blank-html.html
• bungleisinthejungle.blogspot.com/2013/02/create-blank-blogger-template-or-blank.html

Kalau sudah mempunyai itu, tinggal masukin deh kode CSS dan HTML pada tempat semestinya bro. Harus punya dulu dong kode tampilan macam mana yg akan ditampilkan. Mau buat sendiri juga bisa kalo memang sudah jago :D

Penampakan & source file by codepen.io/Akiletour/pen/Eakfn

Penampakan & source file by developer.mozilla.org/en-US/demos/detail/css3-windows-8-animation-demo/launch

Silahkan sobat download kode template .xml dari penampakan screenshot di atas. Upload dan lihat hasil...
Template blogger unduh in 4shared www.4shared.com/zip/XhIwam3Zce/Template_Blogger.html
Download Template-Blogger.zip in Ziddu downloads.ziddu.com/download/24123623/Template-Blogger.zip.html

Ekstrak .zip dan buka hasil download pada notepad, edit link tujuan, warna atau apapun terserah!

Bye :-h

Who is the most optimal, Image Compressor

Tinggal pintar-pintarnya kita kapan harus memakai jpg, jpeg, png, gif or etc dalam menampilkan sebuah gambar! Sudah barang tentu yang sering kita pakai untuk urusan posting atau hal lainnya tidak jauh dari tiga jenis saja, yaitu jpg, png atau gif. Pada kesempatan sekarang AA Koben akan berbagi informasi 5 web layanan yg bergerak dalam urusan kompres-mengkompres gambar berekstensionkan PNG. Karena extension PNG-lah yg dapat membuat background menjadi transparan selain gif, bitmap atau sejenisnya? Banyak sekali source untuk hal compress di luaran sana, oleh sebab itu saya pilih yg menurut gue full-stylish :">

Percobaan dilakukan terhadap sebuah image dengan spesifikasi sbb

Dimensions: 1024 x 3255
Type: PNG Image
Size: 831 KB

Silahkan terjemahkan masing-masing :P
Dari lima web rujukan terikat proses kinerja dengan sistem engine masing-masing. Jadi gambar kompres tidak selalu dimenangkan oleh salah satu web. Bisa jadi web lain memenangkan hasil kompresan. So... be a creative

Compressor.io

TinyPNG

Compress PNG

Kraken.io

Yang terakhir adalah web image optimization tool sitereportcard.com/imagereducer.php Di sini kalian bisa optimasi image (GIF, JPG, PNG) and hasil generated akan ditampillkan beserta dengan thumbnail. Kalau tidak salah ada 7 hasil generate, berikut tampilan urutan pertama & terakhir.

Pertama	Terakhir

Nah, siapa pemenangnya! Biasakanlah selalu optimasi image sebelum melakukan upload. Karena selain friendly SEO engine, sudah tentu mengirit bandwith hostingan :))

Bye :-h

Learn Markdown use Markdown-Edit and to-Markdown

Bagi seseorang yang keseharian bertemu dengan fasilitas internet (online-online), mau mencari apa saja baik itu solusi, bahan pekerjaan, musik, video, aplikasi atau apapun bisa langsung mencari via search engine. Begitupun anda dan saya sebagai blogger penuh gaya (full stylish blogger) mau itu-ini tinggal searching ;)) taraaa...jreng...ketemu deh. Hari ke minggu, week to the month, bulan ke tahun dirasakan semakin berat untuk membuat 1 artikel yang memiliki bobot. Mentok ide bro :))
Berbicara mengenai markdown AA Koben mau melakukan update satu artikel dari postingan it's all about markdown syntax.

Gue akan beri kepada kalian dua buah tools keren punya tentang markdown editor b-) By georgeOsdDev he's created about markdown-edit, and by domchristie he's make to-markdown. Kenapa saya jatuhkan pilihan hanya kepada 2 opsi di atas? Menurut ane dengan memiliki kedua tool tersebut sudah dapat di bilang mewakili kita untuk belajar ria dengan syntax markdown ;)
Berikut spesifikasi:

Markdown Edit

• Hasil generate sudah mencakup raw.md, raw.html, and .html
• Ready added auto reload, enable shortcut key, marked for converter & you can use github API for converter.

Karena tampilan editor yg di usung sudah berupa syntax markdown (kotak sebelah kiri), maka sobat harus sudah familiar dulu dengan bahasa mark-down. Kalau untuk urusan convert HTML dasar ke syntax markdown, daripada itu gue comot to-markdown sebagai tool pendukung :D

Sebenarnya sudah bisa langsung download pada halaman source masing-masing kedua tool

1. Online markdown editor/viewer.
github.com/georgeosddev/markdown-edit
2. An HTML to Markdown converter written in JavaScript.
github.com/domchristie/to-markdown

Karena AA baik hati, maka sudah saya buatkan sebundel buat anda

• Markdown edit unduh via 4shared.
//www.4shared.com/zip/ODeCLMzDba/Markdown_Edit.html
• Download markdown-edit.Zip in ziddu.
//downloads.ziddu.com/download/24104115/Markdown-Edit.zip.html

Bonus links kalau mentok ide...

codepen.io/jaeming/pen/EwsqC - codepen.io/marionebl/pen/fensm - codepen.io/domakas/pen/vJgyf - codepen.io/codeandcam/pen/AmtvB - codepen.io/zadvorsky/pen/dILAG - codepen.io/zadvorsky/pen/oqhgp - codepen.io/codeandcam/pen/ixgHf - codepen.io/edadams/pen/Gqteo - codepen.io/satya164/pen/HpFAD - codepen.io/SitePoint/pen/HFnfB - codepen.io/vsonx/pen/aFnHi - codepen.io/LukyVj/pen/GeFKD - codepen.io/netzzwerg/pen/hfutI - codepen.io/Birky/pen/nFLmK - codepen.io/JustAnotherCoder/pen/gIqtp - developer.mozilla.org/en-US/demos/detail/playlist-player - developer.mozilla.org/en-US/demos/detail/css3-windows-8-animation-demo

Bye :-h

Make Animation use CSS Keyframe or CSS Sprites

Ketika melihat Pen dari master Brandon Lawrence codepen.io/bvbrandon/full/Hvqes AA lalu membuka arsip dan persis dengan salah satu source pada postingan selection good resources may 2014 dengan judul animating images with css keyframes! Sobat dapat mempelajari di halaman www.pencilscoop.com/2014/04/animating-images-with-css-keyframes Salah satu kemajuan yg terjadi pada bahasa CSS! Walau ribet dengan kode-kode dalam pembuatan, akan tetapi hasil tetap memuaskan :) Beberapa skill yg sobat harus kuasai selain CSS tentu photoshop :P

Dalam mengembangkan keahlian dalam per-CSS-an tentu dengan membaca, praktek dan selalu mencoba dengan teknik² sukar alias bertemu dengan kasus :)) Contoh pelajaran CSS tingkat advanced tentang emoticon Source lain dalam membuat emoticon dengan menggunakan image, dipadukan dengan CSS keyframe dan CSS image sprites! Buka halaman berikut guna bertemu dengan CSS image sprite animation skype emoticons.

cssdeck.com/labs/css-image-sprite-animation-skype-emoticons

Untuk mempelajari harus punya source yg berjalan secara offline, silahkan download...

downloads.ziddu.com/download/24088817/Skype-emoticons.zip.html

Kalau sobat mau memasang emot tersebut jangan pasang semua, karena kode yg lumayan bejibun. Pilih saja seperlunya ;) Berikut ilustrasi dan penjelasan...

Buka file Skype emoticons - Melwyn Pawar.htm pada text editor sobat (notepad), kemudian pilih emot yg akan digunakan. Lakukan optimize image terlebih dahulu sebelum dihostingkan. Karena kode tingkat mahir, penulisan syntax image sbb:

<img src="data:image/gif;base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="emoticon CLASS" />

Kode warna merah simpan saja, karena kalau tidak pakai itu akan ada gambar default alt. Saya sudah coba akali tetapi belum menemukan solusi :-?? Ada yg bisa :-"

www.designsave.com/2014/09/free-portfolio-blogger-templates.html

Happy CSS \m/