Tutorial Blog for Stylish Blogger: Ragam

Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS

Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.

Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.

Your ads here!!!

Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

Tampilkan postingan dengan label Ragam. Tampilkan semua postingan

▼ ▲

Encode base64 Automatic to Show Posted

0 Komentar

Base64 adalah kelompok skema pengkodean binary-to-text serupa yang mewakili binary data dalam format string ASCII dengan menerjemahkannya ke representasi radix-64. Istilah Base64 berasal dari penyandian transfer konten MIME spesifik. Setiap digit Base64 mewakili tepat 6 bit data. Tiga 8-bit byte (yaitu, total 24 bit) karena itu dapat diwakili oleh empat digit 6-bit Base64. Itulah penjelasan singkat mengenai Base64 dari wikipedia yang diterjemahkan via google translate.
Secara khusus kegunaan base-64 gue juga kagak tauk, tetapi ane tahu dengan melakukan convert/encode tulisan yang terbaca bisa menjadi tulisan alien (alias menjadi deretan kode-kode bit!)

Dengan kelebihannya ini, kita bisa memanfaatkan dalam area postingan untuk melakukan encode/decode! Singkatnya apabila sobat mau menyembunyikan konten (tulisan) maka lakukanlah encode terlebih dahulu, yg kemudian secara otomatis akan di decode di area postingan? Contoh sederhana begini, AA Koben menulis abcde dalam bahasa base64, YWJjZGU= Saat sobat menuliskan YWJjZGU= di HTML Editor post blogger nanti akan langsung tertuliskan abcde pada artikel post! Tetapi ketika dilakukan View Page Source tidak akan ketemu tulisan abcde!!!

Letakan script tepat sebelum/diatas taging </head> Klik kanan pada mouse, Save Link As dan lakukan hosting javascript berikut base64.min.js

Ketika sobat akan melakukan posting blog, jangan lupa tulisan/kode dilakukan encoding terlebih dahulu. Sesudah itu tulis dengan format di html-editor post blog seperti berikut

<script type="text/javascript">document.write(Base64.decode("KODE/TULISAN HASIL ENCODING TARUH DI SINI"));</script>

Tools encodingnya mshang.ca/base64-js

Harap diperhatikan, penulisan dalam bentuk script/base64 katanya buruk bagi index/SEO. Saya tidak bertanggung jawab atas itu semua :D

Bonus:

The "Read more" link - GSAP 'Menu' Experiment - Reactive Photo Gallery - CSS Text Reveal - Useful Broken Images - Search field animations with material icons - Diagonal stripe border effects - 100Day CSS Challenge #40 - Sea - Mobile Nav bar - Ribbon Menu - Glitch Photo Filters CSS - Image Transitions Using SVG Filters - Image Transition On Scroll (GSAP) - CSS3 trendy retro photo effect - CSS Gradient Hover Effect - photo effect - Click to Copy String Interaction - Buddons - 3D Navbar

▼ ▲

Top Level Information 2018

0 Komentar

Informasi berharga di tahun 2018 bagi blogger yang tidak mau di panggil ketinggalan berita up to date, from Mr. Beben Koben in the house :-) Pada postingan sebelumnya mengenai text editor, gue punya satu rekomendasi lagi bagi kalian untuk melihat Textbox.io Bagi kalian yg berminat, silahkan dipelajari lebih lanjut, ini saya kasih mode offline-nya textbox.io.7z ;))
Mungkin di antara elo-elo semua sudah tidak asing lagi dengan Font Awesome? Jangan dikira tidak akan ada saingan, are you ready for Fontisto :-? Kalau mau memepelajarinya, ini saya kasih fontisto mode off-line tetapi masih versi v=201 :D

Sudah 2 siki info tuh gue berikan! Lanjutkan inpoh dengan yg lagi mencari tutorial ttg zoom image you must check this out swapping images with the sizes attribute. Saya membaca artikel dari Philip Walton, walau kagak ngerti juga! Satu hal yg menjadi perhatian ane adalah halaman demonya tentang Responsive Components! Kalau anda mau berkreatifitas sedikit, bisa dijadikan halaman dashboard admin tuh :-" Kalau malas buatnya silahkan sikat sufee admin dashboard by puikinsh. Nih juga niiih hajar WebSlides. Mau memanipulasi gambar dengan HTML5 canvas, gua beri blend.js
Build a download button full of micro interactions for stylish blogger.

Apalagi yaaa...

Tidak punya aplikasi photoshop gunakanlah versi online

Pixlr Editor
Pixlr Express
Photopea
Photoshop Online Free
Sumopaint Lite
miniPaint

Bagi kalian twitter maniac Twemoji Awesome. CKEditor 5 v10.0.0 sudah keluar loh! Udahan ajah yah bro, capek ngeutik, males :P

BONUS:

goldfishes - CSS-Only Responsive Layout with Smooth Transitions - One page scroll Pure CSS - Viewport Units Flexible Layout - Image Effects - Tumblr photogrid/photoset with flex-box in place of JavaScript - font combination generator - nexus like menu - Two Face slider - Full Page CSS Only Parallax 📸 Gallery - @keyframers 1.2.0 Reactive Animations with RxJS - Popup / Overlay - Mobil Menu - Sidebar - Navigation - 3d 文字跑马灯特效 - expanding link indicator - [JS/CSS] Flat Gradient Generator - Reading Progress Bar

▼ ▲

Are You Looking for Image Editor

1 Komentar

▼ ▲

Update Post in 10 November, Merry Heroes Day :D

2 Komentar

Tidak dapat bahan postingan aneh, jika begini keadaan maka harus melakukan update post dengan topic yang sudah pernah di buat :D Sobat masih ingat dengan hello bar widget for blogger? In arsip and you can get here make sticky bar in blogger like as hello bar. Masih sedikit membawa embel-embel JavaScript pada markup HTML. Sekarang 100% akan Koben sharing bagaimana cara membuat CSS3 notifications ala hello bar created by master Acidmartin.
Hi guys, you can read here developer.mozilla.org/en-US/demos/detail/css3-notifications-bar

Kode sebetulnya tinggal comot or langsung download resource. Karena AA Koben orang baik banget'z di seluruh dunia, gue kasih kode modifan agar full stylish dikit ;)) Gue tambahkan efek CSS3 slide right tuing-tuing. Ketika muncul datang dari sisi kiri menuju kanan secara cepet kemudian ada tuing² kiri-kanan bentar :D
Ambil kode CSS dari sini CSS3 notification bar Pasangkan markup HTML berikut

<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">
    <input type="checkbox" id="aspal-hellobar-switcher" checked="checked" />
        <label for="aspal-hellobar-switcher">
            <span>&#8679;</span>
            <span>&#8681;</span>
        </label>
<div>
 <div>BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE... Ain't it cool?</div>
</div>
</div>

Save.
Satu updetan beres, lanjut bro...

Ooops ada kelupaan, jika sobat memasang kode CSS dari web sumber, tengok pada bagian kode

.aspal-hellobar.aspal-hellobar-e34c26 > div,.aspal-hellobar.aspal-hellobar-e34c26 label span {
background: #e34c26;
}

Itu merupakan jenis gaya yg ada, terdapat 5 gaya varian warna, sobat pilih salah satu, dan rubah juga code pada markup HTML<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">Kalau mau memilih efek gaya (tuing-tuing) silahkan baca miscellaneous hover effects using CSS3.

Kotak pencarian atau search box merupakan salah satu bagian dasar yg mesti ada kehadirannya pada sebuah web/blog. Untuk memudahkan dalam melakukan explorasi konten ;) Salah satu kotak pencarian full stylish karya master Marco Biedermann, Mac OS X 10.10 Yosemite Search codepen.io/m412c0/pen/dvFCB

.search {
width: 100%;
}
.search .field {
position: relative;
}
.search label {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAxElEQVR4AXXPIUuDcRDA4Zv4AUSwTLEKVoNlySyCYLO98CCsahGrX0AW/QhmBRHEJghLS4JFBBXDgrJi2In78w8v4v3S8XDh4nd0DTxLEzd2RC2EnrH07trQVDrXqbhs7FvfnBDWDKWTigOpL2oWvZpYKPjio1zVHEt7BdOtaLUtHRX8MmqjRjooeCVttPBOWi+4JT1aLaDjVLpU/5ytn840Dj1IaWSpYmi8yVlTF54qh9K8nn27usJK5fC3yvfhPx7a/AE9dYwDEfKrlAAAAABJRU5ErkJggg==) no-repeat 0 50%;
color: #b2b2b2;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
transition: left .4s, transform .4s;
padding-left: 1.25em;
}
.search .input-search {
border: 1px solid #dfdfdf;
border-radius: .25em;
box-shadow: 0 1px 0 #bfbebf;
display: block;
font: 400 1em/1.5em sans-serif;
padding: .5em 1.75em;
width: 100%;
}
.search .input-search:focus + label, .search .input-search:valid + label {
left: .5em;
transform: translate(0, -50%);
}
.search .input-search:valid + label {
text-indent: -9999px;
}

<form action="http://YOUR-ADDRESS-BLOG.blogspot.com/search" class="search">
    <div class="field">
      <input type="text" class="input-search" id="input-search" name="q" pattern=".{1,}" required="required">
      <label for="input-search">Search here...</label>
    </div> 
</form>

Change YOUR-ADDRESS-BLOG with your address blog.

Update terakhir yg ketiga tentang markdown Walau jauh dari topic, tetapi tools satu ini unik untuk diketahui :P Silahkan meluncur github.com/jonschlinkert/remarkable

Happy update \m/

▼ ▲

Pada postingan sebelumnya gue sudah berbagi tool free data URI encoder with preview. Sekarang AA Koben akan berbagi informasi menarik dari selection good resources yang berarti berbagi link source pilihan! Dari labs.hyperandroid.com sobat bisa sikat tool CSS spriter labs.hyperandroid.com/static/texture/spriter.html Jika kepengen melihat ada berapa jumlah kata dari sebuah script yg panjang amat, silahkan coba tool JavaScript minified code word counter jsdo.it/uupaa/JSWordCounter Kalau kepengen meminimize kode CSS, anda layak coba kreasi dari www.phpied.com/cssmin-js try it tools.w3clubs.com/cssmin
Tiga biji saja toolnya yah, kebanyakan nanti malah ngiler ;)) Eh satu lagi aja deng a super friendly chrome extension for designers to test responsive websites www.dimensionstoolkit.com/a

Menemukan satu artikel unik, cara memanipulasi gambar dengan teknik animating images with css keyframes read here www.pencilscoop.com/2014/04/animating-images-with-css-keyframes Dari web developer mozilla Koben mendapat pilihan:

developer.mozilla.org/en-US/demos/detail/vttmaker
developer.mozilla.org/en-US/demos/detail/jsontreeviewer
developer.mozilla.org/en-US/demos/detail/jskeysconfig-generator

Sekedar buat iseng have fun dengan bookmarklet script dear sir or madam meowni.ca/posts/dear-sir-or-madam Pure CSS components memberikan 5 pilihan komponen CSS yg bisa langsung di pakai. Komponen tersebut meliputi carousel, collapse, dropdown, modal and tab yg keseluruhan di bangun dengan kode CSS. Please visit www.felipefialho.com/css-components/index.html
Mau mengecek browser kalian apa versi baru atau masih belum up to date, silahkan bermain dengan GoyaPixel jackschaedler.github.io/goya
Bikin kopi dulu dan bawa cemilan, masih panjang acara kita :))

By guest author from CSS-Tricks berbicara mengenai reading position indicator css-tricks.com/reading-position-indicator Nah ini buat pembanding saja oke codepen.io/pankajparashar/pen/towxF, codepen.io/jonstuebe/pen/KrIex & bit.ly/1noLeAm Issue tentang icon pakai penggunaan font merupakan salah satu tutorial yg sedang berkembang...

game-icons.net
perfecticons.com
ionicons.com
iconion.com/index.html
www.uiplayground.in/css3-icons
www.carlosjeurissen.com/google-icons
drinchev.github.io/monosocialiconsfont

Mau dikunjungi silahkan, mau tidak tapi harus di lihat ... :D
BONUS:
codepen.io/jakealbaugh/pen/Ckxsg - codepen.io/simeydotme/pen/jgcvi - codepen.io/vsync/pen/upeBw - codepen.io/websiddu/pen/IGqte - codepen.io/johndjameson/pen/tLzCl - codepen.io/Kseso/pen/wBlnH - codepen.io/andreasstorm/pen/kAuJd - codepen.io/icutpeople/pen/cpfeb - codepen.io/Stanssongs/pen/GgvbD - codepen.io/jordanoaragao/pen/Dsvkn - codepen.io/yoksel/pen/fsdbu - codepen.io/Hiswe/pen/yszkE - codepen.io/alanrsoares/pen/hBosn - codepen.io/mariusbalaj/pen/GcIaj - codepen.io/dualmoon/pen/sCKhy - codepen.io/natewiley/pen/zDIeC - codepen.io/ScottMarshall/pen/lFuqG - codepen.io/macreart/pen/FKfEr - codepen.io/rachelnabors/pen/AeEHw - codepen.io/motorlatitude/pen/hipIl - codepen.io/tylerfowle/pen/Fbnor - cssdeck.com/labs/nav-social-media-concept - cssdeck.com/labs/under-construction-tape - cssdeck.com/labs/full/loaderskit - cssdeck.com/labs/wrap-image-in-3d-cylinder-2 - cssdeck.com/labs/css2-spotlight - cssdeck.com/labs/bgcanvas1 - www.webdesigndev.com/freebies/free-css-buttons-icons

Happy blogging \m/

▼ ▲

Selection Good Resources March 2014

0 Komentar

▼ ▲

Make Simple Editing Editor use Attribute Contenteditable

1 Komentar

Beginilah kalau sedang tidak ada aktifitas. Sobat masih ingat dengan artikel merubah browser menjadi seperti notepad? Ternyata ada satu attribute HTML5 yang digunakan yaitu contenteditable Atribut contenteditable memiliki fungsi yakni menentukan apakah isi dari elemen dapat diedit atau tidak. Cari referensi sendiri² mengenai hal itu, banyak kok library web yg menerangkan ;)) Berikut alakadar link sources:

What is the Specific of Contenteditable!
html5demos.com/contenteditable
developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
akatov.github.io/angular-contenteditable
www.hongkiat.com/blog/html5-editable-content
codepen.io/matt-west/full/gtruC
simonewebdesign.it/blog/how-to-make-browser-editor-with-html5-contenteditable

Ada satu yg menggelitik dan kelupaan sama gue nih ;)) AA baca mengenai CSS live editing editor snippet dari www.webdeveloperjuice.com/2013/12/23/css-live-editing-editor-snippet Ketika melakukan penulisan bahasa CSS secara inline styles, kita dapat melakukan perubahan seketika. Berikut demo supaya jelas...

Result

My Blog

Edit Here

Coba gantikan value yg berada pada kotak Edit Here?

<p><a class="link" title="Tutorial Blog for Stylish Blogger" href="http://beben-koben.blogspot.com/">My Blog</a></p>
<style>
a.link {font-size: 21px;text-align: center;padding: 20px;display: block;}
.editable {display: block;font-size: 15px;color: #333;padding: 10px;border: 2px dashed #ccc;font-family: 'Courier New',Courier,sans-serif;white-space: pre-wrap;max-height: 212px;overflow: auto}
.editable:focus {outline: none;border: 2px solid #ccc;}
</style>
<style class="editable" contenteditable="">a.link { 
   color: #038;
   border: 2px dashed gray;
   background: lightgray; 
}</style>

Ternyata atribut contenteditable jugalah yg mendasari terciptanya Rich-Text Editing. Buka halaman berikut, scroll ke bawah dan dapatkan source kode rich-text editor example developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

Bonus:
templatespicy.com/20-best-free-blogger-templates-2014

Happy contenteditable \m/

▼ ▲

Tutorial Simple But Menggereget

4 Komentar

Menuju penghabisan tahun 2013 menyambut pengawalan tahun 2014 mari kita cooling down sejenak. Berjibaku dengan coding ruwet kadang membuat sumpek bin demet! Yuk kita flash back dengan koding yg simple and sederhana! Dalam berkreatifitas kadang dengan kode secuil pun bisa menjadi full stylish :D Semua tergantung kebutuhan dan selera masing² tentunya. AA Koben mau sharing & caring beberapa tut's lawas. Siapa tauk sobat teringat akan indahnya kesederhanaan itu :"> Klik link berikut, press Ctrl + U untuk mendapatkan code ;)Info Bar StatikDari halaman github milik Hasin Hayder github.com/hasinhayder, 2 artikel simple terpilih yaitu image caption hover animation github.com/hasinhayder/ImageCaptionHoverAnimation & sticky social bar github.com/hasinhayder/StickySocialBar
Untuk hover image gue sudah buat sendiri, silahkan sikat jika memang berguna. Begini...

Dilihat, diterawang apakah memang terpakai atau tidak! Itu trik menyembunyikan image dengan menempatkan 1 image pokok di depan yg menjadi penutup image dibelakangnya! Ganti gbr pokok (lambang blogspot) dgn gambar kalian.

.bingkai {
  position: relative; 
  width: 500px;
  height: 300px;
  margin: 5px auto; 
  border-radius: 10px;
  border: 10px groove #000;
}
.bekbel, .bekbel {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 500px;
  height: 300px;
  position: absolute;
  background-size: cover;
  background: transparent none no-repeat 50% 50%;
}
/*
.bekbel {
  background: #222;
}
*/
.bekbel {
  opacity: 1;
  transition: all .5s ease;
  background-image: url(URL-IMAGE-POKOK-HERE);
}
.bekbel:hover {
  opacity: 0;
}

Planing syntax

<div class="bingkai">

<img src="URL-IMAGE-HERE" class="bekbel"/>

<div class="bekbel"></div>

</div>

Sticky social bar alias membuat links berbagi ke web jejaring dengan gaya setiki (diam menjedog) Sudah tidak asing lagi memang trik ini, banyak sekali bahkan www.addthis.com sudah membuatkan untuk para pemakai dengan bermacam-macam gaya b-) Gue akan kupas yg dari master Hasin Hayder. Why!!! Because di sana ada snippet inline CSS filter tepatnya di make image to grayscale use SVG.

.sticky-container {
 top: 100px;
 width: 200px;
 right: -119px;
 position: fixed;
}
.sticky li {
 height: 43px;
 color: #efefef;
 cursor: pointer;
 list-style-type: none;
 background-color: #333;
 margin: 0px 0px 1px 0px;
 -webkit-transition:all 0.25s ease-in-out;
 transition:all 0.25s ease-in-out;
        filter: gray; 
        -webkit-filter: grayscale(100%); 
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
}
.sticky li:hover {
 margin-left: -101px;
 filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.sticky li img {
 float: left;
 width: 32px;
 height: 32px;
 margin: 5px 5px;
 margin-right: 7px;
}
.sticky li p {
 padding: 0px;
 margin: 0px;
 line-height: 43px;
}

Markup HTML

<div class="sticky-container">
<ul class="sticky">
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 1</p></a>
</li>
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 2</p></a>
</li>
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 3</p></a>
</li>
<li>
<a href="YOUR-LINK" title=""><img alt="" src="LINK-IMAGE-HERE" />
<p>TITLE 4</p></a>
</li>
</ul>
</div>

Isikan tulisan LINK-IMAGE-HERE dengan link image beresolusi 32 x 32 pixel.
Demo hasinhayder.github.io/StickySocialBar
Bonus:
blogsizzle.com/templates/free-blogger-templates - blogsizzle.com/blogging/best-minimalist-blogger-templates - designmaz.com/2013/12/responsive-blogger-templates.html - haeckdesign.com/freebies/icons/css3-button-set

Happy coding \m/

▼ ▲

Good Apps from MichΔΣl owner mydelivery.net

2 Komentar

Dari sekian banyak situs bertebaran, pasti mempunyai konten hebat dengan kadar yg berbeda-beda pula. Seorang bernama MichΔΣl punya satu situs dengan konten yg gue pikir cukup full stylish! Sekilas tentang MichΔΣl...

MichΔΣl seorang yang banyak bakat. Software/Web/Game Development, produser, video special effects, peneliti, inventor, aktivis, hobi, dll. Seorang yang sangat produktif sehingga dalam waktu senggang, kerap menikmati menulis tentang sastra, merancang, mengembangkan, atau apapun yang membuat dia produktif, dan menghibur dirinya :D Michδσl suka mendorong batasannya dan mencapai kejayaan, baik teknis, fisik, psikologis, ataupun lingkungan.

Pertama-tama yg akan gue informasikan mungkin sudah tidak asing lagi my bro, it's all about HTML editor

mydelivery.net23.net/dev/HTML%20OnLive%20Debugger/app

Setelah disuguhi HTML onlive debugger, sekarang mari kita tengok dynamic content generator. Apps generator sederhana untuk membantu kita membuat beberapa syntax dasar seperti div, button, link, image, list, text-input, radio-buttons dan check-box. Bisa di DL juga itu, dan sobat bisa melakukan perombakan/penambahan properti generator (kalo bisa itu juga) :P

mydelivery.net23.net/dev/dynamic_content_gen

Selanjutnya embed google font explorer, yang mana kita bisa melihat tampilan font yg kita pilih dari google web.

mydelivery.net23.net/dev/Google%20Font%20Explorer

Mau melihat dalaman sebuah situs, cara tercepat dengan menggunakan tehnik tools view source.

mydelivery.net23.net/dev/View%20Source%20Browser

Pengen mencoba HTML5 preview?

mydelivery.net23.net/dev/codemirror.html

Satu tab browser biasanya hanya dapat membuka satu url, bagaimana bila mau membuka lebih dari satu? Cobalah tools berikut ini

mydelivery.net23.net/dev/Mobile%20Tabbed%20Browser

Karena lumayan banyak aplikasi yg bisa di lihat, silahkan meluncur sendiri saja deh mydelivery.net23.net/dev Seperti biasa bonusnya AA Koben akan memberikan links resource keren pupnya ciamik abizzz.

cdpn.io/FKlhx cdpn.io/DeuqL cdpn.io/CALIH cdpn.io/zGnwq cdpn.io/zfiBo cdpn.io/aguAD cdpn.io/tnzwj cdpn.io/jceEH cdpn.io/utAIk cdpn.io/luCei cdpn.io/Hzrhf cdpn.io/glCDt cdpn.io/oKJps cdpn.io/jhpld cdpn.io/eivpf cdpn.io/Jxihf cdpn.io/lDEpo cdpn.io/wAqsB cdpn.io/zqFGh cdpn.io/Fypuw cdpn.io/wtIxy designrshub.com/2013/10/content-creation-tools.html

▼ ▲

Selection Good Resources in October

2 Komentar

▼ ▲

Selection Unique Code Snippets from CodePen

0 Komentar

▼ ▲

It's All About Markdown Syntax

6 Komentar

▼ ▲

Free Long Shadow Generator + Source Code

12 Komentar

▼ ▲

Trick Install Manual for Add-ons Mozilla and Extensions Google Chrome

16 Komentar

Sebagai calon seorang developer selain mempunyai ilmu koding/script salah satu faktor yang tidak kalah penting yaitu mengenal dekat dengan si penjelajah web (Web Browser) Empat yg umum dipakai mungkin internet explorer (IE), Mozilla Firefox, Opera dan Google Chrome. AA 'ben akan berbagi sedikit tips & trik nih kepada kalian seputar dunia browser Sobat kenal dengan istilah add-ons (for mozilla) atau extensions (for chrome) Intro dikit dulu kalo begitu

addons.mozilla.org, umumnya dikenal sebagai "AMO", merupakan situs resmi Mozilla untuk add-ons untuk perangkat lunak Mozilla, seperti Firefox, Thunderbird, dan SeaMonkey. Pengaya memungkinkan Anda menambahkan fitur baru dan mengubah cara browser atau aplikasi bekerja. Silakan melihat-lihat dan menjelajahi ribuan cara untuk menyesuaikan cara Anda melakukan hal-hal secara online.

Extensions adalah program software kecil yang dapat memodifikasi dan meningkatkan fungsionalitas dari browser Chrome. Anda menulis mereka menggunakan teknologi web seperti HTML, JavaScript, dan CSS.

Pada satu kejadian di hari eMMoh, Koben mendapatkan satu tragedi ide luar binasa! Begini bro... Bagaimana caranya menginstall addons/extensions secara offline? Offline disini memiliki artian sebagai berikut, memasukan file addons XPI or extensions CRX dari hasil download ke dalam komputer. Download file dari warnet, tetapi komputer kita ada di rumah!

Mau ora gelem berarti harus tahu triknya cara mendownload extensions/addons online for transfer to computer in the house :D Begini proses kerjanya...

Tricky Mozilla Add-ons

Pertama-tama pilihlah addons yang mau di ~~unduh~~ di A M O Setelah di pilih, ambil link dengan cara Copy Link Location Ex link addonshttps://addons.mozilla.org/en-US/firefox/addon/firebug/Bukalah satu browser selain MOZILLA. Letakan link addons pilihan pada address bar diikuti dengan enter. Screenshot gue membuka dengan google chrome.

Klik tombol yg bertuliskan Download Now maka akan terbuka popup kecil. Pilihlah link DL dengan tulisan download anyway.

Maka nanti akan dapat file ber-ekstensi .xpi (firebug-1.12.3-fx.xpi) Save in di lokasi aman (jangan lupa) File addons sudah didapatkan, sekarang tinggal cara memasukannya ke dalam browser mozilla. Pencet kombinasi kibor Ctrl + Shift + A

Pada pojok kanan atas ada sebuah icon bulat mirip roda? Klik lah dengan di ikuti opsi Install Add-ons From File... Ambil file dari data file yg tadi di save (jagnan lupa)!

DONE.
Bonus: www.accessfirefox.org/Install_Addon_Manually.php

Tricky Chrome Extensions

Pertama-tama buka halaman chrome web store Sebelah kiri pada navigasi pilih tulisan Extensions. Klik di sini kalau takut nyasar destination Pilih extensions yg diinginkan. Contoh link extension google chromehttps://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhmKoben memilih link ext. opsi Developer Tools milih Web Developer. Ada 2 cara untuk mengunduh file ext kita tersebut. Cara tweak link & jasa layanan web ;) Perhatikan syntax link ext. targethttps://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhmLihat deretan kode paling belakang bfbameneiokkgbdmiekhjnmfkcnldhhm Sudah di ambil kode tsb, rubah dan rangkai menjadi sedemekian rupahttps://clients2.google.com/service/update2/crx?response=redirect&x=id%3Dbfbameneiokkgbdmiekhjnmfkcnldhhm%26ucSimpan pada address bar mozilla, enter. Cara berikutnya dengan layanan web chrome-extension-downloader.com masukan URL pada kotak yg tersedia, jebret save deh. Jika ada warning expired coba lagi dengan cara refresh. Jika masih tidak bisa, kemungkinan extensions chrome yg dimaksudkan tidak ada alias GONE.

Cara memasukan file extensions (Web-Developer_v0.4.4.crx) ke dalam browser chrome. Buka browser chrome kalian, perhatikan pojok kanan atas yg di beri icon berlambang ☰ Klik icon tersebut kemudian sorot ► Tools ► Extensions kemudian klik.

Setelah di klik maka akan terbuka page extensions. Lakukanlah Drag & Drop file extensions hasil unduhan.

DONE.
Demikian kiranya tragedi ide bulan oktober cukup 2 browser saja, soalnya itu yg bisa aku sharing en caring, dan itupun capek sekali bikin postnya #:-S Semoga bermanfaat :)
Happy blogging \m/

▼ ▲

Complete Resources in September 2013 by Beben Koben

17 Komentar

Pernah membaca artikel dengan judul weekly free resources for designers and developers atau mirip dengan itu good resource in bla-bla 2013! Isinya tidak lain yaitu informasi uptodate yang sedang terjadi di dunia developer, design, coding, tools, and script. Beben Koben selaku bloglang anu ganteng kalem tea sudah memilihkan dari berbagai links site keren punya, akan berbagi resource full stylish untuk kalian semua :) Satu pesan AA kepada sobat semua, tolong link yg sudah gue kasih minimal kunjungin lah! Karena siapa tauk konten pada site yg di tuju tersebut berisi info yg kalian cari-cari selama ini :D Dari kegiatan selewar-selewir, yuk kita mulai acara blog walking ini dengan mengucapkan Bismillaahirrohmaanirrahiim...

www.wdstandards.com/html5-and-css3-navigation-for-your-inspiration-and-ideas - www.psdtohtmlhint.com/cheat-sheets-for-designers-and-developers - lab.ejci.net/favico.js - nthmaster.com - designmodo.com/google-maps-jquery-flat-ui - www.designrazzi.com/2013/free-css-html5-jquery-search-forms - www.dynamicdrive.com/dynamicindex1/ddiconmenu.htm - acidmartin.wordpress.com/2013/09/03/acidjs-ribbon-3-0-is-out - www.pixxelfactory.net/jInvertScroll - cloudconvert.org - thepetedesign.com/demos/jquery_flat_shadow_demo.html - www.script-tutorials.com/night-sky-with-twinkling-stars - www.creativebloq.com/create-slick-html5-animations-9134432 - www.designrazzi.com/2013/css3-website-tools - kumailht.com/responsive-elements - blog.templatemonster.com/2013/09/18/tutorial-how-to-code-flyout-navigation-wheel-menu - www.beelinereader.com/bookmarklet

Itu web site terpilih, yg mana isi informasi dijamin prikitiw punya. Dari web github AA memilih...

github.com/dukerson/jquery.tweetable.js - github.com/burakson/fseditor - github.com/jlukic/Semantic-UI - github.hubspot.com/vex/docs/welcome - vdw.github.io/Tabslet - maroslaw.github.io/rainyday.js - github.hubspot.com/pace/docs/welcome

Bagi blogger yg memang haus akan ilmu, tidak salah kalian menclok di blog aneh aku ini. Walau perjuangan membukanya memerlukan kesabaran :"> Setelah git-hub diacak-acak kini giliran codepen and cssdeck ;))

cdpn.io/DCvFm - cdpn.io/lHpnK - cdpn.io/eGCJu - cdpn.io/gmKwk - cdpn.io/nrFHe - cdpn.io/pAecq - cdpn.io/jCuKa - cdpn.io/abvFk - cdpn.io/svupq - cdpn.io/Klieu - cdpn.io/HlJtD - cdpn.io/KbhmA - cdpn.io/sBAjv - cdpn.io/kysHq - cdpn.io/Cdubx - cdpn.io/JqtGI - cdpn.io/oxsHJ - cdpn.io/qdpvw - cdpn.io/kHdlD - cssdeck.com/labs/full/css3-javascript-pure-dropdown-menu - cssdeck.com/labs/full/isiatjul - cssdeck.com/labs/full/floating-links

Sudah mendengar tentang togetherjs.com embed chat dimana saja asalkan kita menaruh javascript togetherjs.js? Jika ada sobat yg sudah memasangnya, berikut address together Koben goo.gl/iTueVG Kalau yg ini saya sendiri kurang paham developer.mozilla.org/en-US/demos/detail/peerjs

Semoga berguna :)
Happy blogging \m/

Tutorial Blog for Stylish Blogger. Full Hacked Blogspot come from Selected site. Great Hack, the best Resources, good Snippet coded, Free Opensource

jspaint

miniPaint

webgl-filter

pm-image-editor

JsImgEditor

nuophoto

jie

tui image-editor

summer

iwage

imageeditor by ckm100

photo-editor

Sino Image Editor

Image Editor by Tom Yuan

Html Image Editor

editest

Compressor.io

TinyPNG

Compress PNG

Kraken.io

Result

Edit Here

Tricky Mozilla Add-ons

Tricky Chrome Extensions

My ETC

KATEGORI

Contact Form Beben

MISC

Resources

FACEBOOK PAGE