Kamis, 30 Juni 2011

Script for Broken Image Link & Funny Link Img Blogspot

Awal iseng cari-cari blank image yang datang dari hostingan Picasa. 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 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/AVvXsEgyX1Lf5nAOjEeWQu8Mhs6x_53RUbiqFeNZp_JB4LnypX5q_jzp1DElecJuS7ObuEXr4-afUDzf9ZVncvJC0H74KnBGq7C9AKUT39914JBhGkonjGkQ2l5qyqB6lf_rbY79yyH4FTokqZg/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/AVvXsEgyX1Lf5nAOjEeWQu8Mhs6x_53RUbiqFeNZp_JB4LnypX5q_jzp1DElecJuS7ObuEXr4-afUDzf9ZVncvJC0H74KnBGq7C9AKUT39914JBhGkonjGkQ2l5qyqB6lf_rbY79yyH4FTokqZg/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/AVvXsEgyX1Lf5nAOjEeWQu8Mhs6x_53RUbiqFeNZp_JB4LnypX5q_jzp1DElecJuS7ObuEXr4-afUDzf9ZVncvJC0H74KnBGq7C9AKUT39914JBhGkonjGkQ2l5qyqB6lf_rbY79yyH4FTokqZg/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/AVvXsEgyX1Lf5nAOjEeWQu8Mhs6x_53RUbiqFeNZp_JB4LnypX5q_jzp1DElecJuS7ObuEXr4-afUDzf9ZVncvJC0H74KnBGq7C9AKUT39914JBhGkonjGkQ2l5qyqB6lf_rbY79yyH4FTokqZg/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 Ciudad Blogger.
Setelah dilakukan praktek diblog dummies Beben ternyata tidak suskses bro :-s trik dari sobat Ciudad. Search melakukan pencarian, binggo dapet :P

Trik Pertama

Javascript
<script type="text/javascript">
//<![CDATA[
function ImgError(source){
source.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtRY2_f8TKWcVuUMpQUTEapBaikfszOHziNsyaTKylrPsFvHFxyaMFNA26EftBPkqqcd1WjoSsvU0VJ4sz8STy1yYxk083JfOvyRcjzmIheViLpicj8SbSgh5YpecSWIern-HiD7lGzmo/";
source.onerror = "";
return true;
}
//]]>
</script>
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.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("img").each(function(index) {
$(this).error(function() {
$(this).unbind("error").attr("src", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtRY2_f8TKWcVuUMpQUTEapBaikfszOHziNsyaTKylrPsFvHFxyaMFNA26EftBPkqqcd1WjoSsvU0VJ4sz8STy1yYxk083JfOvyRcjzmIheViLpicj8SbSgh5YpecSWIern-HiD7lGzmo/"); // If you want to replace with any blank image.

$(this).hide();//You can simply Hide it using this.
});
$(this).attr("src", $(this).attr("src"));
});
});
//]]>
</script>
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/

Rabu, 29 Juni 2011

Slide, Slider or Slideshow!

Bukan sulap dan bukan sihir. Feature slider/slide/slideshow kini dapar diimplementasikan kedalam sesi postingan blogger. Tidak lain berkat karya para developer and sobat blogger yang ahli mengenai tutorial itu ;)) Lihatlah karya teranyar sobat vagabundia mengenai Transicionitis y el slideshow. Bagi sobat yang mau silahkan satroni, berbekal google translate :D This is demo source by vagabundia:

monumen-jabar
cat-woman
dian-sastro
sexy-lady
robots
sakura
ymaha
peta-bandung
cat
Example Slideshow
1
2
3
4
5
6
7
8
9

Karena sobat JMiur sudah sering sama Beben Koben si bloglang anu ganteng kalem tea share, maka kali ini lain lagi tapi dengan trik yang sama masih mengenai creating javascript slideshow. Cek gi dot berikut langkah-langkahna:
  • http://www.codingmix.com/2010/07/how-to-create-slideshow-without-jquery.html
  • http://www.codingmix.com/2010/07/creating-javascript-slideshow-part-2.html
  • http://www.codingmix.com/2010/07/creating-javascript-slideshow-part-3.html
  • http://www.codingmix.com/2010/08/creating-javascript-slideshow-part-4.html
  • http://www.codingmix.com/2010/08/creating-javascript-slideshow-part-5.html
  • http://www.codingmix.com/2010/08/creating-javascript-slideshow-part-6.html
Sobat kita selaku owner codingmix blog, tetapi dulunya memakai blogspot loh sob. Ada karyanya yang kreatif cekali mengenai mengganti title pada bar browse. Look at here

Changing the title bar message here!

Dynamic title bar message

Title 1:
Title 2:
Title 3:
Title 4:
Title 5:


Or loop from 0% to 100%

Introduce Seo Tips Blogger and Coding Mix. Begitu kira² sekelumit slide dari blogger² kreatif. Kalao ada lagi nanti diupdate deh :D
Bye bye \m/

Selasa, 28 Juni 2011

Make a Menu with Fixed Property

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 Playit CSS Position ;)
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 Simple is Beautiful, 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 ;))

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/

Senin, 27 Juni 2011

Solucior for our Solution

Biar semangat lagi para sobat Beben mendalami What's The CSS3. Postingan sebelum²nya juga Beben Koben si bloglang anu ganteng kalem tea sudah memberikan beberapa dari feature of css 3.
Kali ini datang dari web Solucior 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


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/AVvXsEjwJWhwe7rPKFpwjhCBq-ox9qJ8s_245T4GGT9u3xDfF9-A6Nr1D9tB72GQffv1gq2ahfsr8EPFS8rovccc2kKQrkY43bAx3z4BW8faQQvOvKYip6V6iHchEI2wlBFu3FGwjOJ8x_OhXn6F/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
  • Dahulukan letakan diatas tag </body>. Kalau tidak berfungsi baru dicoba sebelum tag </head>
  • Kode CSS
  • Sisipkan sebelum tag </b:skin>
  • Kode HTML (pemakaian)
  • Disesi postingan or gadget ;) Ada tulisan beben itu merupakan Unique ID bisa apa saja, tapi harus sama ya :)
Demo Image Magnification

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/

Minggu, 26 Juni 2011

Creativity with CSS3 Transforms

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 ;)) The Power of CSS3!
So trick itu dinamakan oleh para developer dengan nama Animation Using CSS 3 Transforms. 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 OnWebDev, 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

Sabtu, 25 Juni 2011

No Action Just Share

Semakin hari semakin pusing tidak mendapatkan artikel gaya punya nih sob :D Bagaimana lagi yah, kesana datang sudah tidak asing, kesini menclok masih itu-itu juga #:-S Daripada Beben Koben si bloglang anu ganteng kalem tea melakukan blogwalking tidak mengambil apapun buat dibagi, maka kolom postingan ini akan Beben jadikan tempat berkumpul postingan unik, fresh, boombastis, full stylish dan etc etc :p
Kriteria agar dapat masuk ke list berikut ya harus lain dari pada yang lain. Jika tools, maka tools tersebut harus memiliki nilai yang membedakan dari yang sudah ada diluaran sana :-bd Contohnya macam begini, sobat masih ingat dengan fitur CSS3 membuat shadows pada huruf! Ex shadows effect for font's
Prodigy of Head

Itu mah kan biasa, bagaimana dengan yang ini...
Prodigy of Head


Beben kurang paham bagaimana cara membuat itu, tapi agan bisa satroni keterangannya OMG Text Compass Extension.
Satu lain daripada yang lain telah Koben kasihkan. Ingat dengan istilah Character Unique Code! That's right, karakter khusus dimana ketika akan mau dimasukan kedalam sesi postingan harus lewat proses convert terlebih dahulu ;)) Jasa encoding/convert jatuh pada web ӵήɨƇŐÐÏŊąتØŖ :-"
Dua tuh dah Beben kacih, hmmm...kasih lagih gak yah o=>

Button or tombol kalo buat satu² memang ribet, tapi kalo ada yg bisa sekali pukul jebret hanteum rata so ngapain repot² hajar bro sZ Buttons Kit :D Urusan icon Koben condong ke Royalty Free Icons. Bagi sobat pencinta dengan fitur slideshow tertarik tawaran berikut Really Simple™ Slideshow. Beben tidak mau ngomong perihal web satu ini AllWebMenus Menu tool b-)
Tools buat mengkompress javascript berikut mungkin yang paling bisa menjadikan minimalis banget. Tapi perlu hati² menggunakannya, cek deh UglifyJS JavaScript Minification.
Dah segitu dulu aja yah ;))
Bye bye \m/

Jumat, 24 Juni 2011

Script Versus CSS3, What's Your Choice!

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 HTML YA HTML serta mengenai CSS agan caplok deh All About CSS.
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 CSS3 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 src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></script>

<script type="text/javascript">
//<![CDATA[
$(function () {
$('#menugigir a').stop().animate({
'marginLeft': '-50px'
}, 1000);
$('#menugigir > li').hover(

function () {
$('a', $(this)).stop().animate({
'marginLeft': '-2px'
}, 500);
}, function () {
$('a', $(this)).stop().animate({
'marginLeft': '-50px'
}, 300);
});
});
//]]>
</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

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



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/

Kamis, 23 Juni 2011

Eksistensi Blogging

Semakin susah saja mencari sumber informasi buat dibagikan kepada para sobat blogger :-s Sudah melanglangbuana sampai ke planet namex sampe² bertemu dengan piccolo tidak kunjung juga mendapatkan info gaya punya :D
Sebagai obat penyembuh guna mempertahankan eksistensi, coba tengok Gadget/Widget berikut yang diperuntukan buat dipasang di GMail, tapi bisa buat blog juga kalau memang agan pada mau!
Terdapat 10 Gmail gadgets yang bisa dicoba. Cara masukin ke Gmail bisa agan baca Official Gmail Blog, untuk blog tinggal masukin sajah link kayak ngene, ke ngono :P
http://www.google.com/ig/modules/wikipedia.xml

paste-url-of-gadgetSok atuh dipilih gadgets yg mana yg mau dimasukin ke blog tercinta :x ;) Sebagai bonus, kembali beben koben si bloglang anu ganteng kalem tea akan berbagi link source dimana artikel postingannya banyak menawarkan kreasi berlangganan juga menu-menu keren :-bd
Contoh kreasi langganan feedburner kek ngene :D

Join 1000+ Awesome Subscribers, Fans And Followers !
Feed twitter facebook
rss-emailGet Full Posts Via Feedburner
Email Rss - It's Free


Important ! We Will Sent You An Email Immediately After You Subscribe To Confirm, Make Sure To Click The Link In That Email Thanks.

Mau tauk siapa sobat kita ini, mau tau...bener mau tau...Jawabannya setelah klik tombol read more ;))
Please welcome...

Blogger SolutionsBye bye...\m/

Rabu, 22 Juni 2011

Recent Post with Scrolling & Marquee Style

Mirip tapi tidak sama. Mungkin ungkapan ini berlaku bagi tema sekarang. Tengok kemari dulu RSS Feed with Google Bar Style. Kerennya menampilkan Recent Post for Blogger Perfect Stylish namun buat sekarang cuman tulisannya doang nggak pake gambar :D
Unik bisa jalan-jalan makanya Beben Koben si bloglang anu ganteng kalem tea akan mengumpulkan variasi trik sejenis. Yang sudah familiar datang dari master blog Membuat Headline News Blog by Info Blog. Disana sudah diterangkan secara gamblang, agan-agin tinggal comot saja bumbu²ne ;)) :x Contoh effek...xixixi

-=[ Ini contoh tulisan dengan efek marquee perintah kekiri ]=-

Trik berikut Beben dapatkan dari Digital Gupshup. Kalau yang dari info blog bisa diclose, jika yang ini berefek marquee mirip diatas 'ntuh :D
Langkah-langkah add auto Scrolling HTML code:

  • Sign in your Blogger dashboard.
  • Go to Layout ► Add Gadget ► Add HTML/Javascript
  • Open Javascript code Select all (Ctrl+A) Copy and paste in blogger HTML/Javascript window.
Beres deh :)

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/

Selasa, 21 Juni 2011

Permalink Vs Bookmark

permalink-vs-bookmarkSekarang 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 Tombol Share. 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 + "&amp;title=" + data:post.title' title='Share on StumbleUpon'>
StumbleUpon
</a>

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

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

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

<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&amp;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 bookmark :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/

Senin, 20 Juni 2011

List Blog Official Blogger

Dashboard blogger dimana bagian terdepan ketika kita sudah melakukan login account. Perhatikan oleh sobat bagian Reading List. 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/

Minggu, 19 Juni 2011

Font Gokil is Fontsize for Blogger

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 Google Font Directory 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

fontselfTerintegrasi dengan jQuery Plugins 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 Personal Fonts. ± 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/

Sabtu, 18 Juni 2011

Canonical Rel for Blogger

Artikel kali ini mungkin sedikit sudah lawas dibahas. Tapi Beben Koben si bloglang anu ganteng kalem tea terusik kembali guna mengangkat tema serupa dikarenakan ada beberapa pemberitaan hangat mengenai canonical. Apa yang dimaksud dengan canonical pada dunia site sodara-sodaraKu! Kita mungkin sering melihatnya dengan istilah rel canonical. Secara detail sobat bisa membaca nanti pada direktori yang Beben kacih :">
Intinya jika blog sudah terpasang tag canonical didalam template, maka besar kemungkinan sudah membantu kinerja search engine, dalam merangkak menemukan secara akurat keyword yang dikehendaki dalam misi pencarian (mudeung nggak yah) :D
Walau berbahasa english, semoga tidak menyurutkan para blogger maniac dalam memahami si canonical!
Sangat berbahaya jika melakukan searching ternyata yang terindeks justru web/blog, situs jejaring, website layanan lainnya terlebih dahulu yang tampak dan mendahului link asli hasil searching berada ;)
Maka daripada itu google sekarang terus membenahi sistem mereka guna menghilangkan list relefan (mirip) supaya tersingkir dari hasil pencarian :)) Lalu bagaimana blogspot sendiri menanggapi issue hangat mengenai hal ini :-? Tidak lain and bukan sulap, kita sebagai blogger ternyata bisa memasukan tag rel canonical kedalam template hasil kreasi master Phydeaux3 talk about Canonical URLs.

Masukan kode berikut didalam tag head template.<b:if cond='data:blog.pageType == "item"'>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>
Sobat paham kan kode berwarna biru yg mengapit code canonical tersebut?
Cuman gitu doang kok, gampang kan ;)) Buat melihat result, buka salah satu postingan blog agan dan tekan Ctrl + U (mozilla browse) dan tengok deh.
Happy canonical \m/

Jumat, 17 Juni 2011

Translate Free Software by Dicter

Translate atau terjemah, translator atau penterjemah memang sangat dibutuhkan bagi kita-kita yang rada bego ke bahasa asing :D Tapi dengan adanya trick translate dari berbagai macam gaya, bisa membuat kita sedikit lega dengan urusan bahasa tersebut. Paling banter banyak digunakan and cepet maybe fasilitas from uncle google yaitu Google Translate ;))
Tinggal kopi lalu pastekan kedalam kotak yg tersedia, pilih bahasa mau kemana diterjemahkan dan taraaa...jebret keluar deh report translatenya :)) Hampir serupa kinerja software yang akan Beben Koben si bloglang anu ganteng kalem tea sharing ini dengan translator googel.
  1. It's FREE and very useable.
  2. Perangkat lunak terjemahan Dicter online benar-benar gratis. Hanya memilih dan menandai teks dan tekan kombinasi tombol lalu tekan CTRL + ALT - Atau pilih, tandai dan klik pada icon perangkat lunak Dicter.
  3. It's comfortable.
  4. Klik 1x sudah cukup untuk menerjemahkan apa pun yang kita butuhkan di aplikasi windows. Bagaimana jika kita tiba-tiba tidak tahu bahasa apa yang digunakan dalam teks? "Bahasa auto-mendeteksi" pilihan akan membantu kita!
  5. It's functional.
  6. Terjemahkan apapun yang kita butuhkan untuk lebih dari 40 bahasa. Kami yakin, kita akan menyukai hasilnya - kita menggunakan Google Translate API sebagai penerjemah.
  7. It's effective.
  8. Kita mendapatkan terjemahan dalam jendela pop-up dalam 2-4 detik. Tidak perlu untuk men-download dan menginstal pangkalan data kosakata besar.
Google translate klien - Dicter. Hanya 1,2 Mb dan kita dapat membuat satu-klik penerjemahan dalam setiap aplikasi Windows setiap kali kita perlukan. Lebih dari 80% pengguna perangkat lunak penerjemahan Dicter tidak lagi membutuhkan sistem terjemahan lain.Dicter
dicter-translateMonggo...disambi dan baca keterangan lebih jelasnya disana yak :P

download[01/06/2010] Dicter v.3.05 for Windows XP / Vista / 7

Happy translate \m/

Kamis, 16 Juni 2011

Mobile Platform by Mobstac for Blogger

Setelah diluncurkan template for mobile bagi kalangan blogger blogspot, ternyata benyak juga tawaran layanan serupa dari para developer sob. Beberapa pilihan jasa sama Beben Koben si bloglang anu ganteng kalem tea pernah bagi ke sobat² sekalian dalam postingan bertitle Mobile to Manage.
Berawal dari membuka Email datang lagi satu tawaran mobile publishing platform lagi ;)) Mungkin bisa jadi ini yang termudah, terkomplit konten dan yang penting gratis...tis...tis :P Free sessionnya saja sudah lumayan keren dengan sudah terintegrasi ke Custome Search Google.
MobStac adalah sebuah penerbitan berplatform mobile, dibangun untuk sebuah dunia mobile pertama. Kami membantu mencapai audiens mobile dengan memberikan pengalaman yang menyenangkan untuk pembaca, dan bekerja secara lancar dengan sistem manajemen konten yang ada sehingga tidak harus melakukan pekerjaan yang harus dilakukan.MobStac
Mau melihat feature yg ditawarkan agan-agin bisa bertour ria terlebih dahulu lalu register deh :) Sebelum mulai, coba tengok yang kepunyaan sayah sudah jadi :D

mobstac

Tour and Register

header-mobstac

mobstac
See you \m/

Rabu, 15 Juni 2011

Hoeamz..zzz...zzz!!! Lazy Posted

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 blogwalking. 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 directories's :-" Tidak banyak kok cuman ada ± 60 direktori ;)

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

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