KITCHEN GARDEN'S: Blogger Hack

Tampilkan postingan dengan label Blogger Hack. Tampilkan semua postingan

Sabtu, 09 November 2013

Cara Menghilangkan Navbar (Navigation Bar)

Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.

Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena itu, kadang para blogger menghapus NavBar tersebut. Pertanyaannya adalah: Apa tidak melanggar Term of Service (TOS) dari Blogger.com?
Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga mendapat teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga tidak ada aturan yang cukup detail tentang hal ini.

Nah, bagaimana menghilangkan Navigation Bar?
Ada beberapa penyedia template yang memang sudah tidak ada NavBar-nya. Namun bagi kamu yang memakai template yang masih ada NavBarnya dan ingin menghilangkannya maka inilah caranya.

1. Kamu harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut ke dalam tag head

#navbar-iframe {
display: none !important;
}

contohnya sebagai berikut :
-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Kemudian simpan.

Selamat Mencoba.....!!

Cara Mengganti Icon Pada Address Bar

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....
masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='http://kendhin.890m.com/sonictrik.gif' rel='SHORTCUT ICON'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif

http://img110.imageshack.us/img110/6218/image2ie0.gif

http://img98.imageshack.us/img98/9617/image3cr0.gif

http://img134.imageshack.us/img134/633/image4hx4.gif

http://img139.imageshack.us/img139/83/image5oa7.gif

http://img509.imageshack.us/img509/6449/image6fu0.gif

http://img527.imageshack.us/img527/6543/image7go9.gif

http://img507.imageshack.us/img507/5774/image8wn8.gif

http://img150.imageshack.us/img150/5784/image9qo1.gif

http://img404.imageshack.us/img404/1214/image10vr1.gif

http://img412.imageshack.us/img412/3808/image11pc0.gif

http://img100.imageshack.us/img100/4658/image12du2.gif

http://img132.imageshack.us/img132/4733/image13lj1.gif

http://img145.imageshack.us/img145/7793/image14zg9.gif

http://img412.imageshack.us/img412/4403/image15jc7.gif

http://img264.imageshack.us/img264/7575/image16kn8.gif

Cara Mengganti Tanggal Posting dg Icon Calender

Akhirnya jadi juga, setelah beberapa hari nyari-nyari artikel tentang "cara mengganti tanggal dengan icon kalender" dan mengotak-atik template akhirnya berhasil juga aku membuatnya, fiuuhh :f dengan menghabiskan dana ber M-M (maksudnya Maribu, Mablas ribu) untuk melakukan penelitian dan dengan membanting keringat dan memeras tulang dan akhirnya berhasiiiiill..... Mau tahu cara membuatnya? jangan khawatir aku akan membagi-bagikan tutorial ini pada kalian dengan geratis (kalo ada yang mo bayar sih boleh aja :D ) yak mari kita mulai trik dan tipsnya.

Yang pertama harus kita lakukan yaitu mengganti setting tanggal dulu, caranya seperti biasa Login dulu ke blogger terus pilih Settings --> Formatting, ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy) nha yang masih pemula pasti bingung maksudnya kan? itu lho disebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun contohnya 1.13.2008 terus simpan

Langkah yang kedua pilih menu Layout --> Edit HTML . Trus beri tanda centang pada kotak Expand Widget Templates, Oh ya, jangan lupa di back-up dulu template kamu. Yang nggak tahu caranya memback-template silahkan lihat dulu artikel ini. udah? kalo udah mari kita mulai ke jeroannya.

1. Cari kode ini <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas) kalo dah ketemu taruh script berikut ini dibawahnya persis

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trik-tips.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

2. kalo udah cari kode ini:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

kalo ggak ada coba cari yang ini

h2.date-header {
margin:1.5em 0 .5em;
}

3. Kalo dah ketemu taruh script berikut dibawahnya

.dateblock {
background: url("http://img600.imageshack.us/img600/3576/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Kode http://img600.imageshack.us/img600/3576/bluecalend.gifadalah gambar icon kalender. kamu bisa menggantinya dengan gambar-gambar dibawah ini caranya ganti kode gambar tersebut dengan kode gambar berikut ini, misalnya kamu pingin kelender yang berwarna merah, maka ganti kode tersebut jadi http://img837.imageshack.us/img837/9199/redcalend.gif


http://i246.photobucket.com/albums/gg91/elu_isme/blackcalend.gif	http://img805.imageshack.us/img805/9918/blue2calend.gif	http://img600.imageshack.us/img600/3576/bluecalend.gif

http://img837.imageshack.us/img837/4311/greencalend.gif	http://img137.imageshack.us/img137/3329/orangecalend.gif	http://img196.imageshack.us/img196/8339/pinkcalend.gif

http://img837.imageshack.us/img837/9199/redcalend.gif	http://img220.imageshack.us/img220/3262/ungucalend.gif	http://img818.imageshack.us/img818/1760/yellowcalend.gif

Trus kode color:#3366CC; adalah kode warna
tanggal, kamu bisa menggantinya dengan warna yang lain. Kamu bisa lihat kode2 warnanya DISINI.

4. langkah selanjutnya yaitu kamu cari kode ini
<data:post.dateHeader/>, cara nyarinya biar gampang copy kode tersebut,
terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, nha langsung
ketemu kan. kalo udah ketemu ganti kode tersebut dengan script dibawah ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Simpan Template kamu dan lihat hasilnya. Berhasil nggak ya? :t

Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {

NB: Kalo Tanggalnya berubah menjadi tulisan "Undefine" itu pasti kamu tidak memperhatikan tutorial ini dari awal. Coba lihat lagi tutorial ini dari awal dan baca baik-baik perintahnya. :D

Selamat mencobaaaaaaaaaa!!!!!!!........

Mengganti Tulisan "Older Post / Newer Post" atau "Posting Lama / Posting Baru"

Biasanya dibagian paling bawah artikel kamu terdapat tulisan seperti ini "Older Post / Newer Post" atau "Posting Lama / Posting Baru". Nah mungkin awal-awalnya kamu nggak tahu maksudnya apa tulisan tersebut dan setelah tahu oooo ternyata itu link menuju ke artikel-artikel sebelumnya dan juga artikel-artikel yang baru. Nah mungkin kamu ingin mengganti tulisan tersebut dengan tulisan yang lain, misalnya dengan tulisan "Artikelku Sebelumnya" atau "Coretanku Yang dulu2" atau bahkan dengan sebuah gambar. Nha pingin tahu caranya? mari kita mulai Pelajaranya...

1. Seperti biasanya kita login dulu ke blogger trus pilih "Template --> Edit HTML".
2. Beri tanda centang pada kotak "Expand Widget Template"
3. Cari kode berikut ini, cara nyarinya biar mudah copy kode berikut ini lalu tekan "Ctr + F " dan paste kedalam kotak yg disediakan.

<data:newerPageTitle/>

4 . Ganti kode tersebut dengan tulisan yg kamu inginkan. Tapi jika kamu pingin ganti dengan gambar panah misalnya, ganti dengan kode seperti ini <img src="http://www.geocities.com/kendhin_x/arrow/newblue.gif"/>. text yg dicetak tebal adalah lokasi dari gambar, kamu bisa menggantinya dengan gambar yang kamu inginka atau bisa diganti dengan gambar yang aku sediain dibawah.
5. Yang diatas untuk mengganti tulisan "Newest Post" atau "Posting Baru".
6. Terus untuk tulisan "Older Post" atau "Posting Lama" coba cari kode berikut ini, lokasinya tidak jauh dari kode diatas atau dibawahnya sedikit.

<data:olderPageTitle/>

7. Kalo sudah ketemu ganti lagi dengan tulisan yang kamu inginkan. Jika pingin diganti menjadi gambar coba ganti dengan kode seperti ini <img src="http://www.geocities.com/kendhin_x/arrow/oldblue.gif"/>

8. Jika kamu pingin ganti warna biru jadi warna merah, tinggal ganti "newblue.gif" dengan "newred.gif" dan "oldblue.gif" ganti dengan "oldred.gif"

Berikut ini gambar panah dan kodenya


olblue.gif	newblue.gif

oldblack.gif	newblack.gif

oldgreen.gif	newgreen.gif

oldpink.gif	newpink.gif

oldred.gif	newred.gif

oldyellow.gif	newyellow.gif

Membuat Artikel yg Berhubungan (Related Post)

Keuntungan menampilkan "Artikel yang berhubungan" atau "Related Post", "Related Article" adalah para pembaca blog bisa dengan mudah menemukan informasi lain yang masih ada hubungannya dengan artikel yg sedang mereka baca. Contohnya seperti yang ada dibagian akhir dari artikel ini, disitu ada link-link dari artikel yang berhubungan yang berdasarkan pada kategori ato label yang sama. Nha mau tahu cara membuatnya?

Caranya cukup mudah, ikuti langkah2 berikut ini:
1. Login ke blogger Blogger
2. Pilih menu "Layout-->Edit HTML"
3. Beri tanda centang pada kotak "Expand Widgets Template".
4. Kemudian download "SCRIPT INI"
5. Buka file tersebut kemudian copy semua script yang ada didalamnya.
6. Setelah itu cari kode ini <data:post.body/> dan letakkan script tadi dibawahnya. Untuk blog yang ada "readmore"nya biasanya akan terdapat 2 kode. Nha km taruhnya dabawah kode yang pertama.
7. Kalo sudah simpan template km dan lihat hasilnya.

Tambahan:
Setelah jadi, jika kamu ingin merubah tulisan "Related Posts by Categories" maka cari kode tersebut di HTML, trus ganti dengan text/tulisan yg kamu suka.

Membuat Kotak Komentar Blogger di Bawah Postingan

Akhirnya datang juga....
Setelah lama ditunggu-tunggu oleh para penggemar setianya, akhir blogger/blogspot menerbitkan juga comment box atau kotak komentar yang langsung muncul berada dibawah postingan. Kalau dulu hanya berupa link "Post a Comment", maka yang sekarang lain, yg sekarang kotak komentarnya langsung muncul persis dibawah postingan (seperti kotak komentar dibawah ini). Dengan adanya kotak komentar yang seperti ini, akupun rela mengganti kotak komentarku yang dulu (haloscan) dengan comentbox yang ini. Walaupun kotak komentar ini masih dalam draft tapi sudah bisa dinikmati.

Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.

1. Login ke http://draft.blogger.com, Ingat yang http://draft.blogger.com bukan blogger.com.
2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi "Embedded below post" (lihat gambar dibawah)

3. Kemudian klik "Save Setting"

Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).

4. Selanjutnya pergi ke menu "Layout-->Edit HTML"
5. Beri tanda centang kotak "Expand widget templates".
6. Trus cari kode berikut ini :

7. Kemudian ganti kode tersebut dengan kode dibawah ini:

8. Lalu simpan template kamu.

Lihat deh hasilnya, coba kamu klik salah satu postingan kamu, maka dibawahnya akan muncul kotak komentar seperti punyaku ini (Bagi yang berhasil).

Jumat, 08 November 2013

Menampilkan / Pasang Emoticon di Kotak Komentar

Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui icon2 (emoticon). Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di area komentar. Gimana? kamu mau memasang emoticon ini?

Seperti biasanya, di trik ini akan diberikan dua macam emoticon, yaitu emoticon kucing (seperti punyaku ini) dan emoticon yahoo. Kamu tinggal pilih mana yang kamu suka.

Emoticon Yahoo :

Emoticon Kucing :

Gini nih cara membuatnya :

1. Pertama login ke blogger, trus ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode </body>

Untuk Emoticon Yahoo :

Untuk Emoticon Kucing :

4. Kemudian cari kode berikut ini :

5. Kalo sudah ketemu letakkan kode2 berikut setelah kode <p class='comment-footer'>

Ini untuk Yahoo emoticon :

Kalo mo yang emoticon kucing pake yang ini :

6. Kalo sudah trus di "save" dan coba lihat hasilnya

Tambahan
* Kadang-kadang ada beberapa template memiliki kode yang beda. Kalau caranya sudah dilaksanakan dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode untuk templatenya berbeda atau bisa juga karena mugnkin hosting untuk menaruh file emoticon dan javascriptnya sedang bermasalah.