hooky magazine: Modifikasi Blog

Showing posts with label Modifikasi Blog. Show all posts

Tuesday, March 20, 2012

Cara Membuat Recent Post di Blog

Cara Membuat Recent Post di Blog - Cara Mudah Membuat Related Post - Cara membuat artikel terkait ( related post ) tepat di bawah postingan blog - Tips ini sebenarnya sudah sangat banyak beredar, namun tidak ada salahnya di ulas kembali untuk membantu blog-blog pemula yang masih awam dengan tips ini. Berikut ini Cara Membuat Recent Post di Blog.

Jadi Penjelasannya Gini neh Baca Selengkapnya :
1. Cara Membuat Recent Post Dengan Thumbnail
2. Cara Membuat Related Post diBawah Postingan Blog

Dan untuk Melihat Contoh sederhana aja, lihat di blog saya ini

Saturday, March 10, 2012

Cara Menghilangkan NavBar Blogger

Cara Menghilangkan NavBar Blogger - Tutorial Blog Kali Ini membahas Menghilangkan Atau Menyembunyikan Nav Bar Blogger. Nav Bar atau navigation bar adalah sebuah toolbar yang disediakan blogger untuk mempermudah kita mencari atau menjelajah dunia blogger. Bagi yang menggunakan template standar dari blogger biasanya toolbar ini akan muncul di halaman atas blog. Jika anda merasa kurang nyaman dengan keberadaan nav bar ini, anda bisa menghilangkannya dengan cara berikut:

1. Login ke Blogger. klik menu layout -> Edit HTML
2. Letakkan kode dibawah ini diantara dan . Baca Selengkapnya

Friday, March 9, 2012

Pasang Widget Google Translet di Blog

Pasang Widget Google Translet di Blog - Tips Blog kali ini adalah Cara Pasang Widget Google Translet di Blog sobat, jadi mungkin masih ada yng belum tau Cara Pasang Widget Google Translet di Blog di blog mereka, maka kali ini saya akan menjelaskan Cara Pasang Widget Google Translet di Blog.
Sesuai dengan namanya. Widget ini berfungsi untuk menerjemahkan bahasa yang satu ke bahasa yang lain. Dengan memasang widget ini, maka pengunjung yang berasal dari negara lain juga bisa menikmati konten diblog anda. Selain itu, anda juga bisa memanfaatkan widget ini untuk belajar bahasa asing lho. Menarikkan? Baca Selengkapnya

Cara Membuat Random Post pada Blog

Cara Membuat Random Post pada Blog - Apa itu random post? Random post adalah posting yang ditampilkan secara acak pada blog kita. Mungkin teman-teman tips blogger semua pernah melihat widget satu ini. Biasanya para blogger memberi nama widget ini adalah Random Post. Cara membuatnya sangat mudah, cukup pasang kode di bawah ini pada blog kamu, tentu kamu harus login ke account blogger kamu terlebih dahulu. Yuk langsung aja baca cara membuat Random Post.

1. Login ke account blogger kamu
2. Klik kustomisasi < tambah halaman elemen < Html/javascript 3. Masukkan kode di bawah ini pada kotak yang keluar. Baca Selengkapnya

Monday, March 5, 2012

Cara Membuat Tombol Suka di atas Postingan Blog

Cara Membuat Tombol Suka di atas Postingan Blog - Postingan Ini Repost dari Postingan Sebelumnya, Yah gitu deh, kalau postingan lama gak di panggil gak akan muncul lagi di serp. Cara ini sudah banyak di bahas oleh blogger lain, namun tak lengkap rasanya kalau saya tidak menshare judul Cara Mudah Membuat Tombol Suka di atas Postingan Blog, dan Untuk Selengkapnya Mengenai Cara Membuat Tombol Suka di atas Postingan Blog Silahkan Anda Baca DISINI

Monday, February 27, 2012

Cara Membuat Fitur Reply Thread Comment Keren

Cara Membuat Fitur Reply Thread Comment Keren -Setelah kamu membaca postingan Kamu Klik sebelumnya, yakni Cara Mudah Mengaktifkan Fitur Thread Comments Blogspot semoga saja kamu sudah berhasil mengaktifkan fitur thread comment diblog kamu. Akan tetapi tampilannya masih sangat sederhana dan simple. Naah.. Untuk mempercantik atau memperindah tampilan threaded comments yang merupakan fitur komentar baru dari blogger, saya akan sharing kode Css untuk threaded comments blogger tersebut. Agar hasilnya jadi seperti gambar dibawah ini:

Lalu bagaimana caranya biar tampilan Thread Comment'y gak monoton, agar tampilannya berubah seperti gambar diatas ? Keren bukan ? yuk, Silakan ikuti langkah-langkah dibawah ini:

Pertama login ke blog kamu > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan)
Cari kode CSS Comment yang lama, kalau CSS punya Kamu Klik sih seperti dibawah ini.

#comments h4 {
color:#666666;
font-weight:normal;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
font-size:14px;
text-transform:none;
}
#comments-block{max-height:300px;border:1px solid #eee;overflow:auto;width:569px;margin:1.3em 0 1.5em;line-height:1.6em}#comments-block .comment-author{background:#e0dede;border-top:1px solid #ddd;margin:.5em 0;padding-left:0px;color:#111}#comments-block .comment-author a:link,a:visited{color:#346ba4}#comments-block .comment-body{padding-left:0px;color:#333}#comments-block .comment-footer{padding-left:0px;margin:.25em 0 2em;line-height:1.5em;font-size:9px;border-top:1px solid #ddd}#comments-block .comment-footer a:link,a:visited{color:#444}#comments-block .comment-body p{text-align:justify;margin:0 1em .75em;padding-left:5px;border-left:3px solid #f0f0f0}#comments-block a:link{color:#c13a10}.deleted-comment{font-style:italic; color:gray}.owner-Body{padding-left:0px;color:#333}.owner-Body p{text-align:justify;margin:0 1em .75em;padding-left:5px;background:#f5f5f5;border-left:3px solid #ddd}
#blog-pager-newer-link {
float:left;
}

Tapi yaa biasanya tiap template berbeda-beda bukan ? Jadi yaa kamu cari sendiri kode CSS komentar kamu versi template blog kamu
Kamu hapus semua kode CSS komentar yang lama versi template blog kamu, lalu kamu copy kode dibawah diatas kode ]]> (untuk menemukan kode yang dicari kamu tinggal CTR + F, lalu masukan kode yang ingin dicari.)

#comments h4{font-size:24px; font-weight:normal; margin:20px 0}
.cm_wrap {clear:both; margin-bottom:10px; float:right; width:100%;}
.cm_head{margin:0; width:70px; float:left}
.cm_avatar{margin:0; vertical-align:middle; border: 1px solid #DDD; padding:3px; background:white; width:35px; height:35px}
.cm_reply{padding-top:5px}
.cm_reply a{display:inline-block; margin:0; padding:1px 6px; border:1px solid #C4C4C4; border-top-color:#E4E4E4; border-left-color:#E4E4E4; color:#424242 !important; text-align:center; text-shadow:0 -1px 0 white; text-decoration:none; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; background:#EDEDED; background:-webkit-gradient( linear,left top,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5) ); background:-moz-linear-gradient( center top,white 20%,#E5E5E5 100% ); font:11px/18px sans-serif}
.cm_reply a:hover{text-decoration:none !important; ; background:#ccc; ; background:-webkit-gradient(linear,left top,left bottom,color-stop(.2,#eee),color-stop(1,#ccc)); ; background:-moz-linear-gradient(center top,#eee 20%,#ccc 100%); }
.cm_entry{padding:16px; background:#F7F7F7; border:1px solid #E4E4E4; overflow:hidden}
.cm_arrow{display:block; width:9px; height:18px; background:url(http://4.bp.blogspot.com/-8luuqzWL1do/Tl9RmQ6dG6I/AAAAAAAAB6I/1ZxWKOXXlxE/s1600/comment-arrow.png) no-repeat; position:absolute; margin-left:-25px}
.cm_info{margin-bottom:5px}
.cm_name{font-weight:bold; font-size:12px; float:left}
.cm_date{font-size:10px; float:right; font-style:italic; color:#CCC}
.cm_entry p{margin:0; font-size:13px; color:#666}
.cm_pagenavi{font-size:10px; text-transform:uppercase; color:#666; text-shadow:1px 1px white; font-weight:bold}
.cm_pagenavi a{color:#666; text-decoration:none; padding:10px}
.cm_pagenavi a:hover{text-decoration:underline}
.cm_pagenavi span{color:#888; background:white; padding:4px; border:1px solid #E0E0E0}
Setelah itu kamu cari kode </body>, setelah itu pastekan kode dibawah diatas kode </body>
Kemudian kamu cari kode <b:includable id='comments' var='post'> , Hapus kode antara kode <b:includable id='comments' var='post'>sampai dengan </b:includable> (kode yang berwarna biruyang harus didelete)

Contoh :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>
</span> comment<b:else/>
<span id='cm_total'>
<data:post.numComments/>
</span> comments</b:if>
</b:if>
</h4>

------------ sebagian kode yang harus didelete -------------------

<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<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>
</b:if>
</div>
</b:includable>
Lalu Paste kode berikut ini diantara kode  <b:includable id='comments' var='post'> sampai dengan </b:includable> yang sudah dihapus tadi gantikan dengan kode dibawah.

<div class='comments' id='comments'>      <a name='comments'/>
      <b:if cond='data:post.allowComments'>
            <h4>
                 <b:if cond='data:post.numComments > 0'>
              <b:if cond='data:post.numComments == 1'>
                <span id='cm_total'>1</span> comment
              <b:else/>
                <span id='cm_total'><data:post.numComments/></span> comments
              </b:if>
            </b:if>
            </h4>

            <div id='cm_reply_css'></div>

            <div class='cm_pagenavi' id='cm_page'></div>

            <div id='cm_block'>
                <b:loop values='data:post.comments' var='comment'>
                    <b:if cond='data:comment.isDeleted'>
                    <b:else/>

                        <div expr:id='data:comment.anchorName'>
                            <div class='cm_wrap'>
                                <a expr:name='data:comment.anchorName'/>
                                <div class='cm_head'>
                                    <div class='cm_avatar'>
                                        <b:if cond='data:blog.enabledCommentProfileImages'>
                                            <data:comment.authorAvatarImage/>
                                        </b:if>
                                    </div>
                                    <div class='cm_reply'>
   <a expr:href='"https://www.blogger.com/comment.g?blogID=ID BLOG KAMU&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>Reply</a>
                                    </div>
                                </div>

                                <div class='cm_entry'>
                                    <span class='cm_arrow'></span>
                                    <div class='cm_info'>
                                        <div class='cm_name'>
                                            <b:if cond='data:comment.authorUrl'>
                                                <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                    <data:comment.author/>
                                                </a>
                                            <b:else/>
                                                <b><data:comment.author/></b>
                                            </b:if>
                                        </div>
                                        <div class='cm_date'>
                                            <data:comment.timestamp/>
                                            <b:include data='comment' name='commentDeleteIcon'/>
                                        </div>
                                        <div class='clear'/>
                                    </div>

                                    <p><data:comment.body/></p>
                                </div>
                            </div>
                        </div>
                    </b:if>
         </b:loop>
            </div>

            <div class='cm_pagenavi' id='cm_page_copy'></div>

        <b:if cond='data:post.embedCommentForm'>
                <b:if cond='data:post.allowNewComments'>
                    <b:include data='post' name='comment-form'/>
                <b:else/>
                    <data:post.noNewCommentsText/>
                </b:if>
                <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>

      </b:if>
      </div>

Sehingga hasilnya Jadi seperti ini :

<b:includable id='comments' var='post'>     <div class='comments' id='comments'>
      <a name='comments'/>
      <b:if cond='data:post.allowComments'>
            <h4>
                 <b:if cond='data:post.numComments > 0'>
              <b:if cond='data:post.numComments == 1'>
                <span id='cm_total'>1</span> comment
              <b:else/>
                <span id='cm_total'><data:post.numComments/></span> comments
              </b:if>
            </b:if>
            </h4>

            <div id='cm_reply_css'></div>

            <div class='cm_pagenavi' id='cm_page'></div>

            <div id='cm_block'>
                <b:loop values='data:post.comments' var='comment'>
                    <b:if cond='data:comment.isDeleted'>
                    <b:else/>

                        <div expr:id='data:comment.anchorName'>
                            <div class='cm_wrap'>
                                <a expr:name='data:comment.anchorName'/>
                                <div class='cm_head'>
                                    <div class='cm_avatar'>
                                        <b:if cond='data:blog.enabledCommentProfileImages'>
                                            <data:comment.authorAvatarImage/>
                                        </b:if>
                                    </div>
                                    <div class='cm_reply'>
    <a expr:href='"https://www.blogger.com/comment.g?blogID=ID BLOG KAMU&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'>Reply</a>
                                    </div>
                                </div>

                                <div class='cm_entry'>
                                    <span class='cm_arrow'></span>
                                    <div class='cm_info'>
                                        <div class='cm_name'>
                                            <b:if cond='data:comment.authorUrl'>
                                                <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                    <data:comment.author/>
                                                </a>
                                            <b:else/>
                                                <b><data:comment.author/></b>
                                            </b:if>
                                        </div>
                                        <div class='cm_date'>
                                            <data:comment.timestamp/>
                                            <b:include data='comment' name='commentDeleteIcon'/>
                                        </div>
                                        <div class='clear'/>
                                    </div>

                                    <p><data:comment.body/></p>
                                </div>
                            </div>
                        </div>
                    </b:if>
         </b:loop>
            </div>

            <div class='cm_pagenavi' id='cm_page_copy'></div>

        <b:if cond='data:post.embedCommentForm'>
                <b:if cond='data:post.allowNewComments'>
                    <b:include data='post' name='comment-form'/>
                <b:else/>
                    <data:post.noNewCommentsText/>
                </b:if>
                <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>

      </b:if>
      </div>
    </b:includable>

Keterangan:
- Ganti Tulisan ID BLOG KAMU dengan ID blog kamu, misal: 3867899460670236687 (untuk mengetahui ID blomu, kamu bisa lihat deretan angka pada address bar pada saat membuka halaman Edit HTML.

Kalau sudah selesai semua, kamu klik Save, Lalu lihat hasilnya deh ^^

Hmm.. mungkin agak rumit yaa pemirsa.. tapi yaa itulah yang saya ketahui. Selamat mencoba dan semoga berhasil yah kawan :D

sumber: http://kamu-klik.blogspot.com

Cara Memasang Jam di Wordpress

Cara Memasang Jam di Wordpress - Untuk memasang widget jam di wordpress.com caranya sama dengan Memasang Jam di Blogspot, namun ada kode yang harus Sobat rubah, Berikut tutorialnya :

Kunjungi www.clocklink.com
Lalu klik pada menu Gallery (kita bisa memilih kategori-kategori yang ingin kita pilih), sebagai contoh pilih kategori Digital.
Kemudian klik View HTML Tag.
Akan timbul halaman baru. disitu ada ketentuan-ketentuan yang memakai bahasa inggris, pilih Accept.
Selanjutnya kita diminta memilih warna (color), time zone, serta ukuran jam agar sesuai dengan sidebar blog. Kemudian Copy kode HTML yang di bagian bawah.

Contoh Kode:
<embed src="http://www.clocklink.com/clocks/5005-blue.swf?TimeZone=JOG&" width="240" height="80" wmode="transparent" type="application/x-shockwave-flash">
Hapus bagian "<embed" dan penutup ">" dan ganti dengan "[gigya" dan "]". Agar widget menjadi rata tengah tambahkan "center" sehingga kodenya akan menjadi seperti ini:

<div style="text-align:center;">[gigyasrc="http://www.clocklink.com/clocks/5005-blue.swf?TimeZone=JOG&" width="240" height="80" wmode="transparent" type="application/x-shockwave-flash"]</div>
Kemudian pasang pada widget "Teks" blog Sobat, Selesai.

Sekian tutorial tentang Memasang Jam di Wordpress.

http://wadahtutorial.blogspot.com/2011/11/memasang-jam-di-wordpress.html

Cara membuat dan menambahkan widget save to PDF pada blog

Cara membuat dan menambahkan widget save to PDF pada blog - Cara membuat dan menambahkan widget save to PDF pada blog. Cara ini nantinya memudahkan pengunjung blog untuk menyimpan postingan blog anda kedalam file PDF. Jadi pengunjung blog dapat dengan mudah membaca postingan blog anda tanpa membuka blog anda melainkan membaca postingan di file PDF yang di download tersebut. Bisa anda perhatikan gambar dibawah ini widget save to PDF nya.

Bagaimana menurut anda?? Ingin mencobanya. Caranya sangat mudah silahkan pelajari caranya sebagai berikut.
1. Silahkan mendaftar atau sign up di http://web2.pdfonline.com/ dan isi formulir yang ada.
2. Setelah sukses registrasi silahkan login setelah login anda akan dihadapkan dengan menu seperti dibawah ini.

Klik GENERATE untuk mendapatkan kode javascriptnya setelah kode muncul silahkan copy kode tersebut.
3. Sekarang login blog anda kemudian ke menu edit HTML
4. Beri tanda centang pada Expand template widget
5. Cari kode dibawah ini.

<data:post.body/>

6. Kemudian letakan kode script tadi diatasnya untuk penempatan widget dibawah judul postingan. Sedangkan untuk dibawah postingan letakan kode script tadi dibawahnya.

Demikian Ulasan Mengenai Cara membuat dan menambahkan widget save to PDF pada blog .Selamat mencoba mudah-mudahan berguna dan bermanfaat Bagi Anda Semua

[ Sumber ]

Wednesday, February 22, 2012

Cara Pasang Script Adsense di Tengah Post WordPress

Cara Pasang Script Adsense di Tengah Post WordPress - Dengan kata lain Cara Pasang Script Adsense di Tengah Postingan WordPress. Memasang Adsense dalam satu halaman post bisa ditempatkan di beberapa tempat. Adsense bisa dipasang di head, di awal post, di tengah post, dan di sidebar. Kali ini infodari.com akan memberikan panduan tentang bagaimana cara pasang script adsense di tengah post, yang menggunakan platform WordPress, tanpa plugin. Sebelumnya infodari pernah memberikan panduan tentang cara memasang widget visitor counter histats. Cara pasang script adsense ini merupakan teknik lanjutan dari belajar membuat blog gratis di wordpress.

Sebenarnya memasang adsense juga bisa dilakukan dengan menggunakan plugin yang sudah banyak tersedia di wordpress. Namun apabila anda menggunakan wordpress gratis, tentunya anda kesulitan untuk memasang script di halaman atau file php anda. Jika anda menggunakan wordpress dengan domain milik sendiri, maka anda bisa segera menuliskan dan menggunakan script ini.
Berikut ini cara memasang adsense / iklan di tengah post anda.

1. Login ke wp-admin blog atau site anda.
2. Di dashboard, pilih menu tab “Appearance”, klik tab “Editor”. Disana akan tampil kumpulan file-file php blog anda.

3. Cari file single.php di bagian kanan tampilan browser anda, kemudian klik untuk membukanya.

4. Cari script berikut: (supaya lebih cepat bisa gunakan control+F untuk pencarian cepat, kemudian tuliskan script yang dicari. ke dalam kotak pencarian yang telah terbuka tadi, di bagian bawah tampilan browser anda )
<?php the_content( ); ?>
5. Kemudian hapus barisan script tersebut. Dan gantikan script yang dihapus tadi dengan memasukkan script di bawah ini:

<?php
$where = 5;
$content = apply_filters(‘the_content’, get_the_content());
$content = explode(“</p>”, $content);
for ($i = 0; $i <count($content); $i++) {
if ($i == $where) { ?>
<div style=”float:left; margin:0 10px 10px 0;”>
<!-Pastekan script iklan adsense anda disini ->
</div>
<?php
}
echo $content[$i] . “</p>”;
}
?>

Gantikan tulisan berwarna merah dengan script iklan adsense anda.
6. Anda bisa mengeset posisi iklan anda di paragraf yang anda inginkan, dengan mengganti angka yang berwarna hijau.
$where = 5; (jika diisi 5, berarti anda akan menampilkan iklan di paragraf ke 5)
7. Anda juga bisa memilih posisi iklan anda berada di kanan atau di kiri dengan mengganti tulisan yang berwarna orange, dengan left atau right.
<div style=”float:left; margin:0 10px 10px 0;”>
8. Jika sudah, Kemudian klik “Update File”, untuk menyimpan proses edit script tadi.

9. Selamat kini iklan adsense anda sudah terpasang dibagian tengah post dalam blog anda.
Semoga artikel ini bisa membantu anda untuk memasang iklan adsense di tengah post halaman blog anda. Nah Sekian Ulasang Mengenai Cara Pasang Script Adsense di Tengah Post WordPress

[ source : http://infodari.com/cara-pasang-script-adsense-di-tengah-post-wordpress/ ]

Sunday, February 19, 2012

Cara Mengganti Alamat URL Blog Di Blogspot

Cara Mengganti Alamat URL Blog Di Blogspot - atau Cara Mengubah Alamat URL Blog Di Blogspot. Nah Sebenarnya caranya amatlah gampang, namun bagi pendatang baru dalam dunia blogger yang ngeblog di blogspot.com dan ingin mengganti alamat URL nya maka silahkan ikuti langkah-langkah mudah di bawah ini

1. Login ke akun blogger anda dengan mengetikkan www.blogger.com
2. Kemudian Klik Penggaturan Atau Setting
3. Lanjut Kluk Publishing atau Penerbitan
4. Maka Kalau cara anda Bener akan Muncul Gambar seperti ini.

Nah di halaman inilah anda bisa mengganti alamat URL blog yang telah anda buat dan rencanakan tadi
tapi perlu di ingat kalau blog yang anda punya sudah bagus Page Rank nya terlebih traffik pengunjung sudah lumayan jangan sekali-kali mengganti nama URL tersebut karena berakibat pengunjung tidak akan bisa menemukan blog anda lagi. dan harus mulai dari awal mempromosikan blog anda.

Ckup Mudah Bukan? Selemat mencoba.

Saturday, February 18, 2012

Cara Membuat Banner Tukar Link Pada Blog

Cara Membuat Banner Tukar Link Pada Blog - Pada Postingan kali ini mengenai cara membuat banner tukar link untuk meningkatkan traffic blog. Untuk membuatnya cukup mudah dan memasang banner pun juga mudah.

1. Langkah pertama yang perlu dipersiapkan yaitu membuat banner terlebih dahulu. Kawan - kawan dapat membuatnya melalui adobe photosop atau corel draw atau program lain yang dapat mendukung misalnya format gambar gif.

2. Langkah kedua : mengupload gambar atau banner yang kawan buat tadi misalnya di photobucket, imageshack, namun lebih baik kamu upload ke picasa web album. Terkadang kalau di imageshack, misal sudah lama akun kamu tidak kamu upgrade, maka berubah jadi gambar kodok. Sebagai contoh di bawah ini adalah banner blogku yang lain , gambar aku upload di tinypic.

3. Langkah ketiga yaitu membuat kode html banner
- Kode untuk menampilkan banner :

<a href="http://m-wali.blogspot.com/"><img alt="Ali Bloggers" src="

http://i54.tinypic.com/2up4chs.gif/

"/></a>

- Kode untuk menampilkan kode html dengan textarea

</textarea>

<br /> <a href="http://m-wali.blogspot.com/" target="_blank"><br /> <img src="http://i54.tinypic.com/2up4chs.gif/"/></a><br />

Cara membuat banner tukar link mudah kan ? Jangan lupa ganti kode url menjadi kode url blog anda,serta ganti url gambar sesuai gambar anda.

[ sumber : http://carapada.blogspot.com/2011/04/cara-membuat-banner-tukar-link-pada.html ]

Cara Membuat Tag Cloud, Label Berputar Di Blog

Cara Membuat Tag Cloud, Label Berputar Di Blog - Artikel Ini menginformasikan bagaimana cara membuat tag cloud berputar di blog, atau label berputar, tapi baru bisa saat ini. Memang sulit tapi aku gak nyerah untuk belajar membuat label berputar pada blog. Nah berikut ini adalah hasil dari apa yang aku pelajari , yaitu membuat tag cloud bisa berputar..kamu bisa lihat hasil cara membuat label berputar pada blog punyaku ini. Kalu dah bisa sebenarnya mudah untuk bikin label berputar.

Thursday, February 16, 2012

Cara menghilangkan tulisan powered by google pada blogspot

Cara menghilangkan tulisan powered by google pada blogspot | tips blog kali ini adalah Cara menghilangkan tulisan powered by google pada blogspot , yang sangat menarik untuk dipelajari bagi anda blogger pemula tentunya. Sebagian dari para blogger tidak ingin menampilkan atribut dari blogger. Namanya juga bloger pasti ada yang suka dan ada yang tidak dan masih mempertahankan tulisan tersebut pada blognya. Nah disini saya akan memberikan tips cara menghilangkan tulisan powered by google pada blogspot bagi anda yang tidak ingin menampilkan atribut blogger. Langkah awalnya.

1. Silahkan login blog anda kemudian menuju menu edit HTML
2. Jangan lupa memberi tanda centang pada Expand template widget
3. Nah sekarang cari kode dibawah ini dengan menekan F3 atau CTRL+F pada keyboard anda untuk memudahkan pencarian.

]]></b:skin>

Setelah kode diatas ditemukan sekarang copy kode dibawah ini kemudian letakan diatas kode diatas tadi.

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

Kemudian simpan Cara menghilangkan tulisan powered by google pada blogspot. Sekarang silahkan cek tampilan blog anda sudah pasti tampilan atribut googlenya tidak muncul. maka Cara menghilangkan tulisan powered by google pada blogspot selesai sampai di sini

[ sumber : http://madiuncool.blogspot.com/2011/12/cara-menghilangkan-tulisan-powered-by.html ]

Tuesday, February 14, 2012

Cara Agar Breadcrumbs Terindex Google

Cara Agar Breadcrumbs Terindex Google - ini bukan punya saya, tapi punya sobat ichbinnabil, tujuang di copas biar gak lupa, hehee. Banyak yang masih bingung, bagaimana sih biar breadcrumb navigasi bisa terindex google?. kan keren tuh url blog kita bisa dipersingkat. agar lebih memahami mengenai breadcrumbs yang terindex google, coba perhatikan gambar di bawah ini,

Pertama-tama masukan kode css untuk breadcrumbnya, taruh di atas kode ]]></b:skin>

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

setelah itu cari kode <b:includable id='main' var='top'> , hapus kode tersebut dan ganti dengan kode berikut,

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Save template. untuk mengecek kinerja breadcrumb, silahkan anda buat artikel dengan menyertakan label yang sudah terindex oleh google (untuk cek anda tinggal copy paste url label ke google). setelah membuat artikel baru, tunggu hingga artikel tersebut terindex, dan lihat hasilnya
Sumber Asli : http://ichbinnabil.blogspot.com/2012/01/cara-agar-breadcrumbs-terindex-google.html

Saturday, February 11, 2012

Cara Mempercantik Blog dengan Memasang Jam

Cara Mempercantik Blog dengan Memasang Jam - Cara Mempercantik Blog juga akan memberikan keindahan bagi blog kita. sebelumnya saya juga pernah posting tentang Cara mempercantik Blog baca itu dulu ya baru lanjutin ke tutorial berikut ini :

Langkah-langkah pasang jam di blogger yang dikutip o-om sebagai berikut:
Klik alamat http://www.clocklink.com/
Kemudian pilih tab Gallery atau klik aja disini http://www.clocklink.com/gallery.php
Pilih Gallery sesuai selera atau tema blog, misalnya sobat memilih animal lalu klik link "animal" tersebut
Pilih gambar yang ingin sobat gunakan, lalu klik "view html" dibawah gambar jam.
Kemudian akan keluar halaman box lisensi dari layanan ClockLink, pilih aja tombol "Accept"
Pada halamat box selanjutnya kalian dapat memilih salah satu code, sebaiknya pilih kode yang atas.
Copy atau Simpan kode yang telah dipilih untuk sementara waktu
Lalu kembali masuk kehalaman blogger, pilih Elemen halaman -> Tambahkan sebuah Elemen Halaman -> pilih HTML/JavaScript -> lalu Copy/Paste code tersebut, dan jangan lupa disimpan
Selesai :) dan lihat hasilnya.

Semoga bermanfaat Cara Mempercantik | Memperindah Blog dengan memasang Jam ini
Vriizee Reviewed by Newbie on Jan 29. Cara Mempercantik Blog dengan Memasang Jam Cara Mempercantik Blog dengan Memasang Jam juga akan memberikan keindahan bagi blog kita. sebelumnya saya juga pernah posting tentang Cara mempercantik Blog baca itu dulu ya baru lanjutin ke tutorial berikut ini.
[ Sumber : o-om ]

Cara Membuat Headline Artikel Terbaru

Cara Membuat Headline Artikel Terbaru - Selamat Malam Para Sahabat, Jalan ke blog mastah Mukhtiblog, ketemu info ini, saya rasa ini penting untuk di publish ulang, hehe..Jika anda berkunjung ke blog kesayangan saya juga di bisnis muktiplaza, maka di bagian atas/header blog anda akan melihat text/judul artikel terbaru berjalan beriringan. Kalau tidah salah itu namanya headline news, atau kepala berita. Dengan headline news, maka pembaca blog akan bisa mengetahui secara ringkas topik-topik penting yang telah ditulis dalam sebuah blog. Bagi anda yang suka dengan hiasan atau pernak-pernik blog, maka tidak ada salahnya meletakkannya di blog anda. Tapi kalau dirasa akan memberatkan loading blog anda, ya tidak usah dipasang aja. Anggap ini hanya sebagai sharing pengalaman dan pengetahuan. Siapa tahu suatu saat akan berguna untuk anda.

Bagaimana Caranya?
Nah, tips kali ini adalah tentang Cara Membuat Headline Artikel Terbaru berjalan di bagian header blog. Tapi sebelum itu saya mohon maaf kepada kawan blogger, jika di beberapa tutorial blog sebelumnya tidak bisa diterapkan ke blog anda. Banyak sekali pertanyaan yang datang melalui komentar yang mengatakan bahwa tutorial saya tidak bisa dijalankan di blog mereka. Walau ada juga yag langsung jalan. Di antaranya adalah tips merubah kursor di blog. Banyak yang terjadi error ketika disimpan di html template. Jadi saya katakan di sini, bahwa tutorial blog saya ini berdasarkan pengalaman saya dan saya praktekkan di blog saya semuanya bisa. Kalau tidak jalan di sebagian blog kawan blogger, mungkin bawaan dari templatenya yang tidak support dengan kode kode html/java script yang saya berikan. Atau bisa juga saya belum tahu ilmunya. He he he. Jadi atas semua itu saya mohon maaf.

Baiklah, maaf, jadi ngelantur ke mana mana ya. Langsung ke pembahasan tentang Cara Membuat Headline Artikel Terbaru.
Langkah-langkahnya sebagai berikut :
1. Login ke blogger.com
2. Klik Design atau Rancangan
3. Lalu klik Tambah Gadget
4. Klik HTML/JavaScript
5. Masukkan kode berikut ke Klik HTML/JavaScript.

<p align=”center”><script type=”text/javascript”>
var hn_url_blog = “http://m-wali.blogspot.com/”;
var hn_jumlah_post = 15;
var hn_warna_latar = “#ffffff”;
var hn_warna_garis = “#dddddd”;
var hn_posisi = “top”;
var hn_tampilkan_judul = false;
var hn_backlink = false;
</script>
<script src=”http://copycat91.googlecode.com/svn/trunk/headlinenews.js”>
</script></p>

Keterangan Penting :
var hn_jumlah_post = 15; : Untuk menampilkan jumlah judul artikel. silahka rubah sesuai dengan selera anda
Jangan lupa ganti alamat blog http://bisnis-muktiplaza.blogspot.com pada kode di atas.

6. Klik Save/Simpan
Sukses. Semoga Tutorial Blog Cara Membuat Headline Artikel Terbaru akan jalan di blog anda. Be blogging forever. [ Sumber Referensi : muktiblog ]

hooky magazine

Popular Posts