Make Social Media Icons With CSS3 Animated

Ada tutorial ringan membuat link share sederhana dengan sentuhan efek hover. Tampilan awal akan terlihat biasa saja, ketika di hover akan terlihat efek hover dengan gambar berwarna. Beberapa tut's serupa dengan varian berbeda

• Social network with sprite images
• Make social network with animation css
• Social network with spinning effect

Cuma ada 4 buah link tujuan, yaitu ke RSS,tiwtter,facebook dan google plus. Jika kalian mau menambahkan icons/links berarti harus buat sendiri gambarnya yah :d

Markup HTML<div class='social-wrap'>
<ul>
<li><a class='rss' href='YOUR-LINK' target='_blaank'>Rss</a></li>
<li><a class='twitt' href='YOUR-LINK' target='_blaank'>Twit</a></li>
<li><a class='fb' href='YOUR-LINK' target='_blaank'>FB</a></li>
<li><a class='google_p' href='YOUR-LINK' target='_blaank'>G+</a></li>
</ul>
</div>Kode CSS

.social-wrap {
margin: 0px;
padding: 0px;
}
.social-wrap ul li{
list-style: none;
}
.social-wrap li a {
margin: 0px 5px 0px;
width: 60px;
height: 60px;
float: left;
text-indent: -99999px;
border: solid 1px #555;
border-radius: 15px;
-webkit-border-radius: 15px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
.social-wrap li a.fb {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9TOfFq0j_4IrkHeSuu89CSf-rkqWZ1OyFdecTxAQLOi4BqWleAsLhZtMcaGdFEOmO2WpMV6vpd90TcyN88HvCL2I_pgHrrZhn3cMA6aYzrGMSNp4EgT2bJGQPbEyfMZpmM75i5oM3WQ/s1600/facebook.png) no-repeat -0px -88px;
}
.social-wrap li a.fb:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9TOfFq0j_4IrkHeSuu89CSf-rkqWZ1OyFdecTxAQLOi4BqWleAsLhZtMcaGdFEOmO2WpMV6vpd90TcyN88HvCL2I_pgHrrZhn3cMA6aYzrGMSNp4EgT2bJGQPbEyfMZpmM75i5oM3WQ/s1600/facebook.png) no-repeat -0px -0px;
}
.social-wrap li a.twitt {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Njxunosbo5RlAjn1VOdbB4vSninTgssjf9wPeolnQ5saftWrHDAeXab3WNqDx05VpMinB9X3bnmcGDXE2ApzjQn63seXgfI6-pX3B7_HL_Omh_2bNI9NWoowJQSMDBMa_BXONGfSHA/s1600/twitter-1.png) no-repeat 0px -88px;
}
.social-wrap li a.twitt:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Njxunosbo5RlAjn1VOdbB4vSninTgssjf9wPeolnQ5saftWrHDAeXab3WNqDx05VpMinB9X3bnmcGDXE2ApzjQn63seXgfI6-pX3B7_HL_Omh_2bNI9NWoowJQSMDBMa_BXONGfSHA/s1600/twitter-1.png) no-repeat 0px 0px;
}
.social-wrap li a.google_p {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqUsHXN_nghkLWJHIiMxZ7GJpUg2R_DnlqcQ9KrwAXWnf5BQoz6Spi2frbn4i1z59V4isWaue_Oox3GiExhtNu1tw_3dXufw7V4WfutxwtL6GPqIEVlKG9Qj8iqzgXoYyyb4uyvnQSkg/s1600/google.png) no-repeat 0px -88px;
}
.social-wrap li a.google_p:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqUsHXN_nghkLWJHIiMxZ7GJpUg2R_DnlqcQ9KrwAXWnf5BQoz6Spi2frbn4i1z59V4isWaue_Oox3GiExhtNu1tw_3dXufw7V4WfutxwtL6GPqIEVlKG9Qj8iqzgXoYyyb4uyvnQSkg/s1600/google.png) no-repeat 0px 0px;
}
.social-wrap li a.rss {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyxUDnH-I24-2TT4jU0vho1WCptnsQtQuj9OouP6GXsxweneADgOk3BBCldXx2OGwHz4PJS-iD7BH1-Xd96KgkbGVEreeuuZacTCdAO49oMur8FtQOJSINchuQFCDvv_BLZIWzIOlW-Q/s1600/twitter.png) no-repeat 0px -88px;
}
.social-wrap li a.rss:hover {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyxUDnH-I24-2TT4jU0vho1WCptnsQtQuj9OouP6GXsxweneADgOk3BBCldXx2OGwHz4PJS-iD7BH1-Xd96KgkbGVEreeuuZacTCdAO49oMur8FtQOJSINchuQFCDvv_BLZIWzIOlW-Q/s1600/twitter.png) no-repeat 0px 0px;
}

Happy coding \m/

Activate Blogger and Google+ Comments System Together

Ada seorang blogger yang melakukan snippet hack terhadap google comments system. Tanpa mesti melakukan pengkatifan Use Google+ Comments on this blog ? kalian bisa mengaktifkan fitur google plus comment. Lebih hebat lagi hack ini mengikutsertakan default blogger comment yang dipadukan dengan teknik toggle Dengan teknik tersebut maka komentator dapat memilih mau berkomentar dengan format komentar google+ atau bawaan blogger ;)

PENTING: Untuk membuat Google plus dan komentar blogger muncul bersama-sama, bahwa postingan harus memiliki setidaknya 1 komentar. Posting yang memiliki komentar 0 akan terus menampilkan sistem komentar default blogger. Ingat: (Tidak perlu untuk aktifkan komentar Google+ dari pengaturan anda! Jika anda telah mengaktifkan menonaktifkannya dulu sebelum menerapkan tutorial ini.mybloggerlab

Langkah pertama

Lakukan terlebih dahulu Download full template

Langkah kedua
Buakalah halaman berikut dan ikuti saja langkah-langkah selanjutnya dari sana. Soalnya takut bentrok sama emoticon jiga gue menjabarkan kode-kode yang ada. Mudah kok tinggal ganti-ganti doang tagging Blogger Xpertise or goes to My Blogger Lab
Jika berhasil sobat tidak kehilangan komentar bawaan dari blogger dan mengkatifkan komentar google+ tanpa harus melakukan setting activate dulu.
Good luck :)

Source keren lagi mengenai membuat sistem komentar google plus dengan teknik API Google Pizcos.net and Ayuda Bloggers

Live Preview on Post Area for Blogger

Aartikel tutorial kali ini akan sedikit ekstrim! Cocok buat blogger yang suka menerapkan live demo di area postingan? Sebelumnya Koben pernah berbagi trik serupa, khusus berlaku hanya untuk demo kode CSS CSS preview in post area for blogger. Harap diperhatikan yah, cocok untuk blogger yang suka akan tingkat kesulitan dalam menulis. Mengapa demikian karena memang repot. Dikatakan ekstrim live preview demo on area post sekarang disebabkan akan membawa 2 atribut besar yaitu iframe dan textarea! Hal-hal yang perlu dilakukan jika memang berminat memasang snippet kode

Backup Full Template jangan pernah lupa yeee.

Letakan kode CSS di tempat semestinya#HTMLEditBox { width: 100%; height: 15em; background: #EEE; border: dashed 1px #000; } #updateFrame { width: 100%; height: 13em; border: solid 1px #000; }Masukin JavaScript berikut diatas tag </body>

<script>
//<![CDATA[
var old='';var isSaved=true;var firstTime=true;function update(){if(!isSaved){window.onbeforeunload=function(){return'You have unsaved changes. Are you sure you want to leave?';}}var docObj=window.frames['updateFrame'].document;var textarea=document.getElementById('HTMLEditBox');if(old!=textarea.value){if(firstTime){firstTime=false;}else{isSaved=false;}old=textarea.value
docObj.open('text/html','replace');docObj.write(old);docObj.close();}window.setTimeout(update,150)}
window.onload=function(){document.getElementById('jsCheck').style.display='inline';document.getElementById('HTMLEditBox').select();update();}
//]]>
</script>

Markup HTML ketika mau memostingkan<div id="jsCheck" style="display: none"> <textarea id="HTMLEditBox" rows="10"> ------ ADD CODE HERE ------ </textarea> <iframe name="updateFrame" id="updateFrame"> <p>Sorry, your browser does not support the Real Time HTML editor. We recommend you upgrade your browser.</p> </iframe> </div>Trik penulisan...

Selesaikanlah terlebih dahulu semua ketikan postingan kita. Karena atribut textarea akan merender baris menjadi <br /> Oleh karena itu selesaikan dulu semua acara mengetik. Kemudian lihat ke sebelah kanan (bagian bawah) yg bertuliskan Options. Pencet Options pilih opsi Use <br> tagLive preview kali ini support terhadap syntax script juga b-) Pada tulisan ------ ADD CODE HERE ------ kodenya di phrase dulu ;) Nanti nggak jalan kalau tidak di convert dulu ya :p
DEMO kalau jalan :d

<!DOCTYPE HTML> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <p id="demo">This is a paragraph change to date.</p> <button type="button" onclick="displayDate()">Display Date</button> <h1 align="center">Heading</h1> <p>Paragraph</p> <a href="http://beben-koben.blogspot.com/">Link</a> <img style="margin:5px auto;display:block" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTAPEz0GQnaGZ3cF5dVolZ2CcT7xDw2wJsTEkVrlLEgL6Df9GyKfYEHQ73keU8IxUCvOP6UQCZ47jla693n8bWwyD3YBjVOlahyHcJMFDSl94155I8znZKYFpERzOf85Zt1lyehAbef-fQ/s440/post-image.png" alt="post-image"/> </body> </html>

Mix script by Taufik Nurrohman. Resource: www.timsfreestuff.com/HTMLEditor

Add Dynamic Rotate Effect in Blogger use CSS3

Koben mau berbagi trik ekstrim nih. Sangkin ekstrimnya bisa membuat para pengunjung blog kalian melongo :d Saya akan memberitahukan bagaimana cara membuat blog kita berputar-putar 360° Tenang saja, tapi berputarnya tidak akan terus menerus, cuma satu kali putaran penuh setiap membuka konten yang ada pada blog kita ;))
Karena trick ini sangar extreme, tetapi tidak dengan kodenya! Kita hanya perlu memasukan segelintir kode CSS saja dengan metode
Add a GadgetHTML/JavaScriptScreenshotKodenya bos

<style>
  @-moz-keyframes roll {
    100% {
      -moz-transform:rotate(360deg);
    }
  }
  @-o-keyframes roll {
    100% {
      -o-transform:rotate(360deg);
    }
  }
  @-webkit-keyframes roll {
    100% {
      -webkit-transform:rotate(360deg);
    }
  }
  body {
    -moz-animation-name:roll;
    -moz-animation-duration:4s;
    -moz-animation-iteration-count:1;
    -o-animation-name:roll;
    -o-animation-duration:4s;
    -o-animation-iteration-count:1;
    -webkit-animation-name:roll;
    -webkit-animation-duration:4s;
    -webkit-animation-iteration-count:1;
  }
</style>

Happy coding \m/

Resource: www.allbloggertips.com/2013/04/add-dynamic-and-cool-rotate-effect-in.html

April MOP!!!

Jalan-jalan yuk mencari sesuatu. Kita mulai dengan acara bereksperimen ria karya Yair Even-Or http://dropthebit.com/category/css-experiments/ All postnya juga keren-keren tuh. Kembali koleksi trik hover image berikut patut kalian baca http://www.dezineguide.com/tutorial/15-free-css3-image-hover-effects/ Kumpulan artikel CSS tutorials 7 jQuery script masih tetap mempesona http://designrfix.com/resources/css-tutorials Jangan ketinggalan informasi terhangat di bulan april untuk para designer http://www.webdesignerdepot.com/2013/04/whats-new-for-designers-april-2013/ Genjot skill kita dengan beragam tools untuk urusna design http://www.designyourway.net/blog/resources/new-web-design-tools-that-you-need-to-check-out/

Membersihkan kode CSS agar bersih dan cepat terbca oleh search engine http://topcoat.io/ Tips dan trik seputar dunia HTML5 dibungkus menjadi satu paket artikel apik http://designrfix.com/resources/html-tutorials Jika dirasa kurang, hajar lagi bro http://cssauthor.com/25-useful-html5-and-css3-tutorials-techniques-and-examples/ Dongkrak ilmu CSS dengan membaca 34 free open source css code snippets for developers http://webdesignbloog.wordpress.com/2013/04/22/34-free-open-source-css-code-snippets-for-developers/ Pilihan dari web codepen

• http://codepen.io/new/pen/IrDkc
• http://codepen.io/nrose/pen/KrnGq
• http://codepen.io/summers1981/pen/kzCqG
• http://codepen.io/achudars/pen/lIHmn
• http://codepen.io/mnafricano/pen/FIqyi

Dua artikel membuat menu keren full stylish http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ & http://jasonweaver.name/lab/flexiblenavigation/ Breadcrumb Css3 navigation http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation & http://semurjengkol.com/pure-css3-breadcrumb-navigation-menu/ Bonus http://jsdo.it/teetteet/97pM, http://www.htmlslicemate.com/, https://developer.mozilla.org/en-US/demos/detail/artify & http://www.html5rocks.com/en/tutorials/masking/adobe/
Happy walking \m/

Add Google Plus Comments in Blogger Customize Template II

Ternyata memang terjadi kendala disana-sini dalam memasang google plus system comments. Masalah lebih terasa jika kita menggunakan customize template! Koben akan berbagi kembali resource bermanfaat bagaimana cara memasang komentar google plus tanpa mengkatifkan
Use Google+ Comments on this blog ?
Basic kode untuk menanamkan Google+ Komentar pada setiap website atau blog.<script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-comments"
data-href="[URL]"
data-width="642"
data-first_party_property="BLOGGER"
data-view_type="FILTERED_POSTMOD">
</div>Source link, dibaca ya how to add google+ comments to any website
Gantikan kode data-href="[URL]" menjadi begini
expr:href="data:___post.canonicalUrl"
Jangan pakai ___ bentrok sama emoticon :p Lihat deh muncul tidak? Urusan penempatan kode silahkan diatur-atur karena karateristik setiap template pasti berbeda. Kode yang lebih ekstrim lagi khusus buat blogger dapat berbentuk seperti

<b:if cond='data:___post.allowNewComments'>
     <h4>Commentars on GooglePlus</h4> 
    <div class="comment-form">
        <script src="https://apis.google.com/js/plusone.js"></script>
        <div class="g-comments" expr:___data-href="data:___post.url" data-width="600" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD"></div>
    </div>
</b:if>

Please don't use ___ Read source here tambahkan komentar ke halaman google+ :d

Jika masih tidak berjalan, satu lagi deh source yg dapat menjadi alternatif, meluncur add komentar pada customize template :))
Versi indonesia dari master Taufik Nurrohman Mengaktifkan Fitur Komentar Google+ (Untuk yang Gagal) dari kang Ismet Gagal Pasang Komentar Google+ ? Ini Solusinya.
Good luck \m/

Add Hyperlink Google Plus Comments in Blogger

Bagaimana dengan fitur google system comments? Apakah kalian suka atau tidak, ya tergantung pendapat individu jika masalahnya itu. Melihat para komentar tentang bringing google+ comments to blogger bervariasi! Ada yang takut loadingan menjadi berat, tidak sreg dengan template dsb :d Koben akan memberi solusi bagaimana fasilitas komentar google plus dapat terpakai di blog kita tanpa mengaktifkan fitur tersebut?
Berawal dari mempelajari keunikan link blogger gue melakukan eksperimen ria. Blogger blogspot mempunyai syntax hyperlink lebih luasnya links instant for blogger yang begitu unik. Berangkat dari keunikan tersebut maka terciptalah beberapa snippet terhadap syntax hyperlink:

• Syntax mobile link on template.
• Add link share posted blogger to google plus.
• Comment facebook without javascript for blogger.

Trik menanamkan hyperlink google+ comments system ke dalam blog sama halnya dengan link koemntar default blogger jaman dulu. Ex: Poskan Komentar Seperti itu jadinya, dan yang terlihat pasti komentar google plus ;)) Bagi sobat yang memasang komentar blog versi comment phân cấp cho blogger hasil posisi reply comment akan tampak sama dengan google plus system comments! Bedanya cuma posisi isi komentar komentator :d

Blogger Comments	Google+ Comments

Masukan syntax hyperlink berikut ke dalam template blog kalian! KODENYA

Gantikan XXXXXXXXXXXXXXXXXX dengan blogID masing-masing. Jika kepingin lihat live demonya, silahkan buka satu halaman postingan blog ini. Lihat di atas kotak komentar!Demikian postingan trik syntax link blogger semoga berkenan :)
Happy comment \m/

Enable Google Plus Comments in Blogger Customize Template

Hai blogger, baru saja kemarin perombakan terjadi pada bagian html editor template blogger! Sekarang google selaku pengembang blog berbasis blogspot sudah mengeluarkan lagi terobosan terbaru di bagian comments Berikut beberapa link informasi resmi mengenai mergernya comments google+ dengan comments blogger:

1. blogger buzz.
2. official blog.
3. blogger help.

Sebelum masuk ke acara bagaimana cara mengaktifkan comments google+ agar berkerja di blog, ada beberapa hal penting yang mesti diperhatikan oleh kita.
[-] Threaded Comments II for Blogspot.
Bagi sobat yg sudah mengkatifkan sistem threaded comment, seluruh kode & javascript tidak akan berkerja lagi.
[-] Emoticon For Blogger.
Hack penanaman emoticon pada sesi komentar akan turn off alias tidak berfungsi lagi.

Mungkin yang terakhir kita akan disibukan dengan harus membersihkan kode-kode CSS dan script yg tidak terpakai lagi di dalam blog kita! Lantas langkah apa yg mesti di lakukan terlebih dahulu sebelum benar-benar memasang comments google+ tertanam ke comments blogger? Kita harus mempelajari untung ruginya dulu ;)
Kerugian
Kehilangan beberapa hack/snippet yg sudah kita lakukan di bagian komentar. Menghilang tampilan comments (Published / Spam) yg ada di dashboard!
Keuntungan
Kolom komentar terlihat baru, terintegrasi langsung ke halaman google+, fitur reply sudah tertanam, tombol g+ sudah ada di dalam bagian komentar, bisa memasukan & melihat link postingan yg kita ikuti, Apa-apa yg terjadi di google+ akan terlihat juga di blog kita! dll :d

Before	After

Kekurangan dari New google+ commenting system

   Google+ ready stock - Untuk membuat komentar di blog, pembaca harus memiliki akun Google. Jika mereka tidak memiliki, mereka akan dipaksa untuk membuat akun Google sebelum mereka dapat mengomentari blog. Pengomentar tidak akan lagi mendapatkan pilihan untuk masuk menggunakan OpenID, atau membuat komentar anonim.
   Pilihan Moderasi - Saat ini, default blogger memiliki opsi untuk menyetujui dan menolak komentar yang ataupun tidak akan tampil di blog. Tanpa mekanisme moderasi yang tepat, maka akan lebih sulit untuk berurusan dengan spammer.
   Widget recent comment - Widget recent comment yang bekerja pada komentar blog mungkin tidak bekerja dengan baik karena ini tergantung pada komentar blogger.
   Update: Sistem komentar baru memiliki beberapa pilihan untuk menangani komentar bernada spam. Google menambahkan secara otomatis dan akan menyembunyikan komentar yang menurutnya spam. Kita dapat meninjau komentar tersembunyi dengan mengklik blue review comments bar.Kita dapat menghapus komentar dengan meng-klik pada V di sisi kanan komentar.

Keuntungan dari New Google + Commenting System

   Lihat semua diskusi tentang Blog pada satu tempat sekaligus. - Ketika seseorang berbagi posting kita di google +, akan muncul di google plus komentar.
   Pilihan untuk komentar publik atau pribadi untuk Lingkaran mereka - Google + sistem komentar memungkinkan pembaca untuk komentar publik atau pribadi untuk Lingkaran mereka di Google+.
   Melihat Komentar - Pembaca dapat memilih untuk melihat semua komentar, atau hanya komentar atas atau hanya yang dibuat oleh orang-orang di kalangan mereka
   Ada Komentar tidak akan hilang - Tidak seperti komentar Facebook, semua komentar Blogger lama Anda masih akan terlihat di Blog Anda dan jumlah komentar tidak akan hilang.
   Terlihat lebih baik - Sistem komentar baru benar-benar bersih dan terlihat jauh lebih baik daripada standar Blogger.

Cara Mengaktifkan Blogger Comments ke Google+

Langkah mengaktifkan comment google+ terhadap blog pada dasarnya ada dua langkah pokok.

1. Mengintegrasikan blog kita dengan google plus integrate your blog with google plus.
2. Hidupkan (turn on) google+ comments.

Setelah blog kita terintegrasi dengan google+, kita akan dapat menggunakan google+ comments.Setelah langkah ini dilakukan, kalian akan melihat google+ comment system di blog. Jika tidak muncul, maka harus melakukan tweak template untuk memunculkannya. Jika tidak mau mengubah kode HTML, cara termudah adalah mengembalikan widget templates ke default (kalian akan kehilangan kustomisasi yang dibuat untuk Blog Post Widget jika melakukan ini)

LAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU, TAKUT TERJADI APA-APA BOOO!

Untuk melakukan revert widget templates to default ikuti langkah² berikut
Go to Template > Edit HTML and click on the Revert Widget Templates to default button, select the Blog1 Widget and click on the Revert Selected widgets button.Jika sobat masih tidak mau melakukan tweak terhadap template, maka jalan satu-satunya adalah melakukan penambahan kode secara manual!

Langkah-langkah mengaktifkan google+ comment system ke dalam custom blogger template

1. Go to Template > Edit HTML
2. Klik di dalam template editor window, tekan Ctrl + F dan temukan kode berikut <b:includable id='comment-form' var='post'>
3. Klik tanda panah untuk memperluas kode widget.
4. Tambahkan kode berikut sebagai baris berikutnya (tepat di bawah langkah ke 2) KODENYA
5. Save template.
6. Pergi ke google+ tab dan aktifkan google plus commenting system.
7. DONE.

Opsi baru cara mengaktifkan comments google plus...
Cari yang terlihat seperti ini (Press Ctrl + F dan cari threaded_comments or comments)Ganti tulisan yg diberi tanda dengan<b:include data='post' name='comment_picker'/>Good luck :)
Resource: blogger widgets & blogger how
Happy blogging \m/

Aplikasi Photo Editor Simple & Usefully

Menghias photo membuat gambar secara profesional dibutuhkan skill memadai. Skill tersebut pasti menggunakan sebuah aplikasi. Aplikasi itu tidak lain bisa berupa image editing softwares, online image editing tools, dll :d Kebanyakan orang dalam urusan edit-mengedit image dipercayakan kepada adobe photoshop or corel. Jika sobat yang sudah familiar dengan aplikasi photoshop, tetapi tidak ada di komputer kalian, maka solusinya memakai editor online like photoshop. Poin dari kegiatan edit image yaitu menguasai salah satu apps image editor :p
Beben Koben si bloglang anu ganteng kalem tea mau berbagi aplikasi offline photo editor sederhana mirip cam frenzy apps!

Karena sederhana aplikasi ini, maka fitur edit gambar yg ada juga simple. Tapi dibalik kesederhanaan itu ada fitur lain yg gue pikir cukup untuk sebuah sarana edit-editan.
Spesifikasi:

1. I/O Input/Output
Bagian open image local storage, dan save image mode data URI.
2. Scale area
Mencakup units (%/px), fixed ratio, width, height and smooth mode.
3. Crop side
Drag and apply include postion & size image.
4. Colors side
Terdiri dari adjust level, grayscale, color balance, normalize, dan invert yg masing² memiliki opsi keren punya.

Dari semua spesifikasi yg ada, satu fitur yg gue ke sengsem bos...ada history. Jadi kalau salah bisa back gito loh :))

Yang membuat photo-editor ternyata memang master! Lihat saja konten webnya Ondřej Žára
Happy editor \m/

Get Free Moot Best Forums and Commenting

Ternyata saya belum pernah memosting artikel mengenai forum. Sebenarnya untuk mengajukan sebuah pertanyaan banyak cara yang dapat kita gunakan. Paling umum di kalangan pasti memakai teknik my contact :d Dari pihak google sendiri ada beberapa fasilitas yg bisa kita gunakan untuk menjadi sebuah area tanya-jawab. Contoh baru-baru Google+ Page & Google Groups. Penyedia jasa lain patut dipertimbangkan, mengingat halaman google plus and google group lumayan menyedot bandwith bagi koneksi internet lemot :">

Moot adalah layanan web baru dan gratis untuk menciptakan ruang diskusi pada setiap halaman web. Setup yang cepat. Layanan ini disajikan dengan kode HTML yang unik dan sekali tertanam ke dalam halaman web, Moot langsung muncul. Btw, Moot full memakai atribut HTML penuh dan bukan atribut IFRAME. Hal ini membuat kustomisasi beroperasi. Kita dapat menerapkan CSS atau bahkan mengubah interaksi melalui JS. Layanan ini menyediakan satu feed posting, pengguna dapat mengikuti sejumlah topik, melihat pengguna online lain atau membuat pencarian cepat.
Ini bisa menjadi diskusi yang datar atau threaded, bekerja secara real-time (ada refresh diperlukan), memiliki panel yang mudah digunakan kontrol dan mendukung layout responsif.

Kenapa Koben memilih MOOT, karena ringan, full customize CSS & JS, sesi comment keren, Embeddable, Styleable, Realtime, Free dan banyak lagi <- walau masih beta :d Embed yang diberikan berupa HTML terdiri dari link CSS dan script. Memudahkan kita dalam memasukan ke dalam blog. Link tunggal sudah pasti ada Beben Koben forums in MootApakah kalian tertarik dengan si moot! Jangan banyak mikir, buruan bikin sesuaikan dengan nama blog kalian. Keburu sama orang lain dibuat nanti :))

Pemasangan embed moot ke dalam area postingan blog
Setelah kalian buat, nanti ada seonggok kode HTML. Ambil semua kode tersebut, simpan dulu di mana kek. Perhatikan markup berikut

<link rel="stylesheet" href="http://cdn.moot.it/1.1/moot.css"/>
<style>
.m-logo {
    display:none;
}
.m-nav-account {
    display:inline-block;
    float:right;
    color:#fff;
}
.m-header {
    background-color:#472915;
}
.m-header span {
    color:#fff;
    font-size:17px
}
.m-navi a.m-selected {
    background-color:#debe94
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdn.moot.it/1.1/moot.min.js"></script>
<a class="moot" href="http://api.moot.it/beben-koben"></a>

Ramuan diatas masukan ke area postingan dengan mode HTML.
jQuery script jika sudah tertanam di dalam template blog, bisa tidak dipakai. Biar lebih aman dipakai saja!<style>

blah blah blah

</style>Snippet kecil yg gue terapkan. Sobat paham bagaimana mengsnippet CSS, lakukan sesuka hati.<a class="moot" href="http://api.moot.it/beben-koben"></a>Gantikan dengan kepunyaan sobat.
Good luck :)

Happy forum \m/

Two Application HTML Display & Search Image

Ternyata sambutan artikel mengenai Aplikasi HTML lumayan responsive. Apalagi aplikasi tersebut dapat berkerja secara offline ;)) Sekarang Koben akan berbagi online application tentang search and display image! Display image dengan memasukan keyword di dalam aplikasi .html yang akan ditampilkan berganti-ganti dengan resolusi berbeda-beda. Hasil generate tampilan gambar disesuaikan dengan speed dan image yg memang sudah terindex oleh search engine. Begini terlihat pada screenshotItu penampakan random image dengan keyword beben-koben :ddemo & downloadSave Page As dengan ekstension .html Buka pada notepad, tekan Ctrl + F cari kata beben-koben gantikan deh terserah. Sekarang bagian search image.

demo & downloadJika mau mengganti keyword, buka kembali di notepad cari kata beben koben
Source: jsdo.it/openidev/1Crv, jsdo.it/openidev/3Cr9
Happy blogging \m/

Generator Special Characters Offline

Sobat kenal dengan istilah special characters. Jika belum tahu silahkan baca halaman What is meant with special characters? Tulisan yang memiliki karakter khusus (spesial) dalam penulisannya. Hal ini sangat erat sekali dengan blogger karena, format bahasa template blogger memakai mode bahasa karakter spesial HTML. Contoh nyata yaitu ketika kita akan menuliskan script/kode di area postingan harus terlebih dahulu melewati proses phrase/convert code?
Ada beberapa cara menuliskan special characters, manual, memakai generator, dan aplikasi bawaan windows. Metode manual dengan mengetikan tombol khusus pada keyboard dengan perintah yg sudah ditentukan. Cobalah pencet pada kibor kalian Alt + 38 maka akan menghasilkan karakter spesial & jika di convert jadi begini &amp;

Hasil convert itulah yg dibutuhkan dalam mengedit-ngedit kode template, mosting kode di postingan secara umum menulis karakter khusus agar support terhadap directory bahasa HTML/XHTML.
↯ Cara manual, kalian dapat lihat kodenya di sini special ALT & ASCII HTML character.
↯ Memakai tools bisa coba hasil karya master Taufik Nurrohman Special character generator atau Copy & paste special characters.
↯ Dari windows pencet Win Icon + R (Run Command)kemudian ketikan CHARMAP.Koben mau berbagi aplikasi HTML offline mirip generator tools master Taufik Nurrohman tetapi dengan gaya drop down select :d

demo & download
Save Page As dengan ekstension .html
www.cdolivet.com/editarea/editarea/exemples/exemple_full.html
Happy blogging \m/