Sunday, December 27, 2009

Blogger jQuery Dock Footer

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

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

Berbagi Penghasilan Iklan dengan Kontributor

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... :)

Melampirkan Video Streaming Youtube Pada Blogger

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

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

Peringatan Googlepages Bagi Pengguna Blogger

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

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

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

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.