Membuat Random Posisi Iklan : Trik Untuk Naikin Klik

Pada kesempatan ini, saya akan berbagai kepada temen-temen tentang cara membuat random posisi iklan pada blog anda. Cara ini bisa dibilang bisa menaikkan nilai klik iklan pada blog anda. Karena posisi iklan akan selalu berubah posisi. Jika anda masih bingung tentang apa yang saya tulis, anda bisa lihat gambar dibawah ini :
Jika anda refresh halaman blog yang terdapat iklannya, maka posisi iklan akan berubah seperti gambar dibawah ini :
Untuk membuat random posisi iklan seperti diatas, caranya sebagai berikut. Buka single.php blog anda kemudian pada kode <?php the_content(__('(more...)')); ?> letakkan script di bawah ini, tepat dibawah kode <?php the_content(__('(more...)')); ?> :

<SCRIPT type="text/javascript">
// begin BloggerCeria GA Trik
var jumlah_iklan = 2;
var waktu_sekarang = new Date()
var detik = waktu_sekarang.getSeconds()
var pasang_iklan = detik % jumlah_iklan;
pasang_iklan +=1;
if (pasang_iklan==1) {
alg="float: left; margin-left: 3px; margin-right: 5px;";
}
if (pasang_iklan==2) {
alg="float: right; margin-left: 5px; margin-right: 3px;";
}
document.write('<div style="' + alg + '">');
// End -->
</SCRIPT>

TARUH KODE GOOGLE ADSENSE ATO IKLAN APAPUN DISINI

<SCRIPT type="text/javascript">
document.write('</div>');
</SCRIPT>

Catatan :

• Pada warna biru, anda isi dengan kode iklan anda.
• Anda bisa menempatkan kode script diatas sesuai theme yang anda gunakan, karena setiap theme mempunyai perbedaan-perbedaan kode script.
  

Trik ini hanya berlaku untuk anda yang menggunakan Wordpress, jika anda menggunakan Blogspot, anda bisa menggunakan cara pasang iklan sejajar atau bersebalahan sudah sangat cukup. :D Ok, semoga tulisan tentang Membuat Random Posisi Iklan : Trik Untuk Naikin Klik bisa berguna bagi anda. Good Luck

Baca Selengkapnya...

Layanan Favicon Blog Gratis Dan Berkualitas - Dijamin Bagus

Layanan Favicon Blog Gratis Dan Berkualitas - Dijamin Bagus. Jika temen-temen berkeinginan mengganti icon blog sobat. Kamu bisa kunjungi situs yang menyediakan free download icon berkualitas. Terkadang kalau kita lagi mendesign blog ataupun gambar, kita butuh icon yang nantinya akan di sesuaikan dengan tema design yang kita buat. Nah, situs - situs ini sangat cocok buat ente yang lagi berburu icon gratisan.

Berikut ini Layanan Favicon Blog Gratis Dan Berkualitas - Dijamin Bagus :

1. IconFinder.com
Bisa dikatakan situs ini adalah icon search engine. Sampai saat ini tersedia 158,138 icons dan 820 icon sets. Tinggal masukkan keyword tertentu, nanti otomatis hasil search icon akan di tampilkan sesuai dengan kata kunci yg sudah kamu masukkan tadi.

2. Iconspedia.com
Situs ini menyediakan cukup banyak icon yang keren, semuanya bisa kamu dapatkan secara gratis, tersedia juga beberapa format dan ukuran gambar iconnya. Contoh iconnya seperti gambar dibawah ini

3. Freeiconsweb.com
Dari namanya sudah bisa ditebak, situs ini benar - benar menyediakan banyak icon gratisan, iconnya tersedia 1 set, jadi lebih mudah mencarinya.

4. Dryicons.com
Situs ini menyediakan beberapa icon dan design vector, ada versi free dan ada juga yang commercial license.

5. Iconarchive.com
Ada banyak sekali icon gratis bertebaran di situs ini, tersedia dengan berbagai macam kategori, jadi cukup mudah mencarinya.

6. www.favicon.cc
Silahkan berkreasi dengan imagi dan keinginan anda disini.

Nah, itu dia beberapa situs yang sering saya gunakan untuk mencari icon gratisan. Maaf kalau cuma saya list 6 Layanan Favicon Blog Gratis Dan Berkualitas - Dijamin Bagus. Soalnya dari 1 situs aja icon yang tersedia udah banyak banget, apalagi kalau 6 situs atau lebih, jadi makin bingung deh mau download icon yang mana, soalnya keren - keren iconnya .

Baca Selengkapnya...

Cara Memunculkan Kolom Komentar Blogspot

Tutorial ini Cara Memunculkan Kolom Komentar Blogspot sebenarnya tidak dimaksudkan untuk hal mubazir, karena saya tahu pasti telah banyak postingan tutorial tentang ini. Namun tujuan saya mempostingnya untuk menjelaskan mengenai bentuk embedded comment form. Ok langsung saja.

Untuk mempunyai sistem komentar ini yang pertama harus dilakukan ialah, anda harus login ke http://draft.blogger.com/ kemudian Settings > Comments. Maka anda akan menemukan seting “Show comments in a popup window?” telah digantikan dengan menu seting “Comment Form Placement”. Yang perlu dilakukan ialah mengklik “Embedded below post,” lalu save, ini contoh gambarnya:

Kemudian lihat blog anda apakah sudah mempunyai inline comment atau embedded comment dibawahnya. Namun banyak kasus ditemukan, cara diatas hanya berhasil bagi template standar, bagi template yang sudah dimodifikasi atau template hasil konversi dari theme WordPress seringkali tidak berhasil. Jadi diperlukan modifikasi lebih lanjut.

1. Ke edit html, lalu klik “expand widget template anda”.

Temukan ini:

<p class='comment-footer'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </p>

Lalu ganti dengan ini:

<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p>

Save template anda.

Namun Jika, INGAT JIKA cara diatas masih juga belum berhasil menampilkan Cara Memunculkan Kolom Komentar Blogspot. Setelah melakukan cara diatas, kemudian save dan lihat blog anda apakah sudah ada embedded comment form atau belum. Jika masih belum juga muncul maka lakukan cara terakhir. Temukan ini:

<b:include data='post' name='comments' />

Setelah kode di atas, masukan kode berikut:

<b:include data='post' name='comment-form'/>

Kemudian save template anda, dan lihat pastilah tiap posting anda sekarang sudah mempunyai kolom komentar yang terintregasi di setiap halaman posting blogspot.

Posting ini untuk menyempurnakan posting sebelumnya yakni Kolom Komentar Disetiap Posting Blogger yang jauh lebih rumit dan sudah tidak seharusnya di pergunakan lagi

Baca Selengkapnya...

Artikel Terkait #3 - Gak Ribet & Oke

Artikel Terkait #3 - Gak Ribet & Oke. Merupakan artikel di blog saya yang sengaja saya tulis guna melengkapi artikel sebelumnya yang memang berkaitan dengan satu pokok pembahasan tentang hal ini. Yakni Pasang Artikel Terkait (releated post) di Bawah postingan #1 dan tentang Artikel Terkait #2 - Dengan Gambar Berjalan. Jadi anda bisa memilih sesuai keinginan anda tentang hal ini.

Kita langsung saja pada pembahasan artikel ini. Perhatikan trik di bawah ini:

1. Sekarang tuju Edit HTML.
2. Jangan lupa backup template anda dulu dengan mengklik Download Template Lengkap.
3. Klik Expand Template Widget.
4. Cari kode di bawah ini:

<p><data:post.body/></p>

5. Kemudian paste kode di bawah ini tepat di bawah kode nomer 4 di atas :

Atau aste di bawah kode berikut
<p><data:post.body/></p>)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<strong>.::Artikel Menarik Lainnya::.</strong>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='ardi33'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;ardi33&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

6. Jika sudah, tinggal paste kode di bawah ini, <script src='http://tinyurl.com/scriptartikelterkait' type='text/javascript'/> tepat di bawah kode ]]></b:skin>

7. Simpan deh dan lihat hasilnya
9. Okeh

Baca Selengkapnya...

Artikel Terkait #2 - Dengan Gambar Berjalan

Artikel Terkait #2 - Dengan Gambar Berjalan. Merupakan lanjutan dari artikel sebelumnya mengenai Cara Pasang Artikel Terkait (releated post) di Bawah postingan #1. Tentunya, jika anda sudah menerapkan cara sebelumnya, akan lebih bagus kelihatannya dari pada related post dengan mengunakan teks saja. Selain mempunya thumnail atau gambar, related post ini mampu berjalan. Namun kekurangannya adalah yaitu memakan banyak tempat di halaman blog. Maka dari itu, saya pribadi lebih senang memakai trik blogging dengan menggunakan dua (2) halaman di bawah postingan saja.


Untuk membuat Thumbnail Related Posts Berjalan, silahkan ikuti beberapa cara dibawah ini :

1. Sekarang tuju Edit HTML.
2. Jangan lupa backup template anda dulu dengan mengklik Download Template Lengkap.
3. Klik Expand Template Widget.
4. Kemudian letakkan kode berikut ini,

tepat diatas kode </head>

<!--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: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

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

5. Kemudian, setelah itu. Sekarang silakan cari code ini :

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

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

6. Jika sudah ketemu salah satu dari kode diatas, letakkan kode dibawah ini setelah salah satu kode diatas :

<!-- Marquee Serbablog 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>Related Posts</b></h3>
<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=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

7. Untuk menampilkan jumlah postingan atau artikel terkait berjalan yang muncul nantinya, anda bisa merubah kode yang berwarna biru sesuai kebutuhan anda. Atau juga bisa merubahnya melalui var maxresults=10;
8. Simpan dan lihat hasilnya.Untuk cara ini sudah saya pasang di blog Oneclickers.blogspot.com atau anda bisa coba melihat New product from Google Android Market webStore sebagai live demonya.

Baca Selengkapnya...

Cara Menambahkan Widget /Gambar di Pojok Blog

Buat sahabat blog yang ingin merubah tampilan blognya lebih lucu dengan tampilan gambar di pojok blognya. Tampilan gambar yang berada di bagian pojok tersebut dinamakan WIDGET. Nah....buat anda yang ingin blognya terpasang widget lucu dan keren, apa salahnya anda coba. Toh ini gratis.....

Berikut saya simpulkan Cara mudah memasang widget bergambar di pojok Blog.
A. Widget Gratisan Dari Penyadia Widget

1. Kunjungi Situs : http://adiwidget.blogspot.com. Karena di sana terdapat banyak widget yang anda bisa pilih. dan anda bisa memilih sesuai selera anda. mau di pasang di pojok kanan, kiri dll. Untuk cara pemasangannya anda cukup menambahkan HTML/Java Script pada blog anda.
2. Masuklah ke situs www.thespringbox.com. Kemudian pilihlah opsi Customize This Widget. Selanjutnya di bagian Ornaments, pilihlah warna-warna hiasan yang hendak anda tambahkan, Sementara itu dibagian Lights dan Accessories, pilihlah warna lampu dan aksesoris pelengkap lainnya. Setelah melakukan pengaturan tersebut, anda akan melihat preview tampilannya disisi kanan halaman. Jika anda telah memperoleh tampilan yang anda inginkan pilih lah ikon Blogger. Lanjutkan dengan memilih opsi Layout widget. Pada halaman blog yang muncul, pilihlah tombol Menambah widget untuk menambahkan widget tersebut kedalam blog anda. Sekarang lihat lah halaman blog anda....

B. Widget Dengan Kreatifitasmu
Saya juga mempunyai cara lain yang sesuai kreatifitas anda dan yang sudah pernah saya terapkan. Berikut cara menambahkan widgetnya.

1. Login ke blogger

2. Pilih Tata Letak --> Edit HTML

3. Beri tanda centang pada Expand Template Widget

4. Cari kode ini ]]></b:skin>
5. Taruh code dibawah ini tepat diatas code nomor 5

#Lookj_keren {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Tulisan yang dicetak tebal bisa anda ganti sebagai posisi letak gambar :

bottom = dibawah
top = diatas
left = kiri
right = kanan

6. Kemudian cari lagi code ini </body> dan letakkan script di bawah ini sebelum kode tersebut.

<div id="Lookj_keren">
<a href="http://alamat blog.blogspot.com">
<img src="http://img361.imageshack.us/img361/1435/pojokyu7.jpg" border="0" /></a>
</div>

Tulisan berwarna biru bisa kamu ganti dengan alamat blogmu. Dan untuk tulisan yang berwarna Ungu bisa diganti dengan link gambar yang anda punyai.

Good Luck...semoga cara memasang gambar widget yang saya terapkan bisa bermanfa'at.

Baca Selengkapnya...

Cara Mudah Memasang Tombol Widget Like Facebook Di Blog

Postingan kali ini sebenarnya saya ingin memperlanjut lebih dalam tentang aplikasi-aplikasi Facebook yang di terapkan di Blog. Yang pada sebelumnya sudah saya ulas tentang "Pasang Komentar FACEBOOK (FB) di Blogmu | Gampang". So, untuk postingan ini tentang Cara Mudah Memasang Tombol Widget Like Facebook Di Blog. Untuk memasang tombol facebook like, pertama yang harus dipikirkan adalah :

Dimana anda akan memasangnya? diatas postingan atau di bawah postingan?
hal lainnya yaitu apakah tombol tersebut akan muncul terus baik di halaman depan ( homepage) ataupun didalam postingan? atau hanya ingin muncul dihalaman depan saja (homepage)? atau mungkin anda hanya ingin tombol tersebut hanya muncul didalam posting saja?

Secara mendasar, kode posting blogger adalah seperti ini :

<data:post.body/>

Logika sederhana, apabila anda ingin memasang tombol facebook like diatas posting, tinggal simpan saja diatas diatas kode yang tadi. Sebaliknya, jika anda ingin memasangnya di bawah postingan, tinggal disimpan dibawahnya saja. berikut ilustrasi dasarnya :

Agar tombol letaknya muncul diatas posting :

< kode tombol facebook like disini >

<data:post.body/>


Agar tombol letaknya muncul dibawah posting :

<data:post.body/>

< kode tombol facebook like disini >


Agar tombol facebook like hanya muncul di halaman depan saja (homepage) :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:post.body/>

< kode tombol facebook like disini >

</b:if>


Agar tombol facebook like hanya muncul di halaman posting saja (single post) :

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

<data:post.body/>

< kode tombol facebook like disini >

</b:if>

Diatas hanyalah sebagai ilustrasi saja. Berikut adalah cara sebenarnya untuk memasang tombol facebook like, namun sebagai contoh saja, Ganden akan mencontohkan untuk pemasangan di bawah posting dan akan muncul baik di homepage ataupun di single post.

1. Login ke blogger

2. Pilih Tata Letak --> Edit HTML

3. Beri tanda centang pada Expand Template Widget

4. Silahkan cari kode berikut pada template anda ( tips : gunakan fasilitas find pada browser anda agar lebih cepat dalam pencarian, tekan Ctrl+F untuk mengaktifkan, lalu masukkan kode yg dicari). <data:post.body/>
5. Copy kode berikut, lalu paste dibawah kode yang tadi :
<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;action=like&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;font=arial&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:25px;'/>

6. Simpan Template dan Selesai

Baca Selengkapnya...

Pasang Komentar FACEBOOK (FB) di Blogmu | Gampang

Akhirnya postingan saya kali ini terealisasi juga, sebenarnya pengen postingan sejak lama. Namun karena terkendala waktu dan kesibukan, akhirnya kini baru bisa sempat posting tentang Cara Mudah Menambahkan Kotak Komentar Facebook (FB) Di Blog. Sekarang Anda akan melihat bagaimana cara menambahkannya dengan langkah sangat mudah dan bekerja 100%. tetapi harap berhati-hati dan memperhatikan semua rincian.
Kini Pengunjung yang Punya Account Facebook bisa Berkomentar di Blog Anda.

Untuk Cara Mudah Menambahkan Kotak Komentar Facebook (FB) Di Blog sebagai berikut :

Langkah 1. Nonaktifkan Default Komentar.

Hal pertama yang harus Anda lakukan yakni Nonaktifkan Setting Komentar ANda . karena Anda tidak ingin memiliki 2 bentuk komentar, dan jika memang membutuhkan dua komentar biarkan saja seperti biasa.

Langkah 2. Buatlah Facebook App ID ( Aplikasi di Facebook ).

Sekarang Anda harus menghasilkan facebook app id Anda sendiri, itu benar-benar mudah dan prosesnya hanya satu langkah, Login dulu dengan Account Facebook Anda, kemudian silahkan Kunjungi, pengembang facebook disini : Facebook developers.

Masukkan nama aplikasi Anda, (Anda dapat mengetikkan nama apa saja) dan Klik SETUJU, lalu Buat Aplikasi. Sebagai contoh di atas saya menggunakan nama aplikasi Club Mp3 Station.

Kemudian klik pada tab Connect ( Terhubung ) (pada daftar-tab kiri) Anda akan dibawa kehalaman terhubung atau Url Situs andaIngat sewaktu memasukkan ULR Situs jangan lupa beri tanda / pada akhir ULR Blog sobat, sebagai Contoh pada gambar diatas ULR Situsnya : http://www.clubmp3.co.tv/

Masukkan Base Domain : blogspot.com.
Lalu Klik Simpan Perubahan
Selanjutnya Silahkan Klik web Site yang berada di bawah Perihal untuk Mengambil No Application ID , Copy dulu Application ID di NotePad atau Word agar mudah kita ambil saat kita gunkan nanti pada langkah berikutnya.

Langkah 3. Menambahkan Kode pada template blogger

1. Login ke blogger

2. Pilih Tata Letak --> Edit HTML

3. Beri tanda centang pada Expand Template Widget

4. Cari kode berikut ini <body> Kemudian tambahkan kode di bawah ini tepat di bawah kode <body>.

<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : &#39;APP-ID Anda&#39;,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};

(function() {
var e = document.createElement(&#39;script&#39;);
e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>

Ganti APP ID dengan APP ID Aplikasi Facebook yang tadi Anda buat.

Sekarang cari kode </head>
Letakkan kode di bawah ini tepat di bawah koede </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='Nama Blog Anda' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='APP-ID Anda' property='fb:app_id'/>
<meta content='Profile-ID-Facebook Anda' property='fb:admins'/>
<meta content='article' property='og:type'/>

********Keterangan********

Nama Blog Anda : Ganti dengan Nama Blog Anda
APP-ID Anda : Ganti dengan APP ID anda
Profile-ID-Facebook Anda : Ganti dengan ID Profile Facebook Anda.

Sekarang kita selesai menambahkan kode facebook untuk template Anda, jangan menyentuh apa pun dan melanjutkan ke langkah berikutnya.

Langkah 4. Menambahkan Komentar Box blogger template Anda.

silahkan cari kode berikut <data:post.body/>

Jika Punya dua <data:post.body/> karena sudah pasang Readmore Silahkan Letakkan di bawah <data:post.body/> yang kedua.

<b:if cond='data:blog.pageType == "item"'><br /> <p align='left'><a href="http://gandenonline.blogspot.com/2010/11/pasang-komentar-facebook-fb-di-blogmu.html" target="new"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL1GDlOdNFDkWMiuwzZpBHk4PCwxn3R9ywB1ZKoFRpNQ6k4uvr3XNxOuXYfgzb9CWinaYj_vRc4_y2ycwNxFR8CkwKYdDbF8oy7qciV6C3SwKGlwMP04dLcQrLVYkpmktwk2BByxqLDE0/s1600/comment.gif" /></a></p><div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div><div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://gandenonline.blogspot.com/2010/11/pasang-komentar-facebook-fb-di-blogmu.html' target='_blank' title='Facebook Comment'>Facebook Comment , Mau ?</a></b></div></b:if><br />

Untuk Merubah Lebar Silahkan Ganti Angka 450 sesuai Template Masing-masing pada template blog anda.

Sebagai hasil dari contoh yang sudah saya paparkan seperti di atas. Anda bisa lihat hasil di Blog Mp3 saya di http://www.clubmp3.co.tv/. Pada blog tersebut sudah saya pasang kotak komentar. Jadi hasilnya bisa anda lihat dan terapkan pada blog anda. Eeeeeeits.....satu lagi mpe lupa. dari hasil aplikasi facebook yang sudah anda buat dan beri nama nantinya juga bisa berfungsi kok. Lihat saja di Aplikasi Facebook Club Mp3 Station (usahakan agar anda log in dulu di akun facebook anda), gimana?

Baca Selengkapnya...

Menambahkan Dua (2) Buah Kolom Di Bawah Postingan Blog

Sebelum Anda membaca artikel ini lebih lanjut, coba perhatikan dahulu di bawah posting ini, disana terdapat 2 (dua) kolom yang satu kolom Feed RSS dan satu lagi kolom Related Post (Artikel Terkait). Itulah pembahasan kita kali ini yaitu Cara Menambah 2 (dua) Kolom di Bawah Posting. Namun dua kolom di bawah postingan blog saya ini, saya modif dengan tambahan konten iklan ppc.


Adapun cara untuk membuat dua kolom di bawah postingan seperti yang ada pada blog saya, caranya cukup :

1. Login ke blogger

2. Pilih Tata Letak --> Edit HTML

3. Beri tanda centang pada Expand Template Widget

4. Cari kode berikut ini ]]></b:skin>
5. Di atas kode ]]></b:skin> letakkan kode di bawah ini:

#related{background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqwiCw8msNiV2mWK_V1OIPlhRT-3woGDBggCsKtL_2oUjBnIoNSkY5eUIvJwzITj3a0I5AssTMsDgwf5xhMf9CvtPpYfpHF-6X5dtPg_cEIodrsMIGD6LB2VULQath9QWjRB6Ji0cgA4/) 45% 0 repeat-y;border:1px solid #ddd;color:#000;margin:0 0 10px;padding:15px}
#related .related-posts{font-weight:400;width:53%;float:right}
#related .related-posts p{margin:0}
#related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;letter-spacing:0;margin:0}
#related .related-posts ol{font-weight:400;margin:2px 0 0}
#related .subscribe{width:43%;float:left;color:#000}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9JCn5MbUrk38EKuebq_RpA-cTY6m1TspTbghKnHk3BTpyrkN-7E0EXz0PWdEfH4PHCqmgqp51HNe1p4uWe-l32uj8j7uz5ipK0y8Z32uR7qbpLXsq24zvvh74JIH75VGBavFUKUMxDU/) 0 50% no-repeat;vertical-align:middle}
#related .subscribe form{margin:0;padding:0}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

6. Cari kode di bawah ini:

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

7. Letakkan kode di bawah ini diantara kode: <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> dan kode paste kode di bawah ini di sini: </b:if> :

<div class='clearfix' id='related'>
<div class='subscribe'>
<p class='feed'>
<a href='http://disini letakkan Link Feed anda/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>disini letakkan kode Form Berlangganan Anda</p></div>
<div class='related-posts'>disini letakan kode Related Post Anda</div></div>

8. Ganti teks yang berwarna ungu dengan Link Feed dan kode Form Berlangganan serta Kode Related Post yang Anda punya.

9. Simpan Template, selesai!!!

Baca Selengkapnya...

Cara Mudah Membuat Halam Intro Pada Blog

Bisakah di blogger membuat halaman intro seperti pada website-website tertentu? jawabannya mungkin bisa saja kali. Apa yang dimaksud intro disini? apabila website tersebut dikunjungi tidak langsung ke halaman utama, namun terlebih dahulu disuguhkan oleh sebuah halaman yang umumnya adalah ucapan selamat datang atau navigasi, ada juga yang berupa gambar animasi ataupun dalam bentuk flash.

Sebenarnya cara ini sudah lama pengen saya pelajari, namun karna waktu yang belum memungkinkan saya untuk posting. Hehehee....Postingan saya kali ini muncul atas dasar inspirasi dari sahabat saya angga delord, yang mempunyai web intro. Alhasil saya jadi kepincut dan penasaran untuk membuatnya. namun apakah bisa digunakan pada blog?

Lanjuttin aja bacanya....

Halaman awal intro pada blog yang saya maksudkan yakni apabila anda telah masuk ke homepage halaman aslinya, anda tidak akan melihat kembali halaman intro tersebut, dengan kata lain anda tidak akan diganggu lagi oleh kehadirannya. Kapan anda bisa melihat kembali halaman intro tersebut? halaman intro tersebut akan muncul kembali apabila anda menutup browser yang digunakan, kemudian mengunjungi kembali halaman tersebut. Namun efek tersebut berlaku apabila komputer yang anda gunakan tidak mematikan fungsi cookie karena script yang digunakan menggunakan meninggalkan jejak di cookie komputer sebagai pengingat.

Cara Membuat Intro Pada Blog.
Silahkan ikuti langkah-langkah berikut ini :
1. Login ke blogger
2. Klik Rancangan
3. Klik menu Edit HTML
4. Silahkan cari kode berikut pada template anda :]]></b:skin>
5. Copy dan paste kode di bawah ini tepat di atas kode nomer 4.

#intro{
background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYpSoq-OtnZpVnmeq0ADErZbfd6RlebfopmDXp5zAHND6ay1bBKz9EjnH9Lo8nVgY6-RcKJe2Xv7hJzct4cjweyFBzmcbCDq2mjKRYjvtLbaHRkDvFZydpWWPFzTt72dTgow4wc2nKrk0/) repeat-x top left fixed;
position:fixed;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:100;
text-align:center;
visibility:hidden;
}
* html #intro{
position:absolute;
width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#intro .welcome{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
font-size:30px;
margin-top:10%;
margin-bottom:1%;
text-shadow:1px 1px 1px #fff;
}
#intro a img{border:none}
.gohome, .gohome a,.gohome a:visited,.gohome a:active{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
margin-top:4%;
font-size:25px;
text-shadow:1px 1px 1px #fff
}
.gohome a:hover{
color:#ffffff;
text-shadow:1px 1px 1px #f00;
text-decoration:none
}

6. Silahkan cari kode berikut pada template anda : </head>
7. Copy kode di bawah ini dan paste tepat di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
/*************************************************
* Blogger intro by http://www.blogspottutorial.com
**************************************************/
var persistclose=1
var startX = 0
var startY = 0
var verticalpos="fromtop"
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}}return returnvalue;}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("intro").style.visibility="hidden";}
function staticbar(){
barheight=document.getElementById("intro").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY; }
return el; }
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y == (pY + startY - ftlObj.y)/0;}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y == (pY - startY - ftlObj.y)/0;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10); }
ftlObj = ml("intro");
stayTopLeft();}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

8. Cari kode berikut pada template anda <body>
9. Copy kode di bwah ini dan kemudian pastekan tepat di atas kode nomer 8 ya...

<div id='intro'><div class='welcome'>Welcome to my blog</div>
<a href='' onclick='closebar(); return false'><img alt='go to my homepage' src='http://i1044.photobucket.com/albums/b449/Tomocchan/pervy-gif.gif' title='enter'/></a>
<div class='gohome'><a href='' onclick='closebar(); return false'>Go to homepage</a></div>
</div>

10. Anda bisa langsung SIMPAN atau klik Pratinjau jika anda masih ragu.

Nah...jika sudah jadi...Anda dapat mengubah tulisan yang ada dengan tulisan anda sendiri, selain itu jika anda penggemar flash, tentu saja dapat mengganti gambar animasi gif diatas dengan kode flash yang anda miliki. Atau jika anda tidak punya anda bisa langsung cari di sini.

Selamat Mencoba....

Baca Selengkapnya...

Menampilkan Judul Postingan Saja Pada Blog

Lama gak posting membuat ku kangen njuga dengan blog ku ini. secara beberapa hari kemarin disibukkan dengan blog temen.,Eh tanya punya tanya ketemu cara baru membuat "Judul Postingan Saja". Mungkin anda masih bingung atau sudah paham? Buat yang sudah paham gak apa-apalah kalau masih mau melanjutkan bacanya....dan buat yang belum paham bisa langsung lanjuttin bacanya.

Inti dari postingan kali ini yakni, menampilkan postingan namun yang terlihat hanya judul postingannya saja yang nampak pada blog kita nantinya. Seperti apakah nanti hasilnya Gan?
Ok langsung kita uprek aja dech...

1. Login ke Blogger
2. Klik Tata Letak
3. Klik tab Edit HTML
Cari kode seperti di bawah ini:

]]></b:skin>
Copy kode berikut, lalu paste di bawah kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

Klik tombol SIMPAN TEMPLATE.
Selesai. Silahkan lihat hasilnya.

Baca Selengkapnya...

Cara Membuat Buku Tamu/Daftar Hadir/ShoutBox

Pertama-tama ganden akan kasih tau pengertian dari shoutbox and gunanya bagi anda yang belum tahu.

Apa itu Shoutbox??

Shoutbox adalah sebuah media untuk pengunjung blog anda mencurahkan isi hati dan pikiran tentang blog anda seperti: Kritik, Saran, Pujian, Pesan dan juga Kesan
bahkan untu blogwalking atau promosi lewat Shoutbox... ni dibawah screen capturnya

Gimana Dari keterangan diatas anda udah paham belum???
tentunya udah paham dunk kan udah aku kasih contoh gambarnya..
okey kita beranjak ke cara pembuatanya:

1. Buka situs www.shoutmix.com
2. Klik CREATE YOUR SHOUTBOX NOW
3. Kemudian isi form yang disediakan sesuai data anda masing-masing kemudian Centang Kotak "I have read and agree to the Terms of Service" Dan tekan tombol Continue
4. Pilih Bentuk Shotbox yang anda inginkan Isi Kode Vertifikasi Kemudian tekan Continue
5. Kalau sudah berhasil Kita langsung beranjak Ke Control Panel kemudian Ke menu Get Codes
6. Kemudian Pilih "Place Shoutbox On Webpage dan Atur Tinggi dan lebarnya
7. Kemudian Copy Generate Code/HTML Codenya
   
8. Kemudian Kembali ke blog anda Dan masuk Menu Layout - Page element kemudian cari tempatnya dan add a Gadget kemudian Pilih Menu HTML/JavaScript Dan Paste Code Yang sudah Anda Copy tadi di Shoutmix

Gimana gampang kan??? silahkan mencob yaaa moga berhasil okey

Alamat Website Penyedia layanan Shoutbox Lainya:

• http://www.cbox.ws

Baca Selengkapnya...

Membuat Recent Comment di Blog Yang Praktis

Wah biasanya kita sampai kesulitan mengecek komentar terbaru yang ada pada blog kita, soalnya komentar di lontarkan di postingan kita yang berbeda-beda, jadi kita akan merasa kesulitan untuk mengetahui siapa saja ya...? yang memberi komentar dan dimana dia melontarkan komentarnya juga isi komentarnya itu bagaimana?
Tapi jangan kawatir saya akan beri tips jadul tapi manjur yaitu cara membuat recent comments dengan JavaScript. Kali ini ganden tulis juga membuat recent comments dehhh... ikuti yukkk

1. Login ke blogger
2. Kemudian ke menu Layout dan Kemudian Page elements
3. Lalu pilih Menu HTML/JavaScript
5. Taruh Code Dibawah ini Kedalam HTML/JavaScript

<script style="text/javascript" src="http://sites.google.com/site/anasku2000/comments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan:

* Tulisan NamaBlogKamu yang tercetal tebal dan ungu diatas harus kamu ganti dengan alamat blog kamu.

* Angka 5 yang tercetak tebal dan biru itu menunjukkan Komentar terakhir yang ditampilkan di blog, kamu bisa mengubah sesuai selera kamu


Kalau sudah Simpan.

Namun ada cara lain membuat recent comment pada blog kita. Yaitu dengan cara sebagai berikut :

1. login di Blogger
2. Klik Rancangan/Tata letak
3. Eleman halaman
4. Klik Tambah gadget pada bagian space yang hendak kamu tempati space comment.
5. Pilih gadget Add Feed
6. Setelah kamu klik feed dan muncul tampilan yang meminta kamu untuk memasukkan alamat URL dan silahkan kamu ketikan kode URL seperti berikut
http://www.namablogkamu.blogspot/feeds/post/default ( alamat URL ini untuk membuat recent post ) http://www.namablogkamu.blogspot.com/feeds/comments/default ( alamat URL ini untuk membuat Recent comments).
7. Simpan...

Good Luck....

Baca Selengkapnya...

Mengatur Format Title Postingan Blog Supaya Seo Friendly

Salah satu langkah SEO (Search Engine Optimation) adalah mengubah format pada Judul Blog.
gak usah panjang lebar yaaa.....Langsung ke Topik. Maksud mengubah Format Judul pada Blog, misal Judul Blog saya:

Blog Online Ganden

Biasanya nanti setelah membuka halaman, contoh tentang artikel :

"Kreatif Membuat Gambar Banner Animasi Canggih"

Judul pada Menu bar akan menjadi seperti ini :

Kreatif Membuat Gambar Banner Animasi Canggih

Bukan seperti ini :

Blog Online Ganden : Kreatif Membuat Gambar Banner Animasi Canggih

Ya,khan?
Nah, agar SEO Friendly, kita ubah susunan Judul menjadi hanya seperti ini:

"Kreatif Membuat Gambar Banner Animasi Canggih"

Maka, jika berhasil diindex sama paman Google ya..akan terindex seperti itu. Untuk kodenya sebenarnya anda tinggal merubah format Title nya.

1. Login ke Blogger
2. Klik Tata Letak
3. Klik tab Edit HTML
Cari kode seperti di bawah ini:

<title><data:blog.pageTitle/></title>

Setelah ketemu, hapus kode tadi dan ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

4. Jika sudah, SIMPAN TEMPLATE dan tunggu hingga proses penyimpanan selesai.

Baca Selengkapnya...

Pengaturan Jumlah Postingan Yang Tampil di Halaman Depan

Secara default Blogger akan menampilkan 7 posting pada halaman depan blog. Jika anda sudah menulis sampai 7 postingan atau lebih maka otomatis 7 posting terakhir akan tampil pada halaman depan, sehingga halaman tersebut menjadi sangat panjang. Pengunjung bisa bosan menggulung layar terus menerus sampai ke bawah, apalagi jika anda belum menggunakan fasilitas Read more (untuk yang satu ini caranya bisa dilihat di sini). Karena itu aturlah jumlah posting yang ingin di tampilkan di halaman depan, dengan cara sebagai berikut:

1. Masuklah ke halaman Dasbor blog anda. Klik pada Tata Letak
2. Klik Edit pada area Posting Blog.


3. Nah, gantilah angka Jumlah postingan di halaman utama yang anda inginkan. Lalu akhiri dengan mengklik tombol SIMPAN. Tunggu hingga proses selesai.



4. Sekarang permintaan anda sudah diterima. Silahkan anda lihat perbuhannya.

Baca Selengkapnya...

Icon Anak Ayam Lucu Nongol di Blog

huuuf...sebenernya nih postingan judulnya asal2an...tapi manfa'at dari yang saya tulis gak asal2lan loh....coba anda bayangkan bagaimana mungkin bisa memelihara anak ayam di dalam postingan. Buktinya bisa anda lihat di sini nih....

Tuuh kan ada anak ayamnya bergerak....
Untuk membuatnya anda tidak perlu kepasar dan tidak perlu ke tempat yang jualan ayam....

nih saya kasih kodenya yang mesti anda siapin...Anda mesti sudah log in di Blog anda. Kemudian ==>Rancangan==>Edit Tata Letak==>Tambah HTML...Terus anda kopi, ingat kopi ya...bukan teh...anda kopi kode berwarna merah di bawah ini dan paste di HTML. Kemudian Simpan...

<div id='footer'>
<div class='footer section' id='footer'/>
<p>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' valign='middle' width='40'>
<a href='#' title=''>
<img height="50" src="http://www.laymark.com/i/ch/ch011.gif" width="50" />
</a>
</td>
<td align='left' valign='middle'>&#169; 2010 | <a href='http://gandenonline.blogspot.com/2010/08/icon-anak-ayam-lucu-nongol-di-blog.html#comments' title='caramoedah'>CM</a><br />
Hosted by <a href='http://www.blogger.com' title='blogger'>Blogger</a><br />

Ganden|Catatan Seorang NewBie
</td>
<td align='left' valign='center'>
<div align='right' id='footer-right'>
<a href='http://gandenonline.blogspot.com/2010/08/icon-anak-ayam-lucu-nongol-di-blog.html#comments'>Home</a>
| <a href='http://blogger.com/'>Login</a> |
<a href='#' onclick='mgjs.gotop();return false;'>Top</a></div>
</td>
</tr>
</table>
</p>
</div></div>

Selesai dan simpan.

Baca Selengkapnya...

Cara Mudah : Membuat Tulisan Berkedip di Blog

Tahukah anda ketika anda seketika melihat cewex maupun cowox (lawan jenis anda) berkedip kepada anda? Heeeeemmmm....mungkin tidak banyak yang tahu maksud dari kedipan tersebut. Tapi kali ini, kedipan di dalam blog sudahlan tak lazim lagi, inti dari kedipan yang saya maksud adalah : Cara membuat Tulisan Berkedip di Postingan Blog. Gitu Breeed....

Untuk membuat tulisan yang berkedip di blog tidaklah sulit....
Niih contohnya yang sudah saya buat...

Tulisan Berkedip Dari Jurus Ganden : Gampang kooook

Naaah...Sudah tahu dan lihat langsung kan. Ok Breed, langsung aja kita praktekin cara membuat tulisan berkedip. Berikut kode HTML yang harus anda tambahin di postingan/tulisan yang mau anda kedipin.

<blink>Tulisan Berkedip Dari Jurus Ganden : Gampang kooook</blink>

Beres. Sekarang Anda tinggal menentukan teks mana yang akan dibuat berkedip. Setelah itu beri kode <blink> pada awal teks yang akan dibuat berkedip dan tutup dengan kode </blink>. Gampang kan?

Baca Selengkapnya...

Menambahkan Nomor Halaman di Bawah Postingan

Ibarat Inul Dara Tista si Ratu Goyang Ngebor nih Braada...kalau makan sayur kurang enak dan kurang sedap. Begitu juga di dalam blog, dengan kata lain di sini Mr. Ganden membrikan cara bagaimana membuat nomor halaman di area postingan tepatnya di bawah postingan daaah.....
Ibarat Sebuah buku, blog juga harus juga mempunyai nomor halaman braada. Dengan menamabahkan atau memberi nomor halaman tentu akan mempermudah kita untuk mencari dan membuka buku itu. Kali ini kita kan belajar cara menambhkan halaman di bawah area postingna, mungkin untuk lebik jelas dan mengerti apa yang dimaksud halaman disini adalah seperti ilustrasi di bawah ini :


Dengan begitu tentu akan mempermudah pembaca atau pengunjung blog kita untuk melihat-lihat isi dari tulisan atau postingan kita. Misalnya kita menampilkan 5 judul postingan dalam halaman yang pertama, 5 postingan dihalaman kedua, dan seterusnya. Langsung saja kita praktekan bersama-sama, karena caranya sangat mudah.

Cara Menambahkan Nomor Halaman di Bawah Area Postingan

1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode-kode berikut ini

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #fff;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #fff;
color: #fff;
background-color: #333;
}

.showpageNum a {border: 1px solid #505050;
color: #666;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #fff;
background-color: #333;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #000000;
background-color: #ffffff;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #ffffff;
background-color: #333;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #fffff;
color: #ffffff;
background-color: #333333;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #ffffff;
background-color: #333;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=2;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

5. Simpan Kalau sudah selesai.
6. Pindahkan Gadget HTML tersebut dengan mendragnya ke bawah Posting Blog (Blog Post)

Baca Selengkapnya...

Cara Mudah Membuat Label Cloud di Blog

Buat Para Blogger yang sudah bisa membuat label cloud secara mudah hanya dengan menambahkan gadget. yang sudah di sediakan oleh Blogger, yang sudah saya posting sebelumnya. Untuk Postingan kali ini saya kembali mencoba untuk eksis....Wkakakaka...(Bahasanya Breed...). Jika anda penasaran bagaimana gambaran tentang LABEL CLOUD, anda bisa lihat pada menu Label Cloud yang sudah saya pasang di blog saya. Untuk membuat tampilan label atau kategori lebih menarik, anda bisa mencoba menggantinya dengan label yang menyerupai awan atau yang lebih dikenal dengan nama label cloud. Untuk membuatnya, lagi - lagi anda harus mengotak - atik kode HTML blog anda, jadi sebaiknya backup terlebih dahulu template anda untuk menghindari kerusakkan pada template anda.


Untuk Langkah2nya yang harus di terapkan adalah sebagai berikut :
1. Login ke Blogger.

2. Klik Tata Letak--> Edit HTML.

3. Jangan lupa backup dulu ya template nya ya....

4. Kemudian copy paste kode berikut diatas kode ]]></b:skin>

/* Label Cloud
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


5. Kemudian letakkan kode berikut ini diatas kode </head>

<script type='text/javascript'>

// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

6. setelah itu cari kode seperti dibawah ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7. Hapus kode tersebut dan kemudian anda ganti dengan kode berikut :

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point --------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Selanjutnya anda Simpan Template jika sudah selesai seperti langkah2 di atas.

Panjang ya..jangan sampai ada yang ketinggalan dalam proses copy paste kode - kode diatas, karena ketinggalan satu elemen saja label cloud tidak akan berhasil dibuat. So..selamat memandangi label cloud anda yang baru.

Baca Selengkapnya...