Diemy Blogger: Tips and Trik

Tampilkan postingan dengan label Tips and Trik. Tampilkan semua postingan

19 Mar 2012

Cara membuat buku tamu dengan Cbox

Malam hari ini saya akan membahas tentang bagaimana caranya membuat buku tamu dengan shoutmix, ada yang tau apa kegunaan dari buku tamu itu sendiri? untuk yang belum tahu saya akan menerangkan sedikit tentang buku tamu di blog, oke buku tamu blog tentunya beda dengan buku tamu pada umunya yaitu untuk sekedar meninggalkan jejak pengunjung misalnya dengan meninggalkan sebuah pesan "assalamualaikum..

tutorialnya sangat membantu" atau sekedar bersilaturahmi. " Wah gan bagaimana kabarnya.." kira-kira seperti itulah contoh dari kegunaan buku tamu pada blog..

untuk membuatnya diperlukan beberapa langkah

1. Anda masuk ke situs www.Cbox.ws
2. Selanjutnya anda klik tombol "Sign Up"

Ket: - cbox name: Gunanya untuk masuk ke akun Cbox anda

- Email address: Isi dengan alamat email anda
- Password: Isi dengan password email anda
- Confirm password: Isi lagi dengan password email anda
- Website: isi dengan alamat blog anda
- Language: Silahkan pilih English
- Style: Pilih sesuai keinginan

3. Centang kotak kecil lalu klik tombol " Create my Cbox!"
4. Setelah itu silahkan untuk login menggunakan akun yang anda buat tadi
5. Setelah itu anda pilih Look & Feel dan pilih style presets untuk memilih tampilan cbox anda.

6. Bila sudah anda pilih publish lalu copas kode yang sudah di siapkan untuk anda. seperti gambar dibawah ini.

7. Pasang kode yang sudah anda copas tadi kedalam blog anda dengan cara pilih Rancangan => Tambah Gadget => HTML/javascript

8. Simpan hasilnya...dan buku tamu Cbox telah terpasang.

Read More No comments

18 Mar 2012

Membuat efek gambar bergetar

efek ini menurut saya cukup menarik perhatian saya, kenapa? karena efek ini bagus banget buat gambar yang ada di blog kamu bergetar.., dan efek ini juga bisa dijadikan link..

untuk membuatnya cukup mudah kok.

1. seperti biasa masuk ke akun blogger
2. pilih rancangan/edit HTML
3. jangan lupa untuk mecentang kotak ( Expand Widget Template )
4. Lalu kalian cari kode ]]></b:skin> dan simpan kode dibawah ini tepat diatas kode ]]></b:skin>

.gambargetar {
position: relative;
}

5. Lalu klik tombol save template

Selanjutnya untuk langkah berikutnya kalian pilih Rancangan => edit HTML => Tambah gadget => HTML java/script.
dan Copas kode dibawah ini.

Untuk membuat gambar itu bergetar simpan kode di bawah ini, entah itu di dalam post blog atau dimana saja.

Nb: ganti url gambar yang berwarna merah itu dengan url gambar kalian.

Selamat mencoba..!!!

Read More 1 comment

Memasang alert message untuk menyapa pengunjung

Halo..kali ini saya akan membahas bagaimana membuat alert message ( tanda pesan ), tapi pada dunia komputer sih ini seperti pesan peringatan, seperti pesan tanda bahaya gitu...tapi gak ada salahnya juga, toh disini kita membuatnya untuk menyapa pengunjung blog kita...

untuk kegunaan alert message itu sendiri adalah ya seperti yang sudah saya katakan tadi yaitu uuntuk menyapa pengunjung yang hadir maupun menyapa pengunjung yang keluar dari blog kita.., atau bisa juga untuk memperindah tampilan blog kita..

untuk cara membuatnya cukup mudah kok kita hanya perlu beberapa script yang harus kalian pasang.

Untuk memasang pesan selamat datang

1. masuk ke akun blogger
2. Pilih Rancangan/edit html
3. jangan lupa untuk backup template blog kalian, untuk menjaga bila terjadi kesalahan
4. Centang kotak kecil ( Expand Widget Template )
5. Cari kode </head> lalu kalian simpan script kode dibawah ini tepat dibwah kode </head>.

NB: Kalian bisa ganti kata yang berwarna merah itu dengan kata-katamu sendiri...

Untuk memasang pesan selamat tinggal

6. Pasang kode script dibawah ini tepat dibawah kode </head> tepatnya setelah kode script selamat datang.

NB: Kalian bisa ganti kata yang berwarna merah itu dengan kata-katamu sendiri.

8. Save template

Read More No comments

Cara memasang rating bintang pada post

Dengan dipasangnya rating bintang ini para pengunjung bisa menilai isi suatu post. baik atau tidaknya suatu post yang kita buat, akan terlihat melalui Ranting Bintang tersebut.

Walau rating bintang sudah disediakan oleh pihak blogger, namun tampilannya tak sebaik rating bintang ini.., menurut saya dari sisi keakuratan memang terbilang baik, karena pengunjung hanya dapat memberikan penilaian satu kali pada setiap postnya, walaupun pada dasarnya bisa klik beberapa kali, namun rating bintang ini hanya akan menampilkan satu penilaian saja.

Bila anda ingin membuatnya ikuti langkah-langkanya:

1. masuk ke akun blogger
2. Pilih rancangan/ edit HTML
3. Sebelum memulai pemasangan saya sarankan untuk membackup template blog kalian, untuk menghindari jika terjadi kesalahan.
4. Jangan lupa centang kotak ( Expand Widget Template )
5. Cari kode </body> lalu letakan script dibawah ini tepat diatas kode </body>

6. lalu anda cari kode <div class='post-header-line-1'/> lalu simpan kode script dibawah ini tepat dibawah kode tadi.

Ket: Jika kalian ingin menampilkannya diatas bagian posting atau dibawah judul post kalian simpan kode script diatas tepat diatas kode <data:post.body/>

- Tapi jika kalian ingin menempatkannya di bawah bagian post kalian simpan kode script diatas tepat dibawah kode <data:post.body/>

7. Terakhir save template.

Read More 1 comment

28 Feb 2012

Membuat Efek Lebel Nudging

Malam ini saya kembali untuk memposting sebuah efek pada label yaitu dengan efek nudging pada label yang sebelumnya juga saya sudah memposting efek label yaitu cara membuat label cloud berputar, fungsi dari pada label nudging itu sendiri adalah untuk memperindah tampilan blog sobat dengan efek bergoyang bila cursor di arahkan ke label nudging tersebut.

Untuk cara membuatnya :

1. Masuk ke akun blog sobat.
2. Pilih Rancangan/Tata Letak => Edit HTML
3. Jangan lupa untuk membackup template blog sobat untuk menghindari terjadinya kesalahan.
4. Centang kotak kecil ( Expand Widget Template )
5. Kemudian cari kode </head> lalu letakan kode dibawah ini tepat dibawahnya..

Ket : Kode diatas tersebut sudah umum dipakai, jadi jika kode tersebut sudah ada di template sobat tidak usah ditambahkan lagi cukup yang sudah ada saja.

6. Selanjutnya sobat tambahkan kode dibawah ini dan letakan tepat dibawah script kode diatas.

7. Terakhir save template kalian lalu lihat hasilnya.

Read More No comments

27 Feb 2012

Cara membuat Label cloud berputar

Dengan dipasangkannya label cloud berputar ini dapat membuat tampilan blog kamu akan terlihat lebih keren, Kenapa ? karena dengan tampilannya yang rapi selain itu juga karena pergerakannya yang memutar bila kita arahkan cursor ke label tersebut bisa dibilang sih seperti bola dunia..

Bila sobat ingin membuatnya silahkan ikuti langkahnya:

1. Masuk ke akun blogger
2. Pilih Rancangan/Tata letak lalu pilih Edit HTML
3. jangan lupa untuk backup template sobat untuk menjaga terjadi kesalahan.
4. Centang kotak kecil ( Expand Widget Template )
5. Kemudian sobat cari kode di bawah ini

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Label99' 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'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://Diemyblogger.blogspot.com/'>Diemy blogger</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Ket : ~Mengubah lebar dan tinggi kolom serta warna background
Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk background

~Merubah warna font, untuk kode warna bisa sobat lihat disini
so.addVariable("tcolor", "0x333333");

~Merubah ukuran font
so.addVariable("tagcloud", "12'>");

Selamat Mencoba..!!!

Read More No comments

26 Feb 2012

Cara membuat kotak komentar ala wordpress di blogger

Udah lumayan lama saya gak posting Tips and trick blogger..Oke pada sore hari ini saya akan mengajarkan bagaimana caranya membuat kotak komentar blogspot kamu menjadi seperti kotak komentar pada blog Wordpress...,seperti pada kotak komentar blog saya ini.., jadi kotak komentar wordpress itu mempunyai kotak admin yang menjorok kedalam..,nah..bila kalian ingin membuatnya dan ingin merubah tampilan kotak komentar blog kamu ayo cekidot..!!

1. Kamu masuk ke akun blogger kamu ya...
2. Kamu pilih Rancangan/Tata letak lalu pilih Edit HTML
3. Selanjutnya jangan lupa untuk memback-up template blog kamu dulu, untuk menjaga bila terjadi kesalahan bisa kamu unggah lagi template blog yang sudah kamu backup tadi.
4. Centang kotak kecil ( Expand Widget Template )
5. Kamu cari kode ]]></b:skin> untuk mempermudah pencarian kamu tekan tombol CTRL + F
6. Kamu simpan kode dibawah ini tepat diatas kode ]]></b:skin>

#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-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
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, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbhuTDjQ5N7IbuktPte3_sTzOEOFIGGbClsG0YZDmEJrU7omSB99mN05TrCVsP3dx3_A1saIIBGv__7XgK8Dzk2PCzdAc6oFlG_sCqhaoX-8j8-nl6_t2J2lblj8owML5sMKOQuuxhcI8/s1600/comment-arrow.gif) 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;
}

7. Lalu kamu simpan kembali kode dibawah ini tepat diatas kode </body>

8. Terakhir kamu cari kode <b:includable id='comments' var='post'>

<b:includable id='comments' var='post'>

Kode yang harus kamu ganti

</b:includable>

Dan simpan kode dibawah ini dan ganti pada kata yang sudah saya beri warna merah diatas.

<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 class='cm_pagenavi' id='cm_page'/>

<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&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=600,height=500"); return false;'>Reply</a>
</div>
</div>

<div class='cm_entry'>
<span class='cm_arrow'/>
<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'/>

<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>

Perhatian : Kamu ganti tulisan ID BLOG dengan ID blog kamu..yang sudah saya beri tanda warna merah...

Sekian tips and trik blogger dari saya semoga bermanfaat untuk kamu-kamu sekalian..terima kasih..

Selamat mencoba..!!!

Read More 1 comment

17 Feb 2012

Cara membuat efek gelembung berjatuhan

Oya...satu lagi saya akan memposting efek yang bisa membuat blog sobat terlihat keren and menarik...tapi sebelumnya saya sudah memposting beberapa efek pada blog juga,
sobat bisa lihat disini Cara Membuat Efek Pada Blog, nah...kali ini saya akan mengajak sobat-sobat sekalian membuat efek gelembung berjatuhan di blogspot.

jika sobat berminat berikut tipsnya...:
1. Seperti biasa sobat masuk dulu ke akun blogger sobat.
2. Pilih Rancangan/Tata letak => Edit HTML
3. Jangan lupa centang kotak ( Expand Widget Template )
4. Cari kode <body> ( untuk mempermudah pencarian gunakan CTRL + F
5. Simpan kode dibawah ini tepat dibawah kode <body>

<script src=”http://clief.googlecode.com/files/bubble.js”></script>

6. Terkhir jangan lupa klik save/simpan template

Lihat hasilnya...

Selamat mencoba....!!!

Read More 1 comment

Cara membuat efek zoom pada gambar

Assalamuallaikum...Kali ini saya akan memposting cara membuat efek zoom pada gambar di blogger, efek zoom ini cara kerjanya yaitu bila sobat mengarahkan kursor ke gambar postingan yang ada di blog saya ini maka secara otomatis gambar tersebut akan membesar dari ukuran semula, nah...itulah yang disebut efek zoom pada gambar..

Bila kalian berminat untuk membuatnya ikuti langkah-langkahnya...

1. Kalian masuk ke akun blogger kalian.
2. Pilih Rancangan/Tata letak => edit HTML

PERHATIAN :Sebelum kalian memulai membuat/memasang tips membuat efek zoom pada gambar ini saya sarankan sobat untuk mem-backup template blog sobat, karena bilamana terjadi kesalahan sobat bisa memasang template sobat lagi yang sebelumnya sudah sobat backup terlebih dahulu.

3. Selanjutnya sobat centang kotak kecil ( expand widget Template )
4. Terus sobat cari kode ]]></b:skin> Untuk mempermudah pencarian gunakan tombol CTRL + F
5. Bila sobat sudah menemukannya simpan kode dibawah ini tepat dibawah kode ]]></b:skin>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }

6. Terakhir simpan dan lihat hasilnya.

Selamat mencoba...!!!

Read More 1 comment

13 Feb 2012

Cara Membuat Widget Sms Gratis

Widget sms gratis adalah widget yang melayani pengiriman sms gratis secara online, yang dapat dipasang di website atau blog kalian untuk menambah pengunjung mampir ke blog atau website kalian.

penggunaannya pun sangat mudah kalian tinggal isi nomor tujuan anda lalu tulis pesan yang akan dikirim.

Perhatian : bila kalian menggunakan widget ini di anjurkan agar setiap menulis sms jangan lupa untuk beri nama kalian di isi sms tersebut, karena agar teman kalian yang menerima sms tidak bingung karena nomor yang untuk mengirim sms bukan nomor kalian.

Untuk cara membuatnya yaitu:

1. Masuk ke akun blogger kalian.
2. Pilih Rancangan/Tata letak => Tambah gadget => HTML/javascript
3. Kalian simpan kode dibawah ini ke dalam kolom HTML/Javascript

<iframe name="widgetsms" src="http://www.sms-online.web.id/widget/" width="270" height="350" frameborder="0"></iframe>

4. Setelah itu klik tombol simpan..

Selamat Mencoba...!!!

Cara Mudah mengganti cursor blog

Hari ini saya akan memposting caranya mengganti cursor blog menjadi cursor dengan gambar yang lain menurut keinginan sobat blogger.., cara ini menurut saya bagus juga untuk mempercantik blog teman agar kelihat lebih keren dan menarik. Caranya pun sangat mudah kita hanya perlu menyiapkan sebuah icon gambar yang ingin sobat ganti.

Disini saya menyiapkan gambar seperti dibawah ini.

Bila sobat ingin mencobanya ikuti langkah-langkahnya..:

1. Masuk ke akun blogger sobat
2. Pilih Rancangan/Tata Letal => Tambah Gadget => HTML/Javascript
3. Masukan kode dibawah ini kedalam kolom HTML/Javascript

Keterangan : Ganti kode warna biru tersebut dengan URL gambar kalian. apabila kalian tidak mengganti URL di atas tersebut maka gambar cursornya akan seperti gambar yang saya beri contoh diatas.

Cara 2
Bila sobat ingin cursor tersebut berubah secara permanen walaupun sobat arahkan kelink silakan gunakan kode dibawah ini.

Keterangan : Ganti kode warna biru tersebut seperti cara pertama tadi..

Selesai....

Selamat Mencoba.....!!!

Cara membuat Link Berkedip ala Pelangi

Oke...kali ini saya akan mengajak kalian membuat link berkedip ala pelangi..

bila kalian penasaran kalian bisa lihat contohnya..

Www.DiemyBlogger.Blogspot.Com

Nah...Bila kalian berminat untuk membuatnya mari ikuti langkah-langkahnya...

1. Masuk Ke akun Blogger Kalian.
2. Pilih Rancangan/Tata letak => Edit HTML => jangan lupa untuk mencentang Expand Template Widget
3. Lalu kalian Cari kode </head> untuk mempercepat pencarian gunakan CTRL+F
4. Terus kalian simpan kode dibawah ini tepat dibawahnya..

5. Bila sudah klik tombol simpan lalu lihat hasilnya..

Selamat mencoba...!!!

Read More No comments

31 Jan 2012

Cara Memasang Widget Pengunjung Yang Sedang Online

Pada hari yang sama saya juga ingin mengajak kalian untuk mempercantik blog..., nah tutorial selanjutnya adalah bagaimana caranya memasang widget Who's.amung.us..ada yang tau..??

Oke..Fungsi dari who's.amung.us itu sendiri adalah untuk mengetahui pengunjung-pengunjung yang sedang online di blog kita...,jadi kita bisa tau blog kita lagi sepi atau sedang ramai..,selain itu sudah banyak situs-situs penyedia widget online..dan sudah banyak pula blogger2 yang sudah memakai jasa widget online ini.Namun pada postingan ini saya akan memakai jasa Who's.amung.us saja...
Langkah-langkahnya sebagai berikut :

1. Kalian masuk ke situs Whos.amung.us
2. Lalu kalian copas kode script-nya ya...seperti gambar dibawah ini..

Copas code script-nya yang sudah saya kasih tanda blok hijau..
Dan yang saya kasih tanda blok ungu itu adalah pengaturan penempatan widget tersebut berada...
3. Untuk widget original otomatis langsung ada di home page, untuk widget lainnya who.amung.us lainnya klik disini http://whos.amung.us/showcase/ dan pilih sesuai dengan keingininan anda.

Cara menyimpan widget ke blogger..

1. Masuk ke akun blogger
2. Pilih Rancangan/Tata Letak => Tambah widget => HTML/Javascript
3. Simpan kode script yang kalian dapat di situs Whos.amung.us tersebut kedalam kolom HTML/Javascript
4. Bila sudah selesai jangan lupa di simpan..

Selamat mencoba....!!

Cara Memasang Burung Twitter Terbang di blog

Hari ini saya akan memposting cara bagaimana memasang burung twitter di blog, kalau menurut saya sih memang unik juga memasang burung ini kenapa? ya..karena bisa jadi obat bete juga..bisa kita mainin selain itu juga dapat menambah teman kita di twitter apabila burung twitter tersebut kita klik...

Apakah kalian berminat untuk memasangnya di blog kamu? jika berminat ayo kita mulai cara memasangnya..Disini saya kasih contoh untuk blogger aja...

1. kalian masuk dulu ke askun blogger kalian.
2. Kalian pilih Rancangan/Tata Letak
3. Kalian pilih Tambah Gadget
4.Selanjutnya Kalian pilih HTML/javascript
5. Taruh Kode script di bawah ini ke dalam kolom HTML/javascript.

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

Keterangan : Untuk kata yang saya kasih warna merah Bisa diganti dengan warna burung yang kalian suka
Dan untuk kata yang saya kasih warna biru kalian ganti dengan akun twitter kalian.

Script kode warna burung twitter..

Kalian bisa ganti warna burung twitter tersebut dengan mengganti kode yang sudah saya beri warna merah diatas dengan kode yang ada di bawah ini.

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbjRXdBs9t7OBE4P8ZmENtNxIjp2195FALKkLjLvkObERlXCO7xzKacbkgJ1J5rJsBjHyPhHWf-yAWTJOhQ2y0axMjC907TbOzKw1zih-CFA3z14ttwCtn9eufSy88CsGVa9PC4I-fcz8/s1600/black+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEIyynG4m4GeJZi-aqwAd56Yn4IGrqG4AxkcNVsOA8my4SDvVxeG1SXBTt0RHDwj5B4Fg-asIovgUsFcnpc_l_8ejjDBCe-QfBG3mIsJfYJkZSkPL1XxHVqDi5Bu2I_qsPmGub9hZdV4/s1600/red+bird.png

Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigUxmd0v9-Q9KHm8dBjXXcXIEgYmmhd40n4QFf5R7NS6Bl6HIS8Re9oEqnisfiVCp3P1NOsPxhHJYJ-tEve1EjjCSpAkw7yEw_-JFQ5jGtrzDn_BkwsthMde20I9Uffeqa2Or1LuN9K6Y/s1600/white+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisQyTh_OKtJCoHw8z7JNTYtcfUwbhDSCRNRTzpWI2Tl86sEYEXuRgEVMMbK3iZ8r5BASaFpvHA6KRCfv98qlyM-gMUKtY-Nc1rLHmQ-99xkiqpBBxQkMROT1AOO-oVEWIMQYkeiDtZLDg/s1600/Green+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLW8dzAwnQ65xS2TPleANsuf2R1On9ecBWN9t9waOj4wbCvUCurecMTuMDn0iaBvg-8GrcxLirUGzfE7FcwGqiHl07ZtPayXHRGCbpXz-iZ059_LwJC1-XfCuklC7jYOnxyqLMz4eiTQ/s1600/purple+bird.png

Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy7X50mWvX0fBuYjMReAxKddd6IYHOfbfwWjSbzZWJeWn4r6WZDnLi4CpHxraKwqX1yQhnoSlAe3d5cE1HR92ZONoe0658zIIW5efGG79EAM8ZtGfwMsh9HKKXiGhjz5fdkARGdc4kKus/s1600/brown+bird.png

Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJuHH0mvY1TJEnoE72SMaRHhIKEFs0bkfnXLtBLknkqyDZ9NLLB1hRoj2hnWqwmDK1PRusF2E_rCvs_6ghmjFgw9m7tiPf_WHyi4-X66VjZnBwdTDbLSq5WSjzv4vIWOdtP0MFHHPQ2Io/s1600/Blue+bird.png

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh4xaOw3XWSuO203mqnUwVXj4b6WGCcOqMPWu8vb9Fq4WHeHDSbsucNXyy4gzgeST6z8fajnVMRBcEdm7joY4sDzSt0gOoMomxh8bVXvpVJ237EUoq4p00LuwP1IIWaiX-j26f1mJPY_I/s1600/yellow+bird.png

Bila sudah Jangan lupa di simpan ya....
Selamat mencoba...

Cara Membuat Script/Kode Tukar Link Di Blogger

Nah postingan kali ini adalah bagaimana caranya membuat Script/Kode tukar link di blog

Oke pasti semua udah tau kan cara kerja Script/kode tukar link itu sendiri ???
Tukar link sangat dibutuhkan dalam dunia blogging Karena seperti yang anda tahu,semakin banyak inbound link,maka akan semakin baik blog kita di mata search engine/mesin pencari.
Selain itu juga agar lebih mudah dalam bertukar link. Mereka tinggal copy/paste script blogroll tersebut sidebar blog mereka atau bisa juga ditempatkan kebagian lain pada blog. Anda bisa sesuaikan sesuai dengan kebutuhan tampilan blog anda.

Nah ini script/kode tukar link punyaku.
Mau Tukar Link? Copy/paste code HTML berikut ke blog anda

Kalian berminat untuk membuatnya..??? ya udah kita langsung saja membuat oke..

1. kalian masuk aja dulu ke situs http://cooltext.com
2. terus nanti kalian akan bertemu tampilan seperti di bawah ini.

3. pilih salah satu logo yang kalian suka...
4. selanjutnya bila sudah menentukan logo kalian diminta untuk mengubah pengaturan logo yang kalian pilih tadi..., Lihat gambar.

5. Bila sudah menentukan pengaturannya selanjutnya kalian klik " Render Logo", tunggu beberapa saat sampai proses membuat logo selesai.
6. Nah selanjutnya kalian klik
1. Download Image untuk langsung menyimpan logo tersebut ke harddisk atau flashdisk kalian.
2. Get HTML Code untuk mendapatkan Script kode logo tersebut tetapi akan diminta untuk registrasi dahulu, nah untuk itu kita pilih No.1 saja

7. Untuk langkah selanjutnya adalah kalian upload logo tersebut ke layanan penyimpanan file disini saya pakai www.photobucket.com, Bila kalian belum punya registrasilah terlebih dahulu, lalu ambil code HTML logo tersebut. dengan meng-copy kode HTML di kolom "Direct Link"
ini contoh Link logo punyaku..
http://i1234.photobucket.com/albums/ff418/helmyborneo/cooltext598383107.gif

8. Bila sudah login ke akun blog kalian
- Klik Rancangan/Tata Letak
- Lalu Pilih Tambah Gadget => HTML/Java Script
-Lalu kalian taruh kode dibawah in

<div style="font-family: "Trebuchet MS",sans-serif;">
<b>Mau Tukar Link? Copy/paste code HTML berikut ke blog anda</b></div>

<a href="http://diemyblogger.blogspot.com/" target="_blank"><img alt="Tips & Tutorial" border="0" src="http://i1234.photobucket.com/albums/ff418/helmyborneo/cooltext598383107.gif" /></a>

<textarea cols="31" rows="3" style="height: 95px; width: 234px;"><a href="http://diemyblogger.blogspot.com" target="_blank"><img border="0" alt="Diemy Blogger" src=" http://i1234.photobucket.com/albums/ff418/helmyborneo/cooltext598383107.gif "/></a></textarea>

Keterangan: Untuk warna Biru kalian bisa ganti dengan kalimat apa saja atau bila tidak perlu bisa kalian hapus.
- Untuk warna Pink Kalian ganti dengan URL blog kalian
- Untuk warna kuning Kalian ganti dengan Kode logo yang kalian dapat tadi...

9. Simpan hasil kalian....

Selesai.....Selamat mencoba...!!

Read More 1 comment

24 Jan 2012

Cara membuat artikel terkait dengan scroll

Pada sore hari ini saya akan membahas bagaimana cara membuat artikel terkait dengan menggunakan scroll.

Apa sih fungsi dari artikel terkait itu? fungsinya adalah agar setiap postingan/artikel yang terkait atau terbit dalam kategori yang sama, dapat ditampilkan juga dalam post yang sedang dibaca pengunjung.

Selain itu, artikel terkait dengan scroll ini dapat menghemat tempat dan juga memasukkan berpuluh-puluh postingan tanpa batas. Jadi, dengan menggunakan artikel terkait memudahkan para pengunjung untuk melihat posting atau artikel lain yang berkaitan dengan artikel yang sedang dibaca, tanpa harus mencari postingan lainnya. Dalam hal ini artikel yang berkaitan sesuai dengan label atau kategori.

Oke kita langsung saja ikuti langkah-langkah membuat artikel terkait dengan scroll-nya..

1. masuk ke akun blogger kalian.
2. Pilih rancangan/Tata letak
3. Jangan lupa untuk membackup template kalian ya...agar jika ada kesalahan bisa kalian kembalikan lagi seperti semula.
4. centang kotak kecil "Expand Template Widget"
5. Lalu kalian cari kode seperti ini. <data:post.body/> Namun jika sobat sudah memasang script Read More, maka akan terdapat 2 kode <data:post.body/>. Maka kita pasang script Artikel Terkait atau Related Post di bawah <data:post.body/> yang ke 2 (lebih tepatnya di bawah tag </b:if>).
6. Jika sudah ketemu maka kalian taruh kode HTML di bawah ini tepat dibawah kode <data:post.body/></b:if> tadi.

<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid
#ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

7. Selanjutnya kalian cari lagi kode ini. ]]></b:skin>
8. Lalu kalian simpan lagi script dibawah ini tepat diatas kode ]]></b:skin>

. rbbox {border: 1px solid #D8D8D8; padding: 5px;
background-color: #E0F8E0;-moz-border-radius: 5px; margin: 5px;}
. rbbox: hover {background-color: #EFFBEF;}

Catatan:
Ganti kode-kode yang berwarna dengan kode warna yang sobat mau. Jika tidak tahu kode warnanya, silakan ke artikel Kumpulan kode-kode warna#D8D8D8: warna border
#E0F8E0: warna background
#EFFBEF: warna background juga, namun akan terlihat jika disorot dengan pointer

9. jika sudah selesai kalian simpan dengan mengklik tombol simpan template

Selamat mencoba...!!!

Cara membuat navigasi halaman

Hari ini saya akan mengajak teman-teman caranya membuat Navigasi halaman..

Ada yang tau navigasi halaman itu apa? Untuk memudahkan pengunjung blog atau web dalam melakukan pencarian artikel, selain menggunakan fasilitas searh engine, bisa juga dengan tombol navigasi halaman. Tombol navigasi halaman ini sebenarnya kurang lebih sama dengan tombol next atau previous pada blog sobat, namun bedanya navigasi halaman bisa membuat pengunjung ingat tempat suatu artikel pada halaman ke berapa pada blog kita. Karena navigasi halaman menampilkan nomor per halaman blog kita, seperti contoh pada halaman bawah search engine di google, terlihat tombol navigasi halaman untuk memudahkan pengunjung dalam pencarian keyword yang di maksud.

Oke kita langsung saja buat langkah-langkahnya...

Seperti biasa kita login dulu ke blogger
Lalu kalian menuju menu rancangan
Setelah itu pilih menu Edit HTML dan jangan lupa centang kotak "expand template widget"

Kemudian kalian cari kode berikut ini.

]]></b:skin>

Lalu kalian simpan kode di bawah ini di atas kode ]]></b:skin>.

/* ----- Page Navigation styles ----- */
.showpageNum a {
padding: 2px 5px;
margin:0 5px;
text-decoration: none;
border:1px solid #ccc;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #eee;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #ccc;
background: #ddd;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 2px 5px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}

Langkah selanjutnya adalah mencari kode berikut ini.

</body>

Kemudian kalian simpan kode di bawah ini tepat diatas kode </body>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://ahmad-rifai-tools.googlecode.com/files/pagenavi.js'
type='text/javascript'/>

Jika sudah kalian klik tombol simpan template, Selesai deh...mudah kan..!!

Selamat mencoba...

Cara mengganti icon blogger

Tahukah kalian bahwa icon blog khususnya blogger dapat kita ganti, icon itu sendiri adalah sebuah gambar dimana nantinya dapat muncul di address bar. nah icon tersebut bisa kita ganti dengan gambar lain atau bisa juga dengan buatan kita sendiri.

Kali ini saya akan membahas bagaimana caranya mengganti icon blogger dengan gambar icon kita dengan cara sebagai berikut..:

Oke pertama-tama kita siapkan dulu gambar yang akan kita jadikan icon di blog kita dengan ukurannya 24x24 sampai 32x32 pixel caranya dengan memperkecil ukuran gambar tersebut dengan menggunakan photoshop atau juga dengan software pengolah gambar lainnya...
- Bila sudah kalian siapkan upload gambar icon tersebut ke www.photobucket.com untuk mengambil url gambar tersebut.
- terus apabila kalian sudah menyiapkan/mengkopi url gambar tersebut selanjutnya kalian masuk ke akun blogger kalian.
- selanjutnya kalian pilih rancangan seperti gambar di bawah ini.

- Terus kalian pilih edit HTML dan jangan lupa centang kotak kecil : expand template widget

- Lalu kalian cari kode html seperti ini </head> untuk mempermudah gunakan CTRL+F
- Bila sudah ketemu simpan script dibawah ini tepat diatas kode </head>

<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

-Selanjutnya kalian isi kalimat yang saya beri warna merah tersebut dengan url gambar yang kalian dapat.
contoh url gambar tersebut : <link href='http://i1234.photobucket.com/albums/ff418/helmyborneo/jghfjuhg.jpg' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

-Bila sudah kalian klik simpan template

Selesai......

cara memasang emoticon kaskus di blogger

Wah....Pasti seru kalo pesan kita dipasangin emoticon-emoticon yang lucu dan ngegemesin iya gak..? karena dengan emoticon ini kita bisa mengekpresikan keluh kesah hati kita, bila lagi senang kita bisa pasang emoticon yang lagi ceria atau sebaliknya bila kita lagi marah kita bisa pasang emoticon yang lagi marah pula.

Nah...kali ini saya akan mengajak sobat sekalian bagaimana cara memasang emoticon kaskus ini pada kotak komentar blog sobat.

Read More No comments

Baca Kelanjutannya »

30 Nov 2011

Cara membuat tombol like facebook di bawah postingan

Ngomongin soal tombol like ( suka ) Facebook, banyak para blogger yang memasang tombol seperti ini...Kenapa? karena tombol like facebook ini di gunakan untuk menilai blog kita atau postingan kita sampai mana para pengunjung menyukai blog kita ataupun postingan yang kita buat.

Dikesempatan kali ini saya akan memberitahukan bagaimana caranya memasang tombol like facebook ini dibawah artikel/Postingan blog kita..

Read More 1 comment

Baca Kelanjutannya »

Pages

Blogger news

New Post

Rss

Cara membuat buku tamu dengan Cbox

Membuat efek gambar bergetar

Memasang alert message untuk menyapa pengunjung

Cara memasang rating bintang pada post

Membuat Efek Lebel Nudging

Cara membuat Label cloud berputar

Cara membuat kotak komentar ala wordpress di blogger

Cara membuat efek gelembung berjatuhan

Cara membuat efek zoom pada gambar

Cara Membuat Widget Sms Gratis

Cara Mudah mengganti cursor blog

Cara membuat Link Berkedip ala Pelangi

Cara Memasang Widget Pengunjung Yang Sedang Online

Cara Memasang Burung Twitter Terbang di blog

Cara Membuat Script/Kode Tukar Link Di Blogger

Cara membuat artikel terkait dengan scroll

Cara membuat navigasi halaman

Cara mengganti icon blogger

cara memasang emoticon kaskus di blogger

Cara membuat tombol like facebook di bawah postingan