Pasang Widget Related Post Dengan Icon

Assalamualaikum selamat siang sahabat semua. Sebelumnya saya ucapkan SELAMAT HARI RAYA IDUL FITRI 1432 H MOHON MAAF LAHIR DAN BATIN. Pada kesempatan yang sangat berharga ini saya akan memenuhi permintaan sahabat saya Hori yang meminta bagaimana cara pasang widget related post seperti milik saya. Sebenarnya widget ini sudah sangat lama ada kok dan saya kira kalian semua juga sudah pada tahu. Oh iya sebelumnya baca juga Cara membuat Artikel Terkait Dengan Gambar/Thumbnails atau Membuat Artikel Terkait Dengan Fungsi Scroll jika kalian kurang suka dengan widget ini.

Oke langsung saja kita mulai deh....
1. Seperti biasa, kalian harus login dulu ke akun blogger
2. Kemudian masuk ke rancangan lalu Edit HTML
3. Jangan lupa Expand Template Widget
4. Biasakan back up temnplate dulu ya
5. Kemudian pasang kode berikut di bawah tag </head>

<style type='text/css'> #related-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRonJSD4gaZ8T0HzEGZeNxQzWMAwRAso_8j86a0MdWibeT6hynNiUKvBenttv6V44ohbIplPDy6gNUuJyYwiy-zjKzllJKJvSzNGKB0WaxMM8gYFy2jqEYFk5RvPL41Hy32OF6CF19W5I/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/>

6. Jika sudah, cari <data:post.body/> lalu pasang kode berikut di bawahnya

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

7. Dan yang terakhir tentu saja save template dan lihat hasilnya

Semoga bermanfaat
Alhamdulillah...

READ MORE - Pasang Widget Related Post Dengan Icon

Resiko Menjadi Blog DoFollow

Siapa yang tidak ingin blog mereka di banjiri banyak komentar? Dengan adanya komentar di blog, sedikit banyak membantu untuk meningkatkan ranking blog kita. Dan sebagai pemilik blog, kita juga tidak merasa sia-sia dengan berkorban waktu, biaya, dan tenaga kita untuk menulis artikel di blog kita. Dengan berkomentar, blog yang di beri komentar maupun yang memberi komentar akan mendapatkan backlink secara gratis apalagi di blog yang berstatus DoFollow. Banyak juga para blogger mengubah settingan blog mereka yang dari NoFollow menjadi DoFollow agar mendapatkan banyak komentar. Namun banyak juga yang membiarkan settingan blog mereka apa adanya yaitu NoFollow.

Sudah tidak dapat di pungkiri lagi bahwa blog yang mempunyai status DoFollow akan di serbu banyak komentar khususnya mereka yang hanya memburu backlink semata. Dan blog DoFollow pun menjadi sasaran empuk para spammer untuk berkomentar di blog tersebut. Jadi Resiko Menjadi Blog DoFollow akan banyak di banjiri komentar, namun perlu di garis bawahi bahwa komentar tersebut berindikasi spam dan bukan komentar membangun. Tentunya kita sebagai addmin blog mengharapkan mendapatkan sebuah komentar yang membangun untuk perkembangan blog kita sendiri dan bukan hanya sekedar komentar spam. Contoh komentar spam biasanya adalah (nice info gan, mantab gan, pertamax gan, makasih infonya gan, dan masih banyak gan-gan yang lain) emang kita juragan sembako apa?

Tentunya paling tidak kita akan merasa jengkel jika hanya terdapat banyak komentar yang seperti itu. Saya pribadi lebih menghargai 1 komentar yang membangun daripada 10 komentar seperti yang saya sebutkan di atas. Jadi kesimpulannya terserah kalian para blogger sejati bagaimana mengambil sikap untuk kemajuan blog kalian masing-masing. Pilih NoFollow atau DoFollow itu terserah kalian dan hak kalian.

Semoga bermanfaat.
Alhamdulillah...

READ MORE - Resiko Menjadi Blog DoFollow

Cara Membuat Floating Share Button Pada Blogger

Tidak dapat di pungkiri bahwa share button baik itu facebook sahare, google buzz, maupun yang lain turut andil dalam mempromosikan artikel blog kita. Kali ini saya akan berbagi cara memasang floating share button pada blog. Widget ini akan selalu melayang, sehingga akan selalu terlihat oleh pengunjung blog kita. Cara pemasangannya pun cukup mudah kok.

1. Login ke blogger
2. Pilih rancangan lalu edit HTML
3. Expand Template Widget
4. Biasakan back up template dulu
5. Pasang kode css berikut di atas ]]></b:skin>

#sharebuttonfery {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:5px;
bottom:150px;
margin-top:10px;
position:fixed;
width:64px;
}

#sharebuttonfery .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px !important;
}

6. Kalau sudah, tambahkan kode berikut di atas atau sebelum <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebuttonfery'>
<div class='float'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>
</b:if>

7. Save template dan lihat hasilnya.

Semoga bermanfaat.
Alhamdulillah...

READ MORE - Cara Membuat Floating Share Button Pada Blogger

Seberapa Penting Chat Box Untuk Blog Anda?

Chat box atau Cbox, atau juga Soutmix adalah hal wajib bagi sebagian blogger untuk terpasang di dalam blog. Selain untuk memperindah tampilan blog, widget ini juga berfungsi sebagai buku tamu bagi para blogger yang hobi blogwalking untuk meninggalkan jejaknya. Tapi seberapa pentingkah widget ini untuk blog anda? Sebagian blogger ada yang menganggap widget ini sangat penting, dan tidak sedikit pula yang menganggap widget ini sama sekali tidak penting. Bagi saya sendiri, cbox dan sejenisnya merupakan benalu bagi blog. Kenapa bisa begitu? Ya, karena saya menganggap widget ini sangat tidak berguna. Selain memperberat loading blog, link yang kita tinggalkan juga tidak akan terindex oleh google. Toh kalau mau blogwalking kan lebih enak meninggalkan jejak di kotak komentar. Jangan salah loh, berkomentar juga mempunyai peran penting dalam meningkatkan ranking blog kita karena link yang kita tinggalkan akan terindex oleh google.

Ditambah lagi widget ini juga mempunyai dampak yang negatif buat blog yang telah memasang Google Adsense. Saya sering menjumpai di sebagian chat box terdapat kata-kata $$$, hacker, dan sebagainya yang di anggap melanggar TOS oleh google. Jadi jika blog kita telah memasang adsense dan di chat box terdapat kata-kata seperti itu, maka siap-siap saja di banned oleh google atau pihak adsense yang anda ikuti. Sekali lagi ini hanya menurut pandangan saya pribadi dan mungkin banyak blogger yang setuju dan banyak pula yang tidak setuju dengan pendapat saya ini. Jika punya anggapan lain, saya akan sangat menghargai jika kita berdiskusi di kotak komentar.

Semoga bermanfaat.
Alhamdulillah...

READ MORE - Seberapa Penting Chat Box Untuk Blog Anda?

Menambahkan Facebook Send Button Pada Blog

Facebook kembali meluncurkan fitur terbarunya untuk pengguna website. Setelah sukses dengan facebook like button dan facebook comment, kini perusahaan jejaring sosial terbesar itu kembali meluncurkan Facebook send button. Kali ini saya mencoba untuk sedikit membahas tentang cara pemasangannya pada blog. Untuk pemasangannya sendiri cukup mudah, kita hanya menambahkan kode berikut ini.

Facebook Send Button

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/>

Facebook Like Button + Send Button

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light' action='like' layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>

1. Klik design kemudian edit template

2. Centang expand template widgets

3. Jangan lupa back up template untuk berjaga-jaga

4. Pasang kode di atas di bawah <data:post.body/>

5. Jika menggunakan readmore, pasang di bawah <data:post.body/> yang terakhir atau juga bisa di bawah <div class='post-footer'>

6. Jika ingin tampil hanya pada postingan saja, tambahkan kode berikut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Letakkan kode disini

</b:if>

7. Terakhir save template.

Semoga bermanfaat.

Alhamdulillah...

READ MORE - Menambahkan Facebook Send Button Pada Blog

Mengulas Kembali Sejarah Tentang Blogger

Bagi sebagian blogger mungkin tidak banyak yang mengetahui sejarah tentang awal mula berdirinya blogger yang saat ini kita gunakan. Umumnya mereka hanya membuat, memposting, lalu berpromosi tapi sedikit dari mereka yang mengetahui sejarah munculnya platform blogger yang kita gunakan saat ini. Berikut sedikit ulasan mengenai sejarah blog yang saya kutip dari wikipedia.

Blog merupakan singkatan dari "web log" adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Situs web seperti ini biasanya dapat diakses oleh semua pengguna Internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.

Media blog pertama kali dipopulerkan oleh Blogger.com, yang dimiliki oleh PyraLab sebelum akhirnya PyraLab diakuisi oleh Google.Com pada akhir tahun 2002 yang lalu. Semenjak itu, banyak terdapat aplikasi-aplikasi yang bersifat sumber terbuka yang diperuntukkan kepada perkembangan para penulis blog tersebut.

Blog mempunyai fungsi yang sangat beragam, dari sebuah catatan harian, media publikasi dalam sebuah kampanye politik, sampai dengan program-program media dan perusahaan-perusahaan. Sebagian blog dikelola oleh seorang penulis tunggal, sementara sebagian lainnya oleh beberapa penulis, . Banyak juga weblog yang memiliki fasilitas interaksi dengan para pengunjungnya, seperti menggunakan buku tamu dan kolom komentar yang dapat memperkenankan para pengunjungnya untuk meninggalkan komentar atas isi dari tulisan yang dipublikasikan, namun demikian ada juga yang yang sebaliknya atau yang bersifat non-interaktif.

Situs-situs web yang saling berkaitan berkat weblog, atau secara total merupakan kumpulan weblog sering disebut sebagai blogosphere. Bilamana sebuah kumpulan gelombang aktivitas, informasi dan opini yang sangat besar berulang kali muncul untuk beberapa subyek atau sangat kontroversial terjadi dalam blogosphere, maka hal itu sering disebut sebagai blogstorm atau badai blog.

Ngeblog (istilah bahasa Indonesia untuk blogging) harus dilakukan hampir setiap waktu untuk mengetahui eksistensi dari pemilik blog. Juga untuk mengetahui sejauh mana blog dirawat (mengganti template) atau menambah artikel. Sekarang ada lebih 10 juta blog yang bisa ditemukan di Internet. Dan masih bisa berkembang lagi, karena saat ini ada banyak sekali software, tool, dan aplikasi Internet lain yang mempermudah para blogger (sebutan pemilik blog) untuk merawat blognya. Selain merawat dan terus melakukan pembaharuan di blognya, para blogger yang tergolong baru pun masih sering melakukan blogwalking, yaitu aktivitas dimana para blogger meninggalkan link di blog atau situs orang lain seraya memberikan komentar. Beberapa blogger kini bahkan telah menjadikan blognya sebagai sumber pemasukan utama melalui program periklanan AdSense, posting berbayar, jualan link, afiliasi dan lain-lain. Sehingga kemudian muncullah istilah profesional blogger, atau problogger, orang yang menggantungkan hidupnya hanya dari aktivitas ngeblog. Karena memang faktanya banyak chanel-chanel pendapatan dana baik berupa dolar maupun rupiah dari aktivitas ngeblog ini.

referensi: id.wikipedia.org

READ MORE - Mengulas Kembali Sejarah Tentang Blogger

Cara Membuat Rounded Corner Pada Border

Sebelumnya bagi para master yang sudah tahu maaf ya, saya cuma mau share aja buat sobat blogger yang mungkin belum tahu hehehe. Apa sih rounded corner itu? Yang di maksud rounded corner adalah garis melengkung pada border blog sob, coba deh lihat contoh di bawah. Sebenarnya sangat banyak macam-macam rounded corner, tapi kali ini saya akan membahas yang paling simpel dulu. Kebanyakan border atau garis tepi blog biasanya hanya kotak saja tanpa ada variasi seperti ini.

Contoh border biasa


Contoh border biasa


Sedangkan untuk yang menggunakan rounded corner seperti ini.

Contoh border rounded corner


Contoh border rounded corner

Untuk membuat rounded corner sangat mudah, sobat hanya perlu menambahkan kode warna biru setelah border. Contohnya begini (border:1px solid #000;) ini yang biasa. Kalau ingin menambahkan garis melengkung, hanya menambahkan kode seperti ini (border:1px solid #000;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;). Mudah kan? Silahkan di coba ya kawan..

Semoga bermanfaat.

Alhamdulillah...

READ MORE - Cara Membuat Rounded Corner Pada Border

Cara Pasang Komentar Facebook Di Blog (Terbaru)

Selamat malam sobat blogger semua, kita jumpa lagi di blog kebanggaan warga Mojokerto ini (kayak penyiar radio aja ya, hehehe...). Lagi-lagi dapat perkembangan terbaru tentang cara pasang kotak komentar facebook di blog kita. Setelah tempo hari saya posting tentang pasang komentar facebook V1 tapi kelemahannya adalah semua komentar muncul di setiap postingan, jadi kita tidak tahu postingan mana yang terkomentari. Kemudian dilanjutkan dengan pasang komentar facebook V2. Cara ini juga banyak yang berhasil tapi ada juga yang gagal, entah kenapa. Tapi kelemahan V2 tidak ada fitur reply di komentarnya tidak seperti yang V1, dan juga jika ada yang mengomentari artikel kita, kita tidak tahu karena tidak ada notifikasi jadi harus cek manual di setiap artikel.

Nah yang V3 ini yang lebih sempurna ada fitur reply dan notifikasi, jd kita bisa tahu kalau ada yang berkomentar menggunakan komentar facebook karena ada pemberitahuan di akun facebook kita, jadi kita bisa me-manage komentar tersebut (ngomong opo kuwi...??). Tuh diatas udah ada gambarnya. Oke deh cukup untuk kata sambutannya, sekarang kita langsung saja ke kali nyemplung bareng (maksudnya langsung mulai tutorialnya hehehe..). Jangan terlalu tegang gitu dong bacanya santai aja sob, ntar jadi botak loh kayak saya (ups keceplosan).

Yang pertama harus dilakukan adalah membuat aplikasi komentar facebook. Saya rasa point ini tidak perlu saya jelaskan lagi karena sudah saya tulis, silahkan baca dulu disini untuk cara membuat aplikasinya. Jika sudah ada yang memasang komentar facebook lewat tutorial blog ini sebalumnya atau blog lain yang berbeda dengan cara ini, maka silahkan di ganti dengan kode yang saya berikan nanti. Oke kita lanjutkan lagi yuk. Setelah selesai membuat aplikasinya dan mendapatkan APP ID dari facebook, sekarang tinggal pemasangan pada blog. Pasang kode berikut DI BAWAH <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=APP ID&amp;xfbml=1'/><fb:comments expr:href='data:post.url' numposts='5' width='615'/>
</b:if>

Ganti APP ID berwarna hijau dengan APP ID yang di dapat dari facebook. Untuk angka 615, adalah lebar kotak komentar, sesuaikan dengan template sobat. Kemudian agar dapat terintegrasi dengan akun facebook kita, pasang kode berikut DI BAWAH <head> atau DI ATAS <b:skin><![CDATA[/*

<meta content='ID FACEBOOK' property='fb:admins'/>
<meta content='APP ID' property='fb:app_id'/>

Ganti APP ID dengan ID yang di dapat dari facebook tadi, dan ganti ID Facebook dengan ID sobat, misalnya id facebook saya adalah http://www.facebook.com/fery.interisti (jangan lupa di add ya hehehe), ganti ID FACEBOOK dengan yang berwarna merah. Setelah itu yang wajib harus dilakukan adalah save template. Kalau ada yang kurang jelas silahkan tanya ya.

Semoga bermanfaat.
Alhamdulillah...

READ MORE - Cara Pasang Komentar Facebook Di Blog (Terbaru)

Cara Membuat Navigasi Halaman Blog

Wah sudah lumayan lama tidak posting tentang tutorial blog nih, jadi agak kurang update deh blog ini. Setelah dulu saya pernah membahas tentang Mengganti Tulisan Posting Lama Dan Posting Baru Jadi Lebih Menarik (silahkan baca disini), sekarang kita akan membahas cara membuat navigasi halaman blog. Lihat gambar di bawah ini sebagai contoh.

klik gambar untuk live demonya

Memang cara ini sudah banyak sekali yang membahas, tapi tidak apa-apa saya bahas lagi untuk pengunjung setia blog ini. Navigasi halaman ini saya padukan dengan sedikit sentuhan css3 gradient, border radius, dan text sadhow. Bagi kalian yang sudah terbiasa dengan kode css, silahkan di modifikasi agar jadi lebih menarik sesuai template.

Oke langsung saja dengan menambahkan kode css berikut DI ATAS ]]></b:skin>

.showpageArea{padding:10px;background:#fff}

.showpageArea a{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-decoration:none}

.showpageNum a{font-weight:bold;color:#ca1717;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px solid #fff;background:#fff;}

.showpageNum a:hover{color:#fff;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);text-shadow:0px 2px 2px #00a;border:1px solid #ddd;}

.showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #ddd;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.showpage a{padding:1px 8px; margin:0 2px;border:1px solid #ddd;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);;color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}

.showpage a:hover{background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}
#showlastpage a{font-weight:bold}

Setelah itu tambahkan script berikut DI ATAS tag </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script src='http://belajarblogging.googlecode.com/files/pagenav.js' type='text/javascript'/>
</b:if>

Dan terakhir save template dan lihat hasilnya. Bagaimana, mudah kan? Kalau ada yang kesulitan, silahkan bertanya di kotak komentar di bawah.

Semoga bermanfaat.
Alhamdulillah...

READ MORE - Cara Membuat Navigasi Halaman Blog

Sudahkah Kita Memanjakan Pengunjung Blog Kita?

Bagi sebagian besar blogger pasti akan sangat berharap jika blognya kebanjiran traffic yang melimpah. Dan yang pasti juga akan lebih berharap lagi jika ada yang berkomentar pada salah satu artikelnya. Dengan mendapatkan komentar, kita sebagai pemilik blog akan merasa tulisan kita dihargai oleh orang lain minimal sesama blogger. Dengan begitu pengorbanan kita baik itu waktu, tenaga, bahkan biaya tidak akan sia-sia.

Tapi sebagai pemilik blog, apakah kita sudah merasa memanjakan pengunjung blog yang notabene adalah aset berharga kita? Untuk mendapatkan pengunjung tetap, kita harus benar-benar memperhatikan kenyamanan mereka. Ibarat pepatah "Tamu adalah raja" itu juga yang berlaku untuk pengunjung blog kita. Salah satunya adalah dengan memperhatikan "kondisi" blog kita sendiri, apakah sudah sesuai dengan kenyamanan "sang raja"?

Sebagai contoh berdasarkan pengalaman saya ketika mengunjungi suatu blog yang menurut saya desainnya cukup menarik, tapi loadingnya amat sangat berat sehingga saya memutuskan untuk tidak melanjutkan. Maklum koneksi internet yang saya miliki tidak secepat mobil Lamborgini. Contoh yang lain ketika kita hendak berkomentar di blog lain tapi blog tersebut mengaktifkan verifikasi kata di kotak komentarnya. Memang tidak salah jika kita mengaktifkan verifikasi kata sebelum komentar di munculkan karena itu adalah fasilitas yag di berikan oleh blogspot, akan tetapi sebagian blogger akan merasa risih jika fitur tersebut di aktifkan.

Dengan begitu ketika kita hendak berkomentar, akan terjadi dua kali loading pada halaman tersebut. Apalagi pada blog yang berat, padahal tidak semua blogger memiliki koneksi internet yang cepat. Dengan begitu pengunjung akan berfikir dua kali untuk memberikan komentar pada blog kita. Toh google juga sudah mengaktifkan deteksi spam otomatis, jadi fitur tersebut tidak saya berlakukan pada semua blog saya. Kesimpulannya adalah, buatlah pengunjung merasa mudah dalam mengakses blog kita. Jangan sampai mereka kabur hanya karena kondisi blog kita yang tidak sesuai harapan mereka. Sekarang tinggal keputusan sobat sendiri, cara apa yang dipakai untuk memanjakan pengunjung blog sobat. Jika ada yang salah atau ada yang tersinggung dengan artikel ini silahkan berkomentar, karena saya akan sangat menghargainya.

Semoga bermanfaat.

Alhamdulillah...

READ MORE - Sudahkah Kita Memanjakan Pengunjung Blog Kita?

Cara Membuat Horizontal Acrobatic Menu

Beberapa hari ini saya memang jarang update blog ini dikarenakan saya lagi mendalami untuk belajar WP. Tapi sebisa mungkin saya akan update blog sederhana ini meskipun hanya tutorial sederhana. Pada kesempatan kali ini kita akan membahas Cara Membuat Horizontal Acrobatic Menu. Tutorial ini saya dapatkan beberapa hari lalu dari sahabat saya Azis Lamayuda. Langsung saja lihat demonya.

LIVE DEMO

Untuk cara membuatnya, ikuti langkah-langkah di bawah ini.

1. Pasang kode css berikut di atas ]]></b:skin>

ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left bottom;
}

2. Pemasangan jquery di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>


$(document).ready(function() {


$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
});

$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});


});
</script>

3. Selanjutnya cari kode berikut

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

4. Pasang kode HTML untuk menu berikut di bawah kode di atas

<ul class='v2' id='topnav'>

<li><a href='/' title='HOME'>HOME</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a></li>

<li><a href='#' title='MENU 2'>MENU 2</a></li>

<li><a href='#' title='MENU 3'>MENU 3</a></li>

<li><a href='#' title='MENU 4'>MENU 4</a></li>

<li><a href='#' title='MENU 5'>MENU 5</a></li>

<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>

5. Save template

Note: Untuk pemasangan menu, sobat tidak di haruskan meletakkan di bawah kode di atas tadi. Sobat bisa meletakkannya di add gadget, tinggal sesuaikan dengan template saja.

Semoga bermanfaat.
Alhamdulillah..

READ MORE - Cara Membuat Horizontal Acrobatic Menu

Memanipulasi Tampilan Jumlah Komentar

Blog sobat masih sepi? Masih belum ada yang memberi komentar? Mungkin dengan cara ini para pengunjung akan tertarik untuk memberi komentar karena melihat total komentar yang begitu banyak meskipun hanya manipulasi saja. Apalagi pada blog dofollow seperti blog ini. Dari judulnya saja sudah jelas Memanipulasi Tampilan Jumlah Komentar, ini maksudnya hanya memanipulasi tampilan link komentar di bawah judul artikel. Coba lihat gambar.

Dari cara di atas pasti sobat tahu maksud dari judul artikel ini. Intinya cara ini hanya memanipulasi tampilannya saja, bukan total komentar yang ada di blog. Oke langsung saja kita ke pokok pembahasan dengan cara menambahkan sedikit kode css di atas ]]></b:skin>

a.comment-link:before{content:"2";}
#comments h4:before{content:"2";}

Dengan menambahkan kode di atas maka angka 2 akan ditambahkan di depan jumlah komentar yang sebenarnya. Misal jumlah komentar sebenarnya ada 5 maka setelah memasang kode di atas, tampilan komentar akan menjadi 25 dan seterusnya.


Semoga bermanfaat.
Alhamdulillah...



referensi kode: mas doyok

READ MORE - Memanipulasi Tampilan Jumlah Komentar

Menambahkan Komentar Facebook Di Blogger V.2

Setelah pada postingan sebelumnya saya juga pernah membahas hal yang sama, tapi ada kekurangannya yaitu komentar muncul di setiap postingan jadi kita tidak tahu artikel mana yang di komentari. Pada postingan kali ini kita juga akan membahas tutorial yang sama, tapi bedanya setiap komentar tidak akan muncul di semua postingan.

Saya sudah membuktikan dan berhasil di blog ini, silahkan di lihat kalau tidak percaya. Jadi kalau masih ada yang belum berhasil berarti sobat kurang beruntung, atau mungkin juga tidak semua template bisa di pasang kotak komentar facebok.

Baiklah langsung saja silahkan login ke akun facebook sobat dulu, lalu kunjungi Facebook developer kemudian isi form yang tersedia ( Lihat Gambar )

Setelah selesai klik Create app. Nanti akan ada ID App, copy dulu di notepad.

Berikutnya untuk pemasangan di blogger.
1. Login ke akun blogger sobat

2. Pilih design lalu edit HTML
3. Expand Template Widget
4. Pasang kode berikut DI BAWAH <data:post.body/>
5. Jika sudah menggunakan read more, pasang DI BAWAH <data:post.body/> ke dua

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;APP ID&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;);
e.type = &#39;text/javascript&#39;;
e.src = document.location.protocol +
&#39;//connect.facebook.net/id_ID/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>

Yang warna hijau ganti dengan APP ID yang sudah di dapat tadi dan Save template.
Atau jika sobat tidak mau repot, silahkan pakai kode di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;203502323012906&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;);
e.type = &#39;text/javascript&#39;;
e.src = document.location.protocol +
&#39;//connect.facebook.net/id_ID/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>

Semoga bermanfaat.
Alhamdulillah...

READ MORE - Menambahkan Komentar Facebook Di Blogger V.2

Image Gallery Menggunakan Jquery 1.4.2

Lagi jalan-jalan ke blog sahabat, secara tidak sengaja saya menemukan trik menarik tentang macam-macam efek image gallery menggunakan Jquery 1.4.2. Trik ini sangat atraktif jika sobat sedang posting artikel tentang foto-foto sehingga tidak memakan terlalu banyak ruang, dan pengunjung juga tidak merasa bosan.

Oke lagsung saja silahkan lihat demo di bawah ini untuk macam-macam efeknya.

Only compatible with firefox

Untuk pemasangannya, sobat blogger bisa menggunakan kode di bawah ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi1.js" type="text/javascript">
</script><script src="http://belajarblogging.googlecode.com/files/animasi2.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi3.js" type="text/javascript">
</script><style type="text/css">
.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" /></div>
<script type="text/javascript">

SILAHKAN PILIH SALAH SATU KODE JQUERY YANG SOBAT SUKA KEMUDIAN MASUKKAN KODENYA DI SINI.

</script>

Saya contohkan gambar di atas menggunakan kode seperti ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi1.js" type="text/javascript">
</script><script src="http://belajarblogging.googlecode.com/files/animasi2.js" type="text/javascript"></script>
<script src="http://belajarblogging.googlecode.com/files/animasi3.js" type="text/javascript">
</script><style type="text/css">
.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2aplXy5vVBonvWy-i3Sd5aQHuGIKTsFhePRnltdPBSZgGKSs9XC9xGoEY43Oe7vIk0OoNXd7Mip4OFz4VGT3ffzpPUYCG2y2aDJWqjcrJLJWJqVHB1xkvFsGluPXtRwHNsFfLYH_lQWmk/s400/iphone-4g.jpg" width="400" />
<img height="200" src="http://peoplemeetme.com/wp-content/uploads/2010/09/iphone-4g-11.jpg" width="400" />
<img height="200" src="http://1.bp.blogspot.com/_7510iPezit8/TRbRi3jJjkI/AAAAAAAAAPY/sAn48YoV0A8/s1600/11119422-apple-iphone-4.jpg" width="400" />
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBYwyoj9LzVavl3PLSH_gfQp3A-3Djx_ae8QPwhnwyTfDfLug-YcghzUxKQ0nUpHDDdiNkOvP9t3OC_WH3tvGrTcN_UNfwUNsCOr8GwiJBy4zHnZjpvYN6yNiNFQaE2HWclUNHzwAxFmo/s1600/iphone4.jpeg.jpg" width="400" />
<img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh8PaAs39dSyy-7ChRGy9hXjipQ7dBQkYtKgHtpI3hY8fXjWcBLsHKlud1wFmkEcCbC3ZsgpC_Npcz8z-6QPQtJqxmI-k__uWJt11tbfzo1nJjjxadzFsQSczVDa-eNTLZXEIHU1LZwhN4/s1600/iphone4.gif" width="400" /></div>
<script type="text/javascript">

$('#ke2').cycle({fx:'scrollDown',speedIn: 2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});

</script>

Untuk kode-kode jquery yang lain, silahkan pilih di bawah ini.

$('#ke2').cycle({fx:'zoom',speedIn:2500,speedOut: 500,easeIn:'bouncein',easeOut: 'easeout',sync:0,delay:-4000});

$('#ke2').cycle({fx:'custom',cssBefore:{left: 232,top: -232,display: 'block'},animIn: {left: 0,top: 0},animOut: {left: 232,top: 232},delay: -3000});

$('#ke2').cycle({fx:'custom',sync: 0,cssBefore: {top:0,left: 360,display: 'block'},animIn:{left: 0},animOut: {top: 232},delay: -1000});

$('#ke2').cycle({fx:'custom',cssBefore: {left: 115,top: 115,width: 0,height: 0,opacity: 1,zIndex: 1},animOut: {opacity: 0},animIn: {left: 0,top: 0,width: 400,height: 200},cssAfter: {zIndex: 0},delay: -3000});

$('#ke2').cycle({fx: 'custom',cssBefore: {top:0,left: 0,width: 0,height: 0,zIndex: 1},animIn:{width: 400,height: 200},animOut:{top:200,left: 200,width: 0,height: 0},cssAfter:{zIndex: 0},delay: -1000});

$('#ke2').cycle({fx:'shuffle',shuffle: {top:-280,left: 280},easing:'backinout',delay: -2000});

$('#ke2').cycle({fx:'curtainX',sync: false,delay: -2000});

$(function(){$('#ke2').cycle({fx:'cover',delay:-2000,cssBefore:{opacity:1 },animOut:{ opacity: 0 }});});

$('#ke2').cycle('wipe');

$('#ke2').cycle({fx:'wipe',speed:1000,timeout: 6000,delay:-4000,clip:'l2r'});

$('#ke2').cycle({fx:'wipe',speed:1000,timeout: 6000,clip:'zoom'});

Sekedar tambahan, trik ini juga bisa di pasang di bagian home page dengan cara menambahkan ke widget HTML/Java script. Selamat berkreasi.


Semoga bermanfaat.
Alhamdulillah...

READ MORE - Image Gallery Menggunakan Jquery 1.4.2

Link Bergerak Ketika Di Sorot

Akhirya bisa online lagi setelah beberapa hari ini di sibukkan kegiatan offline yang mengharuskan meninggalkan kegiatan blogging untuk sementara waktu. Pada kesempatan yang sangat berharga ini saya akan membahas sedikir tutorial ringan tentang cara membuat link bergerak ketika di sorot mouse.

Trik ini sangat cocok bagi sobat blogger yang igin memperindah tampilan blognya. Silahkan lihat demo di bawah. Bagi yang tertarik, silahkan ikuti tutorial berikut ini.

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5
• Link 6
• Link 7
• Link 8
• Link 9
• Link 10

1. Login ke akun blog sobat.
2. Pilih design lalu masuk edit HTML.
3. Cari kode </head> lalu pasang kode di bawah ini di atas kode </head> tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function()
{
slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";

// initiates the timer used for the sliding animation
var timer = 0;

// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});

// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}

//]]>
</script>

4. Setelah itu save template.

Untuk menambah linknya, silahkan pergi ke page elemen >> add gadget >> HTML/Java Script letaknya terserah sobat mau di pasang dimana. Kemudian masukkan kode di bawah ini ke dalamnya.

<ul id="sliding-navigation">

<li class="sliding-element"><a href="#">Link 1</a></li>

<li class="sliding-element"><a href="#">Link 2</a></li>

<li class="sliding-element"><a href="#">Link 3</a></li>

<li class="sliding-element"><a href="#">Link 4</a></li>

<li class="sliding-element"><a href="#">Link 5</a></li>

<li class="sliding-element"><a href="#">Link 6</a></li>

<li class="sliding-element"><a href="#">Link 7</a></li>

<li class="sliding-element"><a href="#">Link 8</a></li>

<li class="sliding-element"><a href="#">Link 9</a></li>

<li class="sliding-element"><a href="#">Link 10</a></li>

</ul>

Silahkan di edit link nya sesuai kebutuhan.
Semoga bermanfaat.
Alhamdulillah...

READ MORE - Link Bergerak Ketika Di Sorot

Modifikasi Kotak Komentar Dengan Intensedebate

Mungkin di antara sobat blogger ada yang bosan dengan tampilan kotak komentar platform blogger yang hanya itu-itu saja. Kalau memang ya, sekarang sudah saatnya kalian mengganti tampilan kotak komentar kalian dengan bantuan Intensedebate. Situs ini membantu memodifikasi kotak komentar blogger menjadi seperti wordpress dengan langkah yang sangat mudah, jadi sobat blogger tidak perlu pusing lagi dengan kode-kode HTML yang rumit itu. Cukup dengan 5 menit, kotak komentar sobat akan jadi seperti yang di inginkan.

Langkah pertama kunjungi situs Intensedebate
Bagi yang belum mempunyai akun, silahkan register dulu karena nanti akan di pakai sebagai akun untuk berkomentar di kotak komentar baru.
Setelah proses registrasi selesai, cek email kalian untuk verifikasi akun. Kemudian login menggunakan akun yang sudah terdaftar tadi.

Setelah kalian sudah login, pilih Manage blogs/sites di bagian kanan kemudian Install IntenseDebate.

Nanti kalian akan di minta untuk masukkan alamat blog kalian. Setelah itu akan di beri pilihan install, pilih Template. Kemudian untuk pilihan yang ke dua pilih Only on new posts atau On all blog posts. Saya rekomendasikan pilih yang Only on new posts, karena jika pilih On all blog posts semua komentar yang sudah ada akan hilang.

Login ke akun blogger dulu sebelum melanjutkan. Kemudian masuk ke edit HTML ( Jangan Expand Template Widget ) download full template.
Kembali lagi ke Intensedebate lalu scroll ke bagian paling bawah pilih browse dan upload template yang telah di download tadi.

Setelah proses upload selesai copy kode yang ada di sebelah kiri hasil modifikasi tadi.

Kembali ke blogger, edit HTML kemudian hapus semua kode yang ada di template sobat  dan ganti dengan kode dari Intensedebate tadi.
Langkah yang terakhir tentunya save template dong......
Nanti sobat bisa memodifikasi template melalui Intensedebate, jadi tidak perlu edit kode di HTML lagi. Bagi sobat yang sudah mahir dengan kode css, silahkan berkreasi untuk lebih mendapatkan hail yang lebih baik. Tapi bagi sobat yang belum faham kode css seperti saya, nanti di sana sudah ada petunjuk seperti mengganti lebar, background, warna teks, link dll. Untuk melihat hasil yang sudah jadi, silahkan lihat di blog baru saya Di sini. Sekalian kasih komentar ya hehehe....

Semoga bermanfaat.
Alhamdulillah...

READ MORE - Modifikasi Kotak Komentar Dengan Intensedebate

Trik Jitu Cara Cepat Meningkatkan PageRank

Cara cepat meningkatkan Pagerank. Ini adalah pengalaman saya setelah menelusuri berbagai macam cara untuk meningkatkan pagerank blog kita.
Mau tahu Cara cepat update PageRank di Google? Makanya jangan pernah menganggap remeh penyebaran produk dengan pemasaran sistem Multi Level Marketing . Dalam postingan kali ini saya mau mencoba mengajak kalian semua untuk memanfaatkan kedahsyatan faktor kali dan kecepatan penyebaran ini dalam bentuk backlink.

Caranya gampang kok, yang perlu sobat lakukan adalah meletakkan link-link berikut ini di blog atau artikel kalian.

1. Komunitas Dunia Maya
2. Nofita
3. Ququy
4. Informasi Terbaru
5. Raden Somad
6. Terbaru 2011
7. In my komputer
8. DOWNLOAD FREE MANGA
9. Dickelodeon | Mixed Content
10. Belajar Blogging

Tapi ingat, sebelum kamu meletakkan link diatas, sobat harus menghapus peserta nomor 1 dari daftar. Sehingga semua peserta naik 1 level. Yang tadi nomor 2 jadi nomor 1, nomor 3 jadi 2, dst. Kemudian masukkan link sobat sendiri di bagian paling bawah (nomor 10).
Jika tiap peserta mampu mengajak 5 orang saja, maka jumlah backlink yang akan didapat adalah:
Ketika posisi kamu 10, jumlah backlink = 1
Posisi 9, jml backlink = 5
Posisi 8, jml backlink = 25
Posisi 7, jml backlink = 125
Posisi 6, jml backlink = 625
Posisi 5, jml backlink = 3,125
Posisi 4, jml backlink = 15,625
Posisi 3, jml backlink = 78,125
Posisi 2, jml backlink = 390,625
Posisi 1, jml backlink = 1,953,125

Dan semuanya menggunakan kata kunci yang kamu inginkan. Dari sisi SEO sobat blogger sudah mendapatkan 1,953,125 backlink dan efek sampingnya jika pengunjung web para downline sobat mengklik link itu, juga membuat blog sobat mendapatkan traffik tambahan.

Nah, silahkan copy paste artikel ini, dan hilangkan peserta nomor 1 lalu tambahkan link blog/website sobat di posisi 10. Ingat, sobat harus mulai dari posisi 10 agar hasilnya maksimal. Karena jika sobat tiba2 di posisi 1, maka link kamu akan hilang begitu ada yang masuk ke posisi 10.
Saya yakin dalam waktu yang singkat, Pagerank blog sobat pasti langsung naik drastis di luar dugaan anda. Selamat mencoba trik rahasia ini!

Bagaimana, apa sobat semua berkenan? Kalau iya, copas aja! Lalu sarankan kepada sobat blogger yang lain agar terus menyebar!
Tugasnya gampang kan!!
Copas trik ini lalu sarankan ke teman yang lain begitu pula seterusnya!
laporkan bila ada link yang rusak

Jika kesulitan membuat link semacam diatas, sobat blogger bisa copy kode dibawah ini

1. <a href="http://nofita.com/" target="_blank">Nofita</a>
2. <a href="http://ququy.com/" target="_blank">Ququy</a>
3. <a href="http://baru2.net/" target="_blank">Informasi Terbaru</a>
4. <a href="http://radensomad.com/" target="_blank">Raden Somad</a>
5. <a href="http://terbaru2010.com/" target="_blank">Terbaru 2011</a>
6. <a href="http://indonesiadikomputerku.blogspot.com/" target="_blank">In my komputer</a>
7. <a href="http://d0wnload-zone.co.cc/" target="_blank">DOWNLOAD FREE MANGA</a>
8. <a href="http://www.dickelodeon.co.cc/" target="_blank">Dickelodeon | Mixed Content</a>
9. <a href="http://bloggerbiasa.blogspot.com/" target="_blank" title="Tutorial Blog | Tips Trick Blogger | Blogspot Tutorial | Blogger Tutorial | Seo">Belajar Blogging</a>
10. <a href="http://URL BLOG SOBAT" target="_blank">NAMA BLOG</a>

Selamat mencoba.
Alhamdulillah...

READ MORE - Trik Jitu Cara Cepat Meningkatkan PageRank

Cara Menambah Kotak Komentar Facebook Di Blog

Pagi ini saya membuka blog dan melakukan cek pada chat box, di situ saya menemukan salah satu sahabat saya jeng blogey yang bertanya cara menambah komentar facebook di blog.

Hal itu memberi saya inspirasi untuk membuat posting tentang apa yang di request oleh sahabat saya. Meskipun cara ini sudah cukup lama, tapi tidak ada salahnya saya posting kembali. Baiklah langsung saja kita melakukan praktek.

Kunjungi Pengembang Facebook, kemudian silahkan membuat aplikasinya. Di situ kita akan di minta untuk mengisi form yang di sediakan. Untuk URL to comment on isikan dengan URL blog sobat. Sedangkan untuk Number of posts itu adalah jumlah komentar yang akan muncul, silahkan atur sesuai kebutuhan. Untuk Width adalah lebar kotak komentar, silahkan sesuaikan dengan template sobat.

Setelah semuanya sudah di atur sesuai kebutuhan, tekan Get code maka akan muncul kode yang siap di pasang di blog.

Sekarang langkah pemasangan pada blog kita.
1. Login ke akun blog sobat.
2. Pilih rancangan lalu edit HTML
3. Expand Template Widget
4. Download full template untuk menghindari adanya kesalahan.
5. Cari kode <data:post.body/>
6. Jika sudah menggunakan read more, nanti ada dua <data:post.body/>, pilih kode yang kedua.
7. Setelah itu pasang kode comment facebook tadi di Bawah <data:post.body/>
8. Agar comment facebook tidak muncul di home page dan hanya muncul di dalam postingan, tambahkan seperti kode di bawah.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

LETAKKAN KODE COMMENT FACEBOOK DISINI

</b:if>

8. Save template

Semoga bermanfaat.
Alhamdulillah...

READ MORE - Cara Menambah Kotak Komentar Facebook Di Blog

Menambah Elemen Baru Di Atas Header

Setelah pada postingan kemarin saya membahas tentang Cara Memubuat Footer Multi Kolom, pada postingan kali ini saya akan membahas cara menambah elemen baru atau add gadget di bagian atas header.

Menambahkan elemen baru di atas header memang mempunyai banyak fungsi. Selain bisa untuk meletakkan script iklan, juga bisa untuk menambahkan horizontal menu bagi blog yang belum ada horizontal menunya.

Ok, tanpa panjang lebar lagi langsung saja kita mulai acara ini
( Maksudnya tutorial ini hehehe... )

1. Login ke akun blogger sobat.
2. Pilih design lalu edit HTML.
3. Download full template dulu, takut kalau terjadi kesalahan.
4. Cari kode ]]></b:skin>
5. Pasang kode di bawah ini DI ATAS ]]></b:skin>

#gadget_header{
margin:10px 0;
padding:1%;
width:100%;}

6. Cari kode <div id='header-wrapper'> dan pasang kode berikut DI ATAS <div id='header-wrapper'> tadi

<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

7. Langkah terakhir save template dan lihat perubahannya.

Note: Tidak semua template memiliki kode yang sama, jadi cari yang mendekati dan jangan takut mencoba.

Semoga bermanfaat.
Alhamdulillah...

READ MORE - Menambah Elemen Baru Di Atas Header

Membuat Footer Multi Kolom

Assalamualaikum sobat blogger semua...
Di malam yang sedikit mendung ini saya kembali akan membagikan sedikit tutorial blogger. Pada postingan kali ini kita akan membahas cara membuat footer multi kolom, atau lebih tepatnya membuat tiga kolom di bagian footer.

Membuat footer multi kolom memang sangat berguna untuk menambah koleksi widget kita agar tidak selalu di tempatkan di bagian sidebar.
Secara default template asli blogger tidak terdapat kolom di bagian footer, meskipun banyak template custom yang sudah menyediakan footer multi kolom.

Bagi sobat blogger yang tertarik ingin menambahkan tiga kolom atau add gadget di bagian footer, silahkan ikuti langkah-langkah di bawah ini.

1. Login ke akun blogger
2. Pilih design kemudian edit HTML
3. Jangan lupa Expand Widget Template
4. Untuk menghindari kesalahan, backup template dulu
5. Selanjutnya paste kode di bawah ini DI ATAS ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

6. Langkah selanjutnya temukan kode.

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

7. Lalu pastekan kode berikut DI BAWAH kode di atas.

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p> <hr align='center' color='#5d5d54' width='90%'/></p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>

<div style='clear:both;'/>
</div>

8. Save template
9. Pergi ke elemen laman untuk melihat perubahannya


Semoga barmanfaat.
Alhamdulillah...

READ MORE - Membuat Footer Multi Kolom