Pucelle Blog: Blogger Hack

Showing posts with label Blogger Hack. Show all posts

Friday, December 7, 2012

Tips Cara Mudah Menghilangkan Navbar Blog Terbaru

Tips Cara Mudah Menghilangkan Navbar Blog Terbaru, – Mungkin anda berfikiran bahwa postingan ini adalah trik jadul, padahal tidak. Ini adalah cara menghilangkan navbar blog terbaru dengan metode terbaru dan juga legal.

Dulu, menghilangkan navbar blogger adalah hal yang kontroversial antara apakah hal tersebut melanggar aturan blogger atau tidak, namun sepertinya pendapat kontroversial tersebut harus berakhir dengan adanya fitur resmi blogger untuk menghilangkan navbar.

Cara menghilangkan Navbar blog terbaru

Berikut adalah langkah-langkah untuk menghilangkan navbar blog

Silahkan login ke blogger dengan ID anda
Klik Menu dropdown lalu pilih Tata letak

Klik Edit pada widget Navbar
Setelah muncul pilihan, pilih Off
Klik tombol Simpan.
Selesai. Kini navbar blog anda telah hilang.

Sebelum cara ini ada, seringkali banyak blogger menambahkan kode CSS untuk menyembunyikan tampilan navbar. Pada dasarnya teknik tersebut hanya menyembunyikan saja bukan menghilangkan, sehingga navbar blog tetap di load oleh browser. Bila anda masih menggunakan teknik tersebut, sebaiknya anda beralih ke cara baru seperti yang Kang Rohman diatas, selain ini adalah cara yang legal juga navbar blogger benar-benar hilang dan bukan hanya sekedar disembunyikan sehingga blog anda akan di load oleh browser lebih cepat dari sebelumnya dan tentu ini lebih SEO friendly.

Demikian panduan cara membuat blog mengenai cara menghilangkan navbar blog terbaru.

Menerapkan Desain yang Responsif

Ketika membuka blog pada layar yang berbeda, mungkin kita akan menemukan satu hal yang unik. Tampilan blog tidak berubah seperti aslinya, terutama bagi blog yang struktur pengkodean menggunakan fixed layout. Tidak jarang kita menggeser ke kanan & ke kiri — lama-lama jari jadi lentik— untuk membaca artikel atau beberapa widget pada sidebar. Idealnya, tampilan yang baik adalah menggeser ke atas & ke bawah.

Sebuah hal yang menarik ketika Blogger™ menambahkan fitur ini dalam kapabilitas tampilan blog pada versi mobile. Namun yang menjadi kendala adalah ketika kita telah menerapkan beberapa conditional tags dalam sebuah pengkodean atau widget, maka hal itu akan menjadi kompleks. Meskipun dalam penerapan untuk versi mobile sudah dapat dikustomisasi menurut keinginan pengelola, seperti menambahkan mobile='yes', mobile='no', dan mobile='only' pada widget ataupun penggunaan conditional tags berikut.

<b:if cond='data:blog.isMobile'>

Sebagai alternatif kita dapat menerapkan desain yang responsif pada blog dengan menggunakan media queries. Bukankan antara perangkat komputer & mobile berbeda dari sisi kekuatan memuat suatu halaman situs web atau blog? Benar sekali, jika ditampilkan dalam default, besar kemungkinan waktu memuat pada mobile akan lebih singkat. Tetapi apabila kita melakukan kustomisasi — pada tampilan mobile — hingga hampir mirip dengan tampilan di perangkat komputer, tentu akan menambah beban juga bukan? Yah, terutama di Blogger™. Berikut contoh sederhana penerapan media queries dalam CSS template — Optimasi Blog menggunakan cara ini.

@media screen and (max-width:800px) {
  …
  CSS untuk media screen dengan lebar maksimal 800px
  …
  <!-- contoh CSS:
  body {
    font-size: .875em;
    line-height: 1.7143em;
  }
  -->
}

@media screen and (max-width:600px) {
  …
  CSS untuk media screen dengan lebar maksimal 600px
  …
}

Atau dengan menggunakan penggabungan media queries (min & max)

@media screen and (min-width:600px) and (max-width:800px) {
  …
  CSS untuk media screen dengan lebar minimal 600px dan maksimal 800px
  …
}

Catatan: kode yang berwarna merah merupakan lebar layar, kita dapat menambah variabel lebar yang lain (1024px, 800px, 600px, 480px, 320px, dan sebagainya) di dalamnya. Dan masih banyak lagi metode media queries lain yang mungkin tidak hanya terbatas pada lebar layar, seperti lebar device (device-width).

Dengan menggunakan media queries, diharapkan tampilan blog akan sesuai dengan beberapa ukuran lebar layar yang berbeda. Tentunya harus disesuaikan pula dengan pengkodean template pada masing-masing blog. Kemudian akses URL yang dilakukan pengguna mungkin tidak akan bervariasi, seperti penambahan ?m=0 atau ?m=1 di belakang permalink. Hal inilah yang menjadi dasar mengapa saya mencoret “Lihat versi mobile” pada kaki blog ini, namun akan menjadi alternatif apabila akses sedang ‘lemot’ pada pengguna mobile.

Thursday, December 6, 2012

Beberapa Koleksi Style Buku Tamu

Beberapa Koleksi Style Buku Tamu , Banyak sekali sekarang Buku Tamu dengan berbagai gaya dan fitur seperti Melayang (kanan, kiri, bawah, atas), Sembunyi, Folting, Tanpa di Klik Terbuka Sendiri? dan masi banyak lagi. Semuanya bagus-bagus, namun dari beberapa Buku Tamu yang saya temukan ini sudah tren di kalangan para blogger.

Floating Kanan

Floating Kiri

Flash

Slide

Cara memasangnya di blog anda sangatlah mudah cukup ikuti langka berikut

Klik Tambah Gadget, Pilih HTML/JavaScript

Masukan Kodenya, Ganti Script

Dengan Kode Buku Tamu anda, Klik Simpan

sumber

Wednesday, December 5, 2012

Cara Menampilkan Tab "Uangkan" atau "Penghasilan" di Dasbor Blogger

Cara Menampilkan Tab "Uangkan" atau "Penghasilan" di Dasbor Blogger ,

Cara bagi blogger yang mempunyai blog bersub-domain blogspot bila ingin mendaftar di Google Adsense adalah langsung melalui blogger.com. Di blogger.com tersebut telah tersedia tab "Uangkan" atau "Penghasilan" untuk proses pendaftarannya. Namun, bila blog selama ini menggunakan setelan Bahasa Indonesia, maka tab tersebut tidak ada atau tidak muncul pada Dasbor blogger.com.

Untuk memunculkannya kita perlu mengubah setelan bahasanya menjadi Inggris atau English. Bagi yang menggunakan Antarmuka blogger lawas dapat disimak caranya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Setelan >> Format.

Klik "Setelan" lalu pilih tab "Format".

3. Lalu pada bagian "Bahasa" pilih "Inggris".

4. Klik tombol SIMPAN SETELAN.

5. Tab "Uangkan" sekarang sudah muncul.

Tab "Uangkan" sudah muncul.

Sedangkan untuk tampilan Antarmuka Blogger yang baru, bisa disimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik "Opsi Lainnya" (segi tiga) lalu pilih "Setelan".

Klik segi tiga (Opsi lainnya) lalu pilih Setelan.

3. Selanjutnya pilih "Bahasa dan pemformatan".

4. Lalu di bagian "Bahasa" pilih "Inggris-English".

5. Klik tombol "Simpan setelan".

6. Coba reload atau muat ulang laman dan lihat hasilnya.

Menu "Penghasilan" telah muncul.

Thursday, November 22, 2012

Navigasi Breadcrumbs dengan Microdata

Anda mungkin pernah membaca posting Menambah Lokasi Link Post (Breadcrumbs Trail) oleh Hoctro. Posting ini juga berhubungan dengan hal tersebut, namun di-aransemen dengan beberapa hack agar muncul di beberapa halaman & ditambahkan format microdata data-vocabulary. Penggunaan data-vocabulary dimaksudkan agar breadcrumbs mampu berdiri sendiri, sehingga akan harmonis dengan format microdata http://schema.org/Blog. Lebih lanjut mengenai breadcrumbs yang didukung beberapa format dapat kita telaah pada Rich snippets — Breadcrumbs.

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == "static_page"'>
  <!-- breadcrumb for the static page -->
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'><data:blog.pageName/></span></div>
    <b:else/>
      <b:if cond='data:blog.pageType == "item"'>
  <!-- breadcrumb for the post page -->
        <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast == "true"'>
  / <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
      </b:if>
    </b:loop>
  / <span itemprop='title'><data:post.title/></span></div>
          <b:else/>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'>Tanpa Label</span> / <span itemprop='title'><data:post.title/></span></div>
          </b:if>
        </b:loop>
      <b:else/>
        <b:if cond='data:blog.pageType == "archive"'>
  <!-- breadcrumb for the label archive page -->
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'>Arsip <data:blog.pageName/></span></div>
        <b:else/>
          <b:if cond='data:blog.pageType == "index"'>
  <!-- breadcrumb for non home page (2nd, search, label page) -->
            <b:if cond='data:blog.pageName == ""'>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'>Penelusuran Arsip Posting</span></div>
            <b:else/>
  <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> / <span itemprop='title'><data:blog.pageName/></span></div>
            </b:if>
          </b:if>
        </b:if>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

Untuk pengkodean berwarna merah, dapat diganti sesuai keinginan Anda dengan menyesuaikan pula di halaman apa ia ditampilkan. Sedangkan warna biru (“/”) merupakan pemisah (separator) antar title. Letakkan pengkodean pada “Edit HTML”, jangan lupa centang Expand Widget Templates. Kemudian cari kode berikut & taruh di atasnya.

<b:includable id='main' var='top'>

Kita telah menambahkan widget breadcrumbs (kalau boleh dikatakan demikian), tinggal cara memanggil serta meletakkan kode pemanggilan tersebut. Perlu diperhatikan, kemungkinan pengkodean tiap template dapat berbeda-beda. Cara memanggilnya adalah melalui markah berikut.

<b:include data='posts' name='breadcrumb'/>

Letakkan kode pemanggilan itu di atas <b:include data='top' name='status-message'/>, seperti yang dapat kita amati di bawah ini.

<!-- posts -->
<div class='blog-posts hfeed'>

  <b:include data='posts' name='breadcrumb'/>
  <b:include data='top' name='status-message'/>

Sedangkan untuk melakukan beberapa kustomisasi, tambahkan selector .breadcrumbs pada CSS template atau letakkan saja di atas ]]></b:skin>. Contoh:

.breadcrumbs {
  font: .875em/1.7143em monospace;
  margin: 0 0 1.7143em;
}

Penambahan breadcrumbs di atas, khusus dilakukan pada Blogger™ & pengkodeannya tidak mutlak demikian. Artinya kita masih dapat merubah atau melakukan modifikasi sesuai dengan pengkodean template yang digunakan.

Bahan Bacaan: Breadcrumb for Blogger format RDF (Resource Description Framework) — Blogger Plugins.

Sunday, October 21, 2012

Memodifikasi Tanggal Posting (date-header)

Pernah melihat hal yang menarik pada tanggal posting (date-header)? Atau kebanyakan tidak melihat, oleh karena tidak jarang elemen ini dihilangkan? Date Header merupakan kepala (judul) tanggal yang terdiri dari satu atau lebih posting, dimana mereka diterbitkan pada tanggal yang sama. Seandainya hari ini — 21 Oktober 2012 — Anda dapat menerbitkan sebanyak dua posting, maka kedua posting tersebut akan memiliki kepala tanggal 21 Oktober 2012.

Sebenarnya date header pada Blogger™ dapat ditampilkan dengan menarik, seperti sebagai icon kalender atau bentuk-bentuk lain. Mungkin disebabkan kekurang-tahuan kita, sehingga tidak jarang menghilangkan elemen ini. Berikut merupakan gambar pengaturan tanggal posting, baik melalui language and formating atau tata letak (layout) posting blog & kode elemen-nya.

Pengaturan Format Tanggal — Pengaturan tanggal posting (`date-header`) melalui *language and formating*.

Konfigurasi Posting Blog — Pengaturan tanggal posting (`date-header`) melalui tata letak (*layout*) posting blog.

<b:if cond='data:post.isDateStart'>
  &lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
  &lt;div class=&quot;date-posts&quot;&gt;
</b:if>

Backup terlebih dulu template sebelum melakukan trik blogger berikut ini. Kemudian akses edit HTML melalui menu Template pada dashboard Blogger™, klik tombol proses & centang “Expand Widget Templates”. Tampilan tanggal posting dapat dibuat sedikit menarik dengan menambahkan script berikut di atas </head>, sehingga nantinya format tanggal mudah untuk dikustomisasi.

<script type='text/javascript'>
//<![CDATA[
function replace_date(b){var a=b.split(' ');month="<span class='month'>"+a[0].slice(0,3)+"</span>";day=" <span class='day'>"+a[1].slice(0,2)+"</span><span class='sep'>, </span>";year="<span class='year'>"+a[2]+"</span>";document.write(month+day+year)};
//]]>
</script>

Cari markah date-header seperti pada kode yang diberi warna merah di atas, kemudian ganti dengan kode berikut. Oleh karena beberapa pengaturan template pada blog penulis, maka <h2> diganti dengan <div>.

<div class='date-header'><span><script> replace_date(&#39;<data:post.dateHeader/>&#39;);</script></span></div>

Format tanggal posting harus sesuai seperti gambar (figure) di atas, letaknya — sampai posting ini diterbitkan — berada pada urutan ketiga dari bawah (third from bottom). Contoh: “Oktober 21, 2012” atau “October 21, 2012“. Selanjutnya, menambahkan CSS berikut di atas ]]></b:skin>.

.date-header {
  background: #666;
  color: #fff;
  float: left;
  position: relative;
  text-align: center;
  width: 44px; /* perhatikan border-width left & right */
}
.date-header:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -20px; /* perhatikan border-width top & bottom */
  left: 0;
  border-color: #666 #666 #fff #666; /* nilai kode yang berwarna biru sama dengan nilai pada warna latar */
  border-style: solid;
  border-width: 8px 22px 12px; /* top=8px, bottom=12px, left & right masing-masing=22px */
}
.date-header .month {
  border-bottom: 1px solid #fff;
  display: block;
}
<!-- Menghilangkan koma & tahun -->
.date-header .sep, 
.date-header .year {
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}
<!-- Memberikan ruang disebelah kiri untuk ditempati date-header -->
.post {
  padding-left: 58px;
}

Terkadang .post dapat pula diganti dengan .post-outer — sedangkan atribut padding dapat pula diganti dengan margin — tergantung pengkodean dalam tiap-tiap template. Hasilnya dapat dilihat pada tanggal posting di blog ini atau dapat diamati melalui gambar berikut.

Sekarang tampilan tanggal posting lebih menarik bukan? Pun tidak perlu lagi meng-unggah gambar & sebagainya. Selamat mencoba trik blogger “memodifikasi tanggal posting (date-header)”. :)

Pucelle Blog