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

8 Komentar WTF  X
Bagi sobat blogger yang suka bermain dengan objek iframe, AA Koben akan berbagi trik postingan mengenai hal tersebut. Sebelumnya dalam artikel trick style iframe writing, mungkin sudah mewakili ;) Satu hal yg perlu di ingat trick ini akan berjalan kalau web tujuan tidak memasang kode anti iframe :D
Mari kita mulai dari yg sederhana...
<iframe src="about:blank" name="myFrame" width="100%" height="350" scrolling="auto" frameborder="0"></iframe>
<form action="http://www.bing.com/search" target="myFrame">
 <input type="text" name="q" /> 
 <input type="submit" value="Go!" />
</form>
Silahkan isi link target (action) seduai dengan kebutuhan. Untuk memudahkan proses, bagi kalian yg sudah mempunyai html editor silahkan buka! Bagi yg belum punya silahkan buka live HTML editor Kemudian masukan bumbu-bumbu berikut pada kotak sebelah kiri, dilanjutkan dengan memencet tombol Preview.
<script type="text/javascript">
function setVisibility() {
document.getElementById('iframe1').style.display = "block";
}
</script>
<style type="text/css">
#iframe1 {
display:none;
}
</style>
<noscript>
<style type="text/css">
#iframe1 {
display:block;
}
</style>
</noscript>
<iframe src="about:blank" name="myFrame" width="100%" height="350" scrolling="auto" frameborder="1" id="iframe1"></iframe>
<form action="http://www.bing.com/search" target="myFrame">
Search: <input type="text" name="q"> <input type="submit" value="Go!" name="type" onclick="setVisibility();">
</form>

<script language="javascript">
function LoadPage(){
var objFrame=document.getElementById("myFrame");
objFrame.src=document.getElementById("URL").value;
}
</script>
<div align="center">
<form action="http://www.google.com/custom" target="myFrame">
<input type="text" name="q" size="45"> <input type="submit" value="Search">
</form>
<iframe src="about:blank" name="myFrame" width="100%" height="350" scrolling="auto" frameborder="0"></iframe>
<input type="button" value="&lt;&lt; Back" onClick="myFrame.history.back()" title="Go back one page"> <input type="button" value="Forward &gt;&gt;" onClick="myFrame.history.forward()" title="Go forward one page">
</div>

<script type="text/javascript">
function setVisibility() {
document.getElementById('iframe1').style.display="block";
}
</script>
<style type="text/css">
#iframe1 {
display:none;
}
</style>
<iframe src="about:blank" name="myFrame" width="100%" height="350" scrolling="auto" frameborder="0" id="iframe1"></iframe>
<form action="http://www.google.com/custom" target="myFrame">
Search: <input type="text" name="q"> <input type="submit" value="Go!" name="type" onclick="setVisibility();">
</form>

Happy iframe \m/

0 Komentar WTF  X
Melepas penat dari bahasa coding yang begitu membingungkan, menguras tenaga otak dalam mempelajarinya! Sekarang AA Koben akan berbagi satu snippet jQuery mudah untuk meng-cooling-down-kan otak yg lagi sumpek ;)) Kebiasaan seseorang komentator menuliskan komentarnya, di indo sendiri terkenal dengan istilah pertamaaaxxx! Dengan bantuan script jQuery akan diberikan satu sentuhan kecil yaitu dimana ketika seorang komentar menuliskan komentar and mendapat urutan pertama, maka secara otomatis pada kolom komentar tersebut akan muncul sebuah gambar. Gambar di sini bebas terserah, yg penting jaga besar² Itung-itung penghormatan pada komentator ;)

Komentator selanjutnya tidak akan ada gambar :Pcomment-bloggerIngat, trik ini terintegrasi dengan script jQuery!<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>Racikan bumbu untuk melakukan hal itu semua adalah...

.comment_body.first {
 background: url(http://2.bp.blogspot.com/-0gyCQYPLZCU/Tpbt2fH-TgI/AAAAAAAAB8Q/mFXcgVrDmP0/s31/pertamax.gif) no-repeat right top;
 padding: 0 7px 8px;
}
Keterangan:
>> comment_body merupakan unik id, bisa berbeda tiap template Ex: comment-body Pokoknya cari tagging yg mengapit isi dari komentar!
>> no-repeat right top Kode standar, silahkan ganti sesuai dengan kebutuhan. Begitu pula dengan properti padding!
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $(".comment_body:first").addClass("first");
});
//]]>
</script>
SAVE.

Happy snippet \m/

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/

ARSIP

RECENTLY

FACEBOOK PAGE