Sunday, January 17, 2010

Beberapa email dari pembaca setia masuk ke Inbox Blogger Tune-Up menanyakan tentang cara membuat wadah iklan terapung, atau ada juga yang menyebut wadah iklan yang muncul tiba-tiba (ads popup). Sebelum menjawabnya, mari kita mengenali lebih dahulu apa itu Ads Popup. Ads Popup adalah iklan yang muncul tiba-tiba ketika pengunjung sedang membuka halaman blog kita, hal ini bertujuan untuk mencuri perhatian pengunjung yang sedang asik membaca artikel di blog kita. Tetapi hati-hati buat para pemilik blog, justru banyak diantara pengunjung blog yang merasa kesal dengan hal tersebut, jika ternyata iklan tersebut muncul berulang-ulang setiap sebuah halaman terbuka. Pada tips-n-trik blogger hack kali ini kita akan membuat ads popup yang bisa kita atur untuk muncul berulang-ulang atau hanya sekali saat pengunjung pertama kali membuka/mengunjungi blog kita. Untuk demo-nya silahkan lihat disini.
Ads Popup for Blogger

Membuat Wadah Iklan Tiba-tiba Muncul (Ads Popup Container)

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Laman"
Langkah 3
Klik "Tambah Gadget Baru" dengan tipe "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini pada bagian konten (tanpa judul gadget):
Kode CSS (cascading style sheet)
<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
}
</style>
Kode JavaScript
<script src="http://henscripts.googlecode.com/svn/trunk/popup/jspopupv1.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
Kode HTML
<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><button>Tutup</button></a></div>
<!-- Kode Iklan -->
<br/><font face="arial,sans-serif" color="#83878c" style="line-height: 8px; font-size: 9px; text-decoration:underline;"><a href="http://modification-blog.blogspot.com/2010/01/membuat-wadah-iklan-tiba-tiba-muncul.html" target="_blank">Widget by Blogger Tune-Up</a>
</div>
Langkah 5
Klik tombol "Simpan"

Keseluruhan kode Ads Popup Container
<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
}
</style>
<script src="http://henscripts.googlecode.com/svn/trunk/popup/jspopupv1.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><button>Tutup</button></a></div>
<!-- Kode Iklan -->
<br/><font face="arial,sans-serif" color="#83878c" style="line-height: 8px; font-size: 9px; text-decoration:underline;"><a href="http://modification-blog.blogspot.com/2010/01/membuat-wadah-iklan-tiba-tiba-muncul.html" target="_blank">Widget by Blogger Tune-Up</a>
</div>
Perhatikan kode CSS (Langkah 4 baris 1 sampai dengan baris 18)!
  • Ubah nilai 350 (langkah 4 baris 4) untuk mengatur lebar wadah;
  • ubah nilai FFFFFF (langkah 4 baris 7) untuk mengubah warna latar dari wadah ads popup;
  • ubah nilai 1px solid #333333 (langkah 4 baris 8) untuk mengatur garis pinggir, jika tidak tidak memerlukan garis pinggir ubah 1px menjadi 0px atau ubah "solid" menjadi "none" (tanpa tanda petik);
  • Untuk mengetahui kode-kode warna HTML silahkan klik disini.
Perhatikan kode JavaScript (Langkah 4 baris 19 sampai dengan baris 25)!
  • var persistclose=0, nilai 0 berarti ads popup akan selalu muncul walau diklik tombol "Tutup" pada saat pengunjung membuka halaman lain, nilai 1 berarti ads popup hanya akan muncul satu kali sampai pengunjung meng-klik tombol "Tutup" dan ads popup tidak akan muncul lagi walaupun pengunjung membuka halaman lain sampai browser ditutup;
  • var startX = 20 dan var startY = 20, nilai 20 adalah jarak x dan y antara ads popup dengan sisi browser dengan satuan pixel, ubahlah nilai 20 untuk mengatur jaraknya;
  • var verticalpos="fromtop" untuk mengatur dari mana ads popup muncul, jika "fromtop" berarti ads popup akan muncul dari atas dan selalu diposisi atas browser, jika di set "frombottom" berarti ads popup akan muncul dari bawah dan akan selalu diposisi bawah browser.
  • Gantilah kode <!-- Kode Iklan --> (Langkah 4 baris 28) dengan kode iklan milik anda.
Selamat mencoba dan semoga berhasil. Happy Blogging... :)

Update!

Agar background menjadi transparan silahkan tambahkan kode CSS dibawah ini:
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
Sehingga secara keseluruhan kode menjadi seperti dibawah ini:
<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;
}
</style>
<script src="http://henscripts.googlecode.com/svn/trunk/popup/jspopupv1.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><button>Tutup</button></a></div>
<!-- Kode Iklan -->
<br/><font face="arial,sans-serif" color="#83878c" style="line-height: 8px; font-size: 9px; text-decoration:underline;"><a href="http://modification-blog.blogspot.com/2010/01/membuat-wadah-iklan-tiba-tiba-muncul.html" target="_blank">Widget by Blogger Tune-Up</a>
</div>

Untuk versi terbaru silahkan di baca disini

Saturday, January 16, 2010

Setiap pemilik blog dapat dipastikan memajang gambar-gambar sebagai salah penguat keterangan atau hanya sekedar hiasan dalam sebuah artikel. Tetapi seperti pernah dijelaskan pada artikel "Membuat Keterangan Gambar (Image Caption)" sebelumnya, proses penambahan keterangan gambar atau image caption untuk blogger sangatlah cukup menyulitkan. Dan sekarangan Blogger Tune-Up akan mencoba memberikan tips-n-trick membuat keterangan pada gambar atau image caption pada blogger yang paling cepat dan mudah. Blogger hack kali ini menggunakan jQuery sebagai platform JavaScript-nya, dan cukup kita menambahkan beberapa kode sederhana maka gambar-gambar yang kita pajang pada blogger secara otomatis diberikan bingkai dan keterangan pada gambarnya.
Menambahkan Keterangan Pada Gambar

Langkah integrasi Image Caption/Keterangan Gambar pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</head>
Langkah 4
Masukan (copy paste) kode di bawah ini diatas kode pada langkah 3:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1693834/javascript/addcaption.js' type='text/javascript'/>
Langkah 5
Agar tampil menarik, gunakan CSS untuk mempercantik tampilan. Cari kode dibawah ini:
]]></b:skin>
Langkah 6
Masukan (copy paste) kode dibawah ini, diatas kode pada langkah 6:
div.addCaption {
margin-bottom:1.5em;
padding:10px;
text-align:center;
background:#f0f0f0;
border:1px solid #ccc;
color:#565656;
display:inline-block;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

div.addCaption img {
display:block;
}
Langkah 7
Simpan template, dan lanjutkan membaca....

Menyisipkan kode Image Caption/Keterangan Gambar pada artikel

Langkah A
Buatlah sebuah artikel dan masukan gambar (upload) yang ingin disisipkan pada artikel. Pindah mode penulisan ke Mode Edit HTML, dan cari kode <img ...>
Langkah B
Sisipkan kode Image Caption/Keterangan Gambar dibawah ini:
class='addCaption' title='Keterangan Gambar'
Sehingga kode gambar yang telah ditambah Image Caption/Keterangan Gambar seperti dibawah ini:
<a href="http://www.image.com//windows_flag.png">
<img class='addCaption' title='Keterangan Gambar' src="http://www.image.com/windows_flag.png" width="128" height="128"/>
</a>
Langkah C
Terbitkan artikel dan preview...

Keterangan:
  • Jika anda sudah memasang jQuery pada template sebelumnya, maka Langkah 4 tidak perlu dilakukan.
  • Cara lain memasang jQuery silahkan baca disini.
  • Perhatikan kode langkah 6! Kode #f0f0f0 (baris 5) digunakan untuk mengatur warna latar belakang, kode #ccc (baris 6) digunakan untuk mengatur warna garis tepi/border.
Selamat mencoba dan semoga berhasil. Happy Blogging... :)

Sunday, January 10, 2010

Menulis Artikel Blog versi Darren Rowse

Posted by dav On 9:24 PM
Artikel ibarat tubuh yang keberadaannya sangat mutlak bagi blog. Kualitas, kuantitas dan frekwensi blogger dalam membuat artikel sangat menentukan berhasil dan tidaknya seseorang dalam mengelola blog (diluar penguasaan teknik-teknik optimasi blog). Sangat wajar jika seseorang mengalami kesulitan dalam mencari ide, menuangkan ide dalam sebuah artikel blog. Perencanaan, essensi, dan masih banyak faktor-faktor yang mempengaruhi kualitas sebuah artikel blog. Dan jika anda termasuk kategori blogger yang sulit membongkar pemikiran diri sendiri, dibawah ini mudah-mudahan bisa dijadikan rujukan untuk memperkaya khasanah blogger anda. Blogger Tune-Up mencoba menerjemahkan secara bebas (plus tambahan menurut pandangan Blogger Tune-Up) artikel ini dari seorang blogger profesional, Darren Rowse sang pemilik blog Pro Blogger dengan judul artikel aslinya 21 Ways to Write Posts that Are Guaranteed to Grow Your Blog.
Menulis Artikel Blog versi Darren Rowse

Berikut tips-n-trik menulis artikel blog versi Darren Rowse:

  1. Tulislah artikel yang bermanfaat bagi orang lain
  2. Tulislah artikel yang unik, berbeda dari yang orang lain tulis
  3. Tulislah artikel yang bernilai berita baik terbaru atau sudah lama
  4. Tulislah artikel untuk yang pertama yang belum ditulis oleh orang lain
  5. Tulislah artikel yang membuat pembaca menjadi lebih pintar
  6. Tulislah artikel yang kontroversial tetapi tidak melanggar ketentuan
  7. Tulislah artikel yang berdasar hasil penelitian sendiri atau orang lain (tentunya sesuai ijin peneliti)
  8. Tulislah artikel yang menyentuh perasaan ketakutan seseorang terhadap suatu hal
  9. Tulislah artikel yang bisa membantu pembaca dalam meraih tujuan
  10. Tulislah artikel yang mampu mengundang respon pembaca
  11. Tulislah artikel yang dapat menyentuh emosi pembaca
  12. Tulislah artikel dengan melibatkan emosi pembaca
  13. Tulislah interpertasi atau terjemahan berita yang menarik dan hangat untuk pembaca
  14. Tulislah artikel yang inspiratif dan atau provokatif
  15. Tulislah artikel cerita yang mampu menggugah cara berfikir seseorang
  16. Tulislah artikel yang mampu memecahkan masalah
  17. Tulislah artikel yang lucu atau minimal membuat pembaca tersenyum
  18. Tulislah artikel yang bisa meringankan atau memberikan solusi pembaca dalam menghemat uang/tenaga
  19. Tulislah artikel yang banyak diyakini orang
  20. Tulislah artikel yang menjadi acuan/resource atau sumber
  21. Tulislah artikel yang keren yang mengundang decak kagum pembaca
Itulah tips-n-trik cara menulis artikel untuk blog... Jika pembaca mempunyai pengalaman atau referensi tambahan silahkan tambahkan sendiri atau tinggalkan jejak anda pada komentar. Happy Blogging... :)

Blog Linking - Berbagi Sumber Artikel

Posted by dav On 6:34 PM
Fasilitas ini hampir mirip dengan BlogThis!-nya Blogger, tetapi lebih sederhana dan mudah dipahami oleh para pengunjung blog kita. Hal ini bermanfaat untuk membagi link artikel dari blog kita kepada para pembaca yang ingin me-referensi-kan artikel kita. Pembaca hanya perlu menyalin link url artikel pada bagian akhir artikel yang sedang di baca dan menyimpannya sebagai referensi. Pada dasarnya tips-n-trik kali ini adalah pengembangan dari artikel "Membuat Text Area" hanya diberikan sedikit sentuhan. Kita sebenarnya bisa menempatkan blog linking ini dimana saja, tetapi akan lebih relevan jika ditempatkan diakhir artikel. Mau mencoba?
Blog Linking - Berbagi Sumber Artikel

Membuat Blog Linking pada akhir artikel blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Check "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
<data:post.body/>
Langkah 5
Simpan (copy paste) kode dibawah ini dibawah kode pada langkah 3:
<div align='center' style='padding: 2px; margin:2px;background-color:#fff;'>
<p>Jika anda suka silahkan tautkan ke artikel ini</p>
<textarea cols='61' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea>
</div>
Langkah 6
Simpan template dan preview blog

Keterangan:
  • Untuk merubah ukuran kotak text area, ubah nilai 61 pada cols='61' untuk kolom/panjang dan ubah nilai 2 pada rows='2' untuk baris/lebar (lihat kode pada langkah 5 baris 3)
  • Teks area ini bersifat readonly atau hanya bisa dibaca dan disalin tanpa bisa diubah oleh pengunjung/pembaca blog
  • Ketika cursor mouse diarahkan ke teks area maka secara otomatis blog linking akan terseleksi, pembaca hanya perlu klik kanan pada teks area dan salin
Selamat mencoba dan semoga berhasil. Happy blogging... :)

Saturday, January 9, 2010

Formulir Komentar Dengan Efek Wadah iBox

Posted by dav On 3:27 AM
Tips-n-trik blogger hack kali ini akan membahas satu efek iBox yang sebelumnya pernah dibahas, perbedaannya pada artikel sebelumnya Blogger Tune-Up hanya membahas efek iBox untuk Gambar. Pada artikel kali ini kita akan memberikan efek iBox container pada Formulir Komentar (iBox Container for Comment Form). Kerja efek iBox pada form komentar sebenarnya sama dengan efek yang ditampilkan pada gambar, ketika pengunjung meng-klik link komentar maka formulir komentar akan ditampilkan seperti dalam jendela baru dengan wadah iBox. Sedangkan bagian belakang formulir komentar akan ditutup dengan warna hitam transparan. Penasaran ingin mencoba lebih dulu? Silahkan kunjungi blog Kotretan Hendriono dan silahkan coba klik icon komentar, maka formulir komentar akan segera ditampilkan. Jika merasa cocok dengan efek tersebut, silahkan baca tips-n-trik blogger hack dibawah ini...
Formulir Komentar Dengan Efek Wadah iBox
Sebelum mencoba tips-n-trik blogger hack kali ini, kita harus sudah mencoba 2 artikel berikut:

Langkah integrasi efek iBox pada Formulir Komentar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Check "Expand Template Widget"
Langkah 4
Cari kode dibawah ini (kode dibawah ini adalah kode penempatan kotak komentar dibawah artikel):
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
Langkah 5
Tambahkan kode dibawah ini:
<a href='#formibox' rel='ibox&amp;width=505' title='Silahkan tinggalkan komentar anda'><data:postCommentMsg/></a>
<div id='formibox' style='display:none;'>
...
...disini kode pada langkah 4...
...
</div>
Sehingga jika kode dilihat semua setelah penambahan kode iBox efek, akan menjadi seperti dibawah ini:
<a href='#formibox' rel='ibox&amp;width=505' title='Silahkan tinggalkan komentar anda'><data:postCommentMsg/></a>
<div id='formibox' style='display:none;'>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</div>
Jika malas memasukan kode manual, silahkan timpah (replace) kode pada langkah 4 dengan kode diatas
Langkah 6
Simpan template dan preview blog anda...

Perhatian!
  • Efek iBox Container hanya akan bekerja jika kita telah meng-integrasi-kan kode iBox seperti pada artikel "Membuat Wadah iBox (iBox Container)"
  • Formulir komentar harus ditempatkan dibawah artikel, baca artikel "Formulir Komentar Di Bawah Posting/Artikel"
  • Atur lebar iBox dengan mengatur nilai 505 pada kode width=505 secara manual (lihat kode pada langkah 5 baris 1)
  • Jika ingin mengganti link komentar dengan gambar, ubah kode <data:postCommentMsg/> (lihat kode pada langkah 5 baris 1) dengan kode <img src="http://urlgambar/iconkomentar.png"/>
Selamat mencoba dan semoga berhasil. Happy Blogging... :)

Wednesday, January 6, 2010

Sembunyikan Judul Widget/Gadget

Posted by dav On 3:48 AM
Secara default Blogger membolehkan para penggunanya untuk memberi atau tidak memberi judul Gadget. Jika kita tidak memberikan judul gadget sebenarnya tidak menjadi masalah, tetapi hal ini justru membingungkan kita jika ingin mengubah atau menambah kode-kode pada gadget yang sudah ada, karena gadget tersebut akan diberi nama secara default oleh Blogger yaitu "HTML/JavaScript". Jika hanya satu atau dua gadget hal ini tidak menjadi masalah, bagaimana jika banyak? Kita akan kebingungan untuk menentukan mana gadget yang akan diubah atau ditambah kode. Jalan satu-satunya adalah dengan mencoba membuka satu persatu gadget yang akan kita ubah atau tambah kodenya. Padahal kita bisa memberikan nama pada gadget tersebut tanpa ditampilkan, sehingga akan lebih mudah untuk memanajemen gadget-gadget tersebut.
Sembunyikan Judul Widget

Sembunyikan (Tidak Menampilkan) Judul Gadget

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML" dan klik "Expand Template Widget"
Langkah 3
Cari judul gadget yang akan disembunyikan (contoh dibawah ini adalah gadget "Search"):
<b:widget id='HTML11' locked='true' title='Search' type='HTML'>
kemudian scroll dan cari kode dibawah ini:
<data:title/>
Kode diatas adalah kode yang akan menampilkan judul gadget yang sudah kita berikan pada gadget tersebut, secara utuh yang mengatur judul gadget adalah kode dibawah ini:
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
Berikut penjelasannya:
Kode baris 1
<b:if cond='data:title != &quot;&quot;'>
Jika judul gadget tidak kosong maka...
Kode baris 2
<h2 class='title'><data:title/></h2>
Judul gadget akan ditampilkan dengan konfigurasi (pengaturan ukuran huruf, warna huruf, jenis huruf dll) yang diambil dari class='title'
Kode baris 3
</b:if>
Pengaturan judul gadget ditutup
Langkah 4
Ganti (replace) kode:
class='title'
dengan kode:
style='display:none;'
sehingga secara keseluruhan kode gadget "Search" yang diganti menjadi:
<b:widget id='HTML11' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 style='display:none;'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Langkah 5
Simpan template dan preview...

Keterangan:
  • Contoh diatas menggunakan gadget dengan type "HTML/JavaScript" tetapi untuk kode judul gadget lain langkahnya sama.
  • Jika tidak terdapat kode class='title' dan hanya kode <h2><data:title/></h2> kita cukup menambahkan kode style='display:none;' sehingga menjadi <h2 style='display:none;'><data:title/></h2>
Selamat mencoba dan semoga berhasil. Happy Blogging... :)

Tuesday, January 5, 2010

Bertukar Link dengan Gambar (Versi 1)

Posted by dav On 1:08 AM
Kadang menjadi bingung untuk menerjemahkan bahasa aslinya kedalam bahasa Indonesia, tapi tidak menjadi masalah selama para pembaca setia bisa memahaminya. Maksud artikel kali ini adalah membuat suatu banner atau gambar yang akan digunakan untuk bertukar link dengan blogger lain atau yang biasa dikenal Link Exchange. Menurut informasi para master SEO, cara ini cukup lumayan ampuh untuk meningkatkan posisi blog kita pada mesin pencari (SERP:Search Engine Result Page). Semakin banyak blog lain merujuk atau menempelkan alamat blog kita maka semakin banyak Linkback (umpan balik) yang blog kita peroleh. Secara sederhana jika semakin banyak blog-blog yang senada merujuk kearah blog kita maka mesin pencari akan melihat dan menilai bahwa blog kita penting bagi pengunjung. Nilai inilah yang akan membuat mesin pencari perlu untuk menempatkan posisi blog kita pada posisi yang lebih baik. Begitulah kira-kira manfaat Link Exchange atau bertukar link dengan blog lain.
Bertukar Link dengan Gambar
Sebenarnya ada beberapa cara yang bisa kita gunakan untuk bertukar link dengan blog lain, dan artikel kali ini adalah salah satu caranya. Kita menyediakan sebuah image/gambar yang dibelakangnya telah kita sisipi alamat URL blog kita, sehingga ketika pengunjung melakukan klik pada gambar tersebut maka browser pengunjung akan diarahkan ke blog kita pada jendela browser yang baru (New Tab/Window).
Tips trik kali ini menggunakan gambar dan tombol yang akan mengarahkan para blogger yang akan bertukar link dengan blog kita untuk menambahkannya secara otomatis tanpa perlu copy paste pada gadget baru di blog mereka. Hal ini lebih memudahkan blogger lain dalam penambahan gadget baru pada sidebar-nya, sehingga proses Link Exchange akan lebih mudah.
Dibawah ini adalah kode yang digunakan untuk bertukar link dengan gambar yang akan ditambahkan secara otomatis sebagai gadget baru bagi blogger yang ingin bertukar link dengan blog kita. Blogger yang ingin menambahkan blog kita hanya perlu meng-klik tombol tambahkan maka seketika blogger akan dibawa pada jendela penambahan gadget baru jika blogger tersebut dalam keadaan login.

Langkah pembuatan Link Exchange dengan Gambar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Laman"
Langkah 3
Tambahkan gadget baru dengan type "HTML/JavaScript"
Langkah 4
Tambahkan kode dibawah ini pada bagian konten:
<center>
<img src="URLGambarAnda" value="NamaBlogAnda"/>
<form action="http://beta.blogger.com/add-widget" method="POST">
<input value="" name="widget.title" type="hidden"/>
<textarea style="display:none;" name="widget.content">
&lt;center&gt;&lt;a href="URLBlogAnda" target="_blank"&gt;&lt;img src="URLGambarAnda" title="NamaBlogAnda"&gt;&lt;/a&gt;&lt;/center&gt;
</textarea>
<input value="http://modification-blog.blogspot.com/2010/01/bertukar-link-dengan-gambar-versi-1.html" name="infoUrl" type="hidden"/>
<input value="tambahkan" name="go" type="submit"/>
</form>
</center>
Langkah 5
Simpan gadget dan contoh hasilnya seperti dibawah ini:

Keterangan:
  • URLGambarAnda : ganti kedua URLGambarAnda dengan URL dimana kita menyimpan gambar (misal: http://modification-blog.blogspot.com/image/linxchange.png)
  • NamaBlogAnda : ganti kedua NamaBlogAnda dengan nama blog kita (misal: Blogger Tune-Up)
  • URLBlogAnda : ganti URLBlogAnda dengan URL dari blog kita (misal: http://modification-blog.blogspot.com)
Selamat mencoba dan semoga berhasil. Happy Blogging... :)

Sunday, January 3, 2010

Menyembunyikan Blogger Navbar

Posted by dav On 10:54 PM
Navbar atau navigation bar terdapat di bagian paling atas, sebenarnya navbar sangat membantu bagi para pengunjung blog, karena disana terdapat tombol-tombol navigasi blogger. Tetapi terkadang bagi para pemilik Blog merasa hal tersebut kurang menguntungkan dari segi kegunaan dan kurang indah dari segi tampilan, bahkan beberapa blogger menyembunyikan navbar sebagai salah satu bentuk profesionalisme blogger. Blogger yang masih menggunakan navbar sebagian blogger menyebutnya kurang profesional. Entahlah, apa alasan para blogger dalam hal menyembunyikan navbar.
Menyembunyikan Blogger Navbar
Bagi para pemilik blog yang ingin menyembunyikan navbar bisa mengikuti blogger hack dibawah ini:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Letakan (copy paste) kode dibawah ini tepat diatas kode pada langkah 3:
.navbar {height:0px; visibility:hidden;display: none;}
Kode diatas akan menyembunyikan navbar secara permanen, atau kode dibawah ini:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100}
Kode diatas hanya menyembunyikan semi permanen, jika mouse diarahkan halaman blog paling atas maka navbar akan ditampilkan, jika mouse digeser menjauh dari bagian atas halaman blog maka navbar akan disembunyikan kembali.
#navbar-iframe {position: fixed;right: 0px;bottom: 0px;left: 0px;}
Kode diatas memindahkan posisi navbar dari bagian atas ke bawah.
Langkah 5
Simpan template dan preview blog anda, boom... apa yang terjadi? Lihat sendiri...
Selamat mencoba semoga berhasil. Happy blogging...