Tutorial Web Desain | Tutorial Joomla | Hasanaji Blog: Modifikasi Blog

Cara Memasang ALT Gambar pada Blogspot Secara Otomatis

Posted by Jackpamot Posted on 3:03 PM with No comments

Cara mudah memasang ALT Image pada blogspot secara otomatis bagi sebagian blogger memang sering dilakukan, dengan maksud menambahkan keterangan (ALT) pada gambar /image yang ada diblog bisa memudahkan si mesin pencari mengindeks secara sempurna blog yang ada. Dengan begitu kemungkinan besar visitor blog anda tidak melulu dari search konten dari search engine saja melainkan bisa dari search image.

Ok, langsung saja berikut cara memasang ALT Image /Gambar pada Blogspot Secara Otomatis
1. Log in Blogger
2. Klik menu Layout >> Edit HTML
3. Copy kode berikut ini dan letakkan persis diatas kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

4. Simpan Template

Cara Membuat Tombol Back To Top (Kembali Ke Atas) di Blogspot

Posted by Jackpamot Posted on 1:49 PM with 1 comment

Cara mudah membuat tombol back to top atau kembali ke atas sering di manfaatkan blogger agar memudahkan pengunjung dalam memindahkan halaman ke atas tanpa harus menggerakkan scroll bar blog. beberapa hal ini mungkin kelihatan sepele namun sangat membantu memudahkan pengunjung dalam membaca isi blog, terlebih jika blognya mempunyai isi yang padet dan panjang.

Untuk membuat /menampilkan tombol back to top di blogspot caranya cukup simple, untuk lebih jelasnya anda bisa menyimak penjelasan berikut ini :

1. Login ke dasboard blogger.com, kemudian pilih menu Rancangan/Layout >> Add Widget.

2. Pilih HTML/Javascript, dan pastekan kode berikut didalamnya

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Kembali ke atas"><img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAWOniEpBzHXKjctGcCE8lKDh5CBjV7Cw7oue_N7kjqL-1WhxY_dxCeWUCnTjfwXW1C46nP_hFyq5Jui3nddmNiCUAIx1X69_ug8OrlBbRyY6nnd6lAPgRsX9y4FJc1Jb8HQNv2xkGVfDK/s1600/kembali+ke+atas.png
" border="0" alt="back to top" /></a>

3. Lalu Save untuk menyimpan hasilnya.

Parse HTML Terbaru

Posted by Jackpamot Posted on 4:25 AM with No comments

Parse HTML sering kita lakukan ketika menyisipkan kode script iklan HTML ke dalam postingan blog, akhir-akhir ini saya melihat banyak situs yang dulunya menyediakan fasilitas parse HTML sudah berubah menjadi situs tidak jelas yang fasilitas parse HTML sudah tidak ada lagi, dengan begitu saya kepikiran untuk mencari solusi mengenai cara memparse HTML agar script iklan ataupun script java yang ada di postingan masih tetep bisa di baca /tampil di postingan blog.

Setelah mencari tahu tentang parse HTML terbaru akhirnya nemu juga cara sederhana yang mungkin bisa anda praktekkan untuk memparse HTML agar kode iklan bisa tampil di postingan blog. Berikut kode parse HTML yang berupa widget yang bisa anda pasang diblog masing-masing.

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=315&h=200&title=Post-Code%3A+code+converter&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js"> </script>

Atau kalau anda tidak ingin ribet anda bisa menggunakan langsung script Parse HTML Terbaru berikut ini

Itu tadi cara memparse HTML terbaru yang bisa anda gunakan, dan semoga berguna buat yang lagi nyari informasi ini.

Cara Menampilkan Rate Bintang /Google Rich Snippets di Blog

Posted by Jackpamot Posted on 10:35 AM with No comments

Untuk Menampilkan Bintang /Google Rich Snippets di Blog ketika di search enggine sebenarnya sudah cukup lama ada, namun tidak semua blogger mengetahuinya. Tujuan utama membuat tampilan rate bintang di blog ketika di search di mesin pencari tidak lain dan tidak bukan untuk memberi kesan lebih menarik buat calon visitor untuk memilih /click blog yang mempunyai rate bintang atau bahasa kerennya google rich snippets di blogspot yang sudah kita buat.

Cara membuat google rach snippets (rate bintang yang muncul ketika di search engine) sebenarnya cukup simple dan mudah di terapkan di blogspot. dan ada beberapa trik /cara dalam penerepan ataupun tampilannya yang mungkin akan sedikit berbeda ketika tampil di search engine google nantinya. Dari sekian banyak cara membuat google rich snippets di blogspot maka saya memilih cara yang termudah menurut saya.

Berikut Cara Menampilkan Rate Bintang /Google Rich Snippets di Blog
1. Masuk ke dasboard blogger, dan pilih menu Template >> Edit HTML
2. Pada bagian Edit HTML sobat cari dengan menekan tombol CTRL+F script kode <data:post.body/> dan letakkan script /kode berikut dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div style='margin-top:30px'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
<div style='padding:5px;background:#CEECF5; font-size:11px; float:left;'>
Judul : <span itemprop='itemreviewed'><b><data:post.title/></b></span><br/>
Rating : <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'>
<span itemprop='average'>100%</span>
</span>
based on <span itemprop='votes'>9759</span> ratings.
<span itemprop='count'>5</span> user reviews.<br/>
Ditulis Oleh <b><a href='https://plus.google.com/b/117881441577446052889/'><data:post.author/></a></b><br/><br/>
Terimakasih atas kunjungan Sobat beserta kesediaan Anda membaca artikel ini. Jika ada yang kurang paham dapat ditanyakan melalui kotak komentar dibawah ini. </div>
</div>
</div>
</b:if>

3. Jika sudah klik Save Template

Pada teks yang berwarna merah silahkan ganti dengan ID google + (plus) masing-masing, sedangkan teks yang berwarna orange merupakan keterangan yang bisa sobat ganti sesuai selera masing-masing. dan Perlu sobat ingat biasanya script <data:post.body/> terdiri dari 3-4 script yang sama, biasanya saya memilih antara script yang ke-2 dan 3 tergantung template yang digunakan, jadi sesuaikan dengan template blog masing-masing dan test hasilnya.

Jika sudah di terapkan script tadi di artikel blog "bukan homepage blog", silahkan sobat cek apakah sudah benar atau belum bisa dicek melalui Google Structured Data Testing Tool

Jika disitu muncul rate tanda bintang berarti sudah success /berhasil, dan sobat tinggal menunggu saja artikel blog sobat di crouwled ulang oleh google lagi yang biasanya membutuhkan waktu 1-2hari tergantung kualitas blognya juga.

Cara Membuat Iklan Melayang di Footer /Bawah dengan Tombol Close

Posted by Jackpamot Posted on 8:23 PM with No comments

Cara Membuat Iklan yang Melayang di Footer /Bawah dengan Tombol Close ~ Sekarang blogging tidak sekedar menyalurkan hobby atau share saja, banyak pengguna blog "blogger"memanfaatkanya untuk memasang iklan di blog yang di kelolanya termasuk saya juga :D, hal ini menurut saya tidak masalah dan justru bisa menjadi semangat para blogger untuk mengisi artikel blog yang berguna buat pengunjung, tapi juga ada faktor lain yang harus diperhatikan agar pengunjung blog tidak merasa terganggu dengan adanya iklan diblog.

Dengan menambahkan space iklan di footer yang melayang, harapanya bisa mengundang nilai klik iklan ketimbang memasang iklan di widget biasa yang mungkin tidak begitu menarik dengan ruang pandang yang terbatas.

Cara Membuat Iklan Melayang di /Bawah Footer dengan Tombol Close
Untuk membuat ikan ini, sobat ndak perlu mengotak-atik HTML code di dasbord blogger, yakni hanya dengan menambahkan widget baru di blog yang ingin dipasang iklan. Berikut detail caranya :
1. Silahkan login ke blog anda.
2. Masuk ke bagian Tata Letak / Layout , klik Add a gadget.
3. Pilih HTML / Javascript
4. Kemudian copy pastekan kode berikut di dalamnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {width: 100%; bottom: 0; left: 0; position: fixed; opacity: 0.9;}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 100px; z-index: 9999;'>
<div style='text-align: right; width: 728px; height: 6px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm-xW-qGz2hC46K9d6vYAuMhsVrT6Sn4ybPj8qexVUipBC-p88pl1Dg0FIM6veU-RxOraZCuHNwyOevmm9PcHfASiS4thYAaaWNcArVR8Goa9GQCNrYR4m8QK8Q8Y9EMgiy_4bihdLrY4m/s1600/close-icon.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>
Masukan script iklan anda disini
</center></p>
</p>
</div>

5. Save Widget tersebut.

NB : Pada teks yang berwarna merah, ganti dengan scipt kode iklan yang sobat punya.

Alternatif Free Hosting Selain Google Code untuk Upload Script Javascipt .js

Posted by Jackpamot Posted on 10:40 AM with No comments

Nggak enaknya menggunakan template blogspot yang digunakan banyak orang ialah template kita loadingnya jadi agak berat "lama" karena script javascript .js yang biasanya di upload di hosting free google code secara bersamaan di pakai banyak blogger "mungkin bisa jadi ribuan atau ratusan ribu yang makai" terlebih jika scipt masternya dari yang punya template di banned, bisa-bisa scriptnya ndak jalan alias ndak berfungsi.

Nah untuk mengatasi masalah di atas biasanya para blogger newbea seperti ane, mengganti javasript .js yang bawaan bloggspot theme ane pindahin ke google code, tapi berhubung google codenya update tampilan jadinya ane tambah puyeng ane putusin untuk nyari alternatif lain dan akhirnya nemu deeh yang sudah di bahas di salah satu master blogger indonesia "mas kholis", langsung saja ane praktekkin dan Alhamdulillah berhasil "soale gampang banget".

Yang perlu sobat siapkan seperti biasanya yakni file dengan ekstensi .js, jika file javascript code yang mau di upload sudah ada berikutnya silahkan berkunjung ke http://yourjavascript.com/
kurang lebih tampilannya seperti ini

Saya yakin jika sobat blogger sudah paham akan hal ini, so ndak usah ane jelasin ya ? pokoknya kalau mau scripnya private "pribadi" hanya untuk domain tertentu dengan memasukkan nama domain dan tinggal di centang aja pada opsi "Make Private" pada bagian Email masukkan email sobat "fungsinya untuk menerima link script kode, karena nanti akan dikirim via email untuk script kode .js"

Jika sudah, buka email sobat di kotak masuk/inbox (biasanya masuk ke spam). Disitu nanti akan mendapatkan URL script dari javascript yang di upload misal seperti gambar yang satu ini

Selanjutnya sobat tinggal copy-paste link script .js tadi ke dalam EDIT HTML blogspot masing-masing. dan Perlu sobat ketahui untuk kapasitasnya maksimal adalah 2 GB per satu akun email, jadi manfaatkan sebaik-baiknya.

Cara Mengganti Bullet List Image di Blogspot

Posted by Jackpamot Posted on 6:04 AM with No comments

Untuk mempercantik tampilan blog banyak para blogger menghias blognya dengan berbagai teknik, salah satunya mengganti bullet image di blogspot, memang biasanya secara default bullet blog kurang menarik, maka dari itu tidak jarang para blogger menggantinya agar kelihatan lebih eksis dan menarik. Tapi untuk mengganti bullet dengan bullet image di blogspot ada pertimbangan yang harus sobat gunakan agar nantinya malah menjadi kacau jika salah persepsi.

Jika sobat ingin mengganti bullet default ke bullet image yang sobat inginkan pastikan script javascript sobat tidak terlalu banyak, karena jika tidak bukanya menarik minat pembaca untuk betah di blog sobat, melainkan malah blog sobat buru-buru di close (x) gara-gara blognya terlalu lama loadingnya karena script ataupun pernak-perniknya terlalu banyak.

Dalam postingan kali ini saya akan mencoba share cara mengganti bullet default ke bullet yang lebih menarik dengan menggantinya dengan image / tanda yang lebih seru pada blogspot, untuk detail caranya silahkan simak penjelasan berikut :
1. Login ke account www.blogger.com
2. Pilih salah satu blog yang akan di edit, lalu pilih menu Template >> Customize. tunggu beberapa saat hingga muncul Blogger Template Designer
3. Pilih Advanced dan cari menu Add CSS dengan menggeser schroll bar kebawah, lalu copy-paste kan kode berikut didalamnya form Add Custom CSS di sisi kanannya.

.post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSjoC-NGhbUHzyHy5RnSqo80H_E3hl7ql7Rc7e0ZHHME1d8lgeKnt_l-a4yH8o3C3kbnBKrMNxWLBCG-kL-DZPbHlyT51kPa24XycXV8tIvEBaKl7NREOR4Iu-4Dxs6hRign2SOufBZic/s1600/check.gif');border-bottom:1px solid #ccc;padding:.5em 0 .3em .5em;
}

4. Klik tombol Apply to Blog untuk menyimpan hasil editan, dan silahkan lihat hasilnya.

Pada script kode yang berwarna merah diatas, bisa sobat ganti linknya sesuai dengan image list bullet yang sobat punya, misal disini sobat bisa menggantinya dengan gambar checklist bullet dengan url seperti berikut

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSjoC-NGhbUHzyHy5RnSqo80H_E3hl7ql7Rc7e0ZHHME1d8lgeKnt_l-a4yH8o3C3kbnBKrMNxWLBCG-kL-DZPbHlyT51kPa24XycXV8tIvEBaKl7NREOR4Iu-4Dxs6hRign2SOufBZic/s1600/check.gif

Cara Menambahkan Google + Plus Follower di Blog Terbaru

Posted by Jackpamot Posted on 9:54 PM with 5 comments

Sekarang cara untuk menambahkan widget google + plus follower di blog sangatlah simple, sobat ndak pelru ribet-ribet lagi nyari script javascript untuk memasang widget google + plus follower ke dalam blog, karena kini blogspot mempunyai tambahan add to google plus (+) follower di pilihan wodget yang ada.

Untuk account baru biasanya sudah terkoneksi otomatis account google plus (+) sobat, namun jika sudah mempunyai account yang lama biasanya perlu setting dulu, terlebih jika sudah mempunyai banyak account google plus.

Setting Google Plus (+) dalam Blogspot

1. Masuk ke account blogger.com masing-masing, kemudian pilih menu Google + dipilihan menu sebelah kiri

2. Klik tombol Get Started, tunggu beberapa saat hingga muncul pesan blogger profile dengan google+ profile. centang / checklist pada pilihan "I've read the above and...." dan klik tombol "SWITCH NOW"

3. Maka akan muncul semua blog yang sudah kita bikin dalam 1 account, jika ingin mengkonfigurasikan ke semua blog berarti sobat checklist "centang" semuanya, namun jika ingin di blog2 tertentu berarti tinggal checklist "centang" diblog yang dinginkan dan klik tombol ADD BLOGS.

4. Untuk konfigurasi selesai, selanjutnya sobat tinggal tambahin widget googl+ (plus) ke dalam blog.

Jika sudah di konfigurasikan antara account google plus (+) dengan blogger profile, selanjutnya sobat masukkan / tambahkan gadget google+ followers denga cara sebagai berikut :

1. Pada dasboard blogger.com, pilih menu Layout / Tata Letak >> Add Widget.

2. Pada pilihan widget yang ada, sobat pilih yang Google+ Followers, seperti gambar dibawah ini

3. Maka akan muncul pilihan untuk setting, kalau ndak mau diganti settingannya biarin setting default trus klik SAVE

4. Selesai, dan sekarang silahkan lihat hasilnya.

Cara memasang iklan dibawah judul posting blog terbaru

Posted by Jackpamot Posted on 7:44 PM with 10 comments

Cara memasang iklan dibawah judul posting blog terbaru ~ Beberapa waktu lalu google memperbarui layanan, salah satunya blogger.com /blogspot dimana tampilan HTMLnya beda dengan versi-versi pendahulunya, tampilan Edit HTML yang baru mempunyai pengelompokan-pengelompokan script kode, jadi jika ingin memasang script iklanpun juga agak sedikit berbeda.

Jadi dalam artikel kali ini saya akan mencoba share mengenai Cara memasang iklan dibawah judul posting blog terbaru di blogspot versi baru, dengan menyisipkan iklan di dalam postingan blog diharapkan bisa meningkatkan pendapatan dari iklan PPC yang kita pasang. Hal ini tentunya bisa berpengaruh terhadap pendapatan, karena di pasang di dalam artikel post yang kemungkinan besar pengunjung akan menclick iklan blog.

Namun sebelum sobat memasang iklan di bawah judul posting blog secara otomatis, sobat harus mempharse kode iklan yang ingin sobat pasang. Hal ini bertujuan agar iklan tersebut bisa tampil di dalam blog kita, karena apabila kode iklan tidak di pharase, akan terjadi error pada template blog kita.

Cara Mempharse Scipt Kode Iklan

- Silahkan kunjungi situs blogcrowds.com
- Kemudian Masukkan script kode iklan yang akan anda pharse ke dalam kolom yang ditampilkan, dan klik tombol Parshe HTML
- Selanjutnya klik PARSE dan tunggu beberapa saat sampai berhasil di phrase, seperti gambar di bawah ini:

- Lalu Copy kode script iklan yang telah berhasil di pharse dan simpan pada notepad untuk nanti di pastekan diblog.

Cara memasang iklan dibawah judul posting blog terbaru
- Selanjutnya setelah berhasil mempharse script iklan, sobat bisa masuk blogger dasboard masing-masing.
- Kemudian klik menu Template >> Edit HTML, tunggu beberapa saat hingga muncul tampilan edit HTML
- Klik tanda panah > pada script <style type='text/css'>...</style>
- Kemudian pencet tombol Ctrl+F secara bersamaan (didalam kotak script, bukan di luarnya) untuk mencari script kode <div class='post-header-line-1'/> atau <div class='post-body entry-content'>
- Jika sudah ketemu biasanya ada 2 atau 3 script yang sama, sobat pilih yang ke2 atau ygn terakhir (sesuai template masing2), dan pastekan script kode iklan yang sudah di parse tadi di bawahnya.

- Atau bisa juga pastekan script kode iklan sesudah ataupun di atas kode ini <data:post.body/>
- Kemudian klik menu Save template, dan jika berhasil maka iklan akan tampil di bawah posting ataupun di bawah judul post (sesuai penempatan), ulangi cara di atas jika script belum muncul/belum tepat.

Cara Menambahkan Burung Twitter Terbang di Blogspot

Posted by Jackpamot Posted on 8:37 PM with 4 comments

Cara Menambahkan Burung Twitter Terbang di Blogspot ~ Buat sobat yang hobi ngoleksi burung :D termasuk di dalam blognya, tidak ada salahnya buat nambahin burung terbang twitter di blogspot. Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget burung twitter terbang ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat.

Untuk menambahkan Burung Twitter Terbang di Blog, berikut caranya :

Masuk kehalaman dasboard blogger, kemudian klik menu Layout >> Add a Gadget >> HTML /Javascript
Kemudian Copykan kode berikut

<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUt5wZaEwP2YJSCdYl46YiGvTsJSBqaX-7nFdW8wjcxeZO9UIYZ1WB_WJmwhGherPoPTqz_ldxagMP1gEik_wIBMskQvQRQ9pqPr1zVonHkkiSNqnV0cfcdJdIMqNXS30ft2_OtXQqR28/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

Kalau sudah di Save untuk menyimpan.

Tambahan :

- pada text warna merah bisa sobat ganti sesuai dengan warna burung pada link di bawah ini

Link Burung Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVWZ0S2xrIzCtA7si8wL0rhw2GK4FbDeBJLT5QT9J-42oyVUHaS9cM_fYa5tzONo0vl3YgyCiZ-gSeWPo4cW6wyBz9PiM5XRNAMVXd7t7GG_esLOaST5DWTnaj89L53PZGdE7gkig011I/s1600/black+bird.png

Link Burung Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8XXuqf9qC7Ld8oYNc60ZEFuwNuSISBJke6bSudAJBC1f0wFs1VrhSEUMkHW6ssLOaEaieqtScplRBY3mT4Mzp4MM4wE8ADLv_nFncjjFhLB4LANGP-CR41_pTsZBrDUodUvZO18-k2p0/s1600/Green+bird.png

Link Burung Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAzbMrOCPoZUDkZoqRqyZOEO0FQNYFwReSDnUXidLAvpVW8SS9ELWqgKQopCdOWWio_UmiZ_4M0Hc0ikKUAloXJTWSbg4kkWQm280YSC92frKELVSyvBmLY6hyphenhyphenq0kVPfjXfdpnAu8kCZc/s1600/red+bird.png

Link Burung Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Rqkt4XrJUw59aS5mpeG9sst8mpc1tYhHtfzNig81KyFKqcznfs81OP22l7gpkZpeafFuinLf5l9xk7Jmvbub-fufgDm7gA93GySBFbl89NmLAD4EUYoaGe_td_vByqSIK3rgT6xTiKk/s1600/white+bird.png

Link Burung Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWtpjtJeBWyas5rnkSnBSUKCmrJy7eFRh9oFK7INM_LrZK-6io3Z3nF4A28k9DhOve5CgCso7VwMl4gkSJnpbC6y21_TrXsEk-syeduq1JjLjLoR5HXG1vsUfzDcCAu5IgOZ6suzAyQME/s1600/Blue+bird.png

Link Burung Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGABUY8fLuHhkhbQHBLZWPjgG1fPTuQ-4SVk5-Rlfl7fErghirhFsYAHkAob2fTMlKEPQo0_BrlfjrMIFQOz_XFTu8egf71tDFwt9J-Jj52uhL7GBPOxllvKFr41FMvydrU2Sh-kCKIlI/s1600/brown+bird.png

Link Burung Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFR02KNVdPC2amo6jhgvjSFrEJTJAgr1Un0-emvLNNIbwzAuyBeULo4s-qPaekvnfrHQaSKKZMbHtFEjAhP88eNPlpswphk1TvH2Svj9-bTJeL5eVuEr3KI8ZSM2uAXcfukI63awS7v8I/s1600/yellow+bird.png

Link Burung Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglkrc6-WgNWxn0QV4Ybfj8ANYg1TX1dmDI4dFeK9UFt1cVRwkR93G1FFCECwtpffDH_ObrigFywgJkxPWC2GfMjWixIXRKD47OTPdy4KZgxS7sLfYgTP2LgNj1-PPBItWyu40Ow8sNDcQ/s1600/purple+bird.png

- Pada text warna hijau silahkan ganti dengan username twitter sobat.

Sumber : Bloggerpeer

Cara Membuat Space Iklan Banner pada Blog

Posted by Jackpamot Posted on 7:58 AM with 10 comments

Aktifitas blogger sangatlah bervariasi, bisa buat sharing, curhat :D, berbagi ilmu pengetahuan, mencari uang dan masih banyak lagi yang bisa kita perbuat dengan blogging. Jika Anda pengguna blogspot yang ingin menambahkan space iklan banner pada blog bisa mencoba cara di bawah ini untuk menambahkan space iklan banner pada blog Anda.
Berikut detail cara membuat space iklan banner pada blogspot ;
1. Seperti biasa login ke dasboard blogger.com, kemudian pilih menu Template >> Edit HTML >> Proceed dan jangan lupa centang pada Expand Widget Templates
2. Cari kode ]]></b:skin> dengan cara CTRL+F untuk mencarinya, jika sudah nemu pastekan kode berikut di atasnya

#Kotak-iklan {
margin: 0px;
padding: 5px;
text-align: center;
}

#Kotak-iklan img {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #c0c0c0;
}

#Kotak-iklan img:hover {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #333;
}

3. Simpan Template
Kemudian untuk menampilkan iklan di blog silahkan tambahkan widget dengan Java script seperti biasanya Layout >> Add Widget >> Java Script/HTML dan copykan kode seperti berikut ;

 
<div id="Space Iklan">

<a href="http://www.batikjateng.com"target="_blank"><img src="http://i209.photobucket.com/albums/bb299/banneriklan.gif" width="125" height="125"/></a>
</div>

<div id="Space Iklan">

<a href="http://www.batikjateng.com"target="_blank"><img src="http://i209.photobucket.com/albums/bb299/banneriklan.gif" width="125" height="125"/></a>
</div>

Keterangan :

pada alamat website dan URL gambar bisa anda ganti sesuai dengan keinginan Anda, disini di contohkan www.batikjateng.com dan URL http://i209.photobucket.com/albums/bb299/banneriklan.gif
Width dan Height bisa di sesuain dengan keinginan space iklan Anda, disini di contohkan 125 px
Banyaknya gambar space iklan bisa Anda sesuaikan sendiri, caranya tambahkan seperti script di atas. disini di contohkan 2 space gambar iklan.

Cara Membuat Text Besar di Awal Postingan Blog

Posted by Jackpamot Posted on 10:06 PM with 1 comment

Cara Membuat Text Besar di Awal Postingan Blog ~ Teknik ini biasa di sebut dengan Dropcap kalau di Ms. Word atau di program pengelolaan text lainnya, untuk sekarang saya akan coba sharing sedikit mengenai cara menambahkan tulisan besar di awal postingan blog kita. dengan begitu kita bisa menemui tulisan 1 huruf yang besar yang biasa kita lihat di koran-koran bisa kita terapkan di blogspot kita.
Berikut Cara Membuat Text Besar di Awal Postingan Blog, yang bisa Anda coba ;

Seperti biasa ya, masuk ke halaman dasboard blog kamu. kemudian pilih Template >> Edit HTML >> Proceed. maka akan muncul halaman Edit HTML
Tambahkan Kode berikut sebelum ]]>< /b:skin>

.huruf { float:left; color:#000; line-height:60px; padding-right:5px; font-family:trebuchet ms,verdana; font-size:60px; }

Kemudian Save Template
Berikutnya adalah memposting artikel seperti biasa, serta tambahakan kode berikut di awal paragraf setiap postingan. misal awal hurufnya "C" menjadi <span class="huruf">C</span>

Menambahkan Emotions pada Kotak Komentar Blog

Posted by Jackpamot Posted on 8:54 PM with No comments

Buat agan-agan pecinta emotion, pada postingan kali ini saya akan coba share cara menambahkan /memasang Emotions di kotak komentar blogspot. Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui icon2 (emoticon). Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di area komentar.

Emotion Kucing :

:f :D :) ;;) :x :$ x( :?
:@ :~ :| :)) :( :s :(( :o

Emotion Yahoo :
:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

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

Untuk Emoticon Yahoo :

Untuk Emoticon Kucing :

4. Kemudian cari kode berikut ini :

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

Ini untuk Yahoo emoticon :

Kalo mo yang emoticon kucing pake yang ini :

6. Kalo sudah trus di Save/Simpan.