Sunday, December 27, 2009

Blogger jQuery Dock Footer

Posted by dav On 3:23 AM
jQuery adalah salah satu Framework JavaScript yang memiliki banyak pengembang. Diantara sekian banyak script yang dikembangkan, porsi animasi jQuery paling banyak diaplikasikan oleh para Blogger. Salah satunya adalah jQuery Dock Footer yang akan kita coba sekarang ini. Efek yang ditampilkan sangat menarik, widget/gadget akan naik ditampikan jika pengungjung mengarahkan mousenya ke bagian footer, jika mouse meninggalkan footer maka footer akan kembali ke posisi semua dan widget akan tersembunyi, selain itu posisi footer akan selalu tetap seperti terapung walaupun kita menggeser scrollbar naik turun. Animasi yang ditampilkan seperti kita menjatuhkan bola pada permukaan yang keras, sehingga bola cenderung memantul berulang-ulang diatas suatu permukaan. Sungguh menarik untuk diaplikasikan pada blog, selain menampilkan efek animasi memantul juga dapat memperluas area halaman blog, tampil rapi sehingga blog kita menarik untuk dipandang berlama-lama. Penasaran...????
Blogger jQuery Dock Footer

Langkah integrasi jQuery Dock Footer pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Jangan lupa klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:
#fake-body { overflow:auto; z-index:1; }
#dock { background:#ccc; height:200px; z-index:100; width:660px; }
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:
<script src='http://yandex.st/jquery/1.5.1/jquery.js' type='text/javascript' />
<script src='http://yandex.st/jquery/easing/1.3/jquery.easing.js' type='text/javascript'/>
<script>
$(document).ready(function() {
var easing_type = 'easeOutBounce';
var default_dock_height = '20';
var expanded_dock_height = $('#dock').height();
var body_height = $(window).height() - default_dock_height;
$('#fake-body').height(body_height);
$('#dock').css({'height': default_dock_height, 'position':'fixed', 'top': body_height});
$(window).resize(function () {
updated_height = $(window).height() - default_dock_height;
$('#fake-body').height(updated_height);
$('#dock').css({'top': updated_height});
});
$('#dock').mouseover(function () {
expanded_height = $(window).height() - expanded_dock_height;
$(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type});
}).mouseout(function () {
body_height = $(window).height() - default_dock_height;
$(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:800, easing: easing_type});
});
});
</script>
Langkah 8
Cari kode dibawah ini:
</body>
Lalu scroll sedikit keatas sehingga ketemu kode dibawah ini:
</div><!--end of outer-wrapper-->
Jika tidak ditemukan cukup cari kode </div> yang pertama dari bawah.
Langkah 9
Masukan kode dibawah ini diatas kode pada langkah 8 (yaitu </div> pertama dari bawah):
<div id='dock'>
<!-- Masukan kode dock footer disini -->
<p><a href="http://modification-blog.blogspot.com/">Blogger Tune-Up</a></p>
</div>
Langkah 10
Simpan Template dan Preview blog

Keterangan:
  • Perhatikan pada langkah 5, nilai 660 pada kode width:660px; silahkan diubah untuk menentukan lebar dari dock footer dan atau disesuaikan dengan Outer Wrapper. Ubah pula nilai 200 pada kode height:200px; untuk menentukan tinggi dock pada saat tidak diaktifkan.
  • Perhatikan pada langkah 8, yang dicari adalah kode </div> dari outer wrapper, sebenarnya diatas kode </body> juga bisa, tetapi mengalami error tampilan bagi browser yang memiliki versi rendah.
  • Perhatikan langkah 9, masukan kode yang kita inginkan, jika kita akan menggunakan kode yang sudah ada, silahkan anda perhatikan kode-kode template semisal; Lowerbar, Categori, Label, Link, Archives, Comments dan lain sebagainya. Setelelah itu copy kode tersebut mulai dari kode dibawah ini:
<b:section class='lowerbar' id='lowerbar14' preferred='yes'>
<!-- Kode-kode yang mengikutinya -->
</b:section>
  • Setelah itu berikan class dan id yang berbeda, class bisa sama dengan kode-kode yang lainnya tetapi id harus unik, hanya satu id setiap template.
Selamat mencoba dan semoga berhasil. Happy blogging... :)

Float Sponsor Banner untuk Blogger

Posted by dav On 1:47 AM
Float Sponsor Banner kurang lebih berarti spanduk sponsor terapung. Kali ini kita akan menyediakan space (ruang) bagi mereka yang ingin beriklan di blog kita. Banyak tempat yang bisa kita sediakan untuk memberikan kesempatan kepada para sponsor blog kita, salah satunya dengan membuat Float Sponsor Banner yang posisinya bisa kita atur dibawah atau diatas pada halaman blog kita. Sesuai namanya float (terapung) maka banner ini posisinya terapung pada blog kita, tidak terpengaruh dengan gerakan scrollbar. Teknik ini memang sangat sederhana, dan mudah diaplikasikan. Sebagai contoh perhatikan banner pada blog ini yang berada dibawah...
Float Sponsor Banner untuk Blogger

Langkah Integrasi Float Sponsor Banner pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
#sponsorbanner {
display:block;
background:#000;
color:#fff;
position:fixed;
bottom:0px;
left:0px;
width:100%;
text-align:center;
height:40px;
z-index:999;
}
#sponsorbanner a {
margin:0 auto;
}
#sponsorbanner img {
border:none;
}
Langkah 5
Cari kode dibawah ini:
<body>
Langkah 6
Masukan (copy paste) kode dibawah ini dibawah kode pada langkah 5:
<div id="sponsorbanner">
<a href="http://bonprog.blogspot.com/" target="_blank"><img src="banner.png"/></a>
</div>
Langkah 7
Simpan Template dan baca keterangan sebelum Preview blog

Keterangan:
Perhatikan Langkah 4!
  • background:#000; ubah nilai 000 untuk mengubah warna background
  • bottom:0px; bottom berarti banner ditempatkan pada bagian bawah halaman, ubah menjadi top:0px; jika banner ingin ditempatkan pada bagian atas halaman
  • height:40px; adalah tinggi banner yang akan ditampilkan, ubahlah nilai 40 sesuai dengan tinggi banner yang akan kita gunakan, tetapi nilai 40 ini sama dengan tinggi banner yang sudah kita siapkan
Perhatikan Langkah 6!
  • http://bonprog.blogspot.com/ adalah alamat tujuan ketika pengunjung meng-klik banner, ubahlah alamat tersebut sesuai dengan tujuan blog sponsor
  • banner.png adalah URL dimana banner tersebut ditempatkan, ubahlah URL sesuai dengan dimana sponsor atau kita menempatkan banner tersebut
Selamat mencoba dan semoga berhasil. Happy Blogging... :)

Thursday, December 17, 2009

Jika artikel blog kita ditulis bukan hanya oleh pemiliknya saja, maka ada baiknya kita berbagi pula pendapatan dengan para kontributor. Hal ini awalnya sulit karena blogger tidak menyediakan fasilitas ads share (berbagi iklan) tetapi bukan berarti tidak ada jalan keluar. Kita hanya perlu menambahkan beberapa kode yang digunakan untuk menampilkan iklan sesuai dengan penulis artikel tersebut. Artinya iklan yang ditampilkan adalah iklan milik penulis artikel tersebut, dan ini mungkin jalan adil untuk bisa saling berbagi. Ada pendapat? Silahkan tinggalkan di kotak komentar.
Berbagi Penghasilan Iklan dengan Kontributor

Memasang Kode Iklan Sesuai Kontributor

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand template widget"
Langkah 4
Cari posisi dimana kita akan menempatkan iklan
Langkah 5
Masukan kode dibawah ini:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "kontributor-1"'>
Masukan kode iklan kontributor 1 disini
</b:if>
<b:if cond='data:post.author == "kontributor-2"'>
Masukan kode iklan kontributor 2 disini
</b:if>
<b:if cond='data:post.author == "kontributor-3"'>
Masukan kode iklan kontributor 3 disini
</b:if>
</b:if>
Langkah 6
Ganti nama-nama kontributor sesuai nama kontributor penulis artikel di blog kita (nama harus sesuai dengan nama profil blogger)
Langkah 7
Simpan template

Semoga dengan tips trik blogger ini bisa membantu para blogger yang ingin berkonstribusi pada blog kita. Happy Blogging... :)
Telah banyak script code untuk platform Wordpress yang memudahkan proses pemasangan video pada blog, baik itu pada artikel maupun pada kelengkapan lainnya. Para pengembang script code untuk blogger juga tidak tinggal diam, salah satunya Jonraasch yang telah banyak membantu blogger dalam memudahkan integrasi video streaming dengan blogger. Setelah sebelumnya kita dipermudah dalam pemasangan file audio dengan MP3 player, sekarang kita akan mencoba pemasangan video streaming pada blogger.
Melampirkan Video Streaming Youtube

Pemasangan Video Streaming 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 kode dibawah ini diatas kode pada langkah 3:
<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'></script>
<script src='http://yandex.st/swfobject/2.2/swfobject.min.js' type='text/javascript'></script>
<script src='https://sites.google.com/site/henscripts/jscript/jquery.youtubin.min.js' type='text/javascript'></script>
<script type='text/javascript'>
// first we call the 'ready' function
$(function() {
// so when the page loads we can call the replacement:
$.youtubin();
});
</script>
Langkah 5
Simpan template

Melampirkan video streaming pada artikel blogger
Setelah langkah pemasangan script code video streaming diatas, sekarang kita tinggal melampirkan video-video yang akan kita tampilkan pada artikel.

Langkah A
Ambil link/URL video yang akan kita lampirkan. Kita bisa mengambil video-video dari layanan video streaming Youtube (Layanan Video Streaming selain YouTube silahkan coba sendiri)
Langkah B
Masukan Link/URL video pada artikel seperti kita memasukan link-link biasanya.
Langkah C
Terbitkan artikel dan Preview

Keterangan:
  • Jika blog anda sudah menggunakan jQuery maka link jQuery pada langkah 4 tidak perlu ditambahkan lagi
  • Jika ternyata video streaming tidak mampu diload dengan baik kemungkinan terjadi bentrok kode dengan kode selain dari jQuery, periksa kemungkinan blog kita menggunakan framework lain selain jQuery.
Selamat mencoba dan semoga berhasil... Happy blogging... :)

Menambahkan MP3 Player pada Blog

Posted by dav On 1:51 AM
Tips trik kali ini adalah cara menambahkan MP3 Flash Player hasil penyederhanaan Abu Farhan. Terima kasih yang sebesar-besarnya untuk Abu Farhan yang telah menyederhanakan penambahan MP3 Flash Player untuk Blogger. Bagi para blogger yang ingin berbagi Audio buatan sendiri atau ingin berbagai Audio apa saja, dengan tips trik kali ini sangat memudahkan kita dalam mengintegrasikannya dengan blogger.
Mengutip dari Blog sang Empunya (Abu Farhan) terdapat beberapa kemampuan dari MP3 Flash Player ini, diantaranya:
  • Cara memasang Flash Mp3 Player sangat mudah, tanpa dibutuhkan keahlian.
  • Otomatis memberikan link download dan Popup player (Update terbaru)
  • Mempunyai pilihan 8 Flash player (Update terbaru sebelumnya cuma 5)
  • Jenis player bisa dipilih secara umum atau tiap link berbeda-beda dengan penambahan tag id
Dengan menggunakan metode ini para pemilik blog tidak harus pusing-pusing menambahkan (embed) kode yang rumit, cukup dengan menambahkan link biasa maka secara otomatis file Audio dapat diputar pada blog kita. MP3 Flash Player ini menggunakan type seperti dibawah ini:
  1. 1pixelout (player yg digunakan podpress, wpaudioplayer atau podcasting)
  2. Jw Player (flash player paling lengkap)
  3. Google player
  4. Flow Player
  5. 1pixelout Versi 1
  6. Flash mp3 player
  7. Mirpod
  8. Nyfty player
Penasaran ingin mencoba MP3 Player yang dapat menambah nilai lebih untuk Blog kita?

Integrasi MP3 Flash Player pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
<body>
Langkah 4
Tambahkan kode dibawah ini dibawah kode pada langkah 3:
<script type="text/javascript" src="http://dl.dropbox.com/u/3558628/MP3Player/mp3playermin.js"></script>
<script style="text/javascript">
var paramplayerflash=1;
</script>
Langkah 5
Simpan template

Menambahkan file MP3 pada Blog/Artikel

Setelah langkah diatas maka kita tinggal menambahkan file MP3 pada artikel atau bagian blog kita dengan mudah, cukup dengan menambahkan link tujuan maka secara otomatis file tersebut akan memiliki Player yang memiliki fasilitas slider dan volume. Dengan catatan link/URL file MP3 tersebut berjenis direct link (link langsung).
Contoh menambahkan file audio pada artikel seperti dibawah ini:
<a href="http://www.archive.org/download/Ustadz_Maududi_Kajian_Lain2/Hakikat_Ikhlas_Ustadz_Maududi_Abdullah.mp3">Hakikat Ikhlas</a>

Pengaturan jenis Player

Mengatur jenis Player dengan menambahkan Tag ID, seperti contoh dibawah ini:
<a id="1" href="http://www.archive.org/download/Ustadz_Maududi_Kajian_Lain2/Hakikat_Ikhlas_Ustadz_Maududi_Abdullah.mp3" target="_blank">Hakikat Ikhlas</a>
Hasilnya seperti dibawah ini:
1. 1pixelout versi 2 (id="1")
Hakikat Ikhlas
2. jw player (id="2")
Hakikat Ikhlas
3. google player (id="3")
Hakikat Ikhlas
4. flow player (id="4")
Hakikat Ikhlas
5. 1pixelout versi 1 (id="5")
Hakikat Ikhlas
6. Flash mp3 player (id="6")
Hakikat Ikhlas
7. Mirpod (id="7")
Hakikat Ikhlas
8. Nyfty player (id="8")
Maher Zain - Baraka Allah Lakuma

Sumber artikel dari Abu Farhan
Selamat mencoba dan semoga berhasil. Happy Blogging... :)

Tuesday, December 15, 2009

Bagi para blogger yang menyimpan file-nya di Googlepages maka bersiap-siaplah untuk kehilangan data tersebut, jika kita tidak segera melakukan pemutakhiran (Update) data tersebut. Apalagi bagi para blogger yang menyimpan file-file gambar, JavaScript, CSS atau file-file lain yang merupakan file dari template blog kita, maka lakukanlah pemutakhiran data tersebut agar kita tidak kehilangannya. Bagaimana kita melakukan pemutakhiran template tersebut?

Proses Pemutakhiran File-file Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Perhatikan pada bagian Dasbor kita akan melihat sebuah kotak peringatan seperti dibawah ini:
Dasbor Peringatan
Langkah 3
Klik link "Mutakhirkan dan tinjau", sebaiknya buka pada tab baru
Langkah 4
Jika diminta account dan password isikan sesuai dengan account dan password Google anda.
Langkah 5
Kita akan dibawah pada halaman "Update template references" dan perhatikan kalimat "Found 23 references to Page Creator. Update references »"
Jika kalimatnya "No references to Page Creator." maka kita tidak perlu melakukan update file.
Update template references
Langkah 6
Lakukan backup template untuk berjaga-jaga dari kemungkinan kegagalan proses pemutakhiran dengan mengklik link "Download your blog template"
Download your blog template
Langkah 7
Klik tombol "Next"
Langkah 8
Kita akan dihadapkan pada halaman "Review changes" yang berisi informasi perubahan alamat URL file yang akan dipindahkan, setelah itu klik tombol "Update" pada bagian bawah. Dan tunggu beberapa saat.
Langkah 9
Jika hasilnya "No references to Page Creator." pada blog yang kita mutakhirkan maka kita telah berhasil.
Semoga berhasil...Happy blogging... :)

Thursday, December 10, 2009

Update! Integrasi Anchor Link Otomatis

Posted by dav On 6:55 AM
Banyak yang tidak berhasil dengan tips trik Integrasi Anchor Link Otomatis pada Artikel? Sebenarnya trik itu berjalan baik dengan beberapa kali percobaan, tapi karena karakter template atau mungkin hal lain yang membuat script tersebut tidak bekerja semestinya, maka kali ini posisi script tersebut kita pindah dan telah dicoba dengan berbagai jenis template berhasil dengan baik. Silahkan coba, dan jika tetap ada kegagalan silahkan tinggalkan komentar teman dan atau periksa kembali script jika ada kemungkinan script bertabrakan dengan script yang lainnya, karena jika terjadi bentrok script maka script tersebut akan saling melemahkan atau mengalahkan maka semua atau salah satu diantaranya tidak bekerja dengan baik.

Update! Integrasi Anchor Link Otomatis

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</body>
Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<script src='http://URL/autolink.js'>
</script>
<script type='text/javascript'>
var f = new autoLink();
f.add(&quot;keyword 1&quot;, &quot;http://URL.com/&quot;);
f.add(&quot;keyword 2&quot;, &quot;http://URL.com/&quot;);
f.add(&quot;keyword 3&quot;, &quot;http://URL.com/&quot;);
f.add(&quot;keyword 4&quot;, &quot;http://URL.com&quot;);
// dan seterusnya...
f.startScript();
</script>
</b:if>
Langkah 5
Simpan template

Keterangan:
  • Ubah keyword dengan kata kunci yang akan digunakan
  • Ubah URL sesuai dengan URL yang dituju (rekomendasi URL masih artikel dari blog kita)
  • Script diatas hanya akan berjalan pada saat sebuah artikel di buka dan tidak akan di load pada halaman utama, jika ingin script ingin diload pada halaman utama dan halaman perartikel maka buang kode dibawah ini (perhatikan langkah 4):
<b:if cond='data:blog.url != data:blog.homepageUrl'>
...
</b:if>

Selamat mencoba semoga berhasil... Happy Blogging... :)

Friday, December 4, 2009

Membuat Wadah (Container) dengan Background

Posted by dav On 8:37 AM
Sesuai permintaan pembaca setia Blogger TuneUp mengenai pembuatan wadah atau container dengan berlatar belakang gambar seperti kotak Blogroll dibawah ini. Maka pada artikel kali ini mari kita bongkar "behind the scene of container image background" (lebay mode on) hehehe... Tanpa basa basi mari kita kuak misteri blogger hack tersebut...
Contoh Wadah

Membuat Wadah (Container) dengan Background

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:
#wadah {padding: 5px;overflow: auto;width: 96%;height: 250px;margin-bottom: 10px;background-attachment: absolute;background:#fff url(http://lh6.ggpht.com/_xcD4JK_dIjU/Sofer2ZD7pI/AAAAAAAADTo/Pm1KhugFWwE/d/maria_ozawa.gif) no-repeat right top;border: 1px solid rgb(204, 204, 204);}
#wadah ul{list-style-type: none;margin: 0px;padding: 2px;}
#wadah ul li{display:block;line-height:2em;border-bottom:1px dotted #ccc;background: url(http://lh5.ggpht.com/_xcD4JK_dIjU/SoferzemgGI/AAAAAAAADTk/AHLpvar3C5Q/d/indonesia.png) no-repeat 0px 4px;padding: 0 1px 0 19px;}
#wadah li {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;}
#wadah li a:link{text-decoration:none;color:#00F;}
#wadah li a:visited{text-decoration:none;color:#000;}
#wadah li a:hover{text-decoration:underline;}
Langkah 5
Simpan Template dan lanjutkan membaca
Langkah 6
Masuk ke "Tata Letak - Elemen Laman"
Langkah 7
Tambahkan sebuah gadget dengan tipe HTML/JavaScript
Langkah 8
Masukan kode dibawah ini pada konten/isi:
<div id="wadah">
<ul>
<li><a href="http://modification-blog.blogspot.com/" target="_blank">Blogger TuneUp</a></li>
<li><a href="URL Link Anda" target="">Nama Link Anda</a></li>
...dan seterusnya
</ul>
</div>
Langkah 9
Simpan Gadget
Langkah 10
Preview Blog anda

Keterangan:
  • Untuk mengubah background silahkan ubah link http://.../maria_ozawa.gif pada kode CSS yang ada pada langkah 4
  • Ubah nilai 250px untuk menentukan tinggi container (lihat kode CSS langkah 4)
  • Untuk mengubah bentuk bullet silahkan ganti link http://.../indonesia.png (lihak kode CSS langkah 4)
  • Tambah jumlah List pada ...seterusnya dengan kode yang terdapat diantara kode <li><a href="URL Link Anda" target="">Nama Link Anda</a></li> dan ubahlah URL Link Anda dengan URL yang dituju dan Nama Link Anda adalah nama link yang dituju
Selamat mencoba dan semoga berhasil... happy blogging ... :)

HTML Color Codes

Posted by dav On 8:03 AM
Satu lagi tool yang disediakan oleh Blogger TuneUp untuk mengetahui kode warna HTML yang sering kita temukan di kode-kode blog. Mudah-mudahan tool ini bisa membantu para blogger untuk menemukan kode-kode warna HTML yang kadang membingungkan. Untuk menggunakannya silahkan tinggal klik pada warna yang di inginkan dan lihat kode HTML yang ditampilkan pada kotak "Kode warna yang dipilih:". Selain itu bagi para blogger yang ingin menggunakan software gratis silakan download disini, nama software untuk menemukan kode warna HTML adalah HTML Color Picker.

Friday, November 27, 2009

Update! Artikel Terkait Versi 2.0

Posted by dav On 11:35 PM
Mungkin diantara pembaca setia Blogger Tune-Up ada yang menggunakan fasilitas Artikel Terkait Versi 2.0? Tertanggal 27 Nopember 2009 pembuat dan pengembangan Blogger Related Posts Service melakukan update fasilitasnya dengan menggunakan kunci, hal ini dengan beberapa alasan sebagai berikut (diambil dan diterjemahkan bebas dari blog resmi BPRS):
  • Saya ingin membuat beberapa orang menyimpan duplikat blog dengan template yang sama.
  • Saya ingin mencegah pra-instal template, tidak semua pemilik blog ingin Related Posts.
  • Saya ingin memastikan bahwa Anda memiliki kesempatan untuk membaca Kebijakan Pemblokiran.
Jika blog anda pada bagian artikel terkait menampilkan pesan dibawah ini:
The key is not supplied. Please go to BRPS to obtain one.
If you are reading this, please relay the message to the owner of this blog.
Berarti blog anda membutuhkan kunci untuk mengaktifkan fasilitas Artikel Terkait.

Aktifkan Fasilitas Artikel Terkait

Langkah 1
Silahkan arahkan browser ke situs BPRS
Langkah 2
Masukan alamat blog anda pada kotak "Your blog address:"
Langkah 3
Klik tombol "Get Key and Installation Steps"
Langkah 4
Perhatikan kunci (key) yang diberikan dan copy
Langkah 5
Login ke Blogger
Langkah 6
Masuk ke "Tata Letak - Edit HTML" dan checklist "Expand Template Widget"
Langkah 7
Cari kode dibawah ini:
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>
Langkah 8
Modifikasi kode pada langkah 7 dengan menambahkan kunci (warna merah) yang sudah diperoleh hingga menjadi seperti dibawah ini:
<script src='http://brps.appspot.com/brps.js?key=[kunci]' type='text/javascript'/>
Langkah 9
Simpan template dan preview blog...

Jika fasilitas ini masih juga diblok silahkan gabung di forum BPRS dan minta admin untuk membuka fasilitas ini pada blog anda. Semoga berhasil dan happy blogging... :)

Membuat Widget Artikel Terkait (Versi 4.0)

Posted by dav On 10:40 PM
Blogger Tune-Up pernah membahas "Membuat Artikel Terkait" hingga 4 versi, yaitu Versi Klasik, Versi 1.0, Versi 2.0, dan Versi 3.0. Tetapi semuanya ditempatkan dibagian bawah artikel dan akan muncul sesuai dengan kategori pada artikel yang sedang kita buka. Sedangkan kali ini kita akan membuat artikel terkait yang ditempatkan pada sidebar, dan sidebar artikel terkait ini akan ditampilkan jika pengunjung membaca artikel saja, tidak akan tampil pada halaman utama. Sebenarnya tips trik kali ini adalah pengembangan dari artikel terkait Versi 1.0. Untuk demonya silahkan lihat pada blog Program Gratisan.
Widget Artikel Terkait

Langkah Integrasi Widget/Gadget Artikel Terkait pada Sidebar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
</head>
Langkah 5
Masukan kode JavaScript dibawah ini diatas kode pada langkah 4:
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
Langkah 6
Cari kode dibawah ini:
<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 != "true"'>,</b:if>
</b:loop>
</b:if>
Langkah 7
Tambahkan kode dibawah ini:
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
Sehingga menjadi seperti dibawah ini:
<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 != "true"'>,</b:if>
<!-- Tambahan Kode-->
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
<!--Tambahan Kode-->
</b:loop>
</b:if>
Langkah 8
Simpan template
Langkah 9
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 10
Klik "Tambah Gadget" pada sidebar dengan tipe "HTML/JavaScript"
Langkah 11
Beri judul gadget baru (misal; Artikel Terkait) tersebut dan masukan kode dibawah ini pada konten:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Langkah 12
Klik "Simpan" gadget, belum selesai sampai disini...
Langkah 13
Masuk ke "Tata Letak - Edit HTML" dan "Expand Template Widget"
Langkah 14
Cari kode sesuai nama Gadget yang telah kita buat pada langkah 11, sebagai contoh pada langkah 11 adalah "Artikel Terkait", dan tambahkan kode (yang diblok) seperti dibawah ini:
<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Langkah 15
Simpan template

Keterangan:
  • Perhatikan Langkah 7 pada kode max-results=10, ubah nilai 10 untuk menentukan jumlah posting yang akan ditampilkan
  • Hati-hati pada langkah 14, salah memasukan kode maka akan ada sidebar yang muncul pada saat artikel dibuka saja, dan tidak akan muncul pada halaman utama
Selamat mencoba, semoga berhasil... Happy blogging...:)

Saturday, November 21, 2009

Tulisan Arab pada Blogger

Posted by dav On 10:06 AM
Artikel ini dikhususkan bagi blogger Islam yang ingin menampilkan ayat-ayat Al-Qur'an, Hadist, atau tulisan arab lainnya didalam artikel blog-nya. Hal tersebut tidaklah sulit karena kita hanya membutuhkan sedikit tambahan kode CSS (cascading style sheet) didalam template blog kita agar tulisan arab tersebut dapat ditampilkan didalam artikel blog. Mau mencoba? Silahkan ikuti langkah dibawah ini.
Tulisan Arab pada Blog

Langkah integrasi kode CSS tulisan arab pada template blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode CSS dibawah ini diata kode pada langkah 3:
.arabic {
font-family: Traditional Arabic;
font-size: 24px;
direction:rtl;
line-height: 200% ;
font-weight: bold;
}
Langkah 5
Simpan template

Langkah dan contoh integrasi tulisan arab pada artikel blog
<div class="arabic"> بِسْÙ…ِ اﷲِالرَّØ­ْÙ…ٰÙ†ِ الرَّØ­ِÙŠْÙ…</div>
Hasilnya:
بِسْÙ…ِ اﷲِالرَّØ­ْÙ…ٰÙ†ِ الرَّØ­ِÙŠْÙ…

<p class="arabic"> بِسْÙ…ِ اﷲِالرَّØ­ْÙ…ٰÙ†ِ الرَّØ­ِÙŠْÙ…</p>
Hasilnya:

بِسْÙ…ِ اﷲِالرَّØ­ْÙ…ٰÙ†ِ الرَّØ­ِÙŠْÙ…


<span class="arabic"> بِسْÙ…ِ اﷲِالرَّØ­ْÙ…ٰÙ†ِ الرَّØ­ِÙŠْÙ…</span>
Hasilnya:
بِسْÙ…ِ اﷲِالرَّØ­ْÙ…ٰÙ†ِ الرَّØ­ِÙŠْÙ…

Keterangan:

  • Ubahlah font-size dan font-weight untuk mengatur ukuran huruf
  • Gunakan kode <span class="arabic"> بِسْÙ…ِ اﷲِالرَّØ­ْÙ…ٰÙ†ِ الرَّØ­ِÙŠْÙ…</span> untuk mencampurnya didalam artikel
Selamat mencoba semoga berhasil... Tinggalkan jejak pada komentar dan Happy Blogging... ;)

Monday, November 16, 2009

Membuat Widget Daftar Isi

Posted by dav On 4:25 AM
Beberapa hari ini Blogger TuneUp standby tanpa artikel-artikel maupun-maupun trik baru, hal ini dikarenakan kesibukan di darat (dunia nyata). Berbagai upaya dilakukan untuk kembali aktif nge-blog tapi nyatanya tetap saja tidak bisa dilakukan. Dalam waktu yang begitu sempit Blogger TuneUp mencoba menyajikan tips dan trik yang sudah lama dibuat tapi baru kali ini bisa di publish. Mudah-mudahan bukan merupakan tips trik basi atau tertinggal jaman.
Tips trik kali ini akan membahas tentang "Membuat Widget Daftar Isi", sedikit berbeda dengan tips trik membuat daftar isi yang pernah dibuat sebelumnya, seperti membuat tabel daftar isi dan membuat daftar isi pada halaman artikel. Kali ini pemasangan daftar isi sangatlah sederhana, hanya cukup menambahkan kode pada gadget/widget HTML, maka dengan otomatis artikel akan disusun sesuai dengan tanggal pembuatan artikel tanpa perlu memasukan judul artikelnya satu persatu. Lebih sederhana, mudah dan otomatis. Mau mencoba???
Membuat Widget Daftar Isi

Membuat Gadget Daftar Isi

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 3
"Tambah Gadget" baru dengan type "HTML/JavaScript"
Langkah 4
Tambahkan kode dibawah ini:
<div style="border: 1px solid #000; overflow: auto; height: 220px;">
<script style="text/javascript" src="http://URL/daftar_isi.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
Langkah 5
Simpan Gadget

Keterangan:
  • border: 1px solid #000 : Ubahlah border sesuai dengan keinginan anda
  • height: 220px : Ubah nilai 220px untuk mengatur tinggi widget daftar isi
  • Jika ingin menampilkan daftar isi sesuai dengan label/kategori tertentu silahkan tambahkan kode /-/Label sehingga menjadi seperti kode dibawah ini (ganti Label dengan kategori yang ingin ditampilkan):

<script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>

Selamat mencoba semoga berhasil... Tinggalkan jejak anda dan Happy Blogging :)

Friday, October 23, 2009

Beberapa saat yang lalu, Blogger TuneUp pernah membahas tips trik blog tentang "Fasilitas AutoLoad pada Mesin Pencari Blog". Pada tips trik kali ini masih berhubungan dengan fasilitas pencarian artikel pada blog kita menggunakan Google Ajax Custom Search sebagai pengembangan dari Google Custom Search.
Google Custom Search adalah salah satu fasilitas yang disediakan oleh Google sebagai suatu mesin pencari yang dapat disesuaikan dengan keinginan para penggunanya. Sehingga Google Custom Search mampu diarahkan untuk mencari sesuatu yang lebih terarah, terperinci dan disesuaikan dengan kebutuhan pencarian tertentu. Google memberikan kebebasan kepada penggunanya untuk membuat target pencarian terarah pada situs tertentu, sesuai keyword tertentu dan atau sesuai kategori tertentu.
Ajax adalah salah satu bahasa pemrograman turunan dari JavaScript yang mampu melakukan beberapa perintah sekaligus dengan cepat, ringan dan dengan hasil akhir yang hampir mendekati maksud dan tujuan para penggunanya. Google sebagai salah satu developer JavaScript telah mengintegrasikan bahasa pemrograman Ajax pada beberapa aplikasi buatannya, salah satunya dengan mengintegrasikan Ajax dengan Google Custom Search, sehingga proses pencarian akan lebih cepat, tepat, ringan dan tidak memakan banyak tempat (space) untuk menampilkan hasil pencariannya.
Telah lama blogger mendukung Google Custom Search melalui tersedianya gadget Google Custom Search tetapi tidak menggunakan Ajax, sehigga proses pencarian bekerja lebih lama serta hasil pencarian akan ditampilkan dalam lembar yang terpisah. Hal ini membuat proses pencarian artikel blog sangat tidak nyaman bagi mereka yang tidak terbiasa menggunakan Google Custom Search.
Tapi dengan terintegrasinya Google Custom Search dengan Ajax API membuat proses pencarian artikel pada blog kita menjadi lebih cepat, tepat tanpa perlu membuka halaman baru untuk menampilkan hasil pencarian artikel pada blog kita, hal ini membuat hasil pencarian Google Custom Search merupakan bagian dari blog kita. Selain itu Google Ajax Custom Search bisa dintegrasikan dengan Google Adsense bagi mereka yang sudah bergabung dengan program penerbit Adsense. Makin lengkap saja fasilitas mesin pencari pada blog. Untuk mencobanya silahkan gunakan Google Ajax Custom Search diatas
Google Ajax Custom Search
Kode Google Ajax Custom Search tersedia pada Google Web Element dengan 3 pilihan, yaitu:
  • Pencarian artikel blog kita secara otomatis
  • Pencarian artikel blog kita dan menggunakan Adsense untuk pencarian
  • Menggunakan Custom Search Engine milik kita
Untuk menampilkan iklan Adsense maka kita harus memilih opsi 2 dan opsi 3. Jika kita memilih opsi yang kedua maka kita harus menyediakan ID Penerbitan Adsense kita (yang berformat pub-xxxxxxxx). Jika menggunakan opsi yang ketiga maka kita harus menyediakan Custom ID, yang bisa kita peroleh dari kode Google Custom Search.

Mengambil Kode Google Ajax Custom Search

Langkah 1
Kunjungi Google Web Element disini.
Langkah 2
Pilih opsi yang sesuai dengan keinginan kita. Jika ingin menggunakan opsi kedua siapkan terlebih dahulu ID penerbit Adsense kita, jika memilih opsi ketiga siapkan Custom Search ID kita. Opsi kedua dan ketiga hanya untuk blogger yang sudah bergabung dengan program penerbitan Google Adsense, jika anda belum mempunyai ID penerbit Adsense maka cukup menggunakan/memilih opsi kesatu.
Langkah 3
Ambil (copy) kode yang telah tersedia pada kotak dibawah kalimat "Copy and paste this snippet code into your webpage"

Pemasangan Google Ajax Custom Search Pada Blogger

Langkah 4
Login ke Blogger
Langkah 5
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 6
"Tambah Gadget" baru dengan tipe HTML/JavaScript
Langkah 7
Masukkan kode Google Ajax Custom Search yang sudah kita peroleh pada konten/isi gadget baru
Langkah 8
Atur tata letak gadget tersebut pada lokasi yang cukup lebar (rekomendasi diatas posting) hal ini agar iklan ditampilkan dalam ruangan yang cukup (khusus bagi yang menggunakan kode opsi kedua dan ketiga)
Langkah 9
Simpan gadget baru tersebut, preview blog dan tes Google Ajax Custom Search milik kita.

Keterangan:
Bagaimana menarik bukan? Selamat mencoba dan semoga berhasil. Tinggalkan jejak, saran dan kritik melalui kotak komentar dibawah. Happy blogging... :)

Tuesday, October 20, 2009

Fasilitas AutoLoad pada Mesin Pencari Blog

Posted by dav On 5:44 AM
Pada artikel sebelumnya Blogger Tune-Up pernah membahas tips trik membuat Mesin Pencari 4 dalam 1. Dalam artikel kali ini kita akan mencoba menambah fasilitas AutoLoad yaitu fasilitas yang secara otomatis mencari dan menemukan artikel sesuai dengan kata kunci (keyword) yang kita masukan tanpa harus meng-klik tombol "Search".
Pada saat kita memasukan kata kunci tertentu pada kotak pencarian maka secara otomatis judul artikel akan ditampilkan pada bagian bawah kotak kata kunci kemudian kita dapat melihat rangkuman artikel dengan meng-klik bullet segitiga pada artikel, hal ini bermanfaat untuk mempercepat proses pencarian. Dan jika artikel yang di-load tidak sesuai dengan yang dimaksud baru kita mencoba meng-klik tombol "Search". Fasilias AutoLoad ini masih tetap menggunakan kode JavaScript dengan core json yang memanfaatkan feed default dari blogger. Jika ingin mencoba fasilitas ini silahkan coba ketikan kata kunci tertentu pada fasilitas mecin pencari lokal pada blog ini dan perhatikan hasil AutoLoad dibawahnya. Menarik bukan????
Pencarian Artikel AutoLoad

Penambahan Fasilitas AutoLoad Pada Mesin Pencari Blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 3
Klik "Edit Gadget" pada Gadget Pencarian yang pernah kita buat
Langkah 4
Isi kode dari Gadget Pencarian tersebut seperti dibawah ini (lihat artikelnya disini):
<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://modification-blog.blogspot.com/search" method="get">
<input id="pm-f-h" value="" name="q" size="27" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" value="" name="as_q" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" value="" name="as_q" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" name="s" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="modification-blog.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>
Langkah 5
Tambahkan kode dibawah ini pada kode langkah 4:
onclick="ts_loadFeed()" onkeyup="ts_titleSearch(this.value)"
Sehingga menjadi seperti kode dibawah ini:
<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://modification-blog.blogspot.com/search" method="get">
<input id="pm-f-h" onkeyup="ts_titleSearch(this.value)" value="" name="q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" onkeyup="ts_titleSearch(this.value)" value="" name="as_q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" onkeyup="ts_titleSearch(this.value)" value="" name="as_q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" onkeyup="ts_titleSearch(this.value)" name="s" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="modification-blog.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>
Langkah 6
Masukan kode dibawah ini setelah kode pada langkah 5 yang telah dimodifikasi:
<div id="ts_content_list" onclick="this.innerHTML+=ts_http.readyState"></div>
<script type="text/javascript">
var ts_summary_length = 150;
var ts_blog_url = "http://modification-blog.blogspot.com";
var ts_NO_RESULTS = "Tidak ditemukan";
var ts_SEE_SUMMARY = "Tampilkan rangkuman";
var ts_HIDE_SUMMARY = "Sembunyikan rangkuman";
var ts_LOADING = "Loading...";
var ts_TYPE_KEYWORDS = "Masukan kata kunci";
</script>
<script src="http://hensblog.googlecode.com/files/custom_search_v1.1.js"/></script>
Sehingga secara keseluruhan kode yang telah dimodifikasi dan telah ditambahkan kode menjadi seperti dibawah ini:
<div id="pm-search">
<ul>
<li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li>
</ul>
<div id="pm-search-h">
<form action="http://modification-blog.blogspot.com/search" method="get">
<input id="pm-f-h" onkeyup="ts_titleSearch(this.value)" value="" name="q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
</form>
</div>
<div id="pm-search-g">
<form action="http://blogsearch.google.com/blogsearch" method="get">
<input id="pm-f-g" onkeyup="ts_titleSearch(this.value)" value="" name="as_q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-b">
<form action="http://search.blogger.com/" method="get">
<input id="pm-f-b" onkeyup="ts_titleSearch(this.value)" value="" name="as_q" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="modification-blog.blogspot.com" name="bl_url" type="hidden"/>
</form>
</div>
<div id="pm-search-t">
<form action="http://www.technorati.com/search.php" method="post">
<input id="pm-f-t" maxlength="255" onkeyup="ts_titleSearch(this.value)" name="s" onclick="ts_loadFeed()" size="27" type="text"/>
<input value="Search" type="submit"/>
<input value="searchlet" name="sub" type="hidden"/>
<input value="modification-blog.blogspot.com" name="from" type="hidden"/>
<input value="n" name="authority" type="hidden"/>
<input value="n" name="language" type="hidden"/>
</form>
</div>
</div>
<div id="ts_content_list" onclick="this.innerHTML+=ts_http.readyState"></div>
<script type="text/javascript">
var ts_summary_length = 150;
var ts_blog_url = "http://modification-blog.blogspot.com";
var ts_NO_RESULTS = "Tidak ditemukan";
var ts_SEE_SUMMARY = "Tampilkan rangkuman";
var ts_HIDE_SUMMARY = "Sembunyikan rangkuman";
var ts_LOADING = "Loading...";
var ts_TYPE_KEYWORDS = "Masukan kata kunci";
</script>
<script src="http://hensblog.googlecode.com/files/custom_search_v1.1.js"/></script>
Langkah 7
Simpan Gadget dan preview blog

Keterangan:
  • Ubahlah URL http://modification-blog.blogspot.com sesuai dengan alamat blog anda.
  • Kode pada langkah 6 sebenarnya bisa di letakan pada widget/gadget HTML/JavaScript yang terpisah (berdiri sendiri), dan gadget tersebut merupakan gadget yang akan menampilkan AutoLoad hasil pencarian.
Jika blog anda telah menggunakan mesin pencari berjenis Google Custom Search, lakukan modifikasi seperti dibawah ini jika ingin menambahkan fasilitas AutoLoad.
Langkah A
Perhatikan kode Google Custom Search dibawah ini:
<form action='http://www.google.co.id/cse' id='cse-search-box' target='_blank'>
<div>
<input name='cx' type='hidden' value='partner-pub-XXXXXXXXXX'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='s' name='q' style='height:30px' type='text'/>
<input id='searchsubmit' name='sa' type='submit' value='Search'/>
</div>
</form>
<script src='http://www.google.co.id/coop/cse/brand?form=cse-search-box〈=in' type='text/javascript'>
Langkah B
Tambahkan kode dibawah ini:
onclick="ts_loadFeed()" onkeyup="ts_titleSearch(this.value)"
Sehingga menjadi seperti dibawah ini:
<form action='http://www.google.co.id/cse' id='cse-search-box' target='_blank'>
<div>
<input name='cx' type='hidden' value='partner-pub-XXXXXXXXXX'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='s' name='q' onclick="ts_loadFeed()" onkeyup="ts_titleSearch(this.value)" style='height:30px' type='text'/>
<input id='searchsubmit' name='sa' type='submit' value='Search'/>
</div>
</form>
<script src='http://www.google.co.id/coop/cse/brand?form=cse-search-box〈=in' type='text/javascript'>
Langkah C
Tambahkan kode pada langkah 6 diatas, dibawah kode pada langkah B. Sehingga menjadi seperti dibawah ini:
<form action='http://www.google.co.id/cse' id='cse-search-box' target='_blank'>
<div>
<input name='cx' type='hidden' value='partner-pub-XXXXXXXXXX'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='s' name='q' onclick="ts_loadFeed()" onkeyup="ts_titleSearch(this.value)" style='height:30px' type='text'/>
<input id='searchsubmit' name='sa' type='submit' value='Search'/>
</div>
</form>
<script src='http://www.google.co.id/coop/cse/brand?form=cse-search-box〈=in' type='text/javascript'>
<div id="ts_content_list" onclick="this.innerHTML+=ts_http.readyState"></div>
<script type="text/javascript">
var ts_summary_length = 150;
var ts_blog_url = "http://modification-blog.blogspot.com";
var ts_NO_RESULTS = "Tidak ditemukan";
var ts_SEE_SUMMARY = "Tampilkan rangkuman";
var ts_HIDE_SUMMARY = "Sembunyikan rangkuman";
var ts_LOADING = "Loading...";
var ts_TYPE_KEYWORDS = "Masukan kata kunci";
</script>
<script src="http://hensblog.googlecode.com/files/custom_search_v1.1.js"/></script>

Keterangan:
  • partner-pub-XXXXXXXXXX adalah kode yang anda peroleh dari Google Custom Search.
  • Jika kode Google Custom Search tidak ingin disatukan dengan kode langkah 6, "Tambah Gadget" Baru dengan tipe HTML/JavaScript lalu masukan kode (langkah 6) pada bagian konten/isi gadget baru tersebut (tanpa judul gadget).
Selamat mencoba dan semoga berhasil. Tinggalkan jejak anda dengan memberikan komentar atau sekedar saran pada kotak komentar dibawah ini. Happy Blogging... :)

Monday, October 19, 2009

Integrasi Anchor Link Otomatis pada Artikel

Posted by dav On 5:29 AM
Memasang anchor link pada kata kunci (keyword) tertentu merupakan salah satu teknik SEO, hal ini bertujuan untuk meningkatkan posisi blog pada mesin pencari (SERP). Mesin pencari akan dengan mudah menemukan kata kunci tertentu yang didalamnya mengandung anchor link dan meng-index-nya pada database mesin pencari mereka. Selain itu anchor link juga mempermudah pembaca setia blog kita untuk menemukan artikel yang terkait dengan artikel yang sedang dibaca, sehingga mereka tidak perlu repot untuk mencari-cari artikel yang mereka butuhkan.
Tetapi pekerjaan ini tidaklah mudah, kita harus mempersiapkan link-link yang akan kita letakan pada kata kunci tertentu dan memasukannya dengan cara manual. Pada tips trik blogger hack kali ini Blogger Tune-Up akan berbagi teknik pembuatan anchor link secara otomatis tanpa perlu memasukan satu persatu secara manual.

Integrasi Link Otomatis Pada Artikel

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 3
"Tambah Gadget" baru tanpa judul dengan tipe "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada isi/konten gadget yang baru saja kita buat:
<script src="http://URL/autolink.js">
</script>
<script type="text/javascript">
var f = new autoLink();
f.add("keyword 1", "http://URL.com");
f.add("keyword 2", "http://URL.com");
f.add("keyword 3", "http://URL.com");
f.add("keyword 4", "http://URL.com");
// dan seterusnya...
f.startScript();
</script>
Langkah 5
Simpan gadget tersebut dan preview blog...

Keterangan:
  • Ubahlah keyword 1, keyword 2, keyword 3, keyword 4 dengan kata kunci tertentu. Tetapi hati-hati antara kata kunci yang kita buat pada script auto link dengan kata kunci pada artikel harus sama persis (case sensitive). Misal; kita membuat kata kunci "Blogger Hack" pada script auto link tetapi kita menuliskannya pada artikel kata kunci tersebut adalah "blogger hack" maka auto link tidak akan mengenalinya dan kata kunci blogger hack tidak akan menjadi anchor link secara otomatis.
  • Ubahlah http://URL.com sesuai dengan link tujuan dari kata kunci yang dibuat. URL bisa berupa kategori dan artikel dari blog kita atau link situs/blogger lain.
  • Kata kunci ini tidak terbatas, tergantung keinginan kita. Untuk menambahkan kata kunci lain, ikuti script diatasnya atau script ini; f.add("keyword 5", "http://URL.com");
Selamat mencoba dan semoga berhasil. Tinggalkan jejak anda pada kotak komentar jika mengalami kegagalan atau sekedar ucapan terima kasih. Happy Blogging... :) Jika gagal baca Update! Integrasi Anchor Link Otomatis

Saturday, October 17, 2009

Membuat Gadget Terapung (Floating Widget)

Posted by dav On 11:59 PM
Sebelumnya Blogger Tune-Up pernah membahas cara membuat Menu Navigasi Terapung dan Float Nav Bar. Pada artikel kali ini merupakan pengembangan dari trik-trik blogger hack yang pernah dibahas, yaitu kita akan membuat gadget terapung yang tidak terpengaruh oleh scrollbar dan selalu dalam posisi tetap.
Mungkin teman-teman pernah jalan-jalan ke blog orang lain dan menemukan sebuah tombol di pinggir halaman yang jika di klik akan menampilkan sesuatu (misal; shoutbox, buku tamu, subscriber, dan lain sebagainya) dan posisinya selalu tetap walaupun halaman tersebut kita geser atas bawah kiri kanan. Sebenarnya hal tersebut pada dasarnya adalah sebuah gadget yang diatur seakan-akan mengapung atau menempel pada halaman. Sebagai contoh Blogger Tune-Up menggunakan gadget terapung ini untuk menempatkan ShoutMix yang sudah lama hilang pada sebelah kanan atas dengan tombol bertuliskan "PESAN".

Langkah integrasi gadget terapung (floating widget)

Langkah 1
Login ke blogger
Langkah 2
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 3
"Tambah Gadget" Baru dengan tipe "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada isi/konten gadget yang baru kita buat:
<style type="text/css">
#nempel{position:fixed;top:65px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #A5BD51 url('http://lh5.ggpht.com/_xcD4JK_dIjU/Stq23DPOQUI/AAAAAAAADhQ/2imPnFpVUrA/d/floatnav.jpg')no-repeat;}
.nempelisi{float:left;border:2px solid #A5BD51;background:#CCFFFF;padding:8px;}
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">
<!-- Kode Isi Gadget Terapung -->
<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div>
<span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #999" href="http://modification-blog.blogspot.com/2009/10/gadget-terapung-floating-widget.html" target="_blank">Widget by Blogger Tune-Up</a></span>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>
Langkah 5
Ganti <!-- Kode Isi Gadget Terapung --> dengan kode yang akan kita tampilkan pada gadget terapung.
Langkah 6
Simpan Gadget dan Preview blog

Keterangan:
  • Jika ingin membuat kotak pesan seperti pada blog ini, silahkan buat account di ShoutMix dan ambil kode yang diberikan, masukan kode tersebut menggantikan kode <!-- Kode Isi Gadget Terapung -->.
Selamat mencoba dan semoga berhasil, jangan lupa tinggalkan jejak dengan mengisi komentar dibawah. Happy Blogging... :)

Wednesday, October 7, 2009

Church Template Blogger

Posted by dav On 10:13 PM
Akhirnya beres juga konversi template Church buatan Brian Gardner untuk Wordpress ke template versi Blogger. Sungguh sangat melelahkan mempelajari dan mengkonversi template Wordpress buatan Brian Gardner ini. Walaupun masih ada beberapa kelemahan tetapi tidak terlalu bersifat dasar. Bagi teman-teman blogger yang ingin mencoba template ini, tunggu beberapa hari lagi, soalnya sedang dibuat tutorialnya terlebih dahulu.
Supaya nanti pada saat pemasangan tidak begitu banyak persoalan, mudah, lancar dan tidak mengecewakan. Untuk versi Wordpress silahkan lihat demonya disini, tapi jangan berharap gratis. Untuk demo versi Blogger lihat disini. Bagaimana ada komentar, caci maki, saran, kritik atau hujatan? Silahkan tinggalkan pada komentar dibawah. Dan mohon bantuannya untuk menge-check pada browser yang berbeda, maklum tidak punya komputer sendiri (hehehe...).
Church Template Blogger

Menambahkan Tombol Tweet

Posted by dav On 9:29 AM
Salah satu cara untuk meningkatkan backlink (Link Balik) terhadap blog kita adalah dengan berkomentar pada blog lain, bertukar link dengan sesama blogger dan masih banyak cara yang telah dibahas oleh para master SEO (Search Engine Optimization). Kali ini kita akan mencoba bantuan salah satu situs social networking yang cukup terkenal yaitu Twitter dengan bantuan situs agregator TweetMeme.
Tekniknya sederhana, para pemilik blog cukup menambahkan tombol twitt pada blog agar para pembaca dengan mudah memilih artikel yang menarik pada blog kita yang kemudian akan di bookmark pada Twitter dengan bantuan situs agregator TweetMeme. Dengan teknik seperti ini, para pengunjung akan dengan mudah merekomendasikan suatu artikel yang menarik kepada temannya melalui Twitter dan mem-bookmark-nya pada TweetMeme miliknya sehingga jika suatu hari pembaca tersebut lupa maka dengan mudah akan ditemukan pada kumpulan bookmark-nya di TweetMeme. Prinsip kerjanya hampir mirip dengan RSS tetapi keuntungan dengan teknik ini artikel yang telah di Twit oleh pembaca akan secara otomatis tersebar melalui jaringan Twitter pembaca tersebut. Semakin banyak hits Twit maka semakin banyak pula backlink terhadap blog kita, hal ini secara otomatis akan menaikkan posisi blog kita pada mesin pencari. Begitulah kurang lebihnya...

Integrasi Tombol Tweet pada Artikel Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
<data:post.body/>
Langkah 5
Masukan (copy paste) kode Tweet dibawah ini tepat diatas kode pada langkah 4:
<div style='float:right; padding:10px 0 0 5px'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
tweetmeme_service = 'bit.ly';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>
Langkah 6
Simpan template dan preview

Keterangan:
Dibawah ini penjelasan dari TweetMeme:
TweetMeme adalah layanan yang mengumpulkan semua link yang populer pada Twitter untuk menentukan link yang populer. TweetMeme mengumpulkan link tersebut ke dalam Kategori, Sub Kategori dan Saluran, sehingga mudah dalam menyaring kekeliruan untuk menemukan apa yang menarik menurut Anda.
Untuk lebih jelasnya silahkan baca penjelasan dari situs TweetMeme.

Saturday, October 3, 2009

Membuat Daftar Isi Pada Halaman Artikel

Posted by dav On 10:58 AM
Semakin banyak cara untuk membuat daftar isi pada blogger, mungkin diantaranya ada yang pernah mencoba "Memanajemen Arsip Blog" atau "Membuat Tabel Daftar Isi" atau bahkan "Artikel Terbaru dengan Google Dynamic Feeds" hanya sekedar untuk menampilkan daftar artikel yang telah kita buat. Sebenarnya semua tergantung selera kita tentang pembuatan Daftar Isi ini. Dan salah satu dari sekian metode pembuatan Daftar Isi, mungkin teknik yang sekarang akan kita bahas adalah metode yang paling sederhana. Metode ini sebenarnya pengembangan dari tips trik "Membuat Artikel Daftar Isi".

Langkah Pembuatan Daftar Isi

Langkah 1
Login ke Blogger
Langkah 2
Buat sebuah artikel dengan masuk ke "Dasbor - Posting - Entri Baru"
Langkah 3
Judul posting bebas, (sebaiknya Daftar Isi atau Arsip).
Langkah 4
Masukan (copy paste) kode dibawah ini pada Mode "Edit HTML":
<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://ALAMAT-URL/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>
Langkah 5
Terbitkan Entri (Artikel)

Keterangan:
  • Ganti ALAMAT-URL dengan alamat blog anda.
  • Artikel ini bersumber pada blog Abu Farhan dan BloggerBuster.
  • Ingat!!! Ini bukan di pasangkan pada Template ataupun Widget, tetapi pada artikel blog kita.
Selamat mencoba dan semoga berhasil. Happy Blogging... :)

Friday, October 2, 2009

Title Blog SEO | Aregnoz SEO Tutorial

Posted by dav On 6:11 PM
Title Blog SEO | SEO Tutorial
Title SEO adalah salah satu trik agar blog kita terindeks paling atas saat searc di google. Berikut ini adalah title Blog seo yang sudah saya coba dan hasilnya mantab gan.

Monggo di terapkan di Blog anda.
<head>


<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<meta content='Description Blog mu' name='DESCRIPTION'/>
<meta content='Keywordmu' name='KEYWORDS'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>
</b:if>

<meta content='index, follow' name='robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='id' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='global' name='distribution'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<link expr:href='data:blog.url' rel='canonical'/>

<b:skin><![CDATA[
Copy script yang berwarna Kuning di bawah <head> dan di atas <b:skin><![CDATA[
Terakhir, Jangan lupa save template anda.

Wednesday, September 30, 2009

Membuat Widget Subscribe

Posted by dav On 11:39 PM
Subscribe adalah fasilitas yang dipergunakan untuk menyebarkan artikel dari blog kita kepada mereka yang berlangganan artikel via email secara otomatis. Memang banyak website yang menyediakan fasilitas ini, tetapi FeedBurner tetap menjadi favorit selain konfigurasi yang mudah juga karena telah di ambil alih oleh Google sehingga layanan ini ada jaminan terus diberikan secara gratis dalam jangka waktu yang panjang. Salah satu dari sekian fasilitas yang diberikan FeedBurner yang terkenal adalah fasilitas subscribe, tetapi beberapa blogger kurang begitu suka dengan antar muka subscribe standar dari FeedBurner.
Pada artikel kali ini Blogger Tune-Up akan memberikan tips trik membuat antar muka FeedBurner yang lebih menarik. Hasil akhir antar muka subscribe bisa kita lihat pada screenshot dibawah ini.

Langkah pembuatan widget subscribe

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:
div#subscribe {
float : left;
width : 350px;
height : 94px;
background : url('http://lh6.ggpht.com/_xcD4JK_dIjU/SsRNy8VKhOI/AAAAAAAADd0/ZIspMIgXEvU/d/subscribebg.png') no-repeat;
background-color : #ffffff;
overflow:hidden;
}
#subscribe a {
font-weight : normal;
color : #64666b;
border:none;
}
#subscribe a :hover {
font-weight : normal;
color : #64666b;
border:none;
}
div#subscribe img {
float : right;
margin-top : 6px;
}
#subscribeform {
float : left;
margin : 0;
padding : 0;
padding-left : 72px;
}
#subscribeform .subscribeinput {
float : left;
border : 0;
width : 188px;
height : 19px;
background : url('http://lh4.ggpht.com/_xcD4JK_dIjU/SsRNy8mkHII/AAAAAAAADdw/X_THccX8W2Q/d/input.jpg') no-repeat;
font : 11px Verdana;
color : #c6c6c6;
margin-top:10px;
padding-top : 5px;
padding-left : 5px;
margin-left : 9px;
}
#subscribeform .subscribesubmit {
float : left;
border : 0;
margin-left : 5px;
margin-top:10px;
}
Langkah 5
Simpan Template
Langkah 6
Masuk ke bagian "Tata Letak - Elemen Halaman"
Langkah 6
Tambah sebuah gadget baru dengan type "HTML/JavaScript"
Langkah 7
Masukan kode dibawah ini didalam konten dengan judul konten bebas (misal:Subscribe):
<div id="subscribe">
<a href="http://feeds.feedburner.com/BloggerTune-up"><img src="http://feeds.feedburner.com/~fc/BloggerTune-up?bg=99CCFF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a><br/>
<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2264909', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div>
<input value="" class="subscribeinput" name="email" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=2264909" name="url" type="hidden"/>
<input value="Blogger Tune-Up" name="title" type="hidden"/>
<input value="en_US" name="loc" type="hidden"/>
<input src="http://lh5.ggpht.com/_xcD4JK_dIjU/SsRNzECIbOI/AAAAAAAADd4/IbXDZGxyRRo/d/subscribesubmit.png" class="subscribesubmit" type="image"/>
</div>
</form>
</div>
Langkah 8
Klik tombol "Simpan"
Langkah 9
Preview blog anda

Langkah modifikasi kode

Perhatikan langkah 7, perhatikan kode dibawah ini:
<a href="http://feeds.feedburner.com/BloggerTune-up"><img src="http://feeds.feedburner.com/~fc/BloggerTune-up?bg=99CCFF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a><br/>
<form action="http://www.feedburner.com/fb/a/emailverify" style="border:1px solid #ccc;padding:3px;text-align:center;" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=2264909', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input value="" class="subscribeinput" name="email" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=2264909" name="url" type="hidden"/>
<input value="Blogger Tune-Up" name="title" type="hidden"/>
<input value="en_US" name="loc" type="hidden"/>
Ubahlah sesuai dengan link yang telah diberikan FeedBurner.

Selamat mencoba dan semoga berhasil. Happy blogging... :)