Membuat Automatic Backlink Di Blog

Membuat Automatic Backlink Di Blog

Kali ini saya mencoba sharing cara Membuat Automatic Backlink Di Blog yang bisa kita jadikan salah satu solusi untuk membuat tukar link atau link exchange pada suatu blog. Dengan Membuat Automatic Backlink Di Blog pengunjung yang mempunyai blog bisa menukar link tanpa harus memberi tahu si empunya blog. Hanya mengcopy link yang diberikan Author Blog kemudian mempastenya di blog Anda dan mengklik link yang sudah dipasang di blog Anda, maka secara otomatis link blog kita sudah tertera pada blog yang kita pasang linknya tersebut.

Nah Membuat Automatic Backlink Di Blog saya share dari E-referrer.com. Banyak sumber pihak ketiga yang dapat membuat automatic backlink untuk blog, namun kita perlu perhatikan apakah backlink yang kita berikan ke pengunjung yang ingin bertukar link benar-benar memberikan backlink! Makanya saya share auto backlink dari E-referrer.com yang sudah saya cek sebelumnya dengan menggunakan NoDoFollow Plugin dari Firefox. Backlink yang diberikan berupa backlink dofollow (berwarna biru) sehingga kita tidak memberikan backlink sepihak namun backlink timbal balik atau bolak-balik atau dua arah sehingga kedua belah pihak diuntungkan.

Cara Membuat Automatic Backlink Di Blog cukup mudah, yang tertarik silahkan simak tutorialnya di bawah ini.

1. Silahkan Anda masuk , silahkan lakukan sign up / register (gratis).

2. Setelah itu silahkan Login dengan akun yang sudah Anda buat tadi. Kemudian lakukan Setting dengan klik menu Setting sebelah kiri untuk menyetting referrer yang akan tampil di blog kita dan aturan lainnya yang disesuaikan dengan kehendak kita.

 

3. Setelah itu silahkan klik menu Get Code untuk mendapatkan kode HTML yang akan dipasang di blog kita. Kita bisa memasangnya di sidebar (gadget HTML/JavaScript) atau di postingan HTML (bukan compose) blog untuk menampilkan backlinknya. Setelah terpasang silahkan lakukan validasi link dengan klik Validate My Link pada bagian bawah kode di referrer tadi.

4. Sampai di sini kita sudah mempunyai mesin Automatic Backlink blog kita. Tinggal kita publikasikannya di blog kita agar pengunjung tahu bahwa blog kita mempunyai Automatic Backlink. Bisa dengan Text Link ataupun Banner Link. Buatlah link yang mengarah ke tempat kita menyimpan kode pada langkah ke-3 di atas. Bila menyimpannya di sidebar, kita bisa mengarhkannya ke homepage blog. Dan bila kita menempatkannya pada halaman postingan, maka buat linknya mengarah ke halaman postingan tersebut.

Bila Anda ingin membuat linknya dengan banner, Anda bisa gunakan pihak ketiga pembuat banner online seperti Cooltext.com. Silahkan masuk untuk membuat banner blog Anda.

Setelah itu silahkan upload banner yang sudah Anda buat tadi. Anda bisa gunakan kode di bawah ini untuk menampilkan banner dan kode link banner Anda di blog dengan efek otomatis blok untuk memudahkan pengunjung mengcopy kode banner kita.

<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="URL BANNER" /></div>
<br /></div>
<div>
<form name="kompiajaib">
<div align="center" style="margin-bottom: 0; margin-top: 0;">
<textarea ;="" cols="45" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="3" style="height: 30; width: 200;">&lt;a href="URL TEMPAT KITA MENYIMPAN KODE DARI REFERRER" target="_blank" title="ISI DENGAN TITLE BLOG ANDA"&gt;&lt;img src="URL BANNER"/&gt;&lt;/a&gt;</textarea></div>
</form>
</div>

Demikian saja sharing cara Membuat Automatic Backlink Di Blog pagi ini mudah-mudahan bermanfaat.

Bagi yang ingin mendapat Automatic Backlink dari Kompi Ajaib, silahkan copy kode yang sudah saya sediakan. Perlu diingat, untuk melihat link blog kita untuk pertama kali, setelah Anda pasang Automatic Backlink Bannernya di blog Anda, silahkan klik bannernya untuk memvalidasikan link blog Anda dengan Automatic Backlinknya. Dan otomatis link blog Anda akan ada pada daftar link yang disediakan oleh Author Blog. Namun kalau Anda hanya mengcopy bannernya tanpa mengkliknya yang menuju ke halaman Automatic Backlinknya, maka link Anda tidak akan ada di daftar link.

Mengganti Followers Blog Widget Blogger Dengan Link

Mengganti Followers Blog Widget Blogger Dengan Link

Mungkin trik ini bisa Anda jadikan solusi untuk menggantikan fungsi Followers Blog Widget sehingga blog Anda penampilannya lebih singset dan mungkin sedikit mengurangi beban loading blog. Triknya yaitu Mengganti Followers Blog Widget Blogger Dengan Link sehingga tanpa Followers Blog Widget di blog kita, namun pengunjung masih bisa jadi follower blog kita dengan mengklik link yang kita sediakan. Sebagai contoh silahkan coba pada link demo di bawah ini.

Bagaimana tertarik untuk mencobanya di blog Anda? Silahkan ikuti tutorialnya di bawah ini.

Untuk Mengganti Followers Blog Widget Blogger Dengan Link, Anda harus mengetahui dulu ID Blog Anda. Caranya cukup mudah, Silahkan lihat di dashboard blog Anda pada bagian atas di browser Anda. Di situ tertera ID Blog Anda.

Setelah itu silahkan copy kode di bawah ini:

1. Dengan link text

<a href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxx' target='_blank'>Follow Blog Ini</a>

Ganti xxxxxxxxxxxxxxxx dengan ID Blog Anda.

2. Dengan link button.

<a href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxx' target='_blank'><button>Follow Blog Ini</button></a>

Ganti xxxxxxxxxxxxxxxx dengan ID Blog Anda.

3. Dengan link gambar.

<a href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxxxxxx' target='_blank'><img border='0' src='http://LINK GAMBAR ANDA'/></a>

Ganti xxxxxxxxxxxxxxxx dengan ID Blog Anda. Ganti LINK GAMBAR ANDA dengan link gambar yang Anda Upload.

Penempatannya bisa di widget HTML/JavaScript sidebar atau footer blog Anda, atau pada menu horizontal header blog Anda.

Demikian cara Mengganti Followers Blog Widget Blogger Dengan Link kali ini mudah-mudahan bermanfaat. Selamat berkreasi....

Memodifikasi Followers Blog Widget Blogger

Memodifikasi Followers Blog Widget Blogger

Anda merasa bosan dengan tampilan Followers Blog Widget bawaan asli Blogger? Atau mungkin tampilan Follower Blog Blogger-nya tidak sesuai dengan theme blog? Jangan bingung, saya share cara Memodifikasi Followers Blog Widget Blogger sehingga sesuai dengan theme blog Anda. Sebagai contoh bisa Anda lihat pada gambar di atas, atau pada Followers Blog Widget blog Kompi Ajaib yang ada di bawah (Footer). Berbeda kan?...itu karena sudah saya modifikasi. Cara Memodifikasi Followers Blog Widget Blogger sebenarnya gampang-gampang susah.

Langkah Pertama

Biarkan dulu Followers Blog Widget bawaan asli Blogger yang sudah Anda terapkan di blog Anda, karena ada kode yang mesti dilihat. Syaratnya Anda menggunakan Firefox sebagai browsernya. Klik kanan pada halaman blog Anda >> Klik View Page Source >> Cari title dari widget tersebut, misalnya "Followers" (tanpa tanda kutip). Gunakan CTRL + F Pada keyboard untuk memudahkan pencarian. Setelah ketemu, scroll ke bawah sehingga Anda menemukan kode seperti di bawah ini. 

<div id="div-65y5uikkmesc" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "Followers";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#666666";
    skin['ENDCAP_LINK_COLOR'] = "#256ead";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
   
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#256ead";
    skin['CONTENT_TEXT_COLOR'] = "#666666";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#256ead";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#666666";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    skin['FONT_FACE'] = "normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-65y5uikkmesc",
     height: 260,      site: "09038553348108515803",      locale: 'en' },
     skin);
  </script>
</div>

Perhatikan kode yang berwarna merah dan hijau, kode itu yang kita perlukan untuk memodifikasinya. 

Langkah Kedua

Copy kode di bawah ini ke gatget HTML/JavaScript baru.

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-fhp4mq2cq3gj" style="width:285px;border:1px solid #fff;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = 'transparent';
skin['ENDCAP_BG_COLOR'] = 'transparent';
skin['ENDCAP_TEXT_COLOR'] = '#666666';
skin['ENDCAP_LINK_COLOR'] = '#1da7e7';
skin['ALTERNATE_BG_COLOR'] = 'transparent';
skin['CONTENT_BG_COLOR'] = 'transparent';
skin['CONTENT_LINK_COLOR'] = '#1da7e7';
skin['CONTENT_TEXT_COLOR'] = '#666666';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#1da7e7';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#999999';
skin['CONTENT_HEADLINE_COLOR'] = '#1da7e7';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-fhp4mq2cq3gj',
   site: '09725433856921720255' },
  skin);
</script>

Ganti kode yang berwarna merah dengan kode warna merah pada langkah pertama, begitu juga dengan kode yang berwarna hijau. Dan kode yang diblok kuning itu untuk merubah tampilan warna dari widget tersebut, silahkan sesuaikan dengan warna thema blog Anda. Angka 4 yang berwarna merah itu untuk memberikan jumlah baris photo follower kita. Angka 285 untuk mengatur lebar widget, silahkan sesuaikan dengan lebar sidebar atau footer blog Anda. Kode #fff untuk warna border luarnya, silahkan sesuaikan dengan keinginan Anda.

Demikian sharing cara Memodifikasi Followers Blog Widget Blogger kali ini mudah-mudahan bermanfaat. Selamat berkreasi...

Al-Qur'an Flash Online Widget Untuk Blog

 Al-Qur'an Flash Online Widget Untuk Blog

Subhanallah...pada Bulan Suci ini mari kita perbanyak amal shaleh, salah satunya kita mendengarkan Al-Qur'an. Setelah kemarin saya share cara membuat Al-Qur'an Online Widget di blog, kini saya coba share Al-Qur'an Flash Online Widget Untuk Blog. Bedanya kalau widget ini kita bisa langsung mendengarkan ayat-ayat Al-Qur'an dari flash player yang dipasang di blog.

Langsung saja, bagi yang ingin mendengarkan Al-Qur'an di Kompi Ajaib, silahkan pilih salah satu Al-Qur'an Flash Online Widget Untuk Blog di bawah ini dan jalankan flash playernya. Bagi yang ingin memasangnya di blog, silahkan copy kode scriptnya di bawah masing-masing widget yang saya sediakan.

<center>
<div style="width: 444px;">
<embed allowfullscreen="true" height="555" quality="high" src="http://www.listen2quran.com/listen/mediaplayer.swf?config=http://www.listen2quran.com/listen/Conf.aspx" type="application/x-shockwave-flash" width="444"></embed></div>
<div style="text-align: center;">
<a href="http://www.listen2quran.com/" target="_blank"><img alt="Listen to Quran" border="0" src="http://www.listen2quran.com/pic/" /></a></div>
</center>

<p><div align="center">
<script src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js" type="text/javascript">
</script><script type="text/javascript">
if (WIDGETBOX) WIDGETBOX.renderWidget('336436b3-c640-4302-b499-c46ef219369f');
</script></div></p>

Demikian sharing Al-Qur'an Flash Online Widget Untuk Blog mudah-mudahan bermanfaat...

Al-Qur'an Online Widget Untuk Blog

Al-Qur'an Online Widget Untuk Blog

Banyak yang dapat kita perbuat unuk mengisi waktu dalam bulan Ramadhan ini. Tentunya dengan perbuatan yang menambah amalan di bulan suci ini, salah satunya membaca dan mendengarkan Al-Qur'an. Nah bagi yang ingin membuat Al-Qur'an Online Widget Untuk Blog untuk mendengarkan Al-Qur'an di blognya kita bisa memasangnya, sehingga kita dapat dengan mudah mendengarkan sekaligus belajar memahami Al-Qur'an, karena widget Al-Qur'an ini juga dilengkapi dengan terjemahannya yang tentunya dalam Bahasa Indonesia.

Untuk mendengarkan Al-Qur'an Online ini, kita akan mendownloadnya terlebih dahulu dalam format MP3 kemudian kita bisa mendengarkannya dengan player pada kompi kita. Jadi lebih tepatnya ini adalah widget yang menyediakan link download surat-surat dalam Al-Qur'an dengan format MP3. Namun  kita juga bisa langsung mendengarkan ayat-ayat Al-Qur'an dengan mendengarkan per ayat.

Bagi yang tertarik untuk membuat Al-Qur'an Online Widget Untuk Blog silahkan copy kode di bawah ini dan paste di blog Anda ke dalam widget HTML/JavaScript sidebar atau postingan HTML blog Anda.

<iframe frameborder="0" src="http://m.alquran-indonesia.com/mquran/index.php/quran" style="border: 0px; height: 400px; width: 400px;"></iframe>

Silahkan sesuaikan tinggi dan lebarnya dengan lebar sidebar blog Anda dengan merubah angka pada height dan width nya. Sehingga penampakannya akan tampak seperti di bawah ini.

Demikian sharing membuat Al-Qur'an Online Widget Untuk Blog ini, mudah-mudahan bermanfaat.

Sumber: Alquran-Indonesia

Membuat Skype Button Di Blog

Membuat Skype Button Di Blog

Seperti halnya Yahoo! Messenger yang dapat ditampilkan icon YM di blog kita, Skype juga kini dapat ditampilkan di blog kita. Dengan Membuat Skype Button Di Blog akan memudahkan pengunjung blog dapat berinteraksi dengan pemilik blog melalui Skype. Secara sekarang Skype sedang menjadi trend dalam hal komunikasi via internet.

Ada beberapa macam Skype Button yang dapat kita pilih seperti pada gambar di bawah ini:

Bagaimana tertarik untuk mencoba mengaplikasikannya pada blog Anda? 

Membuat Skype Button Di Blog cukup mudah, Anda tinggal masuk Silahkan isikan user name Skype Anda >> Pilih jenis button yang sesuai dengan keinginan Anda >> Kemudian Copy kode HTML yang diberikan dan paste di gadget HTML/JavaScript pada sidebar blog Anda.

Selamat berkreasi...

Edit Permalink - Fitur Baru Blogger

Edit Permalink - Fitur Baru Blogger

Setelah kemarin saya share seputar fitur baru di blogger tentang SEO Onpage yaitu Membuat Meta Tag Deskription Di Blogger. Pagi ini selepas sahur di hari kedua bulan Ramadhan 2012 ini saya mencoba untuk mengulas sedikit tentang fitur baru lagi yang dirilis oleh blogger untuk penggunanya yaitu fitur permalink yang bisa kita edit ketika kita membuat sebuah postingan. 

Seperti kita ketahui sebelumnya bahwa di blogger hanya tersedia 30 - 40 karakter untuk sebuah permalink/URL. Bagi yang membuat postingan dengan judul post yang panjang, maka permalinknya akan diberikan sekitar 30 - 40 karakter saja, yang artinya tidak semua karakter di dalam judul tersebut dapat menjadi permalink. Seperti contoh, saya mempunyai postingan dengan judul "Angry Birds Season v2.4.1 Full Patch PC Game Free Download" dan permalink yang diberikan blogger sbb "http://kompiajaib.blogspot.com/2012/06/angry-birds-season-v241-full-patch-pc.html". Coba perhatikan tulisan yang berwarna merah pada permalink yang diberikan oleh blogger. Tidak semua karakter dari judul menjadi permalink. Ada sekitar 58 karakter yang ada di dalam judul namun hanya diambil 37 karakter saja untuk dijadikan permalink oleh blogger. Tidak seperti wordpress yang otomatis memberikan permalink lengkap sesuai judul postingan.

Untuk mengatasi hal tersebut kini blogger menyediakan tool baru yang menyediakan custom permalink atau untuk mengedit permalink sesuai dengan keinginan kita. Coba Anda lihat ketika Anda menulis sebuah postingan di sebelah kanan. Apabila kita klik menu Permalink maka kita bisa melihat permalink yang diberikan untuk postingan kita. Apabila ternyata permalinknya tidak sesuai dengan keinginan kita, maka kita bisa mengeditnya pada Custom Permalink/URL.

Lalu bagaimana cara mengedit permalink? Kita bisa mengedit permalink pada karakter di bagian akhirnya saja. Tahun dan bulan tidak bisa dirubah, itu otomatis diberikan blogger sesuai dengan tahun dan bulan ketika postingan diterbitkan. Seperti contoh berikut: "http://kompiajaib.blogspot.com/2012/07/edit-permalink-fitur-baru-blogger.html". Itu adalah permalink otomatis yang diberikan bogger untuk postingan saya ini. Kita bisa mengedit permalink hanya pada tulisan yang berwarna merah. Silahkan isikan karakter pada kotak yang disediakan pada Custom Permalink/URL. Saat ini, karakter yang diperbolehkan dalam Custom Permalink/URL masih terbatas pada: az, AZ, 0-1. Satu-satunya karakter khusus yang tersedia adalah underscore ( _ ), dash ( - ), dan periode ( . ).

Demikian sharing Edit Permalink - Fitur Baru Blogger kali ini mudah mudahan bermanfaat. Apabila ada kesalahan mohon dibetulkan.

Membuat Meta Tag Description Di Blogger

Membuat Meta Tag Description Di Blogger

Pagi ini di awal bulan Ramadhan saya akan mencoba memberikan sedikit tips untuk Search Engine Optimization di Blogger yaitu Membuat Meta Tag Description Di Blogger. Saya sharing cara Membuat Meta Tag Description Di Blogger berdasarkan pengalaman saya selama ngeblog. Maklum newbie jadi kalau ada salah-salah kata mohon dibetulkan..ya...

Baru-baru ini blogger telah merilis tool baru untuk memberikan kemudahan pada penggunanya yaitu tool Search Description yang akan terlihat setelah Anda mengaktifkannya pada Setting di dashboard blog. Dan kita dapat menggunakannya ketika kita membuat postingan untuk memberikan deskripsi pada setiap postingan yang kita buat.

Secara sederhana, Description Blog yaitu sebuah kalimat yang menjelaskan tentang sebuah blog, sehingga orang akan tahu dengan gampang tentang sebuah blog atau sebuah postingan blog dari membaca deskripsinya. Kita bisa membuat deskripsi pada homepage dan pada setiap postpage. Hal ini dilakukan agar tidak terjadi duplikat deskripsi yang katanya dapat menghambat pada SEO blog kita. 

Pertama kita akan mengaktifkan tool Description terlebih dahulu di Dashboard kemudian klik Setting.

Kemudian klik Search Preferences dan klik Edit pada Description.

Kemudian klik pada radio button YES untuk mengaktifkan tool Description. Pada kotak di bawahnya silahkan isi dengan kalimat yang menggambarkan web/blog Anda. Itu untuk memberikan deskripsi pada homepage. Kemudian klik save change.

Sampai di sini kita sudah mempunyai deskripsi untuk homepage blog kita. Bagi yang sudah memberikan meta tag deskripsi dengan melalui edit HTML pada template sebaiknya hapus saja untuk menghindari duplikat deskripsi.

Nah untuk memberikan deskripsi pada postpage, kita tinggal memberikan deskripsi pada menu Search Description ketika kita menulis postingan di sebelah kanan dengan kalimat yang menggambarkan isi dari konten yang kita buat.

Dengan demikian setiap postingan akan mempunyai deskripsi sendiri yang akan menunjang pada SEO Onpage.

Demikian sharing cara Membuat Meta Tag Description Di Blogger kali ini, mudah-mudahan bermanfaat.

Membuat Twitter Follower Box Widget Di Blog

Membuat Twitter Follower Box Widget Di Blog

Mungkin widget yang satu ini sudah banyak dishare oleh blogger lain, namun untuk melengkapi tutorial blogger di Kompi Ajaib, cara Membuat Twitter Follower Box Widget Di Blog akan saya share bagi Anda yang sedang mecari widget ini untuk di pasang di blognya.

Pada dasarnya Twitter Follower Box Widget ini tampilannya mirip dengan Facebook Like Box Widget. Pada Twitter Follower Box Widget juga menampilkan tombol untuk follow Twitter kita, jumlah follower dan photo-photo dari follower kita seperti tampak pada gambar di atas atau bisa Anda lihat pada footerbar blog ini, sekalian follow juga enggak apa-apa kok hehehe....

Cara Membuat Twitter Follower Box Widget Di Blog cukup mudah, tinggal copy kode di bawah ini ke gadget HTML/JavaScript pada sidebar/footerbar blog Anda.

<iframe src="http://s.moopz.com/connect.html?user=KompiAjaib" class="FB_SERVER_IFRAME" style="width: 287px; height: 242px; border: none; overflow:hidden;" frameborder="0" scrolling="no" name="fbfanIFrame_0" allowtransparency="true"></iframe><script type="text/javascript">fanbox_init("KompiAjaib");</script>

Ganti tulisan KompiAjaib dengan user name Twitter Anda. Dan tulisan/angka yang berwarna biru untuk mengatur lebar (width) dan tinggi (height) widget, silahkan atur dan sesuaikan dengan lebar sidebar blog Anda.

Mudah...kan? Namun sampai saat ini saya belum menemukan Twitter Follower Box Widget untuk tema yang gelap/dark dengan pemasangan kode yang mudah. Sehingga bagi blog yang bertema gelap, widget ini agak kurang pas. Namun enggak apa-apa lah untuk mencoba sesuatu yang baru enggak ada salahnya untuk dicoba. Kalau saya sudah menemukan Twitter Follower Box Widget dengan tema dark pasti saya share lagi untuk Anda semua.

Demikian sharing cara Membuat Twitter Follower Box Widget Di Blog ini semoga bermanfaat.

Membuat Headline News Di Bawah Header

Membuat Headline News Di Bawah Header

Pagi ini akan saya coba share cara Membuat Headline News Di Bawah Header seperti yang ada pada blog Kompi Ajaib ini yang letaknya di bawah header. Kebetulan pada waktu yang lalu ada nanya bagaimana cara membuat latest post / headline news seperti blog Kompi Ajaib. Headline News ini menampilkan 10 postingan terbaru dari blog Anda.

Silahkan Anda masuk di Dashboard >> Template >> klik Edit HTML >> centang pada Expand Widget Templates karena kita akan sedikit mengobok-obok HTML. Setelah itu silahkan cari kode ]]></b:skin> , gunakan CTRL + F pada keyboard untuk memudahkan pencarian. Setelah ketemu silahkan copy kode di bawah ini dan paste DI ATAS kode tadi.

.headline-wrapper{background:url(https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png) repeat-x;width:960px;height:30px;margin:0 auto;padding:0 auto}
.headline{width:960px;line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#4f4f4f;overflow:hidden;clear:both;margin:0 auto;padding:0 auto;text-shadow: 1px 1px 1px #000}
.headline a:hover{color:#eace12;text-decoration:none}

Perhatikan tulisan https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png yang berwarna merah. Itu adalah gambar yang akan menjadi background headline news. Silahkan sesuaikan warnanya dengan warna dari tema blog Anda. Silahkan buat gambar yang kecil saja kira-kira ukuran sizenya sekitar 200 - 300 byte saja. Di sini saya bikin gambar dengan pixel dimensinya lebar 7 pixels dan tingginya 38 pixels di Photoshop dan save dengan format png. Kemudian upload gambar Anda tadi dan ganti url yang berwarna merah tersebut dengan url gambar Anda tadi. Untuk tulisan 960px, itu ukuran lebar headline news. Silahkan sesuaikan dengan lebar headernya atau header-wrapper.

Kemudian cari kode </head> dan copy kode di bawah ini kemudian letakan DI ATAS  kode tadi.

<script src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png' type='text/javascript'/>
<script src='http://kompiajaib.googlecode.com/files/newsticker2.js' type='text/javascript'/>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#666;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#fff;font:normal 12px Arial;}
#example1{ /*Demo 1 main container*/
width: 900px;
height: 12px;
border: 0px solid #aaa;
padding: 0px;
font:bold 12px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#60BAFA;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
</style>

Kemudian cari kode <b:section class='header' id='header' dan Anda akan melihat kode seperti di bawah ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'>
<b:includable id='main'>

Silahkan copy kode di bawah ini dan letakan SETELAH / DI BAWAH kode tadi. 

<div class='headline-wrapper'>
<div class='headline'>
<div style='float:left;padding:5px 5px 5px 10px;font:bold 12px Arial;color:#aeaeae;text-transform:none;'>
Latest Posts :
</div>
<div style='float:left;width:800px;padding:5px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Latest Movies&quot;, &quot;http://kompiajaib.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>

Tulisan Latest Posts yang berwarna merah tersebut bisa Anda ganti dengan Headline News atau yang lainnya. Tulisan kompiajaib.blogspot.com silahkan Anda ganti dengan blog Anda. Namun di sini Anda harus sudah membuat atau mempunyai akun Feedburner blog Anda agar headlinenya bisa berjalan.

Sehingga penampakannya akan tampak seperti di bawah ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'>
<b:includable id='main'>

<div class='headline-wrapper'>
<div class='headline'>
<div style='float:left;padding:5px 5px 5px 10px;font:bold 12px Arial;color:#aeaeae;text-transform:none;'>
Latest Posts :
</div>
<div style='float:left;width:800px;padding:5px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Latest Movies&quot;, &quot;http://kompiajaib.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>

Setelah itu silahkan lakukan review untuk memastikan pemasangannya sudah benar atau belum. Kemudian save dan selesai.

Demikian sharing cara Membuat Headline News Di Bawah Header kali ini. Sebenarnya headline ini bisa juga Anda letakan di atas header tergantung bagaiman selera Anda saja. Yang penting jangan takut untuk mencoba sesuatu yang baru. Semua orang pernah mengalami trial and error.

Membuat Tab View Di Blog

Membuat Tab View Di Blog

Pagi ini saya akan share cara Membuat Tab View Di Blog seperti yang Anda lihat pada gambar di atas atau pada Tab View blog saya di samping kanan. Sebenarnya saya dapat kode scriptnya dari Maskolis (pembuat template blog ini), namun karena ada temen yang request scriptnya, sekalian saja saya buat postingannya.

Cara Membuat Tab View Di Blog sedikit gampang karena kita tidak usah mengobok-obok kode HTML blog kita, cukup menambahkan kode scriptnya di gadget HTML sidebar blok kita. Bagi yang ingin mencobanya, silahkan copy kode script Tab View di bawah ini, kemudian paste di gadget HTML sidebar blog Anda.

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 2px solid #393939; /* Warna border kotak Tab */
border-bottom: 2px solid #393939; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: none; /* Warna border Kotak Konten */
overflow: hidden;
background-color: none; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Title Tab 1</span></a>
<a><span style="color: #fff">Title Tab 2</span></a>
<a><span style="color: #fff">Title Tab 3</span></a>
</div>
<div style="width: 300px; height: 350px;" class="Pages">

<div class="Page">
<div class="Pad">

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Software?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://kompiajaib.blogspot.com/feeds/posts/summary/-/Software?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://kompiajaib.blogspot.com/search/label/Software" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

</div>
</div>

<div class="Page">
<div class="Pad">

Kode HTML Anda Di Sini

</div>
</div>

<div class="Page">
<div class="Pad">

Kode HTML Anda Di Sini

</div>
</div>
</div></div></form>

<script src="http://kompiajaib.googlecode.com/files/tab_view2.js">

</script>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-tab-view-di-blog.html' target='_blank'>widget</a></div>

Keterangan:

Perhatikan tulisan yang berwarna hijau, itu keterangan untuk tiap kode di sampingnya, silahkan rubah kode-kodenya dan sesuaikan dengan theme blog Anda.

Tulisan 300px merupakan lebar widget tab view ini, sesuaikan dengan lebar sidebar blog Anda.

Tulisan 350px merupakan tinggi untuk widget tab view, silahkan sesuaikan dengan keinginan Anda.

Tulisan berwarna ungu muda adalah kode script untuk recent post berdasarkan katagori/label dengan 1 buah thumbnail untuk postingan terakhir. Tulisan Software untuk label postingan Anda yang ingin ditampilkan. kompiajaib.blogspot.com silahkan ganti dengan blog Anda. 30 merupakan banyaknya recent post yang ditampilkan, dan http://kompiajaib.blogspot.com/search/label/Software silahkan ganti dengan URL label yang Anda tampilkan.

Kode HTML Anda Di Sini silahkan ganti dengan kode script widget yang lain seperti recent comment atau yang lainnya. Atau Anda bisa isi semua tab dengan kode script recent post yang warna ungu muda di atas, tinggal ganti nama labelnya saja. Seperti pada tab view di blog saya ini.

Jika Anda ingin membuat dua buah tab view seperti pada blog saya ini, hapus kode <script src="http://kompiajaib.googlecode.com/files/tab_view2.js"> </script> pada tab view kedua. Kemudian tambahkan angka 2 pada setiap tulisan TabView sehingga menjadi TabView2. Begitu juga kalau Anda ingin membuat tiga buah tab view di sidebar blog Anda.

Demikian sharing cara Membuat Tab View Di Blog kali ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu yang baru, setiap orang pasti melakukan try and error.

Membuat Permalink Otomatis Di Blog

Membuat Permalink Otomatis Di Blog

Kali ini saya akan mencoba sharing cara Membuat Permalink Otomatis Di Blog. Namun sebelumnya saya akan membahas sedikit tentang Permalink itu sendiri. Bagi kita sebagai blogger pemula tentunya asing dengan yang namanya Permalink. Menurut para ahli, Permalink adalah singkatan dari Permanent Link yang artinya adalah alamat permanen url atau link yang menuju ke blog atau web tertentu yang langsung menuju ke postingan blog/web itu sendiri.

Nah dengan Membuat Permalink Otomatis Di Blog, diharapkan dapat menambah internal link postingan atau artikel blog kita sehingga lebih SEO lagi dan dapat bersaing dan bertahan di search engine dan tentunya juga diharapkan dapat meningkatkan optimasi onpage blog kita. Biasanya permalink otomatis di simpan di bawah postingan. Anda mungkin pernah melihat seperti gambar di bawah ini:

Membuat Permalink Otomatis Di Blog

Gambar di atas adalah contoh untuk permalink otomatis yang ada di setiap postingan blog. Nah bagi yang ingin Membuat Permalink Otomatis Di Blog silahkan simak uraian cara membuatnya di bawah ini.

Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula.

Kemudian cari kode ]]></b:skin> agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode ]]></b:skin> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode ]]></b:skin> tadi.

.buatpermalinkblogger {border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666; padding: 5px; background: #444;-moz-border-radius:5px;}
.buatpermalinkblogger a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

Perhatikan tulisan berwarna merah #444 itu menunjukkan warna untuk kotaknya. Silahkan sesuaikan dengan warna blog Anda.

Kemudian cari kode seperti di bawah ini

<div class='post-footer-line post-footer-line-1'>

atau kalau enggak ada cari yang seperti di bawah ini

<p class='post-footer-line post-footer-line-1'>

Kemudian copy kode di bawah ini dan pastekan SETELAH kode di atas tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='buatpermalinkblogger'><center><small>Anda sedang membaca artikel tentang <strong><i><data:blog.pageName/></i></strong> dan bila berkenan Anda bisa share artikel <strong><i><data:blog.pageName/></i></strong> ini dengan tombol share di bawah. Bila Anda bermaksud COPAS artikel <strong><i><data:blog.pageName/></i></strong> untuk diposting di blog Anda, mohon untuk meletakkan link <strong><i><a expr:href='data:post.url'><data:blog.pageName/></a></i></strong>
sebagai Sumbernya dengan mengcopy kode di bawah ini.</small></center>
&lt;div&gt;
&lt;form name=&quot;kompi ajaib&quot;&gt;
&lt;p align=&quot;center&quot; style=&quot;margin-top: 0; margin-bottom: 0&quot;&gt;&lt;textarea style=&quot;width: 98%; height: 10&quot; name=&quot;txt&quot; rows=&quot;1&quot; cols=&quot;45&quot; onmouseover=&quot;this.form.txt.select()&quot; readonly ;&gt;<small>&lt;a href=&#39;<data:post.url/>&#39;target=&#39;_blank&#39;&gt;&lt;strong&gt;&lt;i&gt;Sumber&lt;/i&gt;&lt;/strong&gt;&lt;/a&gt;</small>&lt;/textarea&gt;&lt;/p&gt;
&lt;/div&gt;
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-permalink-otomatis-di-blog.html' target='_blank'>widget</a></div>
</div></b:if>

Silahkan lakukan preview untuk memastikan penerapan kodenya sudah betul atau belum, kemudian save template blog Anda.

Demikian postingan Membuat Permalink Otomatis Di Blog, mudah-mudahan bermanfaat.

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Pagi ini saya share salah satu trik untuk mempercantik tampilan blog kita yaitu Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan. Setelah saya berhasil mengaplikasikannya pada blog saya ini, akhirnya saya berkesempatan untuk mengsharingnya untuk Anda semua. Tentunya bagi Anda yang belum tahu, bagi yang sudah tahu dan paham mohon koreksinya bila menjumpai hal yang kurang pas. Maklum saja saya belajar otodidak. Saya hanya senang dengan hal-hal yang baru, try and error sudah menjadi kebiasaan akhirnya. Dengan mencoba sesuatu hal yang baru, kita mendapat ilmu yang baru juga. Related posts ini akan bergerak ke kiri dan ke kanan dan akan berhenti ketika mouse di arahkan ke atasnya.

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan sebenarnya cukup mudah. Kenapa demikian? Karena Anda hanya tinggal mengcopy kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit mengobok-obok kode HTML template blog. Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula. 

Kemudian cari kode </head>, agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode </head> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode </head> tadi.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://kompiajaib.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Kemudian cari kode seperti di bawah ini

<div class='post-footer-line post-footer-line-1'>

atau kalau enggak ada cari yang seperti di bawah ini

<p class='post-footer-line post-footer-line-1'>

Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang sobat temukan.

<!-- Marquee Kompiajaib Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=12;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-related-post-dengan-thumbnail.html' target='_blank'>widget</a></div>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->

Perhatikan tulisan Baca Juga Artikel Terkait Lainnya: bisa Anda ganti dengan kalimat yang Anda kehendaki.

#444 untuk warna background kotaknya.

Dan angka 12 untuk menunjukan jumlah related post yang ditampilkan.

Silahkan lakukan preview untuk memastikan widgetnya berjalan atau tidak, setelah itu silahkan simpan templatenya kemudian lihat hasilnya....menarik bukan...

Demikian sharing Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu hal yang baru. Setiap orang pasti mengalami try and error.

Memberi Efek Marquee Pada Popular Posts Widget Blogger

Memberi Efek Marquee Pada Popular Posts Widget Blogger

Pagi ini saya akan share trik mempercantik blog yaitu Memberi Efek Marquee Pada Popular Posts Widget Blogger. Seperti telah kita ketahui, blogger menyediakan fasilitas popular posts. Kita bisa memunculkan popular posts dengan menyertakan thumbnail maupun tanpa thumbnail pada blog kita. Tentunya popular posts ini berdasarkan konten yang paling banyak diklik pengunjung blog.

Memberi Efek Marquee Pada Popular Posts Widget Blogger sangatlah mudah, namun tentunya Anda harus mengaktifkan dulu widget popular posts pada blog Anda. Dashboard >> Layout >> Add a Gadget >> Kemudian pilih Popular Posts.

Kemudian masuk ke Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates karena kita akan sedikit mengobok-obok kode HTML. Namun alangkah baiknya back up dulu template Anda untuk berjaga-jaga kemungkinan kesalahan pada edit HTML. Setelah itu silahkan cari HTML widget popular posts. Untuk memudahkan kita cari title dari widget tersebut dengan CTRL + F pada keyboard kemudian masukan titlenya ke kotak pencarian. Secara default, Anda akan menemukan kode HTML yang cukup panjang seperti di bawah ini.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Kemudian kita akan menambahkan kode <marquee direction='up' height='350px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> di atas kode <div class='widget-content popular-posts'> dan menambahkan kode </marquee> di bawah kode </div>

Perhatikan pada height='350px', itu menuntukan tinggi widget yang akan tampil pada blog kita, silahkan Anda atur sesuai keinginan dan scrollamount='2' untuk mengatur kecepatan scroll-nya.

Sehingga penampakan kodenya akan menjadi seperti di bawah ini.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
<marquee direction='up' height='350px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
...........................
...........................

              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</marquee>
</b:includable>
</b:widget>

Setelah itu silahkan lakukan preview untuk melihat apakah perubahannya sudah betul atau tidak, kemudian simpan template Anda, selesai.

Untuk demo, silahkan lihat pada Popular Posts Widget blog ini. Demikian sharing Memberi Efek Marquee Pada Popular Posts Widget Blogger kali ini mudah-mudahan bermanfaat.

Membuat Egg Share Slide Open Widget Di Pojok Blog

Membuat Egg Share Slide Open Widget Di Pojok Blog

Kali ini saya akan share sebuah sharing widget yang menurut saya cukup unik untuk disimpan di blog kita. Selain bentuknya yang unik karena berbentuk egg atau telur, egg share ini juga akan terbelah dan belahannya akan bergeser ke kanan ketika disorot mouse.

Cara Membuat Egg Share Slide Open Widget Di Pojok Blog cukup mudah, seperti biasa silahkan Anda masuk ke blog Anda >> Dashboard >> Template >> Edit HTML. Jangan lupa centang expand widget template karena kita akan mengobok-obok kode HTML.

Silahkan cari kode </head> (gunakan CTRL + F pada keyboard untuk memudahkan pencarian), lalu copy kode di bawah ini dan paste tepat DI ATAS kode tadi.

<!-- Start Egg Share Slide Open Widget from http://kompiajaib.blogspot.com/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End Egg Share Slide Open Widget from http://kompiajaib.blogspot.com/ -->

Kemudian cari kode </body>, dan kemudian copy kode di bawah ini dan paste DI ATAS kode tadi.

<!-- Start Egg Share Slide Open Widget from http://kompiajaib.blogspot.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><noscript><a href="http://kompiajaib.blogspot.com/">Blogger Gadgets</a></noscript><!-- End Egg Share Slide Open Widget from http://kompiajaib.blogspot.com/ -->

Perhatikan tulisan berwarna merah, itu menunjukan posisi widget berada di pojok kiri bawah. Kalau widget ingin berada di pojok kanan bawah, ganti left dengan right. Agar Widget berada di pojok atas, ganti bottom dengan up.

Terakhir silahkan preview untuk melihat penempatan widgetnya sudah benar atau belum, kemudian  save template Anda.

Demikian sharing cara Membuat Egg Share Slide Open Widget Di Pojok Blog mudah-mudahan bermanfaat.

Membuat Widget Jam Dan Kalender Di Pinggir Blog

Membuat Widget Jam Dan Kalender Di Pinggir Blog

Kenapa saya memberi judul Membuat Widget Jam Dan Kalender Di Pinggir Blog, karena memang tempat jam dan kalendernya berada di pinggir blog sebelah kiri dan tersembunyi sehingga tidak memakan tempat. Untuk melihat jam atau kalendernya kita tinggal klik pada tanda panah warna kuning dan kemudian jam atau kalendernya akan keluar.

Untuk melihat demo Membuat Widget Jam Dan Kalender Di Pinggir Blog silahkan lihat dengan klik di tombol demo di bawah ini, kemudian lihat di sebelah kiri blog.

Untuk mengaplikasikannya ke blog Anda cukup mudah, tinggal tekan tombol Add To Blogger di bawah ini, kemudian setelah terbuka jendela baru tinggal tekan tombol Add Widget.

Untuk waktu dan kalendernya sudah otomatis menyesuaikan dengan waktu internet. Bagaimana mau mencoba Membuat Widget Jam Dan Kalender Di Pinggir Blog? Silahkan...mudah-mudahan bermanfaat.

Membuat Widget I Love Indonesia Di Pojok Blog

Membuat Widget I Love Indonesia Di Pojok Blog

Pagi ini saya share cara Membuat Widget I Love Indonesia Di Pojok Blog yang cukup sederhana namum besar maknanya. Kita sebagai bangsa Indonesia tentunya bangga menjadi orang Indonesia, dan tentunya bangga juga menjadi blogger Indonesia. Widget ini bisa dipasang di blog Anda yang menandakan bahwa Anda orang dan blogger Indonesia. 

Untuk demo silahkan klik tombol demo di bawah ini, kemudian lihat di pojok kanan atas blog.

Cara Membuat Widget I Love Indonesia Di Pojok Blog cukup mudah, Anda tinggal klik tombol add to blogger di bawah ini.

Setelah terbuka jendela baru, silahkan klik pada tombol Add Widget, selesai. Mudah kan...? Demikian sharing cara Membuat Widget I Love Indonesia Di Pojok Blog mudah-mudahan bermanfaat.