Tampilkan postingan dengan label Tautan. Tampilkan semua postingan

Sabtu, 07 Mei 2016

Unduh CMS Mecha Versi 1.2.7

Mecha 1.2.7 tersedia untuk diunduh!

Minggu, 10 April 2016

Bagaimana Sebenarnya jQuery Bekerja

Ketika orang-orang sudah cukup puas dengan markup dan style sheet language, pada akhirnya mereka memutuskan untuk tertarik dengan dunia pemrograman setelah mereka dipertemukan dengan bahasa pemrograman yang luar biasa dahsyat yang mereka kenal sebagai jQuery. Mereka jatuh cinta karena efek animasi yang diberikan; mereka jatuh cinta kepada slideshow, kepada efek dropdown menu, kepada efek gambar kabur, dan lain sebagainya; sebegitu jatuh cintanya mereka hingga mereka sanggup untuk duduk berlama-lama di depan komputer, ketagihan menggoyang-goyangkan pointer mouse mereka di permukaan menu navigasi dropdown berkali-kali hanya demi melihat efek slide-up dan slide-down yang begitu indah…

Jumat, 05 Februari 2016

Parser Markdown Paling Sederhana

Dukungan Markup

Mendukung hampir semua markup seperti yang dinyatakan dalam dokumentasi Markdown Extra, kecuali markup catatan kaki, abbreviasi, daftar definisi, tautan ber–referensi dan gambar ber–referensi.

Rabu, 06 Januari 2016

Tags Input Beautifier

Interaksi yang lebih baik pada masukan berupa data tag dengan JavaScript.

Sabtu, 10 Januari 2015

Unduh Berkas Presentasi Perkenalan HTML untuk Pemula

Aslinya ini adalah tugas bebas yang Saya dapat dari kampus, akan tetapi karena Saya merasa berkas ini cukup bermanfaat jadi Saya bagikan saja untuk kalian.

Jumat, 02 Januari 2015

Kompresi Kode HTML, CSS dan JavaScript dengan PHP

Berikut ini adalah fungsi PHP terpisah yang telah Saya gunakan untuk mengompresi kode HTML, CSS dan JavaScript pada CMS Mecha.

Minggu, 06 Juli 2014

Fake Link

HTML

<form class="fake-link" action="http://example.org" method="get" target="_blank">
  <input name="aff" type="hidden" value="1234567">
  <button type="submit">affiliate link</button>
</form>

CSS

.fake-link,
.fake-link button {
  margin:0;
  padding:0;
  width:auto;
  height:auto;
  background:none;
  border:none;
  font:inherit;
  text-transform:none;
  display:inline;
}
.fake-link button {
  color:blue;
  cursor:pointer;
}
.fake-link button::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
.fake-link button:focus,
.fake-link button:hover {text-decoration:underline}
.fake-link button:active {color:red}

Demo

Lihat Demo

Jumat, 20 Juni 2014

Navigasi Halaman dengan Keyboard

Sisipkan kode ini di atas </head> atau di atas </body> pada editor templat Anda, lalu simpan perubahan:

<script>
//<![CDATA[
(function(win, doc) {

    var pager = false;

    // left = 37, right = 39
    doc.onkeydown = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            win.location.href = pager.children[0].href;
            return false;
        }
    };

})(window, document);
//]]>
</script>

Sekarang Anda akan bisa melakukan navigasi menggunakan tombol panah kanan atau kiri pada keyboard. Ini cuma berlaku untuk markup HTML navigasi halaman Blogger yang masih standar. Untuk navigasi halaman yang sudah mengalami perubahan mungkin akan memerlukan sedikit modifikasi, terutama pada bagian nilai variabel pager di dalam kondisional switch.

Menambahkan Efek Aktif (Seperti Tertekan)

Dengan cara menambahkan kelas active pada navigasi halaman ketika tombol panah kanan dan/atau kiri ditekan, maka kita bisa menciptakan efek aktif/tertekan palsu melalui kelas tersebut:

<script>
//<![CDATA[
(function(win, doc) {

    var pager = false;

    // left = 37, right = 39
    doc.onkeydown = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className += ' active';
            win.location.href = pager.children[0].href;
            return false;
        }
    };

    doc.onkeyup = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className.replace(/ active/g, "");
        }
    };

})(window, document);
//]]>
</script>

#blog-pager-older-link.active a,
#blog-pager-newer-link.active a,
#blog-pager-older-link a:active,
#blog-pager-newer-link a:active {
  background-color:red;
  color:white;
}

Demonstrasi bisa Anda lihat di sini. Pastikan Anda sudah berada dalam keadaan terfokus pada area ketika hendak menekan tombol panah kanan dan kiri:

Lihat Demo

Metode ini mungkin tidak cocok untuk diterapkan pada blog yang bersifat umum karena akan mengganggu fungsi tombol keyboard yang asli. Lebih baik terapkan pada blog-blog yang bersifat pribadi saja.

Sabtu, 17 Mei 2014

Kondisional Halaman “selected” pada Widget Label Blogspot Tidak Konsisten

Saya anggap Anda sedang memakai widget Label/Kategori yang masih murni merupakan bawaan dari Blogger. Saat kita mengunjungi halaman label, pada bagian tautan label seharusnya akan berubah menjadi elemen <span> yang tidak bisa diklik seperti ini:

Label Widget in Blogspot — Tanda bahwa halaman label “JavaScript” sedang dikunjungi.

Ini bagus, karena widget dapat memberikan informasi kepada kita mengenai di mana kita sedang berada saat itu. Akan tetapi, ketika kita mengeklik tautan menuju posting yang lebih lama, tanda tersebut malah hilang:

Broken Label Widget — Tanda yang menyatakan bahwa halaman label “JavaScript” sedang dikunjungi rusak pada halaman berikutnya.

Ini tidak bagus. Tanda label tersebut seharusnya bisa tetap ada meskipun kita sudah berpindah-pindah ke halaman yang lain asalkan kita masih berada dalam halaman indeks kategori/label yang sama. Ini terjadi karena kondisional penanda pada widget label sudah salah sejak awal. Perhatikan bagian yang Saya tandai:

<b:widget id='Label1' locked='false' title='Label' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
      <b:if cond='data:display == &quot;list&quot;'>
        <ul>
          <b:loop values='data:labels' var='label'>
            <li>
              <b:if cond='data:blog.url == data:label.url'>
                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
              <b:else/>
                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
              </b:if>
              <b:if cond='data:showFreqNumbers'>
                <span dir='ltr'>(<data:label.count/>)</span>
              </b:if>
            </li>
          </b:loop>
        </ul>
      <b:else/>
        <b:loop values='data:labels' var='label'>
          <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
            <b:if cond='data:blog.url == data:label.url'>
              <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
            <b:else/>
              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </span>
        </b:loop>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Menggunakan perbandingan URL sebagai kondisional halaman label tidak akan berhasil, karena URL pada setiap halaman itu pasti akan berubah-ubah meskipun kita masih berada pada kategori/label yang sama. Untuk memperbaikinya, ganti kode yang Saya beri tanda dengan ini:

<b:if cond='data:blog.searchLabel == data:label.name'>

Simpan perubahan.

Minggu, 24 Februari 2013

URL Parser

// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).
// Read => http://james.padolsey.com/javascript/parsing-urls-with-the-dom/

function parseURL(url) {
    var a = document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':', ''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function() {
            var ret = {},
            seg = a.search.replace(/^\?/, '').split('&'),
                len = seg.length,
                i = 0, s;
            for (; i < len; i++) {
                if (!seg[i]) {
                    continue;
                }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
        hash: a.hash.replace('#', ''),
        path: a.pathname.replace(/^([^\/])/, '/$1'),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
        segments: a.pathname.replace(/^\//, '').split('/')
    };
}

Penggunaan

Data yang diparse nantinya akan berubah menjadi objek seperti ini:

{
    source: "XXX",
    protocol: "XXX",
    host: "XXX",
    port: "XXX",
    query: "XXX",
    params: {
        "XXX": "XXX",
        "XXX": "XXX",
        "XXX": "XXX",
        "XXX": "XXX"
    },
    file: "XXX",
    hash: "XXX",
    path: "XXX",
    relative: "XXX",
    segments: ["XXX", "XXX", "XXX"]
}

Dari situ kita bisa memanggil setiap bagian dari objek yang dihasilkan dengan cara yang sama seperti saat kita memanggil data pada objek. Misalnya:

var myUrl = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');

alert(myUrl.protocol); // => akan menghasilkan `http`

Selengkapnya

myUrl.file;     // = 'index.html'
myUrl.hash;     // = 'top'
myUrl.host;     // = 'abc.com'
myUrl.query;    // = '?id=255&m=hello'
myUrl.params;   // = Object = { id: 255, m: hello }
myUrl.path;     // = '/dir/index.html'
myUrl.segments; // = Array = ['dir', 'index.html']
myUrl.port;     // = '8080'
myUrl.protocol; // = 'http'
myUrl.source;   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

Lihat Demo

Sumber: James Padolsey - Parsing URLs with the DOM!

Lainnya

Flagrant Badassery - parseUri 1.2: Split URLs in JavaScript

Minggu, 17 Februari 2013

Generator HTML Peta Gambar Palsu

Alat ini digunakan untuk membuat image map palsu menggunakan elemen HTML. Beberapa orang lebih memilih menggunakan yang palsu karena lebih fleksibel. Pada intinya alat ini digunakan untuk mempermudah di dalam merancang ukuran dan posisi lokasi pada tiap bagian di dalam gambar. Mengenai elemen apa yang akan Anda gunakan dan bagaimana Anda memodifikasi tampilannya, itu terserah Anda:

Coba Alat

Bagi para pembaca yang belum mengerti apa itu image map, kalian bisa memulai mempelajarinya di sini. Dan berikut ini adalah contoh gambar yang dihasilkan dari alat yang Saya buat di atas. Coba letakkan pointer mouse Anda di atas wajah-wajah atau badan tokoh kartun di bawah ini untuk mengetahui nama mereka:

Cara Menggunakan

Ambillah sebuah foto atau gambar dimana di dalamnya terdapat beberapa bagian yang memerlukan detail khusus. Misalnya foto keluarga atau peta negara, lalu unggah foto atau gambar tersebut pada blog Anda. Ambil URL gambarnya, kemudian letakkan di dalam input URL yang tersedia. Setelah itu klik tombol Create. Klik tombol Add Location untuk menambahkan lokasi/koordinat baru pada gambar. Geser dan ubah ukurannya sesuai keinginan. Kode HTML akan tampil di bagian area teks sebelah kanan.

Sabtu, 19 Januari 2013

Mengimplementasikan AJAX pada Blogspot

Mungkin beberapa dari kalian ada yang pernah memperhatikan/membaca komentar-komentar lama Saya atau perkataan lama Saya yang pernah Saya ucapkan, yang menyatakan bahwa kita tidak bisa mengimplementasikan AJAX pada blogspot. Saya ingin menyangkal semua perkataan Saya itu dan ingin mengatakan bahwa AJAX memungkinkan untuk diimplementasikan pada blogspot!

Untuk membuktikannya, coba Anda klik tombol di bawah ini:

Klik Untuk Memuat Halaman dengan AJAX

Tombol di atas cuma contoh awal, jadi hasil yang termuat jelas akan tampak sangat berantakan. Untuk membaca artikel ini lagi, mohon muat ulang halaman ini setelah Anda melihat efek yang terjadi.

Seperti yang kita semua tahu bahwa AJAX hanya berlaku untuk domain lokal, itu memang benar. Selama ini sepertinya Saya terlalu paranoid atau bahkan skeptis mengenai kekuatan blogspot yang sangat terbatas sehingga Saya tidak menyadari bahwa apapun bentuknya, asalkan URL yang digunakan untuk memuat adalah URL lokal, maka bisa dipastikan kita bisa mengimplementasikan AJAX pada platform tersebut. Karena bisa atau tidaknya kita di dalam mengimplementasikan AJAX sama sekali tidak ditentukan oleh kemampuan ~~CMS~~ Blogger bukan merupakan CMS, melainkan blog service.

Berikut ini adalah kode yang Saya gunakan:

HTML

<div id="loading-text"></div>
<div id="container"></div>
<a id="ajax-button-example" href="/search/label/JQuery?max-results=10">Klik Untuk Memuat Halaman dengan AJAX</a>

JQuery

$('#ajax-button-example').on("click", function() {
    var url = this.href;
    $('#loading-text').html('<span>Memuat halaman...</span>');
    $('#container').load(url, function() {
        $('#loading-text').html('');
    });
    return false;
});

Hanya penerapan JQuery .load() yang sangat mendasar. Jika sebelumnya Anda sudah pernah belajar mengenai seluk-beluk JQuery AJAX pasti Anda akan dengan mudah mengerti mengenai ini.

Ke depannya, mungkin akan ada beberapa tutorial/info mengenai pengimplementasian AJAX pada platform blogspot. Tapi Saya masih butuh waktu untuk memantapkannya. Begitulah.

Jumat, 18 Januari 2013

Efek Animasi Loading dengan Event `beforeunload`

Sebelumnya Saya pernah menuliskan cara membuat efek animasi loading pada saat halaman berpindah dengan cara menyeleksi semua tautan internal untuk memicu tampilnya overlay/tabir animasi saat tautan tersebut diklik. Tapi metode ini memiliki dua kelemahan:

Pertama, menyeleksi semua tautan internal dengan selektor atribut sebenarnya tidak begitu baik karena selektor atribut itu performanya buruk.

Ke dua, jika kita mengeklik tautan internal yang memiliki atribut target='_blank' di dalamnya, tautan tersebut akan terbuka di tab baru. Tapi efek animasi memuat halaman justru terpicu pada halaman sebelumnya, padahal kita tidak menghendaki itu ⇒ #c8644667892985451185. Saya sudah berhasil mengakalinya dengan cara memfilter tautan internal tersebut dengan cara mengecualikan tautan yang memiliki atribut target='_blank' menggunakan JQuery .filter():

$internalLinks.filter(':not([target="_blank"])').click(function() {});

Tapi mulai sekarang lebih baik kita lupakan cara lama tersebut. Kita bisa menciptakan efek animasi perpindahan halaman dengan aman menggunakan event beforeunload.

beforeunload adalah event yang akan terpicu saat sebuah halaman mulai berpindah karena seorang pengguna mengeklik tautan tertentu (atau sekedar memuat ulang halaman dengan cara mengeklik tombol Reload pada peramban) yang memicu mereka untuk keluar dari halaman tersebut:

$(window).on("beforeunload", function() {
    // Menampilkan tabir animasi dengan efek `.fadeIn()`...
});

Kali ini tabir animasi ditampilkan bukan karena terpicu oleh aksi klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang tabir animasi perpindahan halaman dengan cara ini:

Anggaplah JQuery sudah terpasang di blog kita. Pertama, masuklah ke halaman editor HTML template, kemudian letakkan kode CSS ini di atas ]]></b:skin> atau </style>:

#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background-color:black;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Kemudian sisipkan kode ini di atas </body>:

<script>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader">Loading...</div>');
// Saat halaman terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
    // ... tampilkan tabir animasi dengan efek `.fadeIn()`
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Klik Simpan Template.

Demo

Lihat Demo

Kamis, 13 Desember 2012

Konsep Navigasi Mobile dengan Media Queries

Saya hanya akan menjelaskan konsep ini secara cepat dan nyaris nonverbal, jadi perhatikan dan jangan lupa untuk membaca komentar-komentar di dalam kode CSS dan HTML yang Saya tuliskan. Pada dasarnya kita hanya akan membuat menu biasa, yang kemudian kita lengkapi dengan ikon sebagai tombol penampil menu. Secara normal, ikon tersebut akan disembunyikan dan menu navigasi akan ditampilkan pada perangkat desktop/device berukuran besar, sampai ketika kita berada pada perangkat yang lebih kecil, maka CSS akan melakukan hal sebaliknya, yaitu akan menyembunyikan menu dan menampilkan ikon/navicon.

Demo

Lihat Demo Salinan di CSS Deck

Markup HTML

Kita membutuhkan enam buah elemen HTML yaitu <nav>, <ul>, <li>, <input type="checkbox">, <label> dan <a>

Tag HTML	Keperluan
`<nav>`, `<ul>`, `<li>`	Semantik. Semua navigasi standar dibangun dengan elemen ini
`<a>`	Setiap navigasi juga memiliki tautan-tautan yang berfungsi untuk mengarahkan pengunjung menuju sebuah tempat tertentu saat tautan-tautan tersebut diklik
`<input type="checkbox">`	Elemen ini digunakan untuk menampilkan dan menyembunyikan menu pada tampilan mobile. Dengan CSS3 `:checked`, kita bisa membuat efek toggle menggunakan elemen checkbox (baca di sini)
`<label>`	Elemen ini digunakan untuk keperluan visual saja. Lebih tepatnya, elemen ini akan menjadi ikon yang akan tampak sebagai tombol, padahal tombol menu yang sebenarnya adalah elemen checkbox yang disembunyikan dengan `opacity:0`.

<!-- Markup yang dibutuhkan: <nav>, <ul>, <li>, <input type=checkbox>, <label>, <a> -->

<nav>
    <input type="checkbox">
    <label>&equiv;</label>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Archive</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS

Pertama-tama kita set dasar dimensi menu dengan mengatur tampilan elemen <nav> meliputi tipe font, warna latar dan huruf:

/* navigasi: tentukan font, warna huruf dan latar */
nav {
  font:normal bold 11px Arial,Sans-Serif;
  color:gray;
  background-color:black;
  height:30px;
}

Kemudian set layout daftar menu menjadi horizontal. Hapus margin, padding dan bullet bawaan dari User Agent Style Sheet:

/* daftar menu: hilangkan margin, padding dan bullet */
nav ul,
nav li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

/* set tinggi menu */
nav ul {height:30px}

/* set layout menu menjadi berjajar/horizontal */
nav li {
  float:left;
  display:inline;
}

Ubah semua tautan di dalam navigasi menjadi elemen blok agar lebih mudah dalam pengaturan tinggi, padding dan hal-hal lain yang kebanyakan bisa dilakukan oleh elemen blok:

/* tautan */
nav a {
  display:block;
  line-height:30px;
  padding:0 14px;
  text-decoration:none;
  color:white;
}

Ganti juga warna item menu jika pointer mouse berada di atasnya:

/* sikap hover item menu */
nav a:hover {background-color:#39f}

Ikon Menu (Navicon)

Bentuknya seperti ini: `≡`. Simbol disamping Saya buat dengan entitas HTML &equiv;. Kita akan meletakkan simbol itu di dalam elemen <label> seperti ini:

<label>&equiv;</label>

Sebenarnya ada beberapa bentuk lain yang biasa dijadikan sebagai simbol untuk menyatakan menu (baca di sini), tapi bentuk yang paling mudah dibuat dan yang paling umum digunakan adalah bentuk yang Saya tuliskan di atas.

Kali ini kita akan mengerjakan CSS elemen checkbox dan label. Secara normal tampilannya akan disembunyikan:

nav input {display:none}
nav label {display:none}

Kemudian set beberapa pengaturan. Sembunyikan wujud elemen checkbox dengan mendeklarasikan opacity:0, dan atur dimensinya dengan tinggi dan lebar yang (disarankan) sama dengan tinggi menu:

/* checkbox: sebagai tombol menu pada tampian mobile */
nav input {
  display:none;
  margin:0 0;
  padding:0 0;
  width:30px;
  height:30px;
  opacity:0; /* sembunyikan wujud */
  cursor:pointer;
}

/* elemen label: sebagai ikon */
nav label {
  display:none;
  font-size:200%;
  width:30px;
  height:30px;
  /* teks berada di tengah secara vertikal dan horizontal */
  line-height:30px;
  text-align:center;
}

Media Queries

Hanya membutuhkan satu media query untuk menyatakan bahwa kita sedang berada pada perangkat mobile. Misalnya berada pada ukuran layar maksimal 767px

@media (max-width:767px) {
  ...
}

Saat kita berada pada ukuran layar maksimal 767 piksel, set tampilan menu sebagai menu vertikal. Tampilkan ikon dan sembunyikan semua menu:

@media (max-width:767px) {
  nav {
    /* kita akan mengeset posisi menu dan ikon sebagai elemen absolut terhadap navigasi, jadi kita memerlukan deklarasi ini */
    position:relative;
  }
  nav ul {
    background-color:#200;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    height:auto;
    display:none; /* sembunyikan menu */
  }
  /* set tampilan menu agar bersusun secara vertikal */
  nav li {
    display:block;
    float:none;
    width:auto;
  }
  nav input,
  nav label {
    position:absolute;
    top:0;
    right:0;
    display:block; /* tampilkan elemen checkbox dan label */
  }  
  nav input {z-index:4} /* selalu pastikan bahwa checkbox berada di atas label */
}

Kemudian buat efek toggle dengan CSS :checked. Ubah warna ikon saat tombol menu diklik, dan tampilkan menu yang tersembunyi:

@media (max-width:767px) {
  ...
  ...
  /* ubah warna ikon saat tombol menu diklik, dan tampilkan menu yang tersembunyi saat checkbox dicek */
  nav input:checked + label {color:white}
  nav input:checked ~ ul {display:block}
}

Kode Lengkap

HTML

<nav>
    <input type="checkbox">
    <label>&equiv;</label>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Archive</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS

/* horizontal navigation: define the navigation font and basic background */
nav {
  background-color:black;
  font:normal bold 11px Arial,Sans-Serif;
  color:gray;
  height:30px;
}

/* lists: remove the nested list margin, padding & bullets */
nav ul,
nav li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

/* navigation height */
nav ul {height:30px}

/* inline layout menu */
nav li {
  float:left;
  display:inline;
}

/* the anchor */
nav a {
  display:block;
  line-height:30px;
  padding:0 14px;
  text-decoration:none;
  color:white;
}

/* hover state menu */
nav a:hover {background-color:#39f}

/* checkbox element: for mobile navigation button */
nav input {
  display:none;
  margin:0 0;
  padding:0 0;
  width:30px;
  height:30px;
  opacity:0;
  cursor:pointer;
}

/* for visual purpose */
nav label {
  display:none;
  font-size:200%;
  width:30px;
  height:30px;
  /* center vertically and horizontally */
  line-height:30px;
  text-align:center;
}


/* MOBILE NAVIGATION */

@media (max-width:767px) {

  nav {
    /* we want to absolute positioning the menu, checkbox and label element to its parent, so this is needed */
    position:relative;
  }

  nav ul {
    background-color:#200;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    height:auto;
    display:none; /* hide the menu */
  }

  /* set the menu as a block list item */
  nav li {
    display:block;
    float:none;
    width:auto;
  }

  /* now show the checkbox and label element in mobile device */
  nav input,
  nav label {
    position:absolute;
    top:0;
    right:0;
    display:block; /* show the menu icon */
  }
  
  nav input {z-index:4} /* always place the checkbox above the label element */

  /* highlight the label element and show the menu if the checkbox is checked */
  nav input:checked + label {color:white}
  nav input:checked ~ ul {display:block}

}

Rabu, 07 November 2012

XHTML Blogger, Loop Label Posting

Elemen ini biasanya tampil di bagian footer posting dan berfungsi untuk menampilkan daftar label yang diterapkan pada posting tersebut:

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
  </b:if>
</span>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.labels	Daftar label	???
data:postLabelsLabel	Elemen ini akan menampilkan label sebelum daftar kategori posting	`Label:`
data:label.url	Elemen ini akan menghasilkan URL halaman label/kategori	`http://nama_blog.blogspot.com/search/label/Liburan`
data:label.name	Elemen ini akan menghasilkan nama label/kategori	`Liburan`
data:label.isLast	Boolean untuk menyatakan label terakhir	`true`, `false`

XHTML Blogger, Share Buttons

Dalam Konsep

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'>
    <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.emailThisMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showBlogThisButton'>
    <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.blogThisMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showTwitterButton'>
    <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showFacebookButton'>
    <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showOrkutButton'>
    <a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showPinterestButton'>
    <a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToPinterestMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:top.showEmailButton	Boolean	`true`, `false`
data:top.showBlogThisButton	Boolean	`true`, `false`
data:top.showTwitterButton	Boolean	`true`, `false`
data:top.showFacebookButton	Boolean	`true`, `false`
data:top.showOrkutButton	Boolean	`true`, `false`
data:top.showPinterestButton	Boolean	`true`, `false`
data:top.showDummy	Boolean	`true`, `false`
data:post.sharePostUrl	Elemen ini akan menghasilkan URL berbagi	`http://www.blogger.com/share-post.g?blogID=52518732703774XXXX2&postID=703794562479435XXXX`
data:top.emailThisMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Kirimkan Ini lewat Email`
data:top.blogThisMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`BlogThis!`
data:top.shareToTwitterMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Berbagi ke Twitter`
data:top.shareToFacebookMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Berbagi ke Facebook`
data:top.shareToOrkutMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Bagikan ke Orkut`
data:top.shareToPinterestMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Bagikan ke Pinterest`
data:post.dummyTag	???	...

Rabu, 15 Juni 2011

Efek Tautan Berubah-Ubah Warna Seperti Pelangi

Sebenarnya ada banyak tutorial yang menyediakan script tautan pelangi seperti ini. Tapi untuk yang satu ini, Saya sudah sedikit mengompresnya sehingga berkasnya jadi sedikit lebih kecil ukurannya.

<script src="http://reader-download.googlecode.com/svn/trunk/pelangi.js" type="text/javascript"></script>

Letakkan saja kode itu di atas kode </head> atau letakkan dalam sebuah widget HTML/JavaScript. Efeknya bisa kalian lihat langsung di sini. Coba saja kamu dekatkan kursor mousemu ke tautan-tautan di blog ini.