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
18 Februari 2014

GRAPHICS STATUS

27 Juli 2011

0 Komentar WTF  X
Merubah ukuran huruf sekarang bisa menggunakan HTML. Hal ini bisa tercipta dengan melakukan snippet code css input type, tepatnya variabel input + label! Artikel asli dengan judul CSS + Input font size selection by RĂ©mi Lacorne cdpn.io/JyxLC ternyata snippet kode CSS hanya mendukung pada browser google chrome. Oleh sebab itu, orang baik se-antero jagat Beben Koben melakukan sedikit perubahan pada snippet code CSS yang sudah ada by viralpatel.net/blogs/css-radio-button-checkbox-background
Screenshot original code:
Google ChromeMozilla
CSS Input font size selectionInput font size selection
DEMO cdpn.io/tCEwH
.container {
font-size: 15px;
font-family: Verdana, Arial, sans-serif;
border: 1px dotted tomato;
padding: 15px;
}
input[type=radio] {
display:none;
}
input[type="radio"]#small::after {
font-size: 10px;
content: "A";
display: block;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
input[type="radio"]#medium::after {
font-size: 15px;
content: "A";
display: block;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
input[type="radio"]#large::after {
font-size: 20px;
content: "A";
display: block;
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
input[type="radio"]#small:checked ~ .container {
font-size: 10px;
}
input[type="radio"]#medium:checked ~ .container {
font-size: 13px;
}
input[type="radio"]#large:checked ~ .container {
font-size: 20px;
}
input[type=radio] + label {
display: inline-block;
margin-left: 3px;
padding: 4px 12px;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: tomato;
border: 1px solid #ccc;
}
input[type=radio]:checked + label {
background-color: #ffa493;
}
input[type=radio] + label:hover {
background-color: #ffa493;
}
Planning HTML
<input type="radio" id="small" name="group" />
<label for="small" style="font-size: 10px;">A</label>
<input type="radio" id="medium" name="group" checked="checked" />
<label for="medium" style="font-size: 15px;">A</label>
<input type="radio" id="large" name="group" />
<label for="large" style="font-size: 20px;">A</label>

<div class="container">  
BLAH 
 BLEH
  BLOH
</div>
Perhatikan unik id container jika ingin diaplikasikan ke dalam template sobat masing-masing, maka carilah tag area post memakai unik-id apaan! Ganti juga kode yg ada pada CSS.
EX:
input[type="radio"]#small:checked ~ .UNIK-ID AREA POST {
  font-size: 10px;
}
input[type="radio"]#medium:checked ~ .UNIK-ID AREA POST {
  font-size: 13px;
}
input[type="radio"]#large:checked ~ .UNIK-ID AREA POST {
  font-size: 20px;
}
Selesai.
Bonus: cssdeck.com/labs/neatnait-custom-search-input

Happy CSS \m/

0 Komentar WTF  X
Koben akan kembali membahas tutorial bertemakan back to top Ada juga yang bilang scroll to top Sebuah link yg jika di klik akan menuju konten paling atas! Cara tercepat membuat hal itu bisa terjadi, carilah unik id pada template kalian yg mana letaknya paling atas. Biasanya terdapat di dalam tag header, wrapper, outer-wrapper etc. Pokoknya setelah tagging <body> disitulah dia berada ;)) Pada postingan sebelumnya gue sudah sharing mengenai make attractive back to top button use jQuery.
Sekarang AA akan buat versi umpan cacing, yakni ketika melakukan scroll halaman ke bawah, maka gambar tali beserta cacingnya akan merosot kelihatan minta dibalikin ke atas. Seperti itu kira-kira gambaran :D

Bahan-bahan yg mesti tersedia, sudah jelas 1 gambar cacing. Silahkan Save Page As and hostingkan sendiri² gambar cacingnya (click to full look image)cacingjQuery script inti harus sudah terpasang pada template anda!<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

.cacing {
background-image: url(LINK-GAMBAR/cacing.png);
background-repeat: no-repeat;
position: relative;
}
#cacing {
cursor: pointer;
width: 30px;
height: 455px;
background-size: 41px;
position: fixed;
top: -455px;
left: 7%;
transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
z-index: 21;
}
#cacing-bubble {
background: #fff;
border-radius: 50px;
color: #06f;
display: block;
font-size: 12px;
line-height: 14px;
opacity: 0;
overflow: visible;
padding: 5px;
position: absolute;
top: 365px;
left: 20px;
text-align: center;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
visibility: hidden;
width: 60px;
height: auto;
z-index: 99;
}
#cacing:hover > #cacing-bubble,#cacing:hover > #cacing-bubble:after {
opacity: 1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
visibility: visible;
}
#cacing-bubble:after {
border-bottom: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
border-left: 5px solid #fff;
content: "";
display: block;
position: absolute;
top: 96%;
left: 10px;
width: 0;
height: 0;
z-index: 98;
}

<div class="cacing" id="cacing">
<div id="cacing-bubble">Get me outta here!</div>
</div>

<div id="cacingTOP"></div>
<div class="cacing" id="cacing">
<div id="cacing-bubble">Get me outta here!</div>
</div>
Letakan syntax tersebut setelah tag <body> Ganti kata² sesuai selera.<div id="cacingTOP"></div>Unik id cacingTOP bisa sobat sisipkan ke dalam tag apapun, asal bagian paling atas dari template kalian. Hal ini akan erat sekali dengan snippet jQuery!
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function($) {
 $(window).on('scroll', false, function() {
  var windowTop = $(window).scrollTop();
  if (windowTop > 300) {
   $('#cacing').css('top', '0');
  } else {
   $('#cacing').css('top', windowTop - 465 + 'px');
  }
 });
 $('#cacing').unbind('click').click(function() {
  $('html,body').animate({
   scrollTop: $("#cacingTOP").offset().top
  }, 'slow');
 });
});
//]]></script>
DONE.

Demo n source code by: myblogsharingpost.wordpress.com

Happy back to top \m/

3 Komentar WTF  X
AA Koben akan berbagi 2 tool keren dari web jsdo.it D'nD File Viewer dan window.localStorage test. Kedua tool ini memiliki persamaan yaitu sama-sama menampilkan kode/script dalam satu wadah (tab browser). D'nD file viewer dengan teknik drag & drop sedangkan soliloquy (mock of the memo application with window.localStorage) hasil kerja akan terus ada sampai cache belum di clear. Seperti itu lah kira-kira bro :D Jika sobat mau buka file dalam satu tab, tool ini sangat mambantu sekali ;) Daripada bingung silahkan coba demonya...

jsrun.it/ethertank/iNHw - jsrun.it/kkeisuke/kzCI

Kalau demo berjalan mesti pakai koneksi internet alias online, saya bikin versi offline :-" Sebagai pembuat page .html offline aktif, gue persembahkan gratis buat kalian pengunjung setia blog ini :))

D'nD File Viewerwindow.localStorage
dnd file viewerlocalStorage

Semoga dengan adanya tambahan tool tersebut dapat mengefisiensikan waktu pekerjaan blogging anda sekalian. Sebenarnya gue sudah dapat source baru tentang tool serupa dengan ini! Lain waktu AA share deh ;))

Source: jsdo.it/ethertank/iNHw - jsdo.it/kkeisuke/kzCI
Happy tool \m/

2 Komentar WTF  X
Hanya mengupdate/menambah variasi membuat links berbagi. Tepatnya mungkin tutorial ini akan seperti make social network with css. Walaupun trend sekarang adalah penggunaan embed font icon untuk menampilkan lambang-lambang web jejaring! Koben akan update dua sekaligus tutorial CSS3 social cards, yaitu dengan full memakai CSS dan jQuery snippet b-)
Artikel membuat CSS3 Social Cards by MusikAnimal, sobat dapat lihat langsung ke halaman developer.mozilla.org/en-US/demos/detail/css3-social-cards
Singkat saja...

Sediakan terlebih dahulu image web jejaring sosial dengan resolusi (60 x 60 pixels) Gambar akan meliputi 2 macam, yakni gambar dengan background transparan dan gambar dengan background berwarna! Mengapa demikian, karena akan ada efek flip dari tut's ini :D

Demo: bit.ly/1ikXwn5

input#phone_booth {
visibility:hidden;
position:absolute;
left:-1000px;
}
input#phone_booth:checked + #areal {
left:10px;
box-shadow:0 0 1em #FFF;
background:#fff;
}
input#phone_booth:checked + #areal img#phone {
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-ms-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}
input#phone_booth:checked + #areal > div, input#phone_booth:checked + #areal > a {
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
#areal {
position:fixed;
bottom:10px;
z-index:100;
left:-525px;
padding:0;
padding-right:60px;
background:#dfdfdf;
border-radius:5px 25px 25px 5px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#areal:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#areal label {
cursor: pointer;
}
#areal label img#phone {
width:48px;
height:48px;
position:absolute;
top:5px;
right:5px;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
transition:all 1s;
}
#areal > div, #areal > a {
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
opacity:0;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
}
#areal a.card-container, #areal a.card-container img {
width:48px;
height:48px;
}
#areal a.card-container {
position:relative;
z-index:1;
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
float:left;
margin:5px;
}
#areal a.card-container div.card {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
width:100%;
height:100%;
cursor: pointer;
}
#areal a.card-container div.card div.face {
position:absolute;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
#areal a.card-container div.card div.back {
display:block;
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
#areal a.card-container:hover div.card {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}

<input id='phone_booth' type='checkbox'/>
<div id='areal'>
<label for='phone_booth'>
<img id='phone' src='LINK-IMAGE/phone.png'>
</label>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/googlePLUS.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/googlePLUS_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/twitter.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/twitter_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/lastfm.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/lastfm_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/linkedin.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/linkedin_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/github.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/github_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/mdn2.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/mdn_hover3.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/stackoverflow.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/stackoverflow_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/wikipedia.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/wikipedia_hover.png' alt=''/>
</div>
</div>
</a>
<a class='card-container' href='LINK HERE'>
<div class='card'>
<div class='face'>
<img src='LINK-IMAGE/rss.png' alt=''/>
</div>
<div class='face back'>
<img src='LINK-IMAGE/rss_hover.png' alt=''/>
</div>
</div>
</a>
</div>

Sekarang versi snippet jQuery script. Tutorial ini saya comot source kodenya dari demo template blogger premium :D

#sharebbn {
background: #333;
color: #ABABAB;
cursor: pointer;
float: left;
font-size: 25px;
font-weight: normal;
line-height: 38px;
padding: 0 20px;
text-transform: uppercase;
}
#sharebbn:before {
content: "\271A";
}
.expand:before {
content: "\2716" !important;
color: #FF7800;
}
#socials {
display: block;
float: left;
text-align: right;
background: #333;
}
#socials ul {
display: block;
height: 38px;
margin: 0;
padding:0;
}
#socials li {
display: inline-block;
float: left;
width: 32px;
height: 32px;
opacity: 0.2;
margin-top: 2.5px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#socials li:hover {
opacity: 1;
background-position: 0 -32px
}
#socials li a {
display: inline-block;
width: 32px;
height: 32px;
}
#socials li a span {display:none;}
#socials li.facebook{ background-image:url(http://1.bp.blogspot.com/-sbybihVrVuc/UHOTA49XRvI/AAAAAAAAEFY/08OCFvAm_wE/s64/facebook.png); }
#socials li.twitter{ background-image:url(http://1.bp.blogspot.com/-NskGHQfbyOA/UHOTDD3zdjI/AAAAAAAAEF4/sjChvedQgB8/s64/twitter.png); }
#socials li.linkedin{ background-image:url(http://1.bp.blogspot.com/-iwc7BZN6aAo/UHOTBxWKMSI/AAAAAAAAEFk/acmiao2JW-k/s64/linkedin.png); }
#socials li.tumblr{ background-image:url(http://1.bp.blogspot.com/-oceB8nmgiZ0/UHOTC4MmfwI/AAAAAAAAEF0/sbbGNL4ZTeg/s64/tumblr.png); }
#socials li.vimeo{ background-image:url(http://1.bp.blogspot.com/-apJrWCzYm-A/UHOTDZALThI/AAAAAAAAEGA/SpSImNuMR5I/s64/vimeo.png); }
#socials li.skype{ background-image:url(http://1.bp.blogspot.com/-HunH1J-7iZk/UHOTCtdNsFI/AAAAAAAAEFw/Pu2WkzQWNhU/s64/skype.png); }
#socials li.youtube{ background-image:url(http://1.bp.blogspot.com/-WtmigBJcc7g/UHOTDv29ObI/AAAAAAAAEGE/vVRRs-RkzBs/s64/youtube.png); }
#socials li.googleplus{ background-image:url(http://1.bp.blogspot.com/-mpeEl_TsIio/UHOTBq0XpmI/AAAAAAAAEFo/JeTzX9DWfbE/s64/googleplus.png); }
#socials li.deviantart{ background-image:url(http://1.bp.blogspot.com/-IvvW31ras2k/UHOTAXEtvDI/AAAAAAAAEFE/sOP5PCIDCqg/s64/deviantart.png); }
#socials li.flickr{ background-image:url(http://1.bp.blogspot.com/-fTxKi1uGenI/UHOTBtZabNI/AAAAAAAAEFg/htMsgs1jRVU/s64/flickr.png); }

<div id='socials'>
<ul>
<li class='facebook'><a href=''><span>Facebook</span></a></li>
<li class='twitter'><a href=''><span>twitter</span></a></li>
<li class='googleplus'><a href=''><span>googleplus</span></a></li>
<li class='linkedin'><a href=''><span>linkedin</span></a></li>
<li class='youtube'><a href=''><span>youtube</span></a></li>
<li class='flickr'><a href=''><span>flickr</span></a></li>
<li class='vimeo'><a href=''><span>vimeo</span></a></li>
<li class='tumblr'><a href=''><span>tumblr</span></a></li>
<li class='deviantart'><a href=''><span>deviantart</span></a></li>
<li class='skype'><a href=''><span>skype</span></a></li>
</ul>
</div>
<span id='sharebbn'></span>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){ var $content = $("#socials").hide();
 $("#sharebbn").click(function(){
 $("#socials").toggle(500);
 $(this).toggleClass("expand");
 });
});
//]]></script>
Demo: jsfiddle.net/bebenkoben/ws4Pg/show

Bye :-h

Happy coding \m/

ARSIP

RECENTLY

FACEBOOK PAGE