Tutorial Blog for Stylish Blogger

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 ☺

▼ ▲

Script for Broken Image Link & Funny Link Img Blogspot

4 Komentar

Awal iseng cari-cari blank image yang datang dari hostingan . Tidak sengaja coba² link image yang sudah dapat mengupload di editor blog pada address bar. Blank image tidak ketemu malah dapat trik sedikit nyeleneh ;)) Mulanya jika sobat telah beres meng-upload sebuah gambar ketika memosting pasti mendapatkan link anchor img! Iconnya yg seperti ini loh kala bos meng-add image

Secara default akan ada option pilihan None, Left, Right, and Center. Tidak masalah dengan posisi mau dimana juga, fokus saja pada link acnhor imagenya. Like this result of link anchor img by blogspot blogger

<img style="cursor: pointer; cursor:hand;width: 120px; height: 120px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV8GUP5E1pUlxQM7np2BZWu4PrWVnqMLoC-w95-QF9qcxkxGkaKcXkA1h9FleKIvl0soao0cFhqtrkdeGTyzWJcxzvv_4GGBYPBiQE3o4kLORTB0ciHFB5LKxSKD-pKbUbs7vHdAbPriA/s320/no-img.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5623271376163351810" />

Beda lagi anchornya kalo kita masuk ke album picasa.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV8GUP5E1pUlxQM7np2BZWu4PrWVnqMLoC-w95-QF9qcxkxGkaKcXkA1h9FleKIvl0soao0cFhqtrkdeGTyzWJcxzvv_4GGBYPBiQE3o4kLORTB0ciHFB5LKxSKD-pKbUbs7vHdAbPriA/s800/no-img.png" height="120" width="120" />

Sekarang kita kuak misteri nyeleneh dari link anchor image blogspot ini :D
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV8GUP5E1pUlxQM7np2BZWu4PrWVnqMLoC-w95-QF9qcxkxGkaKcXkA1h9FleKIvl0soao0cFhqtrkdeGTyzWJcxzvv_4GGBYPBiQE3o4kLORTB0ciHFB5LKxSKD-pKbUbs7vHdAbPriA/s320/no-img.png
Jika resolusi gambar besar, sebenarnya terdapat link anchor langsung menuju ke gambar tersebut <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV8GUP5E1pUlxQM7np2BZWu4PrWVnqMLoC-w95-QF9qcxkxGkaKcXkA1h9FleKIvl0soao0cFhqtrkdeGTyzWJcxzvv_4GGBYPBiQE3o4kLORTB0ciHFB5LKxSKD-pKbUbs7vHdAbPriA/s1600/no-img.png">Lorem Ipsum</a>
Tapi dengan menghilangkan angka s320/s400/s800/s1600 pada anchor image diatas, itu juga sudah bisa membuat gambar pada resolusi aslinya.

Nyelenehnya ada pada sesi ini nih ;)) :"> Copy paste link berikut pada address bar biar terlihat apa yang Beben Koben si bloglang anu ganteng kalem tea maksudkan & perhatikan kode²nya yg sama tapi tak serupa :-"
Klik buat mengambil link!
Klik buat mengambil link!
Klik buat mengambil link!
Source by picasa album...
Klik buat mengambil link!
Klik buat mengambil link!
Klik buat mengambil link!
Mungkin bisa lebih banyak lagi variasi link image tersebut bila dirubah-rubah namun hasil akan tampak sama :)) LoL Pantesan setiap kali melakukan search image via google selalu jauh dari keywords gambarnya =))

Link gambar error alias tak ada lagi karena terhapus, expired or else reason bisa menimbulkan pemandangan yang kurang sedap dipandang. Satu hostingan mungkin lebih mudah mendeteksi kerusakannya, nah kalao lebih dari satu sobat menggunakan hostingan gambar gimane ceritanye tuh!!!
Berawal mengunjungi sobat jauh, lalu dapat trik menyembunyikan/mengganti gambar rusak menggunakan javascript, here we are .
Setelah dilakukan praktek diblog dummies Beben ternyata tidak suskses bro :-s trik dari sobat Ciudad. Search melakukan pencarian, binggo dapet :P

Trik Pertama

Javascript

Pemakaian

<img style="cursor: pointer; cursor:hand;width: 120px; height: 120px;" src="http://3.bp.blogspot.com/-WAkEGqGeVs/TgnfhfPWrQI/AAAAAAAADjc/gqCTHxT4d80/s320/no-img.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5623271376163351810" onerror="ImgError(this)" />

Pada syntax image tinggal membubuhi atribut kode warna merah! Ribet kan, tapi ini berjalan baik pas dites. Letakan terlebih dahulu javascript diatas tag </body>, link default image bisa sobat ganti dengan kreasi sendiri (tulisan warna biru)

Trik Kedua

jQuery replace broken link for image.

Pakai jQuery tidak perlu embel-embel atribut lagi. Script plugin diatas akan menyembunyikan setiap ada link image yg rusak. Kalau default image broken tampil, sobat hanya perlu mengganti script tulisan hide menjadi show
Nanti akan muncul default img brokennya (kode warna biru) Begitulah sekelumit mengenai image dan tetek-bengeknya. Semoga bermanfaat :) Lebih kurangnya mohon dimaafkan, kebenaran hanya milik Alloh SWT :)
Script & coded by http://crazzycoding.blogspot.com/2011/01/jqueryjavascript-to-replace-broken.html - http://maisonbisson.com/blog/post/12150/detecting-broken-images-in-javascript/
Happy broken image \m/

▼ ▲

Slide, Slider or Slideshow!

3 Komentar

▼ ▲

Make a Menu with Fixed Property

8 Komentar

Mari bermain dengan sesuatu yang berbau fixed. Fixed merupakan property posisi CSS dimana keadaan diam statik walau discroll (begitu kira-kira) :D Coba sobat main-main dimari bentar guna melihat perbandingan and perbedaan static, absolute, fixed dan relative ;)
Jika sudah tauk, maka Beben Koben si bloglang anu ganteng kalem tea mau berbagi membuat satu menu dalam kondisi fixed. Tengok postingan Koben sebelumnya mengenai , lihat pada pojok kiri atas! Mirip kayak ngono efek fixed itu sob :) tapi dibubuhi sentuhan ul & li jadi deh menu yang gaya punya :D

Untuk demonya lihat dipojok kiri blog ini, kalo ada berarti sukses demonya yaaa ;))

MENU FIXED

Ada enggak demonya bos :)) Bumbu²nya nih

Kode CSS

#bmenu {
position: fixed;
left: 10px;
top: 10px;
background-color :#000066;
border-radius: 15px;
-moz-border-radius: 15px;
width: 202px;
height: 25px;
color: #fff;
transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
z-index: 3;
overflow: hidden;
padding: 9px 15px 10px;
}

#bmenu h3 {
margin: 0;
padding: 0;
text-align: center;
cursor: pointer;
}

#bmenu ul {
border-radius: 10px;
-moz-border-radius: 10px;
background-color: #004D99;
margin: 15px 0;
padding: 0 15px;
}

#bmenu li {
list-style: none;
margin: 0 0 5px;
padding: 0;
}

#bmenu li a {
color: #FFF;
text-decoration: none;
font-size: 14px;
}

#bmenu li a:hover {
color: #00FF00;
}

#bmenu:hover {
z-index: 5;
height: 286px;
}

Kode HTML

<div id="bmenu">
<h3>Content</h3>
<ul>
<li><a href="#" title="">YOUR TITLE 1</a></li>
<li><a href="#" title="">YOUR TITLE 2</a></li>
<li><a href="#" title="">YOUR TITLE 3</a></li>
<li><a href="#" title="">YOUR TITLE 4</a></li>
<li><a href="#" title="">YOUR TITLE 5</a></li>
<li><a href="#" title="">YOUR TITLE 6</a></li>
<li><a href="#" title="">YOUR TITLE 7</a></li>
<li><a href="#" title="">YOUR TITLE 8</a></li>
<li><a href="#" title="">YOUR TITLE 9</a></li>
<li><a href="#" title="">YOUR TITLE 10</a></li>
</ul>
</div>

SAVE

Happy menu fixed \m/

▼ ▲

Solucior for our Solution

7 Komentar

Biar semangat lagi para sobat Beben mendalami . Postingan sebelum²nya juga Beben Koben si bloglang anu ganteng kalem tea sudah memberikan beberapa dari .
Kali ini datang dari web Solucior

website yang menyuguhkan solusi dari beberapa trick ;) Biar menambah greget ada apa saja disana, sobat dapat melihat beberapa trik hasil karya Mr "S" b-) Solucior meliputi kategori: php » javascript » css » htaccess » MySQL. Jadi kalau ada masalah dengan category diatas bisa kontak kali ;)) Masalahnya konten web-nya masih sedikit :D Biar sedikit berguna cekali buat kita para newbie :"> Okelah kalau begitu, let's get de done we cek some demo's here my bro :)>-

Rotate and scale with CSS 3

Click here to rotate and scale

Hover your Mouse!!!

That's good right :D

Code-Code 1

.putar {
height:200px;
}

.putar1 {
height:200px;
-webkit-transition:1.5s all ease-in-out;
-moz-transition:1.5s all ease-in-out;
-o-transition:1.5s all ease-in-out;
transition:1.5s all ease-in-out;
}

.putar2 {
height:200px;
-webkit-transition:1.5s all ease-in-out;
-moz-transition:1.5s all ease-in-out;
-o-transition:1.5s all ease-in-out;
transition:1.5s all ease-in-out;
-webkit-transform:rotate(360deg) scale(-1, -1);
-moz-transform:rotate(360deg) scale(-1, -1);
-o-transform:rotate(360deg) scale(-1, -1);
transform:rotate(360deg) scale(-1, -1);
}

Pemakaian

<img src="http://your-link-image-here.png" id="imgeffect" class="putar" /><br />

<a href="javascript:void(0)" onclick="document.getElementById('imgeffect').className = (document.getElementById('imgeffect').className == 'putar2') ? 'putar1' : 'putar2';">

Click here to rotate and scale

</a>

Tulisan imgeffect merupakan unique ID. Bisa sobat ganti dengan apa saja, tapi harus sama ya :)

Code-Code 2

.trans-form {
display:block;
width:150px;
background:#F0F;
color:#000;
-webkit-transition:.7s all ease-in-out;
-moz-transition:.7s all ease-in-out;
-o-transition:.7s all ease-in-out;
transition:.7s all ease-in-out;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border:1px solid #000;
margin:0 auto;
padding:10px;
}

.trans-form:hover {
-webkit-transform:rotate(720deg) scale(1);
-moz-transform:rotate(720deg) scale(1);
-o-transform:rotate(720deg) scale(1);
transform:rotate(720deg) scale(1);
box-shadow:2px 2px 5px #000;
-webkit-box-shadow:2px 2px 5px #000;
}

Pemakaian
<a href="javascript:void(0)" class="trans-form"><img src="http://your-link-image-here.png" alt="" /></a>

It's simple but funny, try this my bro A link with confirm!
<a href="http://beben-koben.blogspot.com/" onclick="return confirm('TEXT YANG AKAN DITAMPILKAN')" target="top">A link with confirm</a>

Javascript Image Magnification/Zoom Simple

Struktur kode image magnification so simple.

<!-- JavaScript -->

<script type="text/javascript">
<!--
function zoom(e, sens) {
 var elm = document.getElementById(e);
 var w = (elm.offsetWidth) ? elm.offsetWidth : elm.style.pixelWidth;
 var wc = (elm.parentNode.offsetWidth) ? elm.parentNode.offsetWidth : elm.parentNode.style.pixelWidth;
 w = (sens > 0) ? w * 1.35 : w / 1.35;
 if (w < wc) w = wc;
 elm.style.width = w + "px";
}
-->
</script>

<!-- Kode CSS -->

<style>
#zoom {
width: 400px;
height: 500px;
overflow: scroll;
border: 1px solid #500;
text-align: center;
margin: 0 auto;
}
</style>

<!-- Kode HTML (pemakaian) -->

<div id="zoom">
<img id="beben" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUeQUpxT3FEZ7PqHwFNuMVCgmsNGzEiCHBqDwhyphenhyphenCpGcD5WBa4Dscw4NFG1e_HbeCia6iNQN_hqhuCXQhYcene4ZplO0n0vteM4ejXicZ4BqPiLxRKxCSr1RgVm0fe7LCBdZx3W9x2da0LS/s512/cg-robots-18.jpg" alt="cg-robots" style="width:100%" />
</div>
<center>
<input type="button" value="-" onclick="zoom('beben', -1)" /> ZOOM
<input type="button" value="+" onclick="zoom('beben', 1)" />
</center>

Keterangan:

JavaScript

</body>

Kode CSS

</b:skin>

Kode HTML (pemakaian)

beben

Scroll div with JavaScript (Hover process)

Keterangan & cara sama dengan diatas. This structure for Scroll div with JavaScript.

<!-- JavaScript -->

<script type='text/javascript'>  
//<![CDATA[
var timer1;
function scrollDiv(divId, depl) {
   var scroll_container = document.getElementById(divId);
   scroll_container.scrollTop -= depl;
   timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 30);
}
//]]>
</script>

<!-- Kode CSS -->

<style>
.hoverScroll {
width: 200px;
height: 100px;
border: 1px solid #333;
background: #FFFF99;
padding: 15px 10px;
overflow: hidden;
}
</style>

<!-- Kode HTML (pemakaian) -->

<div id="Scroll" class="hoverScroll">
Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here        Your text here   
</div>
<a href="javascript:void(0)" onmouseover="scrollDiv('Scroll', 5)" onmouseout="clearTimeout(timer1)">To Top</a>
<a href="javascript:void(0)" onmouseover="scrollDiv('Scroll', -5)" onmouseout="clearTimeout(timer1)">To Bottom</a>

Tulisan Scroll merupakan Unique ID, bisa apa saja bebas tapi harus sama :)

demo Scroll div with JavaScript

Begitulah beberapa contoh trik yang Beben ambil sebagai solution :D silahkan berkreasi and don't forget to come the web solucior acak-acak sana :))
Happy blogging \m/

▼ ▲

Creativity with CSS3 Transforms

5 Komentar

Postingan kali ini masih sekitar CSS3, dan semoga semakin membuat sobat tergelitik guna mengasah skill individu. Masih ingat dengan roket bergerak kala mouse diarahkan, hasil ngasah skill juga tuh ;)) !
So trick itu dinamakan oleh para developer dengan nama . Memberi efek zoom, berputar, mengecil, joget kekiri & kekanan, loncat keatas or kebawah bisa juga ;)) Berpulang dari blog salah satu master yang Beben Koben si bloglang anu ganteng kalem tea suka kunjungi , ada artikel mengenai jump effect on icons!
Digabungkan dengan efek transforms, dihasilkan deh jump sedikit slow motion pada iconnya :D

Demo jump effect on icons
Demo diatas masih menggunakan atribut CSS standar sob. Ternyata membuat efek icon lompat keatas memakai CSS standar bisa juga ;)) (memang master) :-bd
Sekarang gimana jika dibubuhi bumbu CSS3 transforms agar loncat ikonnya bisa sedikit lebih dinamis ;) Biar sedikit gereget coba tengok beberapa efek transfroms berikut ini ya :">

Klik buat mengambil link!

Kode CSS3

#sosial{
width: 276px;
height: 64px;
margin: 0 auto;
padding: 0;
list-style: none;
}

#sosial li {
width: 64px;
height: 64px;
float: left;
margin-right: 5px;
}

#sosial a {
display: block;
width: 100%;
height: 100%;
float: left;
text-indent: -1000em;
background-repeat: no-repeat;
background-position: 0 32px;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out
}

#sosial a:hover {
background-position: 0 5px;
-webkit-transform:translate(0,.1em);
-moz-transform:translate(0,.1em);
-o-transform:translate(0,.1em)
}

#facebook {
background-image: url(http://your-image-link-here.png)
}

#linkedin {
background-image: url(http://your-image-link-here.png)
}

#twitter {
background-image: url(http://your-image-link-here.png)
}

#youtube {
background-image: url(http://your-image-link-here.png)
}

Kode HTML

<ul id="sosial">
<li><a href="#" id="facebook" title="">Facebook</a></li>
<li><a href="#" id="linkedin" title="">Linkedin</a></li>
<li><a href="#" id="twitter" title="">Twitter</a></li>
<li><a href="#" id="youtube" title="">YouTube</a></li>
</ul>

Save

Demo
Klik buat mengambil link!
Bagus kan sob ;) keren atuh yah :p Sok silahkan dikreasikan lagi menurut kebutuhan :)
Karena atribut ID sosial disini memakai margin: 0 auto (posisi akan berada ditengah), maka kalo sobat mau menambahkan icon, variabel width kalikan dengan banyak icon & ditambah margin 5px dikalikan dgn jml icon juga. Kalo mau dikiri tinggal hapus saja var. width and margin dengan float: left, marginnya terserah :P
bye bye :-h

▼ ▲

No Action Just Share

3 Komentar

▼ ▲

Script Versus CSS3, What's Your Choice!

2 Komentar

Memang sedikit berkendala jika sobat kepengen bisa kayak itu, mau seperti ini tetapi minim dengan ilmunya. Anggap diri kita kek bayi baru lahir yang baru belajar berbahasa. Bahasa web tentunya yg Beben maksudkan disini yah ;)) Rajin pangkal pandai dalam kasus ini berlaku. Semakin kita rajin membaca, praktek or else guna mengasah skill & kemampuan, maka dipastikan keinginan ini-itu bisa terkabulkan :D Referensi web HTML bisa disatroni serta mengenai CSS agan caplok deh .
Kenapa eh kenapa Beben Koben si Bloglang anu Ganteng Kalem tea membeberkan pernyataan diatas! Karena eh karena mau tidak mau jangan sampai tertinggal dengan fitur makin hari makin menggelitik kreatifitas :x

Lihat perubahan drastis pada beberapa contoh yang dahulu mesti memakai script sekarang bisa hanya dengan penggunaan CSS3. Sobat V Divya Sai selaku owner @BloggerStop dot net pernah memosting Share & Boomark with Boucing Effect with jQuery :-bd How about this my brooo Bouncing Effect with CSS3 Transition or jQuery :-/
Apa beben bilang, ketinggalan sedikit dari para developer maka akan semakin jauh sobat-sabit berada di belakang ;)) SEMANGAT!!!
Dahulu kala menginginkan efek nudging sama toh harus pakai script! Apa itu NUDGING, lirik diblog demo sobat satu ini (tengok disebelah kiri blog) Klik buat mengambil link!
Penjelasannya ada disini, tapi mungkin cara menjelaskannya hanya terfokus pada scriptnya saja Menambahkan Effect JQuery Link Nudging Pada Tabel. Yuk kita kuak yg ada didemo sebelah kirinya itu loh ;)) :D

jQuery Script

Script warna biru jangan dipakai lagi kalau memang sudah ada, sisipkan saja script berikutnya diatas tag </body>

Kode CSS

ul#menugigir {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#menugigir li {
width: 100px;
}
ul#menugigir li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px;
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
filter: alpha(opacity=80); /* MSIE/PC */
-moz-opacity: 0.8; /* Mozilla 1.6 and older */
opacity: 0.8;
}
ul#menugigir .rumah a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#menugigir .about a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#menugigir .search a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#menugigir .komentar a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#menugigir .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#menugigir .tools a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#menugigir .kontak a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}

Seperti biasa sebelum/diatas tag </b:skin>

Kode HTML

<ul id="menugigir">
<li class="rumah">
<a href="LINKANDA" title="home"></a>
</li>
<li class="about">
<a href="LINKANDA" title="Tentang"></a>
</li>
<li class="search">
<a href="LINKANDA" title="Cari"></a>
</li>
<li class="tools">
<a href="LINKANDA" title="Alat"></a>
</li>
<li class="rssfeed">
<a href="LINKANDA" title="RSS Feed"></a>
</li>
<li class="komentar">
<a href="LINKANDA" title="Komentar"></a>
</li>
<li class="kontak">
<a href="LINKANDA" title="Kontak"></a>
</li>
</ul>

Didalam tag <body> ... </body> bisa jg Add a Gadget ► HTML/Javascript ;)

Save

Proses panjang guna mencapai efek nudging yak :D Bagaimana peranan CSS3 memainkan fitur nudging effect ini :-? Jurus :-" yang memainkan peranan ;)) Look demo simple berikut arahkan mouse...

Lorem Ipsum Pret

Pret Lorem Ipsum

Beben kasih 2 contoh kode efek nudging, cek gi dot

/* transition code with "li (list)" attribute */

#nudgeList li a {
cursor: pointer;
-webkit-transition: padding-left 300ms ease-out;
-moz-transition: padding-left 300ms ease-out;
}
#nudgeList li a:hover {
padding-left: 10px;
}

/* transition code with "class" attribute */

.nudge {
-moz-transition: all 0.4s ease-out;  
-o-transition: all 0.4s ease-out;  
-webkit-transition: all 0.4s ease-out;  
-ms-transition: all 0.4s ease-out;  
transition: all 0.4s ease-out;  
}
.nudge:hover {
margin-left: 25px;
padding-left: 5px;
}

Pemakaian!

<ul id="nudgeList">
<li>
<a href=''>Link 1</a>
</li>
<li>
<a href=''>Link 2</a>
</li>
<li><a href=''>Link 3</a>
</li>
</ul>

<a href="Disini URL" class="nudge">Disini teks</a>

Perhatikan tulisan berwarna, satuan 1.0s atau 300ms bisa sobat atur. Begitu caranya kalo pakek CSS3 sob :) Referensi sudah tersedia, developer dimana-mana, balik keatas baca muqadimah Beben :P
Koben tutup artikel kali ini, semoga sobat semakin tergelitik mendalami bahasa web. Sorot kotak dibawah ini, that's transition trick ;)

Belajar dan Prakteklah ^_^

Happy blogging \m/

▼ ▲

Eksistensi Blogging

6 Komentar

▼ ▲

Code-Code

<script style="text/javascript">
//<![CDATA[
  function RecentPostsScroller(json) {
      var sHeadLines;
      var sPostURL;
      var objPost;
      var sMoqueeHTMLStart;
      var sMoqueeHTMLEnd;
      var sPoweredBy;
      var sHeadlineTerminator;
      var sPostLinkLocation;
      try {
          sMoqueeHTMLStart = "\<MARQUEE onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
          if (nWidth) {
              sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
          } else {
              sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
          }
          if (nScrollDelay) {
              sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
          }
          if (sDirection) {
              sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
              if (sDirection == "left" || sDirection == "right") {
                  sHeadlineTerminator = "&nbsp;&nbsp;";
              } else {
                  sHeadlineTerminator = "\<br/\>";
              }
          }
          if (sOpenLinkLocation == "N") {
              sPostLinkLocation = " target= \"_blank\" ";
          } else {
              sPostLinkLocation = " ";
          }
          sMoqueeHTMLEnd = "\</MARQUEE\>"
          sHeadLines = "";
          for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
              objPost = json.feed.entry[nFeedCounter];
              for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
                  if (objPost.link[nCounter].rel == 'alternate') {
                      sPostURL = objPost.link[nCounter].href;
                      break;
                  }
              }
              sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
          }
          sPoweredBy = "\<a target =\"_blank\" href=\"http://www.digitalgupshup.com/auto-scrolling-marquee-widget-html-code-for-blogger-recent-posts\"\>Grab This</a\>  <a target =\"_blank\" href=\"http://beben-koben.blogspot.com\"\>Scrolling Widget\</a\>";
          if (sDirection == "left") {
              sHeadLines = sHeadLines + "&nbsp;" + sPoweredBy;
          } else if (sDirection == "right") {
              sHeadLines = sPoweredBy + "&nbsp;" + sHeadLines;
          } else if (sDirection == "up") {
              sHeadLines = sHeadLines + "\<br/\>" + sPoweredBy;
          } else {
              sHeadLines = sPoweredBy + "\<br/\>" + sHeadLines;
          }
          document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
      } catch (exception) {
          alert(exception);
      }
  }
//]]>
</script>

<script style="text/javascript">
//<![CDATA[
  var nMaxPosts = 10;
  var sBgColor;
  var nWidth;
  var nScrollDelay = 105;
  var sDirection = "left";
  var sOpenLinkLocation = "N";
  var sBulletChar = "";
//]]>
</script>
<script style="text/javascript" src="http://NAMA-BLOG.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScroller"></script>

Script yg dibedakan dengan warna, script pemanggilnya. Sok silahkan berkreasi, dan tunggu update halaman ini guna mencari-cari trik sejenis ;)) ;)
Happy marquee \m/

▼ ▲

Permalink Vs Bookmark

5 Komentar

Sekarang Beben Koben si Bloglang anu ganteng kalem tea akan berbagi tips dan trik mengenai permalink. Mungkin jika sobat mengenal permalink yang ada didalam blogspot akan bisa berkreasi dengan skill sobat masing² ;)
Singkat cerita definisi permalink yaitu sebuah link tetap yang mana tidak akan berubah walau dimakan waktu (link permanent) Sebagai contoh permalink yang ada pada blogspot (ada banyak)

<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>

<a expr:href='data: post.link' expr:title='data: post.title'>
<data: post.title/>
</a>

Kayak ngono contone :D Hitung saja sama agan ada berapa permalink di blogspot ;)) :"> Kreasi perma-link yg diterapkan biasanya kebanyakan digunakan pada . Ex kode permalink for share Click expand here

<a expr:href='"http://twitter.com/home/?status=" + data:post.title + data:post.url' title='Share on Twitter!'>
Twitt This
</a>

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' title='Share on StumbleUpon'>
StumbleUpon
</a>

<a expr:href='"http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' title='Share on Reddit'>
Reddit
</a>

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' title='Digg!'>
Digg!
</a>

<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' title='Share on Delicious'>
Delicious
</a>

<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' title='Share on Facebook.'>
Facebook
</a>

So...bagaimana, ternyata mengasyikan jika bisa bermain dengan syntax link kan! Mari kita lebih asyik lagi bagaimana membuat sebuah syntax-link menjadi satu syntax-link :D

Memang jalan tercepat membuat book-mark tak ayal dengan teknik press on keyboard Ctrl + D (mozilla browse)

Tapi bagaimana jika kita mau menjadikan sebuah URL, dan ketika diklik langsung mengarah pada fasilitas New Bookmark browse kepunyaan sobat :-" Cocok buat link blog pribadi yang dianggap keren dibagikan ke para pelancong :)) Masukan script jQuery plugin berikut diatas tag </body>

<script type='text/javascript'>
/*
* jqBookmark - a jquery Bookmark script
*
* LICENSE
*
* This source file is subject to the new BSD license that is bundled
* with this package in the file license.txt.
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to calisza@gmail.com so we can send you a copy immediately.
*
*/
//<![CDATA[
$(document).ready(function(){
 // add a "rel" attrib if Opera 7+
 if(window.opera) {
  if ($("a.jqbookmark").attr("rel") != ""){
   $("a.jqbookmark").attr("rel","sidebar");
  }
 }

 $("a.jqbookmark").click(function(event){
  event.preventDefault();
  var url = this.href;
  var title = this.title;
  
  if (window.sidebar) { // Mozilla Firefox Bookmark
   window.sidebar.addPanel(title, url,"");
  } else if( window.external ) { // IE Favorite
   window.external.AddFavorite( url, title);
  } else if(window.opera) { // Opera 7+
   return false; // do nothing
  } else {
    alert('Unfortunately, this browser does not support the requested action,'
    + ' please bookmark this page manually.');
  }
 
 });
});
//]]>
</script>

Pemakaian sobat hanya tinggal memasukan atribut class="jqbookmark" kedalam syntaxlink.<a href="http://beben-koben.blogspot.com/" title="The Great Blog" class="jqbookmark">Prodigy of Head</a>
Happy syntax \m/

▼ ▲

List Blog Official Blogger

2 Komentar

Dashboard blogger dimana bagian terdepan ketika kita sudah melakukan login account. Perhatikan oleh sobat bagian . Terdapat 3 tabs menu meliputi...

Blogs I'm Following Blogger Buzz Blogs of Note

Jadi mirip kinerja yang pernah Beben Koben si Bloglang anu ganteng kalem tea bagi kepada para sobat mengenai Google Reader :p
Jadi jika sobat memasukan link pada tombol

ADD

Secara otomatis akan melihat artikel terupdate blog yang agan ikutin :)
Kalau itu kan jika kitanya berada pada dashboard (login account) dapat melihat berita teranyar. Sekarang bagaimana jika mau menengok postingan terupdate tanpa harus log-in, dan postingan teranyarnya datang dari blog developer official blogger b-)

Daftar/list blog directory agan-agin dapat mengecek di Lists Blog Directory! Teknik supaya bisa melihat berita teranyar dari blog official blogger caranya gampang sekali, yaitu Add a Gadget ► HTML/Javascript :D Masukin saja bumbu²nya berikut ;))

<div id="B2n_posts" style="width:95%;height:150px;overflow:auto;background-color:#FFFFCC;border:3px double #f60;padding:10px;">
<script type="text/javascript">
function build_posts(data) {
  var container = document.getElementById('B2n_posts');
  var list = document.createElement('div');
  // Loop through all data items returned
  for (var i=0; i < data.items.length; i++) {
   
    var item = data.items[i];
var listElement= document.createElement('div');
listElement.className="listelement";

  var link = document.createElement('a');
  link.appendChild(document.createTextNode(item.title));

 link.href = item.alternate.href;
        listElement.appendChild(link)
 listElement.appendChild(document.createElement('br'));    

var bloglink = document.createElement('a');
bloglink.appendChild(document.createTextNode(item.origin.title));
bloglink.href = item.origin.htmlUrl;
bloglink.className="smalllink";
listElement.appendChild(bloglink);
list.appendChild(listElement);

}
  container.appendChild(list);
}
</script>
<script src="http://www.google.com/reader/public/javascript/user/10949413115399023739/label/officialgoogleblogs-all?n=10&callback=build_posts" type="text/javascript"></script>
</div>

See you \m/

▼ ▲

Font Gokil is Fontsize for Blogger

4 Komentar

Font atau huruf ternyata memang satu karya seni yang indah. Tak ayal dari rangkaian huruf seseorang bisa menghasilkan karya keren ok epunya. Sebagai contoh seni kaligrafi tak tertandingi nilai estetikanya :D
Beben Koben si bloglang anu ganteng kalem tea akan berbagi mengenai trik gokil supaya font/huruf di blog kita tercinta bisa top markotop. Setelah terealisasikan bagi para pemakai, maka sekarang bagaimana font tergokil akan hadir pada blog sobat masing-masing b-) Mungkin sangkin gokilnya bisa membuat semua orang kepengen memiliki huruf semacam ini ;)) Setelah Beben praktekan, maka hasilnya bisa ditengok bos kayak ngene

Terintegrasi dengan dan script bawaan yang harus sobat pasang kedalam template jika memang menginginkan font gokil ini tampil :P

<script src="http://static.fontself.com/libraries/html/v3/js/jquery-1.6.1.min.js" type="text/javascript"></script>

<script src="http://static.fontself.com/libraries/html/v3/js/fontself.js" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
  $(document).ready(function(){
      fsRendering();
});
//]]>
</script>

Keterangan:

Script berwarna biru yaitu script jQuery (jika sudah ada tidak usah dipasang lagi)
Masukin script berwarna merah diatas tag </body>
SAVE

Cara pemakaian ketika memosting sobat harus banyak menghapal (save) kode hurufnya ;)) Jadi ketika ada kata/kalimat yang akan dibuat gokil, sobat hanya perlu melakukan tag dirangkai dengan kode huruf. Contoh pemakaian fontself dengan gaya ADIDAS.

<p data-fontself="8f4f686acbf44111e90bcc54b2dbed295a32d2108d40623b8c6d3f519f2bbd8d">Kata-kata or kalimat yg dibikin gokil!!!</p>

Tulisan data-fontself harus ada dibarengi dengan rentetan kode angka & huruf itu. Kode rentetan jenis fontsize dapat sobat pilih disini . ± ada 48 jenis hurup gokil :)) yg bisa dipakai :-bd

Bisa dikreasikan dengan atribut style, div, p, span or etc dan sudah ada beberapa icon-icon gokilnya juga =))
Happy font and enjoy it \m/

▼ ▲

Males mosting sebenarnya Beben Koben si bloglang anu ganteng kalem tea sob. Karena tidak kunjung menemukan tutorial or hack or trick gaya punya selama melakukan . Memang jika sudah dilanda lazy virus efeknya jadi beginong membuat brain menjadi lag bin lola bin lambreta :D
Tetapi untuk mempertahankan eksistensi apa boleh buat, maka Beben kasih artikel yang akan membuat para sobat juga anteung memasukan link blog kalian ke :-" Tidak banyak kok cuman ada ± 60 direktori ;)

Web	PR 9
epa.gov	http://www.epa.gov/owow/wetlands/restore/addsite.html
scirus.com	http://www.scirus.com/srsapp/submiturl
Web	PR 8
boingboing.net	http://www.boingboing.net/suggest.html
infomine.ucr.edu	http://infomine.ucr.edu/contact/suggest.shtml
lanic.utexas.edu	http://lanic.utexas.edu/info/new/suggest/
sacentral.sa.gov.au	http://www.sacentral.sa.gov.au/site/page.cfm?u=43&displayMode=showCheckLinkForm
thomasnet.com	http://www.thomasnet.com/mythomas/signup.html?navsec=header
Web	PR 7
aboriginalcanada.gc.ca	http://www.aboriginalcanada.gc.ca/acp/site.nsf/eng/cf10000.html
anzwers.com.au	http://www.anzwers.com.au/suggest_site.html
atomenabled.org	http://www.atomenabled.org/everyone/atomenabled/add_url.php?c=1
elecdir.com	http://www.elecdir.com/submit_site
ilovelanguages.com	http://www.ilovelanguages.com/index.php?addsite31=yes
scrubtheweb.com	http://www.scrubtheweb.com/addurl.html
Web	PR 6
ananzi.co.za	http://www.ananzi.co.za/Add_site/
boliviaweb.com	http://www.boliviaweb.com/links.htm
business-directory-uk.co.uk	http://www.business-directory-uk.co.uk/business-links.php
chefsblogs.com	http://www.chefsblogs.com/directory/submit.php
directory.ac	http://www.directory.ac/business-listing.html
drumtv.com	http://drumtv.com/submit.php
femina.com	http://www.femina.com/submit.phtml
fishlinkcentral.com	http://www.fishlinkcentral.com/login.php?f=1&b=%2Fadd.php
freeprwebdirectory.com	http://www.freeprwebdirectory.com/submit.php
freewebsubmission.com	http://www.freewebsubmission.com/
justwebtemplates.com	http://www.justwebtemplates.com/links.php?ax=add
kinderstart.com	http://kinderstart.com/addasite.jsp
mavensearch.com	http://www.mavensearch.com/submit/submit.asp
officer.com	http://officer.com/cgi/links/add.cgi
poland.pl/directory	http://www.poland.pl/directory/zglos,Web_Directory,cid,601.htm
polypat.org	http://polypat.org/submit.php
radwaste.org	http://radwaste.org/suggest.htm
rajhga.org	http://www.rajhga.org/submit.php
securityclimate.org	http://www.securityclimate.org/submit.php
swoogle.umbc.edu	http://swoogle.umbc.edu/index.php?option=com_swoogle_service&service=submit
the-big-brain.com	http://the-big-brain.com/website_submission_055.htm
Web	PR 5
bluewine.com	http://www.bluewine.com/add_url/indexnew.html
canadaone.com/business	http://www.canadaone.com/business/addbusiness.html
christiansunite.com	http://www.christiansunite.com/addsite.shtml
claymont.com	http://www.claymont.com/submitnologin.asp
directory.classifieds1000.com	http://directory.classifieds1000.com/all/add_link.html
directoryworld.net	http://www.directoryworld.net/index.php?a=0
eurobreeder.com	http://www.eurobreeder.com/add/submit_your_site.html
femeba.net	http://femeba.net/submit.php
frety.net	http://frety.net/add.cgi
guitarists.net	http://www.guitarists.net/links/submit.php
imadec.com	http://www.imadec.com/submit.php
information.com	http://information.com/forms/suggest.html
infotiger.com	http://www.infotiger.com/addurl.html
internet-web-directory.com	http://www.internet-web-directory.com/cgi-bin/member.cgi?action=add
iozoo.com	http://www.iozoo.com/submit.php
pressbox.co.uk	http://pressbox.co.uk/cgi-bin/links/add.cgi
prolinkdirectory.com	http://www.prolinkdirectory.com/submit.php
rcreducation.com	http://rcreducation.com/submit.php
searchsight.com	http://searchsight.com/submit.htm
searchwiz.com	http://searchwiz.com/addurl.htm
sitepromotiondirectory.com	http://www.sitepromotiondirectory.com/submit.php
somuch.com	http://www.somuch.com/AddSite/SubmitMain.asp
submissionwebdirectory.com	http://www.submissionwebdirectory.com/submit.php
surfindia.com	http://www.surfindia.com/suggest.php?category=&action=suggest_site_new
surfsafely.com	http://www.surfsafely.com/urladd.html
takrawworld.com	http://takrawworld.com/submit.php
usalistingdirectory.com	http://www.usalistingdirectory.com/submit.php
web-design-directory-uk.co.uk	http://www.web-design-directory-uk.co.uk/business-links.php
zepti.com	http://zepti.com/addsite.html
zepti.net	http://zepti.net/addsite.html

Silahkan dipilih mau dimasukin kemana ajah blog sobat...yuk mari :">

Jika dirasakan memasukan blog ke direktori kurang mendongkrak juga, silahkan sobat meluncur ke blog sobat kita ini (nara sumber) guna memilih kembali list social bookmarking yang beraliran do follow b-)

Acak-acak artikel disana, banyak software unik and artikel wokeh punya ;))
Happy blogging \m/