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
Sebetulnya tutorial membuat toggle, accordion, show hide atau apapun namanya menggunakan CSS sudah banyak yang menerangkan. Sehingga keputusan dalam menerapkan ke dalam template disesuaikan saja dengan kebutuhan masing² Karena sangkin banyaknya, maka saran AA pilihlah kode yg simpel sederhana namun tidak melepaskan faktor gaya full stylish :D
Kesempatan sekarang AA Koben akan berbagi kembali accordion/toggle/show-hide murni CSS pilihan, dan kebetulan source yg ada semua di peroleh dari web front end developer playground & code editor in the browser is codepen.

Pure CSS Accordion (Checkbox Hack)

.title h3 {
margin: 0;
font-size: 1.4em;
line-height: 1.2;
}
label {
display: block;
overflow: hidden;
}
.title {
padding: 1em 1.2em;
position: relative;
z-index: 599;
background: #fbfbfb;
border-bottom: 1px solid #eee;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.title:hover {
cursor: pointer;
background: #f5f5f5;
}
.content {
position: relative;
padding: 0;
max-height: 0px;
line-height: 1.5;
border-bottom: 1px solid #eee;
-webkit-transition: max-height 0.3s linear;
transition: max-height 0.3s linear;
}
.content p {
position: relative;
padding: 1em;
margin: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: all 0.55s ease;
transition: all 0.55s ease;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .title {
background: #c3f7ea;
}
input[type="checkbox"]:checked + .title + .content {
max-height: 555px;
}
input[type="checkbox"]:checked + .title + .content p {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}

<label for="chk-1">
<input id="chk-1" type="checkbox" checked/>
<div class="title">
<h3>Accordion Heading One</h3>
</div>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</label>

<label for="chk-2">
<input id="chk-2" type="checkbox" />
<div class="title">
<h3>Accordion Heading Two</h3>
</div>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</label>

<label for="chk-3">
<input id="chk-3" type="checkbox" />
<div class="title">
<h3>Accordion Heading Three</h3>
</div>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</label>

codepen.io/cmcg/full/DsbqG

Jika kepingin menambahkan konten accordion, sobat harus perhatikan<label for="XXX">
<input id="XXX" type="checkbox" />
Unik ID tersebut harus berbeda antara satu kontent dengan konten accordion lainnya.

Pure CSS Toggle

.togglebox {
width: 300px;
height: 400px;
margin: 0 auto;
background: #3c566f;
}
.togglebox input[type="radio"] {
position: absolute;
opacity: 0;
}
.togglebox label {
position: relative;
display: block;
height: 50px;
line-height: 50px;
padding: 0 20px;
font-size: 14px;
font-weight: bold;
color: rgba(255, 255, 255, 0.5);
background: #2e4155;
cursor: pointer;
}
.togglebox label:hover {
background: #1f2d3a;
}
.togglebox label:after {
content: '\00ab';
top: 0px;
right: 20px;
display: block;
position: absolute;
box-sizing: border-box;
}
.togglebox .content {
height: 0;
overflow: hidden;
}
.togglebox input[type="radio"]:checked ~ label {
color: rgba(255, 255, 255, 0.8);
}
.togglebox input[type="radio"]:checked ~ label:after {
transform: rotate(90deg);
}
.togglebox input[type="radio"]:checked ~ .content {
height: 150px;
transition: all 1s ease-in-out;
}
.togglebox p {
margin: 15px 0;
padding: 0 20px;
font-size: 11px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.8);
}

<div class="togglebox">
<div>
<input id="radio1" type="radio" name="toggle" checked="checked"/>
<label for="radio1">Title Here</label>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</div>
<div>
<input id="radio2" type="radio" name="toggle"/>
<label for="radio2">Title Here</label>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</div>
<div>
<input id="radio3" type="radio" name="toggle"/>
<label for="radio3">Title Here</label>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</div>
<div>
<input id="radio4" type="radio" name="toggle"/>
<label for="radio4">Title Here</label>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</div>
<div>
<input id="radio5" type="radio" name="toggle"/>
<label for="radio5">Title Here</label>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</div>
</div>

codepen.io/MattH22/full/gxvhL

Linknya hilang!!!

.isi-judul {
color: #fff;
position: relative;
background: #60A0FF;
margin: 0;
padding: 10px 10px 10px 40px;
display: block;
width:auto;
cursor: pointer;
font-size: 18px;
border-bottom: 1px solid #fff;
}
.isi-konten {
height: 0;
opacity: 0;
margin: 0px 0;
padding: 0px 15px;
overflow: hidden;
position: relative;
background: #f2f2f2;
-webkit-transition: .7s ease;
-o-transition: .7s ease;
transition: .7s ease;
}
.lambang:checked ~ .isi-konten{
height: auto;
opacity: 1;
}
.buka {
color:#fff;
z-index: 1;
font-size: 2em;
line-height: 100%;
position: absolute;
margin: 5px 0 0 10px;
-webkit-transition: .1s ease;
-moz-transition: .1s ease;
-o-transition: .1s ease;
transition: .1s ease;
}
.lambang:checked ~ .buka {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.lambang {
display: none;
}

<div>
<input type="checkbox" id="UNIK-1" name="q" class="lambang">
<div class="buka">+</div>
<label for="UNIK-1" class="isi-judul">Judul 1</label>
<div class="isi-konten">
<p>Isi dari Judul 1</p>
</div>
</div>
<div>
<input type="checkbox" id="UNIK-2" name="q" class="lambang">
<div class="buka">+</div>
<label for="UNIK-2" class="isi-judul">Judul 2</label>
<div class="isi-konten">
<p>Isi dari Judul 2</p>
<p>Isi dari Judul 2.1</p>
<p>Isi dari Judul 2.2</p>
</div>
</div>
<div>
<input type="checkbox" id="UNIK-3" name="q" class="lambang">
<div class="buka">+</div>
<label for="UNIK-3" class="isi-judul">Judul 3</label>
<div class="isi-konten">
<p>Isi dari Judul 3</p>
</div>
</div>

Karena linknya hilang, maka demo harus buat...DEMO

Demikian 3 info seputar CSS pilihan, semoga bermanfaat :)

Happy coding \m/

2 Komentar WTF  X
AA Koben akan berbagi trick dari web youtube. Mungkin agak mirip dengan trik youtube on blogspot Akan tetapi versi sekarang sedikit ekstrim, namun mudah untuk memiliki ListPlayer, soalnya sudah ada yang membuat :D Dari penulisan susunan kata ListPlayer disatukan, jika kita translate google akan terkena Did you mean: sehingga menjadi List Player yg berarti Daftar Player ;)) Apakah yg dimaksud dengan ListPlayer?

List-Player adalah pemutar video dengan fitur (tempilan) playlist. Sobat dapat membuat, bermain dan berbagi playlist video kalian.

  • Searching video tambahkan ke dalam playlist.
  • Menghasilkan Link playlist yang siap untuk berbagi dengan orang lain (pencet tombol Generate untuk membuat link berbagi).
Sekarang tinggal urusan memasukannya ke dalam blog masing-masing! Buat satu halaman post pages baru, ingat ya...POST PAGES bukan halaman post biasa. Kemudian masukan seluruh bumbu berikut...get coded (pencet tombol enter kalau keluar gambar tengkorak ijo) :P

DONE.

Agar simetris dengan tampilan template, sobat harus melakukan snippet CSS dalam bumbu, dan sisipkan kode CSS hasil snippet di dalam tagging<style>

. . . . . . . . .

</style>
Jangan di utak-atik bumbu yg ada, soalnya sudah melewati compressing code, tambahkan saja kode CSS hasil snippet kalian!

DEMO:

Final result List Player Youtube on The Blog. And this is example for sharing is caring via press generate button list player youtube on the blog.

Source: jsdo.it/ionstage/ay8O

Kalau mau berbagi video youtube pilihan hasil generate kalian, pakai link post-pages aku juga tidak apa-apa kok :"> ;))

Happy player list \m/

0 Komentar WTF  X
Ketika melongok web mbater (sebutan master buat yg cewek) Lea Verou, ada artikel tentang image comparison slider with pure CSS lea.verou.me/2014/07/image-comparison-slider-with-pure-css Sebuah trik tutorial seputaran image, fungsi utama yaitu membandingkan 2 buah gambar dengan gaya slider hanya menggunakan CSS! Begitulah kira² penjelasan versi AA Koben ;)) Apabila sobat mempunyai 2 gambar dan bermaksud membandingkannya, tidak perlu satu per satu menampilkan tetapi bisa memakai trick ini!
Lihat demo

codepen.io/beben-koben/full/JKzyf

Kode CSS pada sumber tidak berjalan bagus pada browser mozilla, sehingga saya harus turun tangan :D Ternyata masih ada kendala jg setelah gue turun-tangan, width (panjang) slider berbeda pula ketika di patok dengan nominal 50% #:-S Oleh karena itu width terpaksa diberikan dengan nilai 25px
.image-slider {
 line-height: 0;
 position:relative;
 display: inline-block;
}
.image-slider img {
 user-select: none;
 max-width: 400px;
}
.image-slider > div {
 position: absolute;
 top: 0; 
 left: 0;
 bottom: 0; 
 width: 25px; /* I mean this nominal, try to substitute with 52% and see in google chrome */
 max-width: 100%;
 overflow: hidden;
 resize: horizontal;
}
.image-slider > div:before {
 content: '';
 display: block;
 width: 13px; 
 height: 13px;
 overflow: hidden;
 position: absolute;
 resize: horizontal;
 right: 3px; bottom: 3px;
 background-clip: content-box;
 background: linear-gradient(-45deg, black 50%, transparent 0);
 -webkit-filter: drop-shadow(0 0 2px black);
 filter: drop-shadow(0 0 2px black);
}
Perhatikan property width: 25px; pada class attribute .image-slider > div Jika nominal di ganti dengan 52%, efek slider akan bisa mentok sampe ujung kiri & kanan (mozilla) tidak berjalan mulus pada google chrome. Maka dari itu nominal di beri nilai 25px agar bisa mentok kiri pada chrome.
Markup HTML<div class="image-slider">
<div><img src="IMAGE-BEFORE.jpg" alt="" /></div>
<img src="IMAGE-AFTER.jpg" alt="" />
</div>

Bonus: www.webdesigncrowd.com/sliding-jquery-image-divider

Happy coding \m/

0 Komentar WTF  X
Semenjak era gadget booming, beberapa (OS) telah dapat dioperasikan melalui iPad, iPhone, smartphone, tablet dll! Dengan begitu semakin kencang laju para developer dari berbagai sektor mengembangkan aplikasi, code, script dsb untuk perangkat² tersebut. Tak ayal dari dunia CSS & HTML pun ikut lahir trik dan tips keren² punya yang tidak boleh terlewatkan :D
Ada satu trik efek yg sedang ngetrend di kalangan gadgeter's yaitu water effect, ada juga yg bilang click effect, water ripples atau apapun namanya. Efek memunculkan riak air (water ripple effect) ketika terjadi sentuhan² pada objek!

Sobat dapat membaca beberapa resources pilihan AA seperti berikut:

  • Android L Ripple Effect.
  • >> codepen.io/idiotWu/pen/nefhC
  • Material design morphing icons 2.
  • >> codepen.io/albebonv/pen/gIlrw
  • Recreating the Touch Ripple Effect as Seen on Google Design.
  • >> webdesign.tutsplus.com/tutorials/recreating-the-animated-circle-effect-as-seen-on-google-design--cms-21655
  • Water ripple FX with Canvas and Javascript.
  • >> code.almeros.com/water-ripple-canvas-and-javascript
Berawal dari sanalah tercipta water ripple effect dengan komposisi small code + jQuery :P

DEMO & CODE

.ripple {
width:450px;
overflow:hidden;
display:inline-block;
transform:translateZ(0);
transition:all 0.5s ease;
box-shadow:0 0 5px rgba(0,0,0,0.2);
}
.ripple:hover {
box-shadow:0 0 10px rgba(0,0,0,0.4);
}
.ripple:focus {
outline:0;
border:none;
}
.ripple_effect {
width:100%;
height:100%;
position:absolute;
border-radius:100%;
transform:scale(0);
pointer-events:none;
background:rgba(0,0,0,0.2);
}
.ripple_effect.animate {
animation:ripple_effect 1s ease-out;
}
@keyframes ripple_effect {
100% {
opacity:0;
transform:scale(2.5);
}
}

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 $(".ripple").click(function(event){
  if($(this).find("b.ripple_effect").length == 0) { $(this).prepend("<b class='ripple_effect'></b>"); }
  ripple_effect = $(this).find("b.ripple_effect").removeClass("animate");
  x = event.pageX - ripple_effect.width()/2 - $(this).offset().left;
  y = event.pageY - ripple_effect.height()/2 - $(this).offset().top;
  ripple_effect.css({top: y+'px', left: x+'px'}).addClass("animate");
 })
});
//]]>
</script>
Planning HTML<div class="ripple">
<img src="LINK-IMAGE" />
</div>

codepen.io/beben-koben/full/ceuft

Happy ripple \m/
al-Quran

ARSIP

blank

BLANK

FACEBOOK PAGE