Selasa, 31 Januari 2012

Believe it (Google) if You a True SEO!

Si bloglang anu ganteng kalem tea Beben Koben menaruh rasa salut bagi para pemikir yang berpikir secara serius (sungguh-sungguh) Tak ayal sesuatu yg memang tiap hari kita temukan namun tidak kelihatan fungsinya! Ternyata benar adanya jika melakukan sesuatu itu harus tuntas terlebih dulu baru kita bisa berpindah ke urusan lainnya. Terinspirasi dari bacaan gue Tricks Search and Secret by Google, Koben mau berbagi pada pelancong setia blog ini sedikit pemaparan tentang bagaimana cara mengetahui blog/web kita di mata search engine google!
Sebetulnya penjelasan sekarang sudah terpampang jelas ada di google bila sobat jeli ketika kita melakukan searching suatu keyword, maka pada footer google akan terlihat beberapa keterangan baik berupa kata², link atau yg lainnya :-/ Biar lebih jelasnya mari kita berpraktek ria ringan sejenak :D namun tetap serius dan santai dalam memahami ;)

Open this link, wait opened until full 100% tutorial blog Setelah terbuka 100%, scroll ke paling bawah halaman tersebut! Apa yg kalian lihat :-? Ada keterangan singkat bertuliskan Searches related to tutorial blog diikuti dengan beberapa links terkait opsi pilihan kan! Sekarang bagaimana caranya link² google berinteraksi langsung dengan link blog/web kita sendiri di area kompetisi global search :)) Pasti penasaran ya :-"
Disini kita akan melihat link blog/web yg kita miliki secara spesifik (khusus) berhubungan langsung dengan embah google.
Yuk kita mulai ke acara puncak []

Berikut adalah beberapa cara sederhana untuk mengetahui halaman kalian diindeks & berinterkasi dengan google:
  • Find index pages in your site: site:
  • Tuliskan anchor link spt: http://www.google.com/search?q=site:your-blog.blogspot.com
    Bila konten kita sudah berjibun alias banyak, maka bagusnya yang terindeks akan berbentuk link archive (arsip). Kalau masih sedikit harus links kalian yg berjejer disana tanpa ada link lain apapun. Sekarang coba pergi ke jumlah postingan blog kamu, lebih banyak apa lebih sedikit jumlhanya dengan yg terindeks. Yang gue:
    In google tertulis >> About 1,010 results (0.31 seconds)
    in blogger tertulis >> 1 – 25 of 860
    Tips, add this in your template<b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <meta content='all|index|follow|noodp|noydir' name='robots'/>
    </b:if>
  • Find index pages in your site (english version browse): site:
  • Tulis anchor https://www.google.com/search?hl=en&q=your-blog.blogspot.com
    Mirip dengan yg diatas, namun yg ini menampilkan segala link kita yg sudah tersebar kemana-mana. Pelajarilah perbedaan yg tampak ;)
  • Pages that link to your site's front page: link:
  • Tulis anchor http://www.google.com/search?q=link:your-blog.blogspot.com
    Menjelaskan web/blog yg menaruh link kita (exchange link) di depan halaman (home page) yg mereka punya! Yuk kita tukaran link, tp disimpan di halaman depan ya!!! Silahkan terindeks tidak kalian tukaran dengan yg berjanji gitu ;)) :-" Kalau tidak terindeks berarti patut kalian lihat ke sana :))
  • The current cache of your site: cache:
  • Anchor tulis http://www.google.com/search?q=cache:your-blog.blogspot.com
    Jejak sudah-sudah yg kalian tinggalkan di google ;)
  • Pages that are similar to your site: related:
  • Link anchor http://www.google.com/search?q=related:url-blog.blogspot.com
    Sobat yg maniak melakukan exchange links ada baiknya lakukan langkah ini dulu. Menjelaskan web/blog yg memang similar (mirip) dengan blog kita! Tested with it too for better result Melihat Situs Terkait untuk perbaikan SEO.
  • Information about your site: info:
  • Anchor Link http://www.google.com/search?q=info: link-blog.blogspot.com
    Penjelasan dari link² yg diatas tadi saya jabarkan :D
Trik ini hanya memberitahukan bagaimana blog kesayangan di mata om google. Belum lagi di mata si tante Yahoo! dan si abang Bing :P Ada yg mau mengekspolre ke 2 search engines tersebut :)) Saya harap ada yg mau ya :-bd
Adios amigos permios parantos, seperti di awal tadi, seriuslah tapi santai dalam mempelajari suatu hal :)
Happy happy \m/

Senin, 30 Januari 2012

Prakter Ria CSS3 Gaya Bloglang

Semakin ramai saja para developer membuat kreasi dengan hadirnya feature CSS3 ini :-bd Kali sekarang Koben sang bloglang sejati akan berbagi hasil bertualang dan menemukan trick-trick keren dari para kreator keren punya :D Menurut saya keren belum tentu menurut kalian kan ;)) Oke kita langsung saja mulai trik yang pertama yaitu membuat tombol download keren memakai animasi efek Code an Awesome Animated Download Button With CSS3
Mungkin ada baiknya sobat melihat juga artikel aku dalam membahas variety demo and download button ;)
This is original article come from http://designshack.net/articles/css/downloadbutton/
Untuk melihat hasil ramuan kreasi CSS berikut, sobat bisa gunakan tools HTML Editor. Sekalian belajar cara memakainya toh ;) Sebelumnya silahkan sobat buka ini terlebih dahulu MBT HTML Editor. Kemudian tekan tombol masukan bumbu ini
<style>
.button {
width: 200px;
margin: 40px auto;
}
.button a {
display: block;
height: 50px;
width: 200px;
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
background: #00b7ea;
background: -moz-linear-gradient(top, #00b7ea 0%, #38D4FF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#38D4FF));
background: -webkit-linear-gradient(top, #00b7ea 0%,#38D4FF 100%);
background: -o-linear-gradient(top, #00b7ea 0%,#38D4FF 100%);
background: -ms-linear-gradient(top, #00b7ea 0%,#38D4FF 100%);
background: linear-gradient(top, #00b7ea 0%,#38D4FF 100%);
}
.button a, p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.button p {
background: #D00;
display: block;
height: 40px;
width: 180px;
margin: -50px 0 0 10px;
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
color: #fff;
position: absolute;
z-index: -1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.button:hover .bottom {
margin: -10px 0 0 10px;
}
.button:hover .top {
margin: -80px 0 0 10px;
line-height: 35px;
}
.button a:active {
background: #00b7ea;
background: -moz-linear-gradient(top, #38D4FF 36%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#38D4FF), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%);
background: -o-linear-gradient(top, #38D4FF 36%,#009ec3 100%);
background: -ms-linear-gradient(top, #38D4FF 36%,#009ec3 100%);
background: linear-gradient(top, #38D4FF 36%,#009ec3 100%);
}
.button:active .top {
margin: -70px 0 0 10px;
opacity: 0.8;
background: #0d0;
color:#111;
border: 1px solid #000;
}
.button:active .bottom {
margin: -20px 0 0 10px;
opacity: 0.8;
background: #0d0;
color:#111;
border: 1px solid #000;
}
</style>

<div class="button">
<a href="/">Download</a>
<p class="top">Click to Download</p>
<p class="bottom">10GB .zip</p>
</div>
Dilanjutkan dengan memencet tombol
How about that!!! Yuk lanjut bos
Acara selanjutnya Koben tidak akan menjabarkan apapun sob :D Tapi silahkan kalian tengok web selanjutnya ini Paul Hayes, tidak kurang ada beberapa artikel yg akan membuat kita berlatih menjadi seorang master CSS :))

Beben Koben si bloglang anu ganteng kalem tea setelah dari web master @fofr perhatian tertuju pada cara membuat cube/kotak/kubus secara 3D memakai CSS3 @-)

Tampak Atas

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatum

Tampak Kiri

Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio linguistic litteratura o que, pro lingua auxiliar su. Pote basate programma il nos. Non ha responder appellate traduction, es que lista celos. Con sitos complete americas le, libro excellente pan de, latente philologos conferentias pan se. Infra esseva uso ma. Involvite anglo-romanic ma que, debitas internet primarimente il web. Uso

Tampak Kanan

Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem iweral, ma'n iw'rem d'Margréitchen do gin. Ech ké ma'n d'Land, sech fort si gei. Blo an eise dann däischter. Wa wéi durch néierens. Am Bass Duerf heemlech net. Zum ké Noper éiweg, gutt rout d'Musek no rëm, d'Natur d'Liewen Gesträich vu sin. Den ménger Keppchen rëschten wa, dé gei Mier









Keren ya Css3 Cube :x Bisa ngirit lahan template kalau ada yg begituan kita pasangkan di blog :))

Click to get CSS Cube Coded

<style>
.kotak {
position: relative;
width: 300px;
height: 320px;
margin: 0 auto;
}
.kotak p {
padding: 5px;
font-size: 13px;
color: #333;
}
.kotak h3 {
font-size: 25px;
text-align: center;
padding: 0;
margin: 0;
text-shadow: 1px 1px 3px #333;
color: #333;
}
.cube-body {
width: 200px;
height: 200px;
position: absolute;
overflow: hidden;
}
.top {
left: 100px;
top: 20px;
background: #CFE9E9;
-moz-transform:rotate(60deg) skew(0deg, -30deg) scale(1, 1.15);
-webkit-transform:rotate(60deg) skew(0deg, -30deg) scale(1, 1.15);
-o-transform:rotate(60deg) skew(0deg, -30deg) scale(1, 1.15);
transform:rotate(60deg) skew(0deg, -30deg) scale(1, 1.15)
}
.left {
background: #7DBBD8;
top: 177px;
left: 0;
-moz-transform: skew(0deg, 30deg);
-webkit-transform: skew(0deg, 30deg);
-o-transform: skew(0deg, 30deg);
transform: skew(0deg, 30deg)
}
.right {
background: #4B6A74;
top: 177px;
left: 199px;
-moz-transform: skew(0deg, -30deg);
-webkit-transform: skew(0deg, -30deg);
-o-transform: skew(0deg, -30deg);
transform: skew(0deg, -30deg)
}
.left:hover, .right:hover, .top:hover {
background: #fff;
cursor: pointer;
overflow: auto;
}
</style>

<div class="kotak">
<div class="cube-body top">
<h3>Tampak Atas</h3>
<p>

atas

</p>
</div>

<div class="cube-body left">
<h3>Tampak Kiri</h3>
<p>

kiri

</p>
</div>

<div class="cube-body right">
<h3>Tampak Kanan</h3>
<p>

kanan

</p>
</div>
</div>
Sok pelajari segitu dulu ;)) Kebanyakan nanti malah pusing sobatnya :P Kepengen lagi!!! nih lihat http://pornel.net/cube
Happy codding \m/

Minggu, 29 Januari 2012

Form Action Textarea Popup for Playing HTML Code

Apa kabar bloglangnisme, semoga baik² saja ya semua :) Koben si bloglang anu ganteng kalem tea akan berbagi trick hasil dari melihat-lihat blog salah satu sobat kita yakni master Roxx Share ;) Walau rada sedikit empot-empotan untuk membuka blognya secara full #:-S tapi tak apalah :D Kinerja dari trik yg aka gue beberkan sekarang mungkin mirip dengan HTML editor! Intinya melihat hasil dari kita bermain-main dengan kode HTML. Ingat ya, form action textarea ini hanya mendukung HTML CSS saja!!!
Cara bermain textarea form action, kita memakai trick penulisan CSS bergaya Internal Style Sheet, diikuti dengan markup HTMLnya ;) Sebenarnya trik penulisan css bergaya internal style sheet bisa langsung diterapkan ketika kita melakukan postingan. Biar beda, unik and full stylish dong dari kebanyakan :)) b-)

Struktur penulisan internal style sheet...<style>...YOUR CSS CODED VARIABLE PUT HERE...</style>Berikut rumus default form action textarea for HTML CSS.

<script type="text/javascript">
function displayHTML(form) {
var inf = form.htmlArea.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no');
win.document.write("" + inf + "");
}
</script>

<center>
<form>
<textarea cols="15" name="htmlArea" rows="5"></textarea>
<br />
<input onclick="displayHTML(this.form)" type="button" value="Lihat Hasil!" id="tombol"/>
</form>
</center>
Dengan memasukan ramuan tersebut Add a Gadget ► HTML/Javascript sobat sudah mempunyai tools tersebut :D Bisa langusng bermain-main dengan kode CSS kalian. Tapi bagaimana halnya rumusan itu dapat beroperasi dalam postingan, guna memberi demo-demo CSS karya kalian! Nanti hasil dari customize yg tampak pada sesi postingan akan berupa tombol saja.
Masukan JavaScript diatas tag </body> (recommendate) bisa juga diatas tag </head>
<script type="text/javascript">
//<![CDATA[
function displayHTML(form) {
var inf = form.htmlArea.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no');
win.document.write("" + inf + "");
}
//]]>
</script>
Sisipkan sedikit kode CSS di atas tag ]]></b:skin>.area_result {
width: 0px;
height: 0px;
display: none;
}
Markup HTML, pemanggilan di sesi postingan.<center>
<form>
<textarea name="htmlArea" class="area_result">

YOUR CSS CONTENT ADD HERE

</textarea>
<input onclick="displayHTML(this.form)" type="button" value="DEMO!" id="tombol"/>
</form>
</center>
YOUR CSS CONTENT ADD HERE tidak usah di phrase/convert, nanti tidak jalan atuh ;)) Untuk membuat rapat & padat kode CSS saat mau diletakkan di postingan, kalian dapat menggunakan tools online HTML Compressor. Pilih opsi blogger, kemudian setting seperlunya.
Sebenarnya script jg mendukung form action textarea ini, tapi suka ada errornya sob :D Kalau script online bisa berjalan mulus, tapi kalau script manual ada bugs :-s Good luck :)
Happy blogging \m/

The Latest Google+ Widget for Blogger

Kembali menggebrak widget google+ teranyar dengan hostingan langsung dari paman google ;)) Apa kelebihan yang dimiliki oleh Google+ Gadget terbaru ini! Berikut keterangan singkatnya sobat-sabit
Google + Widget ditulis dalam JavaScript dan jQuery, menggunakan JavaScript Object Notation (JSON) data interchange format, Query Language Yahoo! (YQL), HTML5 metode PostMessage dan brand new Google + API.
Google + Widget disajikan dari Google App Engine, infrastruktur Google, untuk memastikan kinerja yang baik dan kehandalan layanan. still βeta version

Singkat cerita kita akan mendapatkan keterangan headlines dari page account google+ kita ditambah header Add to circles! Pusing menjelaskannya, bagaimana dengan demo live cuamik berikut...

Tertarik memiliki widget google plus terbaru tersebut! Ikuti langkah² berikut ya :D
Sobat pergi dahulu ke halaman Google+.
Pada halaman dashboard google+ kalian pilih icon profile.

Lihat pada address bar, terdapat deretan angka. Ambil angka² itu, karena itu ID kalian.

Sekarang sobat memerlukan sebuah Google API. Ini merupakan salah satu prosedur mutlak agar tidak terjadi masalah lalu lintas data :P Untuk mendapatkannya cukup kunjungi Google API Project, ceklis tanda setuju sampai menemukan string

Setelah beres persiapan bahan, sekarang saatnya kita membuat Google+ Widget :)
Kunjungi alamat developer di Google+ Widget. Masukan angka ID google+ kalian dan Google+ API pada kotak yg sudah tersedia. Lakukan setting sesuai selera & kebutuhan.

Kotak pertama untuk ID google plus, sedangkan kotak kedua untuk Google+ API. Kotak penyesuian di bawahnya sob ;)

Letakan dibawah tag <head><link href="https://plus.google.com/XXXXXXXXXXXXXXXXXXX" rel="publisher"/>Bila sudah ada jangan dipasang lagi :D Script hasil settingan tinggal masukin saja via Add a Gadget ► HTML/JavaScript. Mission completed b-)
Demikian cara mendapatkan Google+ Widget teranyar integrated with google App Engines bagi penggila google service :))
Resource by: http://ciudadblogger.com/2012/01/mostrar-las-publicaciones-de-google-en.html
Happy gadget \m/

Jumat, 27 Januari 2012

Make Simple Subscribes Box For You

Karena tidak ada kerjaan, Koben membuat lagi form action subscribes. Kotak berlangganan via email itu loh sob! Sebelumnya juga gue pernah membuat Beautiful Subscribes Box. Sekarang mau berbagi cara membuat kotak berlangganan sederhana, namun tetap mengusung gaya bin full stylish ;;) Sangkin sederhananya cocok bagi blogger yg suka dengan tema minimalis ;))
Global design subscribes box kali ini akan menampilkan image logo gmail didalam area input text. Kotak dan tombol dibuat murni menggunakan CSS diberi sentuhan atribut CSS3 b-)

Demo Simple Subscribes Box Full Gaya

Code CSS

Bagaimana sobat sabit sekalian, tertarik menanamkan kotak langganan via email tersebut ke dalam blog kalian! Sikat ramuan berikut
.textemail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3wXFOXP1cWYm2WWBQ4tpiX1dMUuPFarjAfNcpiGtGBegf1C0STasFbgEW8aQ0BkYL6OTOqOJOhfs9ebHGd_MopFs3_YNT3Pu8AZMYTPm8fMsyfbBmjZiROxqa-WwYLn0OUBwdAUQCxqG/s1600/gmail.png") no-repeat scroll 5px center transparent;
border: 1px solid #DDD;
border-radius: 5px;
color: #555;
font-weight: bold;
padding: 10px 5px 10px 35px;
font-style: italic;
width:235px;
box-shadow: 1px 1px 5px #CCC inset;
}
.button_ {
background-color:#f4f4f4;
border-radius: 5px;
border: 1px solid #DDD;
color: #555;
cursor: pointer;
font-weight: bold;
padding: 9px 10px;
text-decoration: none;
box-shadow: 0px 0px 5px #CCC inset;
}

Markup HTML

<form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=beben-koben', 'popupwindow', 'scrollbars=no,width=540,height=530,top=0,left=0');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="beben-koben" name="uri" />
<input type="text" placeholder="Enter your email..." name="email" class="textemail" />
<input type="submit" value="Subscribe" title="" class="button_" />
</form>
Gantikan tulisan warna merah tua dengan uri kalian masing² Semoga bermanfaat :)
Happy subscribes box \m/

Kamis, 26 Januari 2012

Make Customize Your Search Query Widget

Twitter oh twitter satu web jejaring sosial yang tidak diragukan lagi memang penggunanya seabrek-abrek :D Guna melayani palanggan piha twitter sendiri telah menyediakan salah satu layanannya yakni put anywhere application twitter! Bila sobat memiliki feature itu bisa memanggil tagging dengan pemanggilan yg sudah ditentukan. Contoh: @BebenKoben @Googgle @Blogger @Blogspot
Gadget keren apalagi sudah banyak untuk kita ambil guna tidak ketinggalan issue-issue hangat dari para twiterrers :P Ketikan keyword "twitter" di kotak pencarian blog ini deh :)) Kebanyakan pemakai widget twitt selalu menampilkan apa² yg terjadi pada account masing² Apa jadinya jika kita ingin mengetahui gosip dengan query search sesuai kemauan kita! Hohoho bakalan seru jadinya jika kita bisa melihat twitt² yg terjadi :))

Sebagai contoh Koben memasukan query search mengenai blogger tutorial. Maka segala tagging twit yg berbau-bau query tersebut akan kelihatan. Tampak aneh judulnya, menarik, unik kita tinggal klik saja menuju link tujuan ;))

Demo Customize Your Search Widget


Berminat sobat mencari query search widget jebolan twitter ini! Silahkan buat sendiri ya Twitter Search Widget. Semoga bermanfaat :)
Happy search query \m/

Rabu, 25 Januari 2012

Trick CSS3 Daun Berjatuhan

Setelah kita bisa membuat efek salju menggunakan CSS3 dengan variabel Keyframe Animations, sekarang bagaimana membuat efek daun berjatuhan masih memakai atribut CSS3! Namun sekarang ada variable tambahan yakni CSS3 :nth-child() Selector. Dalam pemanggilan markup html nanti akan memakai span. Jadi perhatikanlah pada kode span:nth-child(). Disitulah kita akan bermain efek muncul daun mau seberapa banyak dan seberapa waktu muncul (dalam hitungan detik) :-/
Mungkin bingung karena tidak ada demonya. Sebelum masuk ke demo, sobat bila mau memakai trik ini harus menyediakan terlebih dahulu image (gambar) daun. Tentukan tinggi & lebar mau segimana terlebih dahulu. Optimal bagusnya gunakan saja resolusi 30 x 30 px saja biar imut² sob :D Inti dari trik jatuh daun memakai CSS-3 terdapat pada kita bermain dengan code @keyframes dan span:nth-child() saja!

Demo CSS3 Trick Daun Berjatuhan

http://jsbin.com/ozoxiw

CSS3 Coded

.daun {
text-align: center;
height:100%;
width:100%;
overflow:hidden;
}
.daun span {
display: inline-block;
margin: -150px 5px 0px 5px;
background: transparent;
background:url("http://link-image-daun-30x30px.png");
-webkit-animation: daun 10s infinite linear;
-moz-animation: daun 10s infinite linear;
}
.daun span:nth-child(5n+5) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
}
.daun span:nth-child(8n+3) {
-webkit-animation-delay: 1.9s;
-moz-animation-delay: 1.9s;
}
.daun span:nth-child(2n+5) {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
}
.daun span:nth-child(6n+10) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
}
.daun span:nth-child(7n+4) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
}
.daun span:nth-child(4n+5) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
}
.daun span:nth-child(3n+7) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
}
@-webkit-keyframes daun {
0% {
width: 30px;
height: 30px;
opacity: 1;
-webkit-transform: translate(0px, 0px) rotateZ(0deg);
}
25% {
width: 30px;
height: 30px;
opacity: 0.8;
-webkit-transform: translate(150px, 300px) rotateZ(0deg);
}
50% {
width: 30px;
height: 30px;
opacity: 0.5;
-webkit-transform: translate(-500px, 500px) rotateZ(270deg);
}
100% {
width: 30px;
height: 30px;
opacity: 0.1;
-webkit-transform: translate(350px, 800px) rotateZ(360deg);
}
}
@-moz-keyframes daun {
0% {
width: 30px;
height: 30px;
opacity: 1;
-moz-transform: translate(0px, 0px) rotateZ(0deg);
}
25% {
width: 30px;
height: 30px;
opacity: 0.8;
-moz-transform: translate(150px, 300px) rotateZ(0deg);
}
50% {
width: 30px;
height: 30px;
opacity: 0.5;
-moz-transform: translate(-500px, 500px) rotateZ(270deg);
}
100% {
width: 30px;
height: 30px;
opacity: 0.1;
-moz-transform: translate(350px, 800px) rotateZ(360deg);
}
}

Markup HTML

<div class="daun">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Bila demo dirasa kurang menarik karena tidak memakai gambar background sobat bisa satroni web sumber dan pelajari lebih detail disana ya CSS3 Tricks Falling Leaves with CSS only by PremiumCoding.
NB:
-WTF-transform: translate(XXXpx, XXXpx) rotateZ(0deg);
  • XXXpx: Jatuh daun mau ke kiri/kanan. Bila mau ke kiri tambahkan saja -XXXpx.
  • XXXpx: Kecepetan daun jatuh.
  • 0deg: Rotasi efek gambar.
Happy coding CSS3 \m/

Selasa, 24 Januari 2012

Gradient Effect is Amazing

Koben akan mengangkat kembali artikel mengenai linear and gradient. Lebih khusus ke gradient fiturnya sob. Suka akan datang bila memang kita mempunyai minat besar untuk menjelajahinya. Begitu pula dengan gradient ini ternyata kalau dijelajah secara seksama mempunyai nilai artistik tersendiri. Biasanya kita menambahkan embel² variabel CSS pada background secara garis besar memakai variable color, url image dll.
Mulai dari sekarang cobalah sobat mencoba fitur efek gradient ini dimasukan ke variabel background! Efek perpaduan warna disatupadukan menghasilkan penampakan warna yg full stylish b-) Menilik syntax tagging yg dipakai jg cukup sederhana, yakni background atau background-image. Contoh Koben bermain-main dengan effect gradient bisa sobat lihat nih ;))


Bayangkan kita dapat membuat hal seperti itu hanya dengan beberapa kali klik saja (kan pake tools) :D Kiri kanan atas bawah mau menempatkan efek warna bisa terserah kita!


Indah kan ;;) Tools online yg sudah familiar mungkin kalian sudah pada kenal dengan Ultimate CSS Gradient Generator. Apakah cuma itu, apakah efek gradient ini bisa bermacam-macam bentuk, of course right bro :D
Jangan bilang siapa² ya, Koben akan beri beberapa source keren agar sobat menjadi seorang ahli pembuat gradient effect :">Stay update this post, siapa tauk dapet lagi ;))
Happy gradient \m/

Senin, 23 Januari 2012

Tabindex Attribute HTML5

Hari ke hari menemukan lagi variabel HTML5 yang unik. Dari awal heran melihat atribut html-5 mengenai Placeholder sampai tingkat rumit pemakaian tag label dengan canvas menggunakan jquery. Pada artikel sebelumnya Koben juga pernah berbagi beberapa bahasa anyar dari HTML5 juga kan tidak ada aktifitas!
Saya pribadi memang suka penasaran jika menemukan suatu hal baru. Ini kok bisa jadi gini, itu kok bisa begitu dan seabrek unek² dari hebatnya bahasa HTML. Kesempatan sekarang tertegun dengan bahasa HTML5 tabindex Attribute. Apakah itu? Atribut tabindex (tombol Tab pada keyboard) yang bisa kita gunakan menjadi sebuah navigasi sederhana. Didukung di semua browser utama, kecuali Safari Pemakaian tabindex cukup simpel, tinggal kita sisipkan saja dengan cara menambahkan variabel tabindex="number"

Contoh pemakaian atribut tab index di dalam syntax link.

Google
Beben Koben
Ben Tools<a href="http://www.google.com/" tabindex="1" target="_blank">Google</a>Setelah benar keberadaan arah tab, diikuti dengan memencet tombol enter. Mungkin sobat sudah pada tahu dengan fungsi pemencetan tombol Tab pada keyboard. Tapi tidak tahu bahwasannya itu merupakan bagian dari bahasa HTML5 kan ;))

Bagaimana bila ternyata atribut tab-index ini bisa kita kreasikan menjadi satu trik menyembunyikan sesuatu ;)) Klik pada title untuk melihat yg tersembunyi (coba pake tab button keyboard), dan klik di area kosong untuk menyembunyikannya kembali ;)

Demo Tabindex Variable

Be your self!Beben Koben si bloglang anu ganteng kalem tea.

Don't Open Pliss!!!
Hehehe...:P

CSS Coded

.tabindex{
position: relative;
display: block;
width: auto;
}
.tabindex .ti{
display: none;
}
.tabindex:focus .ti{
display: block;
}
Itu code default CSS yg membangun tabindex. Tambahkan variabel CSS lain sesuai dengan kreasi kalian :)

Markup HTML

<span class="tabindex" tabindex="number">
Click here!
<span class="ti">
<img src="http://link-image.jpg" alt=""/>
</span>
</span>
Ganti tulisan number dengan angka WTF sesuai keperluan :D Mission complete, good luck :)
Happy tabindex \m/

Minggu, 22 Januari 2012

Spinning and Slider CSS3 di Hari Raya IMLEK

Semakin susah saja menemukan artikel trik, hack atau apapun yang keren punya dari hari ke hari sob :-s Mungkin memang lagi musim paceklik ide kreatifitas nih ;)) Harus pinter² mengolah ide kalau begini keadaannya! Membuat lebih gaya lagi tutorial yg sudah ada ;) Seperti Make Spinning Effect for Image Using CSS3, dimana hasil trick ini bisa membuat image/gambar berputar-putar. Dynamic drive menawarkan tiga jenis efek Spinning icons using CSS3 transform: 60 degree spin onMouseover and onMouseout, -360 degree spin onMouseover ONLY and 360 degree spin onMouseover and onMouseout.
Inti menggunakan trik spinning terdapat pada variabel CSS3 transform:rotate Dengan memakai variale tersebut kalian bisa bermain-main dengan rotate (perputaran)

Demo Spinning icons using CSS3 transform

Bonusnya Beben Koben si bloglang anu ganteng kalem tea akan berbagi kembali mengenai Simpel Content Slider Pure CSS3. Tetapi CSS slider sekarang proses kerjanya ketika disorot :-" Sorotlah gambar yg menongol sedikit di sebelah kanan pada demo di bawah ini!

Demo CSS3 Slideshow Animation

Silahkan baca tutorialnya di http://arshaddesign.tumblr.com/css3slideranimationtutorial
Satu lagi bonusnya yaitu tutorial tentang membuat simple tooltips with CSS3 karya web splashnology.
Happy blogging \m/

Jumat, 20 Januari 2012

Membuat Kotak Pencarian Blog ala Bloglang

Pada blog ini sudah ada beberapa artikel cara membuat kotak pencarian (search box)! Bila dipaparkan satu per satu akan menyita waktu. Jadi kalau mau melihat-lihat silahkan saja gunakan kotak pencarian yg ada pada blog Beben Koben si bloglang anu ganteng kalem tea dengan memasukan keywords "kotak pencarian box search" Dengan hadirnya CSS3 & HTML5 tercipta juga bahasa baru dalam dunia site ini sob. Seperti beberapa contoh bahasa anyar tentang HTML 5 yg pernah Koben paparkan di artikel TiDaK AdA AkTiFiTaS :D
Sekarang giliran menerapkan bahasa baru tersebut dengan penerapannya membuat kotak pencarian untuk blog dengan atribut input[type="text"] in formaction :D Koben sengaja mengarahkan hasil pencarian ke embah google, secara blogspot itu kepunyaan dia ;)) Bila ingin hasil tujuannya ke search engines lain, silahkan lihat kodenya di Three Major Search Engines for You.

Kreasi search-box seakarang mengusung motto simple, full stylish and glamour =)) Sangkin sederhananya kotak pencarian ini tidak disertai dengan tombol push, go, or search :P Cukup kotak tulisan lalu tekan enter untuk proses kerjanya ;) This is final result


Keren nggak! Silahkan di ambil kodenya

CSS Coded

#searchform input[type="text"] {
background: #EEE;
color: #999;
font-size: 13px;
padding: 5px;
width:99%;
margin: 5px;
border: 1px solid #CCC;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#searchform input[type="text"]:hover, #searchform input[type="text"]:focus {
background: #FFF;
border: 1px solid #444;
color: #444;
}
Ganti ukuran lebar, warna atau apapun sesuai kebutuhan masing²

Markup HTML

<form id="searchform" action="http://google.com/search" target="_blank">
<input name="sitesearch" value="YOUR-BLOG.blogspot.com" type="hidden" />
<input type="text" name="q" value="Type your keywords here and press enter..." onfocus="if (this.value == 'Type your keywords here and press enter...') {this.value = '';}" onblur="if (this.value == ''){this.value = 'Type your keywords here and press enter...';}">
</form>
Letakan alamat blog kalian di tulisan berwarna merah maroon. Sekian dan semoga bermanfaat. Kreasikan dengan kreasi kalian juga, buat lebih top ya ;)
Happy blogging \m/

Kamis, 19 Januari 2012

No Activity Again... STOP SOPA!!!

Bagaimana dengan aktifitas blogger kalian sob! Apakah sedang dilanda blank ide atau bahkan malas update postingan! Sama jikalau begitu dengan Beben Koben si bloglang anu ganteng kalem tea ini. Gue juga lagi terjangkit virus no activity my head is blank :-?? Jalan kesana kemari sampai ke ujung tanduk tidak menemukan tutorial gaya punya :-s
Banyak link web/blog keren yg tersimpan, tak ada satu pun artikel yang menggaet hatiku :D Sampai akhirnya saya mendarat di satu alamat site bavotasan. Dalam lamunan terbesit What Are You Doing, langsung acak² kategori tutorials ;)) Karena lagi ogah-ogahan jadi berbagi trick yg ringan² saja ya :) Ringan tidak sembarang ringan, my motto is full stylish, unique, different tetep keukeuh gumeukeuh harus diusung b-) Mari kita mulai saja. . .

Style a Select Box Using Only CSS

http://bavotasan.com/2011/style-select-box-using-only-css/

Apakah penulisan email ini seperti pada umumnya moc.liamg@emaNliamEruoY!!! Oh tentu tidak, itu ditulis dengan gaya rtl teknik. RTL = Right-To-Left. Jadi tulisan yg sebenarnya itu dalam keadaan terbalik seperti ini moc.liamg@emaNliamEruoY diberi bumbu CSS, maka hasil jadi akan tampak seperti tulisan biasa ;)span.email {
unicode-bidi: bidi-override;
direction: rtl;
}
Markup HTML
<span class="email">moc.liamg@emaNliamEruoY</span>
Hehehe

Amazing Hover Effects with CSS3



Hover over me & look what happen. Don't be shock...

http://bavotasan.com/2011/amazing-hover-effects-with-css3/

Bonusnya Koben kasih bagi sobat yang males mengetikan nama di dalam link. Pasti bingung nih ;)) Perhatikan saja<a href="http://beben-koben.blogspot.com/" title="">Beben Koben</a>Umumnya menulis markup HTML syntax link seperti itu. Malas menulis nama yg dimaksud itu Beben Koben <---
Sekarang bila menulis syntax URLnya jadi begini<a href="http://beben-koben.blogspot.com/" title=""></a>Tanpa nama, namun akan diperlihatkan address link menjadi:

CSS Coded

a.link:after {
content: ' ' attr(href) ' ';
font-style: italic;
color: #333;
}

Markup HTML

<a class="link" href="http://your-link-here.com/"></a>Kalian bisa menambahkan variasi di ' ' pada atribut CSS content: tapi yg valid dengan bahasa XHTML :P
Happy blogging \m/

TiDaK AdA AkTiFiTaS

Ketika tidak ada aktifitas, malah melihat-lihat resource dan membaca artikel dari web rujukan. Ternyata menarik juga berpraktek-ria dengan bahasa baru HTML5 :D Lebih simple tapi konon menurut issue kurang baik dimata search engine, jika saat sekarang kita mengaplikasikannya! Kurang paham kalau mengenai itu Koben mah :P Walau tidak mengerti secara mendalam, namun beberapa tagging sudah ada yang support ;)
Banyak kegunaan bila kita mau mempelajari, mempraktekan, dari bahasa HTML 5 ini loh sob. Seperti yg saya katakan tadi, lebih sederhana dalam memakainya. Tentu dengan hal baru yg begitu mempesona dan pastinya jarang terpakai ;)) Contoh real yg sering dijumpai yaitu penanaman CSS inline pada sesi postingan. Seperti ini New!!!

Trik yg sama kita lakukan ketika mau membuat huruf menjadi tebal/miring yg berada pada post editor blog.<span style='color: #F00;font-size: 11px;font-style: italic;text-decoration: blink;background-color: #333;font-weight: bold;padding: 0 3px 0 3px;border: 1px solid #FF0;outline: 1px solid #333;'>New</span>Ingin berkreasi layaknya para master, mau tidak mau ya kita harus tahu bahasa CSS :)
Berikut beberapa atribut HTML5 yg menurut saya aneh tapi nyata :D

<progress style="width: 100px;" value=".3"></progress>

Loading...

<progress style="width: 100px;height: 5px;">Loading...</progress>

http://lea.verou.me/2011/07/a-polyfill-for-html5-progress-element-the-obsessive-perfectionist-way/

http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/

Klik teks di area ini, hapus dan edit sesuka kalian.

<div contenteditable="true">Klik teks di area ini, hapus dan edit sesuka kalian.</div>

Hahaha...aku ada di sisi kanan...!!!

<p dir="rtl">Hahaha...aku ada di sisi kanan...!!!</p>

Simpanlah rumusan keren untuk berkreasi jika memang tidak mau menghapalnya...wekekekekkk :P

Beben Koben Si Bloglang anu Ganteng Kalem Tea...heheheSekedar mengisi waktu luang, tidak ada aktifitas. Belajar...belajar...belajar \m/

Rabu, 18 Januari 2012

Trick Hover and Active Selector for Image

Bila sobat mencari kumpulan list mengenai CSS all about CSS tempatnya. Disana Koben selalu menyimpan link web CSS khususnya selama melakukan blog walking. Tapi bukan berarti link yang lain saya lupakan, lihat contoh beberapa links keren yg saya temukan ini sob collected lists! Bila kita melakukan walking² ke web yg ada disana saja, mungkin kita sudah bisa mengikuti apa² yg memang lagi hot & trend di dunia per-css-an :D Agar bisa melakukan hal itu, maka sobat harus mempunyai juga daftar list links yg dimaksud ;) Selalu simpan kalau menemukan link unik, aneh, berbeda dari yg lain itu ya. Jangan suka teriak tukeran link yukkk tapi tidak pernah menengok linknya :D Koben kasih deh daftar lists web CSS keren² buat kalian great lists of web CSS.

Seperti web satu ini yang selalu mengeluarkan trick sekitaran CSS http://designshack.net/ Lumayan sob buat menambah perpustakaan resource ;) Design Shack belum lama memosting artikel Build a Fun Trivia Game With the CSS Active Selector! Apakah itu? Trik ketika kita melakukan hover pada image akan tampak secuil info dgn kata² pendek, lalu ketika kita menahan klik (active selector) pada image akan terlihat keterangan yg dibubuhkan disana.
Melihat demonya info yg tertera posisi berada diatas (kala menghover) dan bertuliskan "Click for the answer:" Cocok dengan komposisi seperti itu, silahkan sobat sikat ramuannya disana :D Bagaimana bila kita menginginkan kebalikan dari yg ada pada demo! Like this...

HTML Markup

<div class="images_B">

<a>
<img src="http://link-image-add-here.jpg" alt="" />
</a>
<div class="isi">
<small>Click and Hold...!!!</small>
<br />Keterangan...
<br />Keterangan...
</div>

</div>

CSS Code

.images_B {
display:block;
height: 174px;
width: 232px;
overflow: hidden;
background-color: rgba(255, 255, 255, .1);
cursor: pointer;
-webkit-box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
-moz-box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
}
a img {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a:hover img {
margin-top: -21px;
}
a:active img {
margin-top: -60px;
}
small {
font: 10px/1.5 Verdana;
color: #000;
text-shadow: 0 0 5px #000;
}
.isi {
text-align: center;
font: bold 13px/1.5 Arial;
margin: 2px auto 0;
}
Rubahlah width & height sesuai dengan kebutuhan masing². Good luck :)
Happy blogging \m/

Selasa, 17 Januari 2012

Pasang Emoticon Di Threaded System Comments

Setelah diluncurkan dan diterapkannya threaded system comments bagi para pengguna blogger, tidak serta-merta berjalan mulus. Beberapa permasalahan timbul disana-sini jika kita memang sudah mengaktifkan threaded system comments blogger untuk customize template ini! Yang sudah terlihat jelas hilangnya beberapa hack dan juga customize kode didalam template kita :-s Seiring dengan berjalan waktu, mari kita sama-sama membenahi kekurangan dengan hadirnya fitur threaded commenting tersebut :D Contoh hack yg hilang dengan adanya feature ini yakni background komentar author jadi lenyap, tulisan diatas embed comments yg kita tulis jg hilang, dan yg paling cukup menyita perhatian kalangan blogger adalah musnahnya emoticon di dalam kotak komentar ~X(

Karena Koben malas ngulik² jadi sebagai bloglang anu ganteng kalem tea, sobat² sekarang tidak perlu khawatir lagi dengan emoticon untuk komentar L-) Salah satu sobat blogger sudah membantu memecahkan masalah ini loh :D dan dia adalah master Sadeva Aldy Pratama o->
Dengan judul postingan pasang emoticon pada komentar thread terbaru. Silahkan ikuti langkah-langkahnya disana. Setelah membaca caranya di sana, balik lagi ke sini guna optimasinya :D Perhatikan pada langkah peletakan script<script src='http://www.geocities.ws/alprablog/user/js/yemo.js' type='text/javascript'/>rubahlah menjadi begini<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://www.geocities.ws/alprablog/user/js/yemo.js' type='text/javascript'/>
</b:if>

Mentahan Emotikon Script

a = document.getElementsByTagName('LABEL');
if(a) {
for(i=0; i < a.length; i++) {
_str = a.item(i).innerHTML.replace(/:\)\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' alt=''/>");
_str = _str.replace(/:d/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt=''/>");
_str = _str.replace(/\;\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt=''/>");
_str = _str.replace(/:p/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt=''/>");
_str = _str.replace(/:\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt=''/>");
_str = _str.replace(/:\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt=''/>");
_str = _str.replace(/:\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt=''/>");
_str = _str.replace(/:\|/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt=''/>");
_str = _str.replace(/\=\)\)/ig,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt=''/>")
a.item(i).innerHTML = _str;
}
}

a = document.getElementById('comment-holder');
if(a) {
b = a.getElementsByTagName("blockquote");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-content') {
_str = b.item(i).innerHTML.replace(/:\)\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' alt=''/>");
_str = _str.replace(/:\)\]/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' alt=''/>");
_str = _str.replace(/;\)\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' alt=''/>");
_str = _str.replace(/;\;\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' alt=''/>");
_str = _str.replace(/:d/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' alt=''/>");
_str = _str.replace(/\;\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' alt=''/>");
_str = _str.replace(/:p/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' alt=''/>");
_str = _str.replace(/:\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' alt=''/>");
_str = _str.replace(/:\)/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' alt=''/>");
_str = _str.replace(/:\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' alt=''/>");
_str = _str.replace(/:x/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' alt=''/>");
_str = _str.replace(/=\(\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' alt=''/>");
_str = _str.replace(/:\-\o/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' alt=''/>");
_str = _str.replace(/:-\//gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' alt=''/>");
_str = _str.replace(/:-\*/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' alt=''/>");
_str = _str.replace(/:\|/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' alt=''/>");
_str = _str.replace(/8-\}/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' alt=''/>");
_str = _str.replace(/~x\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' alt=''/>");
_str = _str.replace(/:-t/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' alt=''/>");
_str = _str.replace(/b-\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' alt=''/>");
_str = _str.replace(/:-\L/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' alt=''/>");
_str = _str.replace(/x\(/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' alt=''/>");
_str = _str.replace(/\=\)\)/ig,"<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' alt=''/>")
b.item(i).innerHTML = _str;
}
}
}


Agar posisi si emot rata dengan tulisan yg ada di sekitar kotak komentar kalian, simpan CSS berikut diatas kode ]]></b:skin>.comment-content img {
padding: 0;
margin: 0;
vertical-align: middle
}
SAVE dan lihat hasil kerja :) Kalau sudah pasang emotikon yg ini, hapus yg lamanya. Mari kita tunggu lagi sobat² yg lain untuk memperbaiki & membenahi galat yg terjadi :))
Happy blogging \m/

Senin, 16 Januari 2012

Master Assad Syaifullah Harahap

Sobat masih ingat dengan blogger yang punya blog assadotcom. Kirain Koben blog intinya yang itu sob, ternyata ada dua buah blog kojo andalan dia ;)) Satu lagi blog keren kepunyaan Master Assad Syaifullah Harahap yaitu http://assadsyaifullahharahap.blogspot.com/. Bila kalian sudah pada tercengang melihat para blogger blogazine berkreasi, maka master Assad Syaifullah ini banyak berkreasi dengan temuan2 resource web keren temuan dia yg diaplikasikan ke form blogspot b-)
Saya tidak akan panjang lebar, karena kalau panjang bibirnya Mister Tukul dan kalau lebar mulutnya Mister Kultu :D Sok silahkan diacak-acak sendiri, klik satu per satu buka blog racikannya, lihat keindahan kreasi seorang blogger dari kota Lampung ini!

Happy blogging \m/

Sabtu, 14 Januari 2012

Add Rich Snippet Markup Microdata for Blogger

Koben sekarang akan berbicara mengenai rich snippet dimana konten ini meliputi data microdata, microformats dan RDFa. Dimana setelah 3 search engine (google, Yahoo! & Bing) sepakat memakai struktur format tersebut agar skema struktur markup data sebuah web/blog terbaca lebih indah di mata ketiga search engine :) Ket: Introducing schema.org: Search engines come together for a richer web. Pertanyaan timbul untuk apa dan berfungsi sejauh manakah fitur rick snippet terhadap sebuah blogsite/website? Jangan bertanya pada saya, tapi baca saja keterangannya ya Rich snippets (microdata, microformats, and RDFa). Setelah sekian lama bergelut mempelajari hal ini, Beben Koben si bloglang anu ganteng kalem tea akan berbagi mempermudah pemahaman dan penerapan sistem rich snippet microdata ini ke dalam blog format blogger blogspot ;)

Mungkin penerapan sistem microdata akan berbeda pada setiap web penerima. Tapi secara garis besar trik snippet yg digunakan sama saja. Masalahnya tinggal pintar² kita dalam mengakali galat yg terjadi pada web penerima :D
Agar kalian bisa melihat kisi-kisi hasil trick snippet microdata, gunakan beberapa tools berikut yang memang tercipta untuk hal ini ;))

  • Rich Snippets Testing Tool
  • Masih dalam bentuk beta, sehingga akurasi hasil masih dipertanyakan. Agar hasil lebih optimal, gunakan saja cara jitu dengan melakukan buka web penerima tujuan. Ex: www.google.com, yahoo.com & bing.com. Simpan link kalian pada kotak search, tanpa diikuti dengan http:// Lihat bagaimana tampilan hasil search, apakah sudah sesuai dengan aturan microdata :D
  • Debugger Facebook Developers
  • Tools untuk melihat hasil tampilan web/blog kita terhadap web penerima yaitu facebook.
  • Form Action Blogspot Share To Google+
  • Tools buatan saya biar bisa berbagi ke halaman google+ secara instant. Tentu kita bisa melihat efek tampilan snippet juga dari sana :))
Lakukanlah testing dengan jalan 2 kali. Link saat pada keadaan home page, dan link saat pada keadaan single post. Agar kita bisa melihat perbedaannya, dan yg terpenting apakah sukses atau gagalnya kita melakukan trik ini.Bloglang
Alat melihat hasil sudah tersedia, sekarang saatnya memasukan rumusan kode snippet microdata kedalam template kita masing-masing.

Berikut beberapa list links penting dalam melakukan markup blogger with schema.org microdata.

http://homebiss.blogspot.com/2011/11/schema-blogger-rich-snippets-testing.html
Schema.org microdata markups for Blogger blogs! Passes +Snippet and Rich Snippets Testing Tool!
http://homebiss.blogspot.com/2011/11/markup-blogger-schemaorg-examples.html
How to markup Blogger blogs with Schema.org microdata. Examples provided. Put an end to your +Snippet headaches!
http://homebiss.blogspot.com/2011/11/open-graph-tags-for-blogger.html
Facebook-friendly Open Graph Tags for Blogger blogs. Passes Debugger Tool!
http://alt.pathawks.com/blogger-open-graph.html
Open Graph data in Blogger!
http://www.simplebloggertutorials.com/2011/07/add-open-graph-protocol-meta-tags-to.html
Add Open Graph Protocol Meta Tags to Blogger by simplebloggertutorials.

Terserah sobat mau pakai yg mana, karena semua itu benar adanya. Karakter template yg berbeda-beda memungkinkan adanya perbedaan dalam pemanggilan kode dengan unik ID yg tertera. Koben sendiri memakai versi dari simplebloggertutorials dengan opsi For advance use b-) Ternyata berhasil dan sukses. Bila sudah terpasang kode pilihan kalian, maka tinggal bermain dengan tools yg Koben sebutkan di awal postingan tadi ;)) INGAT!!! Lakukan testing dengan URL home page & URL single post.
Lebih jauh melihat hasil dari trick ini yaitu kala seseorang berbagi link salah satu postingan web/blog kita ke situs jejaring! Pokoknya mah penting hal ini teh bagi keindahan blog kita di mata search engines ;)) Good luck :)
Happy microdata \m/

Kamis, 12 Januari 2012

Mengaktifkan Threaded System Comments Blogger Untuk Customize Template

Ingat dengan hack penomenal mengenai threaded comments II for blogspot! Pihak blogger sekarang sudah memasukan fitur tersebut ke dalam sistemnya. Baca keterangan via buzz blogger engage with your readers through threaded commenting. Pada kasus tertentu mengikuti langkah² yang telah diberikan oleh pihak blogger, tidak serta merta fiture threaded commenting blogger ini langsung terlihat pada template kalian di bagian komentar? Di sebagian negara mungkin secara otomatis dapat langsung tampak sistem threaded comments tersebut, tapi tidak demikian dengan kita yang ada di Indonesia khususnya.
Beben Koben selaku si bloglang anu ganteng kalem tea melakukan jalan² kesana kemari guna mengetahui bagaimana cara agar sistem threaded comments ini bisa langsung dirasakan oleh kita! Pertama-tama Koben mendarat di Official Blogger Threaded Comments is Live!. Disana saya mendapatkan keterangan bahwa tingkat memberikan balas kepada komentar hanya diberikan 2x.

Satu kelemahan yg sudah pasti terkuak ;)) Pada keterangan resmi pihak blogger, untuk mendapatkan fitur ini, sobat harus melakukan setting pada template kalian.
New Blogger Interface:
>> Setting ► Comments pilih Embedded
>> Settings ► Other ► Allow Blog Feed pilih Full
Old Blogger Interface
>> Setting ► Comments pilih Pop-up window atau Embedded below post
>> Setting ► Site Feed ► Allow Blog Feeds pilih Full
Bila setelah melakukan hal itu masih belum muncul juga, maka kita harus melakukan sedikit penambahan kode yg mungkin memang tidak otomatis langsung ada pada template kita ;)

  1. Back up Download Full Template.
  2. Expand Widget Templates
  3. Temukan kode berikut
  4. <b:include data='post' name='comments'/>
    Bakal ada lebih dari satu kode tersebut, tapi jangan khawatir, sobat tambahkan saja semua kode itu menjadi seperti ini:
    <b:if cond='data: post.showThreadedComments'>
    <b:include data='post' name='threaded_comments'/>
    <b:else/>
    <b:include data='post' name='comments'/>
    </b:if>
    Maaf kode cond='data: post.showThreadedComments setelah tanda : huruf p tanpa ada spasi (bentrok dengan emotikon) :D
  5. SAVE.
Lihatlah perubahan setelah semua ditambahkan dengan kode tersebut! Bila memang masih belum muncul juga, temukan kembali kode
<div id='comment-holder'>
Rubah menjadi
<div class='comments-content'>
<b:if cond='data: post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data: post.commentHtml/>
</div>
</div>
Seperti biasa kode data: post p-nya jgn pakai spasi :D SAVE. Masa belum muncul juga mah :))
Setelah saya pasang, ternyata threaded commenting system ini mengganggu terhadap beberapa hack yg sudah tertanamkan didalam template kita! Contohnya akan hilangnya hack emotikon buat kotak komentar, tulisan Comment Form Message dan belum diketahui mana lagi yg ikut hilang :-/

Demikian cara mengaktifkan threaded commenting system buat customize template. Good luck and happy enjoy fitur teranyar dari blog :P
Resource by: http://yabtb.blogspot.com/2012/01/how-to-enable-blogger-threaded.html
Happy threaded comments \m/

AnchorCloud Expanding Link Jquery Plugin

Kembali membawa sesuatu yang unik, aneh full stylish. Lagi-lagi mengenai trick jQuery plugin ;) Jquery AnchorCloud Expanding Link jebolan dari team web @9lessons menyuguhkan kreasi fresh memperluas kinerja links dengan memperkaya sistem kinerja links tentunya terintegrasi dengan jQuery :) Dimana nantinya setiap links akan terlihat sepenggal informasi ketika disorot. Versi pertama yang dirilis mendukung juga terhadap link YouTube dan Vimeo. Menurut rencana si pembuat, versi berikutnya akan lebih diperluas gayanya :d dengan memasukan beberapa feature di antara lain popular video dan photo service b-)
Beben Koben juga sudah pasang kok sob ;)) Untuk melihat demonya silahkan tunggu loading blog 100% beres :D Untuk perihal syntax link, default links akan langsung terlihat efeknya seperti tooltips disertai dengan keterangan berdasarkan meta description. Ex: Contoh default link - Ben Tools.

Berikut contoh links Vimeo & YouTube sahara wonderland - blogger tutorial. Untuk link Vimeo video cukup kopi saja URL embed yg ada, serta untuk You-Tube ambil deretan kode http://www.youtube.com/watch?v=rA4s3wN_vK8 (yg diberi huruf tebal). Pemakaiannya menjadi http://youtu.be/rA4s3wN_vK8
http://www.box.com/s/pxbbq3oznvft67y6jkml [download script]
Letakan script setelah dihosting diatas tag </body> Beres deh :) Good luck.
Happy plugin \m/

Rabu, 11 Januari 2012

Clickable for jQuery Plugin

Trick jQuery plugin sederhana berikut mungkin bisa berguna bagi sobat blogger yang memang mengikuti adsense PPC. Dimana para pemain bisnis pay per click ini, seiring waktu semakin pandai² saja dalam mensisipi link PPC tersebut. Kebanyakan Koben lihat para pebisnis PPC selalu menyertai link affiliasi yg diikutinya dengan link download! Dengan mengklik link DL, maka otomatis akan terklik juga link affiliasi :D Seperti itu juga kira² proses kerja trik clickable with jQuery Plugin sekarang ;) Namun hanya satu link saja yg bisa dimasukan dengan bantuan script jQuery sekarang ini sob :P
Karena hanya satu link yg dapat disisipkan, maka persiapkanlah link kojo/andalan yg memang bila diklik akan meraup $$$ lumayan besar ;)) Dengan mengambil tagging body sebagai target klik, sehingga link rahasia tujuan yg nanti dimasukan akan terisi diseluruh body web/blog kalian :D

Kurang paham dengan apa yg dimaksudkan oleh Beben Koben si bloglang anu ganteng kalem tea, mari langsung saja pada script content... Struktur jQuery Clickable seperti berikut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {
$('body').click(function () {
window.open('http://www.google.com');
});
});
//]]>
</script>
Keterangan:
  • Script warna biru tua.
  • Bila didalam template kalian sudah ada script itu, tidak usah dipasang lagi.
  • Code warna pinkky.
  • Link rahasia, yakni link PPC targeted :d mau links apa saja sebenarnya terserah kalian itu mah :))
Demikian trick sederhana clickable using jQuery plugin.
Happy happy \m/

Selasa, 10 Januari 2012

Three Major Search Engines for You

Mengangkat kembali tema lawas yakni mengenai kotak pencarian/search box. Ada juga yang menyebutnya search engines? Intinya kotak search untuk mencari konten yg ada pada sebuah web/blog lah. Kadang saya suka bertanya sendiri bila ada web yg tidak memasang kotak pencariannya sob. Apakah memang disengaja untuk mengacak-acak bagian arsip biar kita dituntut lebih bisa melihat keseluruhan isi daripada konten web tersebut! Tapi yang pasti bagi saya malah bikin bingung, dan membuat susah pengunjung dalam mencari sesuatu yg dimaksud :D
Teknik dasar yang dipakai sekarang dalam membuat blog search engine seperti pada artikel search box korek-korek style. Bila tidak dipindah checked yg ada, maka berfungsi hanya konten yg ada pada blog/web yg akan disearch hasilnya. Bila cheked dipindah maka hasil search berpindah ke search engine web pilihan. Koben mengambil 3 buah search engines faforit yaitu Google, Yahoo!, dan Bing :)

Terserah sobat cara mana yg mau dipakai dalam memasukan rumusan/code search engine berikut. Dibuat 1 postingan khusus mengenai hal ini ataupun via Add a Gadget :p Berikut hasil akhir dari Search The Blogsite:

Google

 

Yahoo! Search

 

Live Search

Kode Three Major Search Engines

<table style="background:#f4f4f4;padding:20px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0px 0px 15px #000;-moz-box-shadow:0px 0px 15px #000;box-shadow:0px 0px 15px #000;margin:0 auto">
<tr>
<td>
<form method="GET" action="http://www.google.com/search"><input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<a href="http://www.google.com/"><img src=" http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google"></a><br><input type="text" name="q" size="35" maxlength="255" value="">
<input type="submit" name="btnG" value="Google Search"><div>
<font size=-1><input type="radio" name="sitesearch" value="XXXXXXXXXX" checked> <label>Name Blog</label><input type="radio" name="sitesearch" value=""><label>Search the Web</label></font>
</div>
</form><p>&nbsp;</p>
<form action="http://search.yahoo.com/search"><a href="http://www.yahoo.com/"><img alt="Yahoo! Search" src="http://l.yimg.com/a/i/brand/purplelogo/uh/us/yahoo_search369_46_production.gif" width="369" height="46" border="0" /></a><br>
<input type="text" name="p" size="35" />
<input type="submit" value="Yahoo! Search" />
<div><font size=-1><input type="radio" name="vs" value="XXXXXXXXXX" checked="checked" /><label>Name Blog</label><input type="radio" name="vs" value="" /><label for=ysvs20>Search the web</label></font></div>
</form><p>&nbsp;</p>
<form method="get" action="http://www.bing.com"><input type="hidden" name="cp" value="utf-8"/><input type="hidden" name="form" value="freess"/>
<tr><td>
<a href="http://www.bing.com"><img src="http://i42.tinypic.com/rucok9.jpg" border="0" alt="Live Search"/></a></td></tr>
<tr><td>
<input type="text" name="q" size="35"> <input type="submit" value="Bing Search">
<div><font size="-1"><input type="radio" name="q1" value="site: XXXXXXXXXX" checked><label>Name Blog</label><input type="radio" name="q1" value=""><label>Search the Web</label></font>
</div>
</form>
</td>
</tr>
</table>
Gantikan tulisan XXXXXXXXXX dengan URL blog kalian masing². Ketikan Ctrl + F biar cepat ketemunya ;) Name Blog jg ganti dengan nama blog masing².
Semoga bermanfaat :)
Happy search \m/