Cara membuat SyntaxHighlighter pada Blogger dengan Highlight.js

Berikut adalah cara membuat SyntaxHighlighter pada Blogger dengan Highlight.js. Adalah bagian dasar dan semoga bermanfaat dan dapat dikembangkan lagi.

Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Gunanya, untuk memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language).

Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source (seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Untuk mengaktifkan fitur ini dibutuhkan javascript yang dapat ditempatkan pada code HTML Template Blog. Pada postingan kali ini, saya ingin share cara membuat syntaxhighlighter, menggunakan Highlight.js dari Softwaremaniacs.

Caranya: copy dulu kode javascript di bawah ini atau lebih aman download disini.

Langkah 1 : Menyimpan JavaScript

Simpan JavaScript ini di atas </head> dalam tamplate blog.

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>    <script>      hljs.initHighlightingOnLoad();    </script>

Langkah 2 : Pilih CSS

Code CSS dalam hal ini, berfungsi menampilkan style SyntaxHighlighter dimaksud.  

Ada banyak pilihan CSS yang bisa digunakan, sebelum anda memilih, terlebih dahulu dapat melihat-lihat demo DISINI.

Untuk Pilihan CSS, anda bisa download DISINI.

Atau salah satu contoh Default CSS SyntaxHighlighter:

/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
*/
pre code {
  display: block; padding: 0.5em;
  background: #F0F0F0;
}
pre code,
pre .subst,
pre .tag .title,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title {
  color: black;
}
pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .haml .symbol,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom,
pre .asciidoc .header,
pre .markdown .header,
pre .coffeescript .attribute {
  color: #800;
}
pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk,
pre .asciidoc .blockquote,
pre .markdown .blockquote {
  color: #888;
}
pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .hexcolor,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change,
pre .lasso .variable,
pre .asciidoc .bullet,
pre .markdown .bullet,
pre .asciidoc .link_url,
pre .markdown .link_url {
  color: #080;
}
pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .haml .bullet,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .prompt,
pre .asciidoc .link_label,
pre .markdown .link_label,
pre .vhdl .attribute,
pre .clojure .attribute,
pre .asciidoc .attribute,
pre .lasso .attribute,
pre .coffeescript .property {
  color: #88F
}
pre .keyword,
pre .id,
pre .title,
pre .built_in,
pre .aggregate,
pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command,
pre .asciidoc .strong,
pre .markdown .strong,
pre .request,
pre .status {
  font-weight: bold;
}
pre .asciidoc .emphasis,
pre .markdown .emphasis {
  font-style: italic;
}
pre .nginx .built_in {
  font-weight: normal;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .lasso .markup,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}
 

Langkah 3 : Simpan CSS tersebut di atas ]]></b:skin> 

Langkah 4 : Cara Penggunaan

Untuk menggunakan Highlight.js ini, sangat simple, kita tidak perlu menentukan bahasanya, anda tinggal tulis seperti ini :

<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

FAQs

Apa itu SyntaxHighlighter?

SyntaxHighlighter adalah kode mandiri sintaks yang berfungsi penuh yang dikembangkan dalam JavaScript. Untuk mendapatkan gambaran tentang kemampuan SyntaxHighlighter, lihat halaman kami. SyntaxHighlighter saat ini digunakan oleh Apache, Aptana, Mozilla, Yahoo, WordPress, Bug Labs, Freshbooks, dan lainnya.

Apa gunanya Syntax Highlighting?

Syntax Highlighting adalah fitur editor teks yang digunakan untuk pemrograman, scripting, atau bahasa markup, seperti HTML. Fitur ini menampilkan teks, terutama kode sumber, dalam berbagai warna dan font sesuai dengan kategori istilah.

Demikian cara membuat SyntaxHighlighter pada Blogger dengan Highlight.js. Happy blogging..

Cara pasang Auto Read More Otomatis #Terbaru

Cara pasang Auto Read More Otomatis #Terbaru

All About Blogspot templates : Fungsi Read More tanpa hosting file .JS, memang agak berbeda dengan versi Read More biasanya. Bila sebelumnya  kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class=”fullpost”>..</div> atau <span class=”fullpost”>..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Atau penggunaan fungsi pemenggalan kalimat bawaan blogger seperti dibawah gambar ini:

Cara pasang Auto Read More Otomatis #Terbaru
Fungsi Read More Standar dengan pemenggalan artikel bawaan blogger

Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas. Artikel ini dibuat menjawab pertanyaan zhoe_haemy pada artikel “Cara merubah ukuran, jenis font dan warna pada judul post” sehubungan dengan fitur readmore pada blognya tidak berfungsi.

Fungsi Read More berikut ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Atau bisa juga disebut saja dengan fasilitas image thumbnail.

Tidak hanya itu, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Bahkan kita dapat memodifikasi ukuran image yang akan ditampilkan di home page blog anda. Hebat bukan??? Yah.. anggap hebat lah….

   NOTE!!    Bagi anda yang sudah memasang Read More versi lama atau auto read more-nya tidak berfungsi, sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru di dalam Quote dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja).

<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

OK, jika sudah tinggal lanjutkan langkah-langkah berikut ini:

Pertama : silahkan langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head>. Setelah itu, jangan lupa di simpan terlebih dahulu.

<!-- Auto read more script Mulai -->
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430; //panjang tulisan tanpa gambar
summary_img = 340; //panjang tulisan dengan gambar
img_thumb_height = 200; // tinggi gambar thumbnail
img_thumb_width = 200; // lebar gambar thumbnail
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script Berakhir -->

Kedua : Lalu cari Kode : <data:post.body/> dan Ganti Dengan Kode di Bawah Ini :

<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Baca Selengkapnya</a>
</b:if>
</b:if>
<!-- Auto read more Berakhir -->

Ketiga : Save Template!. Selesai.

Cara Memodifikasi Auto Read More.

  • Thumbnail_mode : setting menjadi “yes” untuk menampilkan Thumbnail pada Auto Read More dan Setting menjadi “no” untuk menghilangkan Thumbnail pada Auto Read More. Temen – temen Blogger juga bisa merubah settingan lain seperti panjang tulisan seperti yang sudah saya jelaskan pada Comment di sebelah setiap barus Kode.
  • Pada kode kedua, para Blogger juga Bisa merubah Teks “Baca Selengkapnya” sesuai dengan Keinginan.

Demikian tutorial sederhana Cara pasang Auto Read More Otomatis #Terbaru. Terima Kasih. Semoga Bermanfaat !.

Cara Menghilangkan Link Aktif pada Komentar Blog

Cara Menghilangkan Link Aktif pada Komentar Blog

All About Blogspot Templates -Artikel ini sebenarnya saya posting karena sedikit terganggu dengan adanya spammer pada kolom komentar, dengan menyimpan link aktif/hidup.

Memang, banyak blogger sering dipusingkan dengan adanya spammer pada komentar. Kebanyakan dari mereka komentarnya tidak bermutu, dan hanya mengharapkan backlink. Untuk itu, kita harus mengambil cara agar para spammer tidak seenaknya menyimpan tautan aktif pada komentar.

Tutorial ini saya dapat dari salah satu blog milik blogger Indonesia, Kang Ismet. Yakni tentang cara menghilangkan link aktif pada komentar blogspot.

Ada beberapa cara untuk menghilangkan link aktif/link hidup pada komentar tersebut, diantaranya dengan melakukan pemasangan code CSS dan JavaScript pada template blog.

1. Dengan CSS (Not Recommended)

Untuk menyembunyikan link dengan CSS, simpan kode ini di atas ]]></b:skin>

#comments p a{ display: none !important;}

Akan tetapi menurut Kang Ismet, cara ini tidak direkomendasikan, karena masih terbaca di browser, otomatis masih terbaca sebagai link oleh Mesin Pencari.

2. Dengan JavaScript (Recommended)

Sebetulnya ada banyak javaScript untuk menghilangkan link hidup pada komentar ini, namun pada kesempatan ini saya akan share 2 JavaScript saja. Dan setelah saya coba, sangat efektif dan berhasil dengan baik.

Simpan salah satu JavaScript ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){$('#comments p').find('a').contents().unwrap();});
//]]>
</script>

Hasilnya, Anchor Link akan menjadi teks biasa. Artinya komentar yang menggunakan link aktif akan dilumpuhkan menjadi teks biasa.

Atau kita dapat mengunakan JavaScript berikut, dan cara tersebut yang saya pakai saat ini.

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
var parent = document.getElementById(parentID),
content = parent.getElementsByTagName(children);
for (var i = 0; i < content.length; i++) {
if (content[i].innerHTML.indexOf('</a>') !== -1) {
content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
content[i].className = "spammer-detected";
}
}
}
blockLinks('comment-holder', 'p');
//]]>
</script>

Hasilnya, akan terlihat seperti gambar dibawah ini:

Cara Menghilangkan Link Aktif pada Komentar Blog

Dengan kata lain, teks komentar akan diubah dengan kata-kata peringatan.

Demikian tips Menghilangkan Link Aktif pada Komentar Blog, semoga bermanfaat dan terimakasih atas kunjungan.

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

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.

Cara membuat Highlight pada Script/Kode di Postingan

Cara membuat Highlight pada Script/Kode di Postingan

Dalam posting artikel tips blogging, sering kali kita harus menyertai Script/Kode HTML sebagai bagian isi konten. Sebagai pembeda, biasanya beberapa blogger membuat Highlight untuk lebih memperjelas hal tersebut pada pembaca/visitor.

Pertanyaan, tentunya adalah bagaimana Cara membuat Highlight pada Script/Kode di Postingan tersebut. Sebenarnya, langkah untuk membuat highlight (kotak) yang akan membedakan dengan tulisan artikel ini sangat sederhana.  

Untuk mempersingkat segala sesuatunya, kita langsung kepokok persoalan 🙂

   Caranya :  

  • Login ke blogger lalu pilih Layout–> Edit HTML
  • Kemudian copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>

.alert { background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

Kode yang berwarna biru (#DDE4FF) adalah warna background kotak highlight, anda bisa menggantinya dengan kode warna yang lain yang cocok dengan background blog anda.

  • Jika selesai lalu save/simpan

   Cara Posting Artikel menggunakan Highlight pada Script/Kode   

Supaya kode/scriptnya nanti bisa ada kotak highlight-nya maka untuk memposting harus dengan cara-cara tersendiri. Yaitu dengan menambahkan kode tersebut <p class=”alert”> sebelum kode/script yg akan diberi highlight. Kemudian ditambahkan kode </p> diakhir script/Kode.

Tidak begitu susah bukan?? Semoga bermanfaat..

Cara menampilkan widget hanya pada halaman awal

Artikel bagus ini, saya dapat dari BLOG DARI WARIM. Tips editing template tentang Cara menampilkan widget hanya pada halaman awal. Hal ini dilakukan, agar setiap laman posting yang tampil memiliki koding yang lebih ringan dari pada sebelumnya.

Artinya, beberapa widget hanya tampil pada halaman homepage saja. Sedangkan pada halaman posting, hanya widget penting yang berpontensi meningkatkan trafik atau promo saja.

Sebagai contoh, pada blog ini, dua widget, yakni; histats dan submitstart hanya tampil pada homepage dan tidak tampil pada halaman posting.

Untuk merubahnya silakan ikuti langkah-kangkah sederhana sebagai berikut :
1. Sobat log in dulu di blogger
2. Pilih rancangan
3. Pilih edit HTML
4. Pilih Wigdet yang akan sobat rubah, sebagai contoh saya rubah di recent comment.
5. Sisipkan kode yang berwarna merah seperti kode di bawah ini.

<b:widget id=’HTML3′ locked=’false’ title=’ recent comment’ type=’HTML’> <b:includable id=’main’> <b:if cond=’data:blog.url == data:blog.homepageUrl’> <!– only display title if it’s non-empty –> <b:if cond=’data:title != “”‘> <h2 class=’title’><data:title/> </h2> </b:if> <div class=’widget-content’> <data:content/> </div> <b:include name=’quickedit’/> </b:if> </b:includable> </b:widget>

Kemudian save template, sekarang widget recent comment hanya akan muncul pada halaman awal atau homepage, sedangkan jika kita masuk ke salah satu halam posting, widget tersebut tidak akan muncul. 

Sebagai tips, bagi blogger yang blognya Valid HTML5, maka <b:include name=’quickedit’/> biasanya tidak ada. Dan atau jika ingin Valid HTML5 maka kode tersebut diatas dapat anda hapus.

Demikian postingan tentang Cara menampilkan widget hanya pada halaman awal ini. Semoga bermanfaat dan terimakasih atas kunjungannya.    

Cara Membuat Navigasi Breadcrumb Bergaya Ala Triangle

Cara Membuat Navigasi Breadcrumb Bergaya Ala Triangle

Breadcrumb merupakan salah satu fitur blog yang yang cukup penting. Dan tentunya, Navigasi Breadcrumb sudah lumrah anda ketahui selama berkecimpung dan membangun blog di dunia blogger. Untuk kali ini, sebuah tips Cara Membuat Navigasi Breadcrumb Bergaya Ala Triangle. Selain fungsi, juga mempunyai tampilan yang keren, menarik, dan elegant. 

Sebelumnya, sedikit gambaran breadcrumb untuk blog/web, yakni, merupakan salah satu bentuk navigasi yang diciptakan guna mempermudah siapapun untuk kemudian bisa melacak posisi atau asal sebuah dokumen (halaman). Saat ini, peran breadcrumb dalam sebuah blog atau website sudah dianggap penting, itu sebabnya banyak orang meyakini bahwasanya breadcrumb bisa dimanfaatkan sebagai alat jitu dalam mencapai SEO yang lebih baik.

Dan ternyata, breadcrumb berpenampilan ‘wah’ ternyata bisa diciptakan dengan CSS murni. Asumsikan saja jika kita ingin menyisipkan sentuhan menarik seperti panah kecil pada setiap sisi breadcrumb sekaligus membubuhi efek hover berwarna ke dalamnya. Belum lagi jika kita tambahkan pointer event untuk menyempurnakan hasilnya. Tentu ini akan terkesan ‘highly usable interface’. Dan dengan begitu, penampilan breadcrumb akan terlihat lebih unik dan memiliki ciri khas tersendiri.

Baiklah, untuk mewujudkan membuat  Navigasi Breadcrumb Bergaya Ala Triangle  dengan CSS murni, silahkan simak langkah-langkahnya dan jujur tips ini saya dapat dari : http://topspot-official.blogspot.com.

Berikut  Demo Navigasi Breadcrumb Bergaya Ala Triangle 

Dan berikut langkah sedehana memasang Navigasi Breadcrumb Bergaya Ala Triangle  dengan CSS murni di blog anda.

 Code CSS: 

.breadcrumb { margin:5px 0!important; list-style: none; overflow: hidden; font-size: 10px; } .breadcrumb li { padding:0!important; float: left; } .breadcrumb li a { color: white; text-decoration: none; padding: 10px 0 10px 50px; background: brown; background: hsla(34,85%,35%,1); position: relative; display: block; float: left; } .breadcrumb li a:after { content: ” “; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid hsla(34,85%,35%,1); position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb li a:before { content: ” “; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .breadcrumb li:first-child a { padding-left: 10px; } .breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); } .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); } .breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); } .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); } .breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); } .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); } .breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); } .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); } .breadcrumb li:last-child a { color: black; pointer-events: none; cursor: default; } .breadcrumb li a:hover { background: hsla(34,85%,25%,1); } .breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }

Untuk membuat panah kecil seperti bentuk segitiga/triangle sebagai dekorasi nya, kita akan menggunakan elemen :after. Lebih jelasnya, anda harus menelusuri kode  .breadcrumb li a:after {  pada script di atas. Elemen tersebut sekaligus berfungsi untuk menyeleksi bagian-bagian yang dikenali sebagai list. Disinilah kita akan mulai memahami bahwasanya ketika dilakukan penyeleksian, maka pada saat itulah muncul sebuah batasan tertentu yang mana akan ditunjukkan dengan indikasi seperti tanda panah kecil berbentuk segitiga. Ingin menggunakan nya? Salin script tersebut di atas kode  ]]></b:skin>  pada template anda. Setelah selesai, ikuti langkah kedua.

 Code HTML Markup:  

<b:includable id=’breadcrumb’ var=’posts’><b:if cond=’data:blog.homepageUrl != data:blog.url’> <b:if cond=’data:blog.pageType == &quot;static_page&quot;’> <ul class=’breadcrumb’><li><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a></li><li><a><data:blog.pageName/></a></li></ul> <b:else/> <b:if cond=’data:blog.pageType == &quot;item&quot;’> <b:loop values=’data:posts’ var=’post’> <b:if cond=’data:post.labels’> <ul class=’breadcrumb’ xmlns:v=’http://rdf.data-vocabulary.org/#’> <li typeof=’v:Breadcrumb’><a expr:href=’data:blog.homepageUrl’ property=’v:title’ rel=’v:url’>Home</a></li> <b:loop values=’data:post.labels’ var=’label’> <li typeof=’v:Breadcrumb’><a expr:href=’data:label.url’ property=’v:title’ rel=’v:url’><data:label.name/></a></li> </b:loop> <li><a><data:post.title/></a></li> </ul> <b:else/> <ul class=’breadcrumb’><li><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a></li><li><a>Unlabelled</a></li> <li><a><data:post.title/></a></li></ul> </b:if> </b:loop> <b:else/> <b:if cond=’data:blog.pageType == &quot;archive&quot;’> <ul class=’breadcrumb’> <li><a expr:href=’data:blog.homepageUrl’>Home</a></li><li><a>Archives for <data:blog.pageName/></a></li> </ul> <b:else/> <b:if cond=’data:blog.pageType == &quot;index&quot;’> <ul class=’breadcrumb’> <b:if cond=’data:blog.pageName == &quot;&quot;’> <li><a expr:href=’data:blog.homepageUrl’>Home</a></li><li><a>All posts</a></li> <b:else/> <li><a expr:href=’data:blog.homepageUrl’>Home</a></li><li><a>Posts filed under <data:blog.pageName/></a></li> </b:if> </ul> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id=’main’ var=’top’> <b:include data=’posts’ name=’breadcrumb’/>

Inilah struktur dasar dari keseluruhan script pembentuk. Bagian ini sudah dilengkapi class yang disebut dengan breadcrumb. Script pada bagian ini bisa anda salin ke dalam template blog anda. Caranya masuk ke edit html > kemudian cari kode  <b:includable id=’main’ var=’top’>  > lalu gantikan kode tersebut dengan script di atas. Amati hasilnya!

  Catatan Tambahan  

  • Anda masih bisa meng-kustomisasi gaya navigasi breadcrumb di atas sesuai keinginan anda. Adapun elemen-elemen yang masih bisa dikreasikan, diantaranya; warna, bentuk, dan font.
  • Demo lainnya yang sejenis bisa anda dapatkan pada tautan ini : SEOdexing dan http://fiddle.jshell.net/danielbenny/.

Cara Membuat Widget Google+ Valid HTML5

Cara Membuat Widget Google+ Valid HTML5
Valid HTML5

Tidak semua widget blogger Valid HTML5. Salah satunya seperti widget penting Google plus. Padahal, bagi kebanyakan blogger saat ini, validasi THML template blog sudah mulai dianggap penting. Untuk itu, maka perlu dilakukan modifikasi template agar Valid HTML5.

Bagi anda yang mau blognya Valid HTML5 tapi widget Google+ yang membuat blog anda tidak valid, nah solusinya dapat dilakukan melalui langkah-langkah sederhana berikut ini :

  •     Pertama, login ke akun blogger
  •     Klik “Tata Letak”
  •     Kemudian “Tambah Gadget”
  •     Pilih “HTML / Javascript”
  •     Lalu copy javascript dibawah ini :

<!– Place this tag where you want the +1 button to render. –> <div class=”g-plusone” data-size=”medium”></div> <!– Place this tag after the last +1 button tag. –> <script type=”text/javascript”>   window.___gcfg = {lang: ‘id’};   (function() {     var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;     po.src = ‘https://apis.google.com/js/plusone.js’;     var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);   })(); </script>

  •     Kemudian letakan/paste kode diatas kedalam kotak isian “HTML/Javascript”.
  •     Lalu simpan.

Demikian langkah sederhana yang dapat dilakukan agar template blog Valid HTML5

Cara membuat Responsive Image untuk Blogger Template Blogspot

Cara membuat Responsive Image untuk Blogger Template Blogspot
Cara membuat Responsive Image untuk Blogger Template Blogspot

Responsive Image Tricks For Blogger | Artikel ini adalah tips tentang cara mengubah semua gambar yang ada di blog menjadi responsive. Karena, pada beberapa template blog responsive sendiri terkadang image/gambar sering belum ikut tersentuh responsive desain. Apalagi template yang tidak responsive, sudah pasti itu.

Sehingga, gampar pendukung postingan yang ditampilkan pada gadget seperti Tab, Handphone, atau lainnya, sering terpotong atau tidak terlihat semua. Dan jelas hal ini sangat menggangu tampilan. Untuk itu, kita perlu sedikit memodifikasi template dengan melakukan beberapa editing code HTML pada blog.

Kita langsung saja ke pembahasan inti; DEMO Responsive Image

Pertama, login blogger terus edit HTML.

Lalu cari kode :

]]></b:skin>

Dan tambahkan kode css dibawah ini diatasnya:

img {
display: block;
max-width:100%;
height:auto;
width:auto9;} 

Setelah itu cari kode:

</head>

dan tambahkan javascript dibawah ini diatas kode tersebut:

<script type=’text/javascript’>
      /*<![CDATA[*/

    var cwResImg = function () {
  var cwBpArry = [1382, 992, 768, 480], //Image breakpoint arrays
      currIndex,
      cwResImgVal = Math.max(screen.width,screen.height),
      hdpi = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1,
      rwdImgId = “rwdimg-“+Math.floor(Math.random()*1000),
      tpl='<img src=”{src}” alt=”{alt}” title=”{title}” id=”{rwdImgId}” {attributes}>’;

  cwBpArry.push(cwResImgVal);
  cwBpArry.sort(function(a,b){return a-b});

  if(Array.prototype.indexOf){
      currIndex = cwBpArry.indexOf(cwResImgVal) + 1;
  }else{
      for(var i in cwBpArry){
          if(cwBpArry[i] === cwResImgVal){
              currIndex = parseInt(i)+1;
          }
      }       
  }

  cwBpArry[currIndex] = cwBpArry[currIndex] || cwBpArry[currIndex-1];

  var imgWid = Math.max.apply(Math, cwBpArry) <= cwBpArry[currIndex] ? cwBpArry[currIndex-2] : cwBpArry[currIndex];

  return {
      imgWid : imgWid,
      hdpi: hdpi,
      id:rwdImgId,
      rwdImg:function(arg){
         
          var src = arg.src || arguments[0] || ”,
              src = src.replace(//sd*//, ‘/s’+imgWid * hdpi+’/’), //picasa image size replacing (s340 to device width)
              title = arg.title || arg.alt || arguments[1] || ”,
              alt = arg.alt || arg.title || arguments[2] || arguments[1] || ”,
              attributes = arg.attr || arguments[3] || ”,
              img = tpl.replace(‘{src}’,src).replace(‘{title}’,title).replace(‘{alt}’,alt).replace(‘{rwdImgId}’,rwdImgId).replace(‘{attributes}’,attributes);
              document.write(img)
      }
  };
}()
/*]]>*/</script>

setelah itu cari kode

</body>

dan tambahkan script dibawah ini di atasnya (ini digunakan untuk mengatasi terjadinya fallback jika javascript tidak support di peramban)

<noscript>
  <img src=”http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s720/Webpagetest-IE8-Octopress-Default-waterfall.png” alt=”Responsive images test”/>
</noscript>
<script>
  cwResImg.rwdImg(“http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png”, ‘Responsive images text script’);

  —or—-

  cwResImg.rwdImg({src:’http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png’, alt:’Responsive images text script’, title:’Responsive images text script’});
</script>

Demikian Cara membuat Responsive Image untuk Blogger Template Blogspot. Terimakasih atas kunjungannya dan semoga bermanfaat.

credits : http://decodize.com/html/simple-responsive-image-technique/

Cara Menghapus Tulisan Tampilkan Posting dengan Label

Menghapus Tulisan Tampilkan Posting dengan Label – Ketika kita meng-klik salah satu label pada blog, biasanya di atas blog akan muncul tulisan ‘Tampikan posting dengan label …..Tampilkan semua posting’. Contohnya seperti pada gambar di bawah ini:

           Tampilkan Posting dengan Label Blogger News. Tampilkan Semua Posting      

Cara Menghapus Tulisan Tampilkan Posting dengan LabelSebagian besar diantara kita mungkin ada yang enjoy saja dan tidak merasa bermasalah dengan tulisan tersebut. Tapi, mungkin walau pun sedikit, beberapa penggila tampilan blog indah, merasa sangat terganggu dengan tulisan tersebut. Mereka ingin, blog tampil clean dan presisi. Tidak ada embel-embel yang mengganggu. 
Nah, jika anda termasuk dalam kategori para blogger yang sedikit tersebut dan ingin menghilangkan tulisan tampilkan posting diatas label tersebut. Atau lebih tepatnya menyembunyikan tampilan tersebut sangat mudah.
Berikut langkahnya: 
1. Login ke Blogger.
2. Masuk ke Template ► Edit HTML
3. Simpan kode ini di atas ]]></b:skin>

.status-msg-wrap{display:none}

4. Simpan Template.

Untuk mencobanya, silahkan klik salah satu label pada blog sobat… Semoga bermanfaat…