Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS
Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.
Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.
Your ads here!!!
Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

Resources

1 2 3 4 5 6 7 8
18 Februari 2014

UNTITLED

BLANK
28 Oktober 2014

0 Komentar WTF  X
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

0 Komentar WTF  X
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: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/

0 Komentar WTF  X
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
Android-Slide-Template-Blogger

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

css3-windows-8-animation

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

0 Komentar WTF  X
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 sbbbeben-koben

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

beben-koben

TinyPNG

beben-koben

Compress PNG

beben-koben

Kraken.io

beben-kobenYang 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.

PertamaTerakhir
beben-kobenbeben-koben

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

Bye :-h

al-Quran

MISC

BLANK

FACEBOOK PAGE