24 Oktober 2013

Work Mag : Responsive Premium Blogspot Template (Premium)

Work Mag : Responsive Premium Blogspot Template (Gratis)
Work Mag Is a New Blogger Template. Its High User Friendly Blogger Template. If You Blogger User This is a best Template For You, Mobile, Desktop And Tablet Friendly User Interface. Simple And Clean Color’s, Navigation Menu, Image Slider and Tabs Wight Ready Template.


DEMOVIEW    |    DOWNLOAD


Work Mag TEMPLATE INFORMATIONS
Platform Type : Blogger.com
Template Name : Work Mag
Author name : coolbthemes
 Designer URL : http://www.coolbthemes.com

Features :

  •     Responsive Template Design
  •     Auto Blog Post summarize And “Read More” Button
  •     Auto Image Crop With Thumbnail (Home Page and Label Page Only)
  •     Css And HTML Base Menu With Drop down
  •     Auto Date Show At Header Right side
  •     Tabs Widgets ready (Powered By Jquery)
  •     Image Slider (Powered By Jquery)
  •     Simple User Friendly Search Box
  •     Auto Pagination Added To Post Footer
  •     Social Icons Collection(Placed Post Footer)
  •     Social Share Widget (Placed Post Footer)
  •     Custom Error 404 Page With Search Box (Official 404 Page)
  •     Related Post Widget (Placed Post Footer)
  •     Ads Banner Ready
  •     Meta Keywords And Description Support (Official Meta Description Support)
  •     Random Post Selector
  •     Recent Post By Label
  •     4 Column Footer Area
  •     Flicker Image Gallery
  •     Official “FOLLOW BY EMAIL” Widget

Cara membuat Tag Pre pada postingan

Cara membuat Tag Pre pada postingan
All About Blogspot Templates | Pre Tag - Sebelumnya saya pernah menulis tentang Cara membuat Highlight pada Script/Kode di Postingan. Dan oleh sahabat blogger saya +Djangkaru Bumi, dipertanyakan apakah sama dengan blockqoute? Awalnya saya mau jawab Iya.. biar urusannya selesai. Namun akhirnya saya memilih untuk menunda memberi jawaban. Lalu gentayangan mencari tutorial yang relevan.. :D

Dari hasil blogwalking, langkah saya terhenti pada blog Kang Ismet. Dan ternyata disana ada jawabannya. Sekalian saya share..

Mirip? Mungkin, akan tetapi ada perbedaan besar antara Blockqoute, Highlight.js, dan Pre Tag. Tentang highlight mungkin sudah dibahas sebelumnya. Untuk saat ini, yang menjadi topik utama yakni tentang PRE Tag. Dan apa bedanya dengan Blockquote? Mana yang lebih baik digunakan untuk menulis kode/script? Serta Tips Bagaimana Cara membuat kode warna-warni?

Tertarik? Oke.. kita lanjut dan langsung ke inti pembahasan. 
PRE artinya pre-formatted atau secara mudahnya, apabila teks ditulis dalam tag pre maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white space, line break atau tab.
Apabila pada penulisan menggunakan mode HTML, kemudian membuat spasi yang jauh, maka hasilnya akan tetap seperti biasa. Berbeda dengan tag pre, spasi akan tetap.

Sebagai gambaran, untuk lebih memahaminya coba copy kode ini pada postingan (mode HTML).  Dan kemudian dilihat hasilnya pada mode Compose.


<pre>
ini     adalah contoh
  tag pre
    coba      tulis
      seperti
  ini di
blog sobat
</pre>

<p>
ini     adalah contoh
  tag pre
    coba      tulis
      seperti
  ini di
blog sobat
</pre>
Maka ketika dilihat melalui mode Compose, maka akan ada perbedaan yang mencolok antara keduanya. Dengan menggunakan tag pre, spasi akan dipertahankan, berbeda dengan penggunaan tag p hasilnya akan lurus atau berjejer ke bawah.

Perbedaan  pre dan blockquote

Banyak yang menggunakan blockquote untuk berbagi kode. Termasuk saya... he... he... Lihat artikel-artikel sebelumnya. Untuk menjawab pertanyaan "Mana yang lebih baik untuk berbagi kode? blockquote atau pre?" Sebelum melangkah pada jawaban, silahkan simak pengertian blockquote. 
Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya, agar tidak terlewatkan oleh pembaca. Contohnya ini.. anda akan lebih tertarik pada paragraf ini, daripada di atasnya atau yang lain.
Kalau melihat pengertian blockquote, tentunya kurang pas untuk berbagi kode, secara bahasa pun sudah dimengeri blockquote merupakan 'blok kutipan'. Sebenarnya sah-sah saja kita menggunakan blockquote sebagai tempat kode.

Tapi kalau dibandingkan, lebih baik menggunakan tag pre daripada blockquote untuk kode. Berikut ini kelebihan tag pre dibanding blockquote :

1. Struktur HTML lebih mudah difahami, lihat gambar :
Perbedaan  pre dan blockquote
Lihat yang di tandai dengan garis merah, jelas mana pembuka dan penutup. Anda akan melihat susunan otomatis apabila menulis kode menggunakan Notepad++ atau Macromedia DreamWeaver. Bandingkan dengan gambar dibawahnya yang menggunakan blockquote, sedikit lebih susah untuk memahami struktur HTML-nya.

2. Standar huruf menggunakan monospace.
Artinya, tanpa CSS pun tag pre akan mempunya hurup monospace, dimana hurup 'W' akan sama dengan huruf 's' atau lainnya dalam segi ukuran. lebih jelasnya baca disini.

3. Bisa disisipi SyntaxHighlighter (Kode warna warni).

Pewarnaan kode ini, bukan hanya mengejar nilai estetika (enak dilihat), tapi dengan pembedaan warna akan mudah memahami, mana JavaScript, mana CSS, mana HTML, mana tag pembuka, penutup, command, string, dll.

Mungkin masih banyak kelebihan lainnya, silahkan bisa anda cari dan temukan.

Bagaimana Cara Menulis Kode dengan Tag PRE?

Untuk penulisan standar seperti ini
<pre>
isi kode
</pre>
Apabila menggunakan syntaxhighlighter, ada beberapa tambahan seperti :
<pre><code>
isi kode
</code></pre>

atau

<pre lang="css">
isi kode
</code>

dan lain-lain

 Tag pre Details


1. Browser Support :
  •     Netscape 2, 3, 4, 6, 7 dst
  •     Chrome 1 dst
  •     Firefox 1 dst
  •     Internet Explorer 2, 3, 4, 5, 6 dst
  •     Opera 3, 4, 5, 6, 7, 8 dst
  •     Safari 1 dst
  •     WebTV / MSNTV
  •     AvantGo Palm OS
  •     AvantGo Windows CE
  •     HTML 3.2, 4.0
  •     XHTML 1.0
  •     XHTML Text Module, XHTML Legacy Module


2. Atribut
  •     align (optional)
  •     class (optional)
  •     dir (optional)
  •     id (optional)
  •     lang (optional)
  •     onclick (optional)
  •     ondblclick (optional)
  •     onkeydown (optional)
  •     onkeypress (optional)
  •     onkeyup (optional)
  •     onmousedown (optional)
  •     onmousemove (optional)
  •     onmouseout (optional)
  •     onmouseover (optional)
  •     onmouseup (optional)
  •     style (optional)
  •     title (optional)
3. Contents:Teks. Beberapa tag yang valid pada tag pre tag:
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

4. Valid Context :blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th.