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

GRAPHICS STATUS

27 Juli 2011

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

0 Komentar WTF  X
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.
  2. github.com/georgeosddev/markdown-edit
  3. An HTML to Markdown converter written in JavaScript.
  4. 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
al-Quran

MISC

BLANK

FACEBOOK PAGE