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 ☺

Resources

21 Februari 2015

UNTITLED

21 Februari 2015

0 Komentar WTF
Pada dasarnya trik ini memiliki fungsi hampir sama dengan tutorial membuat screensaver untuk blog. Jika pada trick screensaver mempunyai tujuan yakni menyembunyikan konten dan digantikan dengan tampilan lain, kesempatan sekarang AA Beben akan mencoba bagaimana cara membuat Eyes Saver! Eyes-saver adalah secuil deretan kode CSS untuk menampilkan efek redup-redup (rgba) supaya ketika menemukan web/blog dengan tampilan warna yang kontras mata kita akan terbantu terlindungi dengan mengaktifkan fitur eyes saver :D
Ilustrasi on sekrin siut:screen-saverDalam kasus ini, penanaman kode rgba(0,0,0,0.3); sebagai warna background akan membantu berfungsi sebagai filter kontras cahaya yg berlebihan (mencolok)! Singkat cerita, gue mau kasih tau bagaimana cara membuat layar monitor anda sekalian menjadi rgba(0,0,0,0.3) :))
.container_ {
transition: transform 0.5s;
backface-visibility: hidden;
}
.eyesSaver-Overlay {
display: none;
background: rgba(0,0,0,0.3);
}
.eyesSaver-Overlay,.eyesSaver-Overlay a {
position: fixed;
z-index: 99;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.button {
display: block;
float: right;
background: #fff;
padding: 5px 10px;
border-radius: 50%;
font-size: 1.3em;
transition: all 0.3s linear;
}
.button:before {
content: '\2600';
}
.button:hover {
box-shadow: 0 13px 25px 0 rgba(0,0,0,0.3);
}
nav:target ~ .container_ .eyesSaver-Overlay {
display: block;
}
.nav1 {
bottom: 5%;
right: 4%;
position: fixed;
}
Tempatkan syntax HTML di dalam tag <body> sebelum tag </body> template.<nav id="slideLeft"></nav>
<div class="container_">
<div class="eyesSaver-Overlay"><a href="#"></a></div>
<div class="nav1">
<a href="#slideLeft" class="button"></a>
</div>
</div>
DEMO
Bye :-h

4 Komentar WTF
Ternyata begini rasanya jika sudah dihinggapi virus malas, source developer lagi pada sepi plus blank idea :D Gue angkat kembali tema kojo pada blog ini yaitu HTML editor with live preview supaya para pengunjung tidak kecewa! Kok nggak update yaaa :-" Tidak sengaja menemukan ketika browsing dengan keyword code tester masuk ke bagian dalam halaman jelajah google! AA tidak akan menjelaskan apa itu code tester? Satu yg pasti mempunyai fungsi sama dengan playground HTML editor. Biasalah bro, bermain sambil belajar ;))

Untuk mempersingkat waktu, dipersilahkan bagi kalian yg sudah bisa mengambil sendiri source kode dari sumber. Get Code Tester www.jschneider88.com/codetester. Sama gue sudah dimodif dengan menambahkan syntax-highlighter by codemirror! Pada bagian navigasi telah disisipkan form color Spectrum by @bgrins bgrins.github.io/spectrum.
Screenshot...Code-TesterSeperti yg sudah saya utarakan di atas, mendapatkan code-tester berada di halaman dalam google entah page berapa! Sebagai contoh dengan keyword serupa, ternyata playground HTML editor masih ada :D Silahkan lihat sendiri:

  • Online Code Tester.
  • www.lutanho.net/goodies/codetester.html
  • Demonstration HTML Test Page.
  • www.play-hookey.com/htmltest
Sengaja saya comot contoh tersebut, karena teknik penampilan page.html menggunakan penulisan syntax iframe Semoga owner web tidak keberatan juga saya sikat source code untuk dibagikan kepada para blogger :"> Amal ibadah itung-itung ;))
Silahkan download ketiga apps.html tersebut bagi yg berkenan. Absolutely this is for learning and work offline mode.

>> Code Tester unduh via 4shared
www.4shared.com/zip/Z0veh_aFce/Code_Tester.html
>> Download Code-Tester.zip in Ziddu
downloads.ziddu.com/download/24467777/Code-Tester.zip.html

Kekurangan modifikasi dan penambahan fitur silahkan add masing-masing ya :)) Soalnya nggak ada waktu buat bagus-bagusin...UGH!!! :P

Happy coding \m/

1 Komentar WTF
Pada tanggal 4/03/2015 master Mohammad beserta STCnetwork team telah membuat Blogger Shortcode Plugin. Blogger short code plugin adalah sebuah sistem yang akan membuat web/blog design dan penciptaan widget dengan hanya menggunakan script plugin (a macrocode)! Adapun fitur yg ditawarkan yaitu agar kita dapat menyisipkan video, audio, photo gallery, tabs, accordions etc. Fitur tersebut dapat langsung berfungsi pada post area, widgets, side-bar, kolom komentar dan dimana lagi juga bisa (still on work)? Dengan begini proses Embedding Objek di Blogger tidak pernah semudah sebelumnya.

Blogger shortcode adalah satu baris macrocode yang berisi satu set instruksi yang memungkinkan kita melakukan hal-hal yang bagus dengan upaya minimalis. Shortcode dapat membantu menanamkan file atau membuat objek di BlogSpot blog dengan satu baris kode yang biasanya akan memerlukan banyak kerja kompleks, kode panjang and jelek :P

Sekarang anda dapat dengan mudah memasukkan benda seperti Video, Audio, File, slideshow dan semua elemen web penting seperti akordion, tab, tombol warna-warni, kotak dll ke dalam Header, Sidebar, Footer, Pos, Pages, Judul dan luar biasa bahkan di dalam komentar! Hal ini tidak memerlukan pengetahuan tentang HTML, CSS atau JavaScript. Plugin ini sangat ringan dan multiple-embed-support yg akan mengurangi waktu loading halaman beban sebesar 50%.
Singkat cerita inspirasi datang hampir sama dengan kepunyaan shortcode wordpress!

List of Supported Shortcodes

Sejauh ini telah dikembangkan sekitar 10 shortcode dan rencana ke depan untuk dikembangkan lagi sekitar 50 shortcode insya Allah dalam bulan-bulan ini. Shortcode akan dibuat berdasarkan kepentingan dan kegunaan mereka.
Berikut ini adalah shortcode yg sudah dikembangkan sejauh ini.
ShortcodeDefinisi
[accordion]Membuat daftar item secara vertikal ditumpuk yg mana setiap item dapat "memperluas" atau "ditarik" untuk mengungkapkan isi yang berhubungan dengan item. Item dapat diaktifkan dan dinonaktifkan dengan mudah.
[tab]Widget tab memungkinkan beberapa dokumen atau panel yang akan terkandung dalam satu jendela, menggunakan tab sebagai widget navigasi untuk beralih antara set dokumen.
[code]Menampilkan syntax Highlighter yang mempertahankan format asli dari kode sumber.
[quote]Membuat blockquote yg fullstylish.
[button]Menyisipkan tombol CSS3 berwarna-warni.
[icon]Masukan ikon FontAwesome di mana saja dengan dukungan pilihan kustom.
[soundcloud]Memasukkan embeds soundCloud track.
[dailymotion]Memasukkan embeds video dailymotion.
[divider]Menyisipkan horizontal separator untuk membagi bagian, juga mengandung tombol Back To Top
[num]Menyisipkan a number enclosed inside a circular background.
[warning]Menyisipkan kotak warning message.
[success]Menyisipkan kotak sukses message.
[alert]Menyisipkan kotak alert message.
[info]Menyisipkan kotak dengan beberapa info message.
[update]Menyisipkan kotak dengan update status message.
more on!it's way . . .

Langkah-langkah Instalasi

Ikuti langkah-langkah berikut untuk menginstal Shortcode Plugin ke dalam template blogger kalian.
  1. Go To Blogger > Template > Backup Download full template kalian!
  2. Click Edit HTML
  3. Press Ctrl + F, search </body>
  4. Paste file dynamically updated JS tepat diatasnya.
  5. <!-- Blogger Shortcode Plugin Dynamic JS File --> <script src='http://downloads.mybloggertricks.com/shortcodes.js' type='text/javascript'></script>
  6. Kemudian search <head>
  7. Pastekan file CSS berikut tepat di bawahnya
  8. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
    Perhatikan bahwa dalam kode di atas telah menyertakan versi terbaru dari jQuery dan FontAwesome. Saya menyarankan agar menggunakan versi ini bukan versi lama, dan mungkin sobat sudah menggunakannya.
  9. Save & done.
Gunakan Shortcode Plugin Dynamic JS file bawaan, karena file shortcodes.js akan selalu diperbaharui.

Shortcode Syntax

Shortcode memiliki nama dan attributes. Attributes adalah pilihan yang membantu mengkonfigurasi objek. Shortcode dilambangkan dengan tanda kurung persegi [ Square brackets ]. Square brackets dibuka & ditutup seperti HTML tetapi dengan format yg lebih sederhana (mirip dengan markdown)
Ex:
Misalkan sobat ingin memasukan embed video dari dailymotion ke dalam postingan![dailymotion src="x2lhjki"][/dailymotion]
lebih sederhana
[dailymotion src="x2lhjki" /]
Sekarang jika sobat ingin mengubah warna tombol pemutar, menyembunyikan informasi player dan mengedit dimensi player, maka kita dapat memasukkan atribut dengan syntax seperti dibawah ini[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0"][/dailymotion]
lebih sederhana
[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0" /]
Penulisan syntax diatas hanya contoh saja, rincian lengkap tentang cara menggunakan/menuliskan syntax shortcode-plugin akan dibagi dalam tutorial mendatang (UPDATED)

>> jQuery Accordion Shortcode For Blogger!
www.mybloggertricks.com/2015/04/blogger-shortcode-for-jquery-accordion.html
>> jQuery "Tabs Shortcode" For Blogger!
www.mybloggertricks.com/2015/04/create-tabs-in-blogger.html
>> Dailymotion Shortcode For Blogger!
www.mybloggertricks.com/2015/04/dailymotion-shortcode-for-blogger.html
>> SoundCloud Shortcode For Blogger!
www.mybloggertricks.com/2015/04/add-SoundCloud-Player-in-Blogger.html
>> Facebook Page Plugin Shortcode For Blogger
www.mybloggertricks.com/2015/04/add-facebook-page-plugin-in-Blogger.html
>> Create CSS3 Notification Boxes in Blogger
www.mybloggertricks.com/2015/04/message-box-shortcodes-for-blogger.html
>> YouTube Shortcode For Blogger Blogs!
www.mybloggertricks.com/2015/04/create-a-YouTube-Shortcode-in-Blogger.html
>> Syntax Highlighter Shortcode For Blogger Blogs!
www.mybloggertricks.com/2015/04/SyntaxHighlighter-Shortcode-for-Blogspot.html

Syntax Errors

Hindari membuat kesalahan-kesalahan ini saat mengetik nama shortcode dan attributes:
  • Jangan gunakan CamelCase atau UPPER-CASE untuk nama atribut atau nama Shortcode. Gunakan hanya huruf kecil.
  • Jangan menambahkan spasi di antara nama shortcode dan tanda kurung persegi.
  • Macro shortcode dapat menggunakan tanda kutip tunggal (') atau tanda kutip ganda (") untuk nilai atribut, atau menghilangkan tanda kutip sepenuhnya jika nilai atribut tidak mengandung spasi.
  • [table col='123' row=456] sama dengan [table col="123" row="456"]
  • Sebuah ruang (spasi) diperlukan antara nama shortcode dan atribut shortcode. Bila lebih dari satu atribut yang digunakan, setiap atribut harus dipisahkan oleh setidaknya satu spasi.
  • Shortcode parser tidak menerima tanda kurung persegi dalam atribut.
  • [tag attribute="[Some value]"]
Links source:
www.mybloggertricks.com
ask.mybloggertricks.com/t/which-blogger-shortcode-would-you-like-us-to-create/1684
Need Quick Help within 24 Hours? ask.mybloggertricks.com

0 Komentar WTF
local-storage-html5.Berbagi trik dan tutorial bagaimana cara melakukan penyimpanan (Save As) Fitur baru dari HTML5 yaitu local storage akan berperan penting dalam hal ini! Adapun sarana yang akan dipakai adalah browser engine. Singkat cerita kita akan mengefisiensikan fungsi dari browser yg kita punya untuk dijadikan penyimpanan file. File dapat berupa .txt, .html, or etc.
Apakah sobat masih ingat dengan trick <html contenteditable> Syntax tersebut adalah cara tercepat merubah mesin browser menjadi simple editing editor atau notepad in browser. Dengan melakukan pencet tombol Ctrl + S, sobat sudah dapat menyimpan data dengan ekstension .html

Berikut beberapa lists yg sobat bisa kunjungi untuk belajar:

  • Downloadify
  •    Sebuah javascript + flash perpustakaan kecil yang memungkinkan penciptaan dan men-download file teks tanpa interaksi server. github.com/dcneiner/Downloadify
  • a[download]
  •    'Buat file' menciptakan sebuah file txt dari konten daerah contenteditable. Hal ini dilakukan dengan menggunakan window.URL.createObjectURL (). File yang dihasilkan dapat diberi nama dan disimpan ke komputer pengguna dengan menetapkan download atribut pada link. html5-demos.appspot.com/static/a.download.html - updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side
  • Saving generated files on the client-side
  •    FileSaver.js memungkinkan Anda menyimpan kanvas langsung dan memberi mereka nama file, yang sangat berguna untuk mengedit HTML5 gambar, teks, dan rich text. eligrey.com/blog/post/saving-generated-files-on-the-client-side - eligrey.com/demos/FileSaver.js
  • Save/download data generated in JavaScript
  •    hackworthy.blogspot.com/2012/05/savedownload-data-generated-in.html
  • HTML5 localStorage
  •    Menyimpan data dalam browser dengan HTML5 localStorage API. toddmotto.com/storing-data-in-the-browser-with-the-html5-local-storage-api
  • Javascript to save Textarea as a txt file
  •    Sebuah proyek memungkinkan kita untuk menyimpan (download) isi bidang bentuk (dalam hal ini textarea) sebagai file ke komputer atau local-storage, dengan mengambil keuntungan dari HTML5 Blob object. runnable.com/U5HC9xtufQpsu5aj/use-javascript-to-save-textarea-as-a-txt-file
  • Loading, Editing, and Saving a Text File in HTML5 Using Javascript
  •    HTML dan kode JavaScript yang menggunakan beberapa fitur HTML5 (khususnya "Blob" objek, File API, dan "download" atribut "a" tag) untuk memungkinkan pengguna agar dapat memuat, mengedit, dan menyimpan file teks di komputer lokal mereka. thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip
Sebagai bonus AA Koben akan berbagi informasi how to make a ridiculously simple personal wiki! Adapun tujuan WIK dibuat by martinpllu adalah sbb:

  • Benar-benar sederhana.
  • Menyimpan semua data di browser localStorage
  • Tidak ada separate 'edit mode' seperti kebanyakan wiki. Halaman langsung bisa diedit.
  • Bekerja dengan baik pada mobile dan desktop.
  • Dukungan navigasi browser (back/forward/bookmark etc.)
  • Menyimpan semua data secara lokal pada perangkat.
  • Navigasi keyboard.
  • Bekerja secara offline.
Silahkan meluncur ke halaman source guna mendownload dan mempelajari lebih lanjut github.com/martinpllu/wik :D
al-Quran

MISC

Resources

1 2 3 4 5 6 7 8 9

FACEBOOK PAGE