Shortcode Plugin Blogger for Write Syntax with Easy

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.

Shortcode	Definisi
[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.

Go To Blogger > Template > Backup Download full template kalian!
Click Edit HTML
Press Ctrl + F, search </body>
Paste file dynamically updated JS tepat diatasnya.

<!-- Blogger Shortcode Plugin Dynamic JS File -->  <script src='http://downloads.mybloggertricks.com/shortcodes.js' type='text/javascript'></script>

Kemudian search <head>
Pastekan file CSS berikut tepat di bawahnya

<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.

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
>> Buttons Shortcode - Create CSS3 Buttons in Blogger!
www.mybloggertricks.com/2015/05/button-shortcode-for-blogger.html
>> Image Shortcode - Embed Images in Blogger Comments!
www.mybloggertricks.com/2015/05/insert-image-shortcode-in-blogger.html
>> Create Shortcode For CSS3 Tooltip in Blogger!
www.mybloggertricks.com/2015/05/create-shortcode-for-css3-tooltips.html
>> Create Shortcode For Responsive HTML Tables!
www.mybloggertricks.com/2015/05/HTML-Table-Shortcodes.html
>> Horizontal Divider Line With Back-To-Top Button
www.mybloggertricks.com/2015/06/CSS3-Divider-shortcode.html
>> Font Awesome Shortcodes Add Icons Easily
www.mybloggertricks.com/2016/01/font-awesome-shortcodes.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