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
Tidak ada bahan post, mentok ide nih bro :-< Koben terpaksa melakukan repost! Post ulangan kali ini akan bercerita tentang syntax and conditional tag khusus dari web Emmet Kalau sobat perhatikan home page emmet, maka akan tampak konten Watch demo! Gue akan berikan itu untuk kalian. Sebelum menjadi emmet, yang saya ketahui dulu masih bernama jQuery zen.
Jadi singkat cerita, AA Beben Koben akan memberikan kepada kalian 2 editor sekaligus yaitu text editor emmet dan jQuery zen. Berikut screenshot ke-2 editor tersebut.emmet-jquery-zenMemang nggak bagus² amat sih, tetapi fungsinya itu loh =P~ Bagi yg berminat silahkan di download, free alias gratis :D
Via ziddu: downloads.ziddu.com/download/24015246/Emmet.zip.html
Via 4shared: www.4shared.com/zip/EuoJkg5xce/Emmet.html

Dont forget to read HTML editor live preview source by emmet & codemirror.

Source jQuery zen by: jsdo.it/eller86/fUtsW

Bye :-h

1 Komentar WTF  X
Dengan marak hadir web jejaring, berbagi baik itu mau berupa post, image kita sebagai user dimanjakan dengan kemudahan akses. Salah satu fitur yang sangat membantu kita, dalam menyebarkan suatu hal yaitu embed post/image! Hampir web jejaring sosial terkenal sudah mengadakan feature tersebut. Tidak lain itu salah satu cara management dalam menggaet para pelanggan agar mau terus berkreatifitas :D

Berikut 2 contoh embed



Lantas bagaimana dengan post blog kita jika ingin seperti itu, apakah bisa! Dengan bantuan pihak ke 3, tentu hal tersebut dapat kita lakukan ;))

Silahkan sobat masuk ke web
  • embed.ly
  • embed.ly/cards/blogger
  • embed.ly/button/blogger
Jika kepengen lebih jauh lagi, silahkan go to embedly.github.io/jquery-preview/demo

Bonus

www.webdesignai.com/free-blogger-templates-2014

Link terkait

dev.twitter.com/docs/embedded-tweets
developers.facebook.com/docs/plugins/embedded-posts
business.pinterest.com/en/widget-builder#do_pin_it_button

Happy embed \m/

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 :)

Ternyata saya menyimpan beberapa links source keren punya dengan tema yg sama. Dan tidak kalah keren dari yg sudah ada ;) Kelupaan lihat arsip :D
  • codepen.io/Kseso/pen/Jwhxn
  • experiments.wemakesites.net/animated-css3-only-horizontal-accordion.html
  • andornagy.com/simple-jquery-accordion
  • andornagy.com/pure-css-accordion
  • codepen.io/andornagy/pen/KfjHh
  • codepen.io/andornagy/pen/mrDCe
  • codepen.io/pedronauck/pen/jaluz
  • codepen.io/klamping/pen/mkArc
  • codepen.io/diegopardo/pen/pvkjx
  • codepen.io/r4c2r44/pen/bxrEj
  • codepen.io/JustAnotherCoder/pen/rLGfg
  • codepen.io/peternguyen/pen/yAsbw
  • codepen.io/abergin/pen/ihlDf
  • jsdo.it/duxca/xnml
  • tympanus.net/codrops/2014/03/21/responsive-full-width-tabs

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/
al-Quran

ARSIP

blank

BLANK

FACEBOOK PAGE