Free Text Editor is Emmet and jQuery Zen

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.Memang 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

Embed Post Blogger using Embedly

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

Pure CSS Accordion, Show-Hide or Toggle for You http://t.co/FRohtXR5I6

— Beben Koben (@bebenkoben) August 20, 2014

Post by Beben Koben.

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/

Pure CSS Accordion, Show-Hide or Toggle for You

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/

Make List Player Video Youtube in Post Pages Blogger

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/

Make Image Comparison Slider just use CSS

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/

Make Water Ripple Effect use CSS and jQuery

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/

Add Widget Social Popup Windows 8 Style for Blogger

Jadi malas mosting, kepotong libur kepanjangan :D Tadinya postingan kali ini mau memosting links resource keren punya! Karena banyak dan memerlukan skill dalam menulis, jadi diurungkan alias di tunda sampai waktu 'ntah kapan ;))
Tak lupa AA Koben mengucapkan "Maaf lahir & bathin kepada seluruh fans, visitor, subscriber etc" Untuk mempertahankan eksistensi blogging, gue sudah pilihkan satu tutorial instan mengenai Widget popup keren dengan gaya tampilan seperti windows 8!

Prinsip kerja mungkin se-type dengan artikel dari Master Adhy Suryadi yg berjudul membuat pesan pembuka ketika masuk blog www.kompiajaib.com/2014/06/membuat-pesan-pembuka-ketika-masuk-blog.html Penambahan terjadi pada kode CSS windows 8 style!Original resource: www.exeideas.com/2013/07/windows-8-style-pop-up-social-widget.html

Karena pada source sumber CSS code sudah mengalami compress, maka tugas AA mem-beauty-kan kembali kode tersebut :P Supaya dalam pengeditan tidak terlalu sulit (readable)
Copy kode ke dalam text editor (notepad)

<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<style type="text/css">
/***********************************************
* Windows 8 Style POP-Up Social Widget by EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
***********************************************/
#exestylepopupdiv {
position:absolute;
}
#exestylepopupdiv {
z-index:9999999;
display:block;
top:0;
left:0;
width:100%;
height:100%;
position:fixed;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheE_Qe_zltlni8GWsukodmbWz174JAMTHzJhVlgtspc63DCvQuj_jkL8ekqXWuoELtlCx_aolPlbrrciUIFfxuGS98kyDc0S6iotf2K0Bt5MfEvfDhtP6kDWgPqqUTG49pXPWds9XWIA/s128/exeideasopacity0.5.png');
margin:0;
overflow-y:auto;
}
#exestylepopup {
overflow:none;
}
.exestylepopup {
width:700px;
height:400px;
position:fixed;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-350px;
}
#boxes {
margin:0 auto;
width:700px;
height:400px;
}
#exe-facebook {
position:relative;
float: left;
width:445px;
height:195px;
color:#fff;
font:15px Arial;
text-align:center;
background-color:#2C84EE;
text-decoration:none;
line-height:175px;
}
#exe-facebook-hide {
display:none;
background-color:#2C84EE;
color:#fff;
position:absolute;
top:0;
left:0;
width:445px;
height:195px;
box-shadow:0 0 6px 3px #2C84EE;
-webkit-box-shadow:0 0 6px 3px #2C84EE;
-o-box-shadow:0 0 6px 3px #2C84EE;
-ms-box-shadow:0 0 6px 3px #2C84EE;
}
#exe-twitter {
position:relative;
float: left;
width:245px;
height:195px;
margin-left:10px;
color:#fff;
font:15px Arial;
text-align:center;
background-color:#00BBE2;
text-decoration:none;
line-height:175px;
}
#exe-twitter-hide {
display:none;
background-color:#00BBE2;
color:#fff;
position:absolute;
top:0;
left:0;
width:245px;
height:195px;
box-shadow:0 0 6px 3px #00BBE2;
-webkit-box-shadow:0 0 6px 3px #00BBE2;
-o-box-shadow:0 0 6px 3px #00BBE2;
-ms-box-shadow:0 0 6px 3px #00BBE2;
}
#exe-google {
position:relative;
float: left;
width:245px;
height:195px;
margin-top:10px;
color:#fff;
font:15px Arial;
text-align:center;
background-color:#E51400;
text-decoration:none;
line-height:175px;
}
#exe-google-hide {
display:none;
background-color:#E51400;
color:#fff;
position:absolute;
top:0;
left:0;
width:245px;
height:195px;
box-shadow:0 0 6px 3px #E51400;
-webkit-box-shadow:0 0 6px 3px #E51400;
-o-box-shadow:0 0 6px 3px #E51400;
-ms-box-shadow:0 0 6px 3px #E51400;
}
#exe-rss {
position:relative;
float: left;
width:445px;
height:195px;
margin-left:10px;
margin-top:10px;
color:#fff;
font:15px Arial;
text-align:center;
background-color:#fd9f13;
text-decoration:none;
line-height:175px;
}
#exe-rss-hide {
display:none;
background-color:#fd9f13;
color:#fff;
position:absolute;
top:0;
left:0;
width:445px;
height:195px;
line-height:0;
box-shadow:0 0 6px 3px #fd9f13;
-webkit-box-shadow:0 0 6px 3px #fd9f13;
-o-box-shadow:0 0 6px 3px #fd9f13;
-ms-box-shadow:0 0 6px 3px #fd9f13;
}
.gradient {
background: -moz-linear-gradient(-45deg,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear,left top,right bottom,color-stop(0%,rgba(0,0,0,0.25)),color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(-45deg,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(-45deg,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(-45deg,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(135deg,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);
}
.exefixedfooteremailsubscribebox input.email {
padding:7px 10px 7px 10px;
font-family:"Arial","Helvetica",sans-serif;
width:218px;
font-size:12px;
-webkit-border-radius:5px;
border-radius:5px;
width:400px;
}
.exefixedfooteremailsubscribebox input.subscribe {
background-color:#f0f0f0;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:6px 18px;
text-decoration:none;
text-shadow:1px 1px 0 #fff;
-webkit-box-shadow:inset 0 1px 0 0 #fff;
box-shadow:inset 0 1px 0 0 #fff;
background: -webkit-gradient( linear,left top,left bottom,color-stop(0.05,#f0f0f0),color-stop(1,#c9c9c9) );
background: -moz-linear-gradient( center top,#f0f0f0 5%,#c9c9c9 100% );
}
.exefixedfooteremailsubscribebox input.subscribe:hover {
background-color:#c9c9c9;
background: -webkit-gradient( linear,left top,left bottom,color-stop(0.05,#c9c9c9),color-stop(1,#f0f0f0) );
background: -moz-linear-gradient( center top,#c9c9c9 5%,#f0f0f0 100% );
}
</style>
<!--[if gte IE 9]><style type="text/css">.gradient{filter:none}</style><![endif]-->
<!--[if lte IE 6]><style type="text/css">html{overflow-x:auto;overflow-y:hidden}</style><![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<div id='boxes'>
<div id="exe-facebook" class="gradient" onmouseover="document.getElementById('exe-facebook-hide').style.display='block'" onmouseout="document.getElementById('exe-facebook-hide').style.display='none'">
<img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkFYH4hkVUOw7u9hyXBET8fys7K_FR3ccVuhxi6OndMhDei0XJBruiHiV_kAjJDJH9_rRIXZ0wokr8inKhyphenhyphen8SIjItOFp6dYRE-Jxyt9slZYUOxrDDsCVnU_vIuyYU_PVRICfM9IOq_Pg/s64/facebook-white-64-64.png" width="64px" height="64px" alt="Facebook"/>Facebook
<div id="exe-facebook-hide">
<!-- Facebook Like -->
<div style="margin-top:80px;">
<iframe src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/pages/Tutorial-Blog-for-Stylish-Blogger/122292581115426&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:100px;height:90px;" allowtransparency="true">
</iframe>
</div>
<!-- Facebook Like -->
</div>
</div>
<div id="exe-twitter" class="gradient" onmouseover="document.getElementById('exe-twitter-hide').style.display='block'" onmouseout="document.getElementById('exe-twitter-hide').style.display='none'">
<img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8qbrkChH-tmcDYEGBM0oO9tZv_sk-PnZ6PGkbjLMQknJJvipZscCLL64Tlovhm-7qklPv3S2FgQgr4CJ4tyc5ZgE5SiwsSpbO_rJhc2MveATyocHy8hLhk15uLXVMVrIIV8g-uP0Exg/s64/twitter-white-64-64.png" width="64px" height="64px" alt="Twitter"/>Twitter
<div id="exe-twitter-hide">
<div style="margin-left:11px;margin-top:15px;">
<a href="https://twitter.com/YOUR-ACCOUNT" class="twitter-follow-button" data-show-count="false" data-size="medium">Follow</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs)}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
<div id="exe-google" class="gradient" onmouseover="document.getElementById('exe-google-hide').style.display='block'" onmouseout="document.getElementById('exe-google-hide').style.display='none'">
<img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ElFyeJ0Ebyvy9g6teVgtbQ4sPvoDESGOAOFPHaJR45Vl2bmaMrLJ9jCmaqgOousmKtkhFoRH9ves_aJQQXVfMdmh13J58EZ5hDwkxBErTHPrOH3z0wNaHjZNmdgKkHLd1Ekr9wBpmw/s64/googleplus-white-64-64.png" width="64px" height="64px" alt="GooglePlus"/>Google Plus
<div id="exe-google-hide">
<div style="margin-top:20px;">
<a target="_blank" href="//plus.google.com/106979433441667164665" rel="publisher" style="text-decoration:none;display:inline-block;color:#333;text-align:center;font:13px/16px arial,sans-serif;white-space:nowrap;"><span style="display:inline-block;font-weight:bold;vertical-align:top;margin-right:5px;margin-top:8px;">Add on</span><img src="http://ssl.gstatic.com/images/icons/gplus-32.png" alt="Google+" style="border:0;width:32px;height:32px;"/></a>
</div>
</div>
</div>
<div id="exe-rss" class="gradient" onmouseover="document.getElementById('exe-rss-hide').style.display='block'" onmouseout="document.getElementById('exe-rss-hide').style.display='none'">
<img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDkKfVHheCpZMFYJP9GoC_pudj9B4W8Bo8OYfqAZKkO3xB9GVJFf9gQ4i4q5-0gW8KC_0nNl6gNVY3C9Ng2KULPxND6hhj0WA3LNHnvHp67XruhzNchWQgOEw37_m2hOXP6vMdBYSpAA/s64/rss-white-64-64.png" width="64px" height="64px" alt="RSS"/>RSS
<div id="exe-rss-hide">
<div style="margin-top:50px;">
<div class="exefixedfooteremailsubscribebox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=beben-koben','popupwindow','scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" id="email" name="email" value="Masukan Alamat E-mail Anda Disini..." /><input type="hidden" value="beben-koben" name="uri"/>
<p><input class="subscribe" name="commit" type="submit" value="Subscribe Us into your E-Mail"/></p>
</form>
<center style="color:#333;margin-top:10px;font-size:10px;">E-Mail Will Be Delivered By FeedBurner.</center>
</div>
</div>
</div>
</div>
</div>
<center class="gradient" style="padding:10px;background-color:#66CD00;color:#fff;cursor: pointer;text-align:center;margin-top:10px" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">
<p>Terimakasih sudah mengunjungi blog ini, jangan lupa datang lagi...</p>
</center>
</div>
</div>
<!-- Windows 8 Style POP-Up Social Widget By EXEIdeas DIV End -->

Note (Click Ctrl + F) cari dan gantikan dengan link/account masing²:

>> www.facebook.com/pages
>> twitter.com/YOUR-ACCOUNT
>> plus.google.com
>> feedburner.google.com

Simpan seluruh kode hasil editan dengan teknik Add a Gadget ► HTML/JavaScript

Happy coding \m/