Tips Blog : Cara membuat chat box di blog

Garuda Mania - kali ini saya akan membagi tips chat diblog, mau tahu caranya? tips ini saya dapat dari cari-cari di internet, dan sudah saya catumkan alamat sumbernya biar gax di bil COPAS nah tanpa basa-basi lagi ni dia caranya :

Untuk membuatnya cukup mudah silahkan ikuti panduannya di bawah ini Cara membuat chat box di blog dengan aplikasi Cbox :

1. Silahkan kunjungi  http://www.cbox.ws dilanjutkan klik ‘Sign Up’ Lihat contoh gambar di bawah ini :

2. Get Your own Cbox  - Pada aplikasi sign up silahkan isi lengkap : Cbox name – Isi sesuai selera anda tanpa spasi, Email address – Isi dengan alamat email anda,Password – Buat password anda, Confirm password – Masukkan ulang password anda, Website - Isi dengan alamat web atau blog anda, Language - Pilih bahasa aplikasi pada menu drop down, Style - Anda bisa merubah tampilan aplikasi sesuai selera anda. Setelah selesai diisi klik ‘Create my Cbox!’ Lihat contoh gambar isian aplikasi di bawah ini :

3. Jika sukses ada ucapan  dalam bahasa inggris yang artinya mungkin seperti ini :

“Cbox telah dibuat!
Cbox Anda tipstriks  berhasil dibuat.
Anda sekarang dapat log in ke panel kontrol Cbox untuk mendapatkan kode AndaLog in  di bagian atas halaman ini. Sebuah salinan rincian account Anda telah dikirim melalui email ke tipstriks@ gmail.com Periksa email Anda, jika Anda tidak dapat menemukannya, periksa folder spam Anda”. 

4. Silahkan cek inbox email anda kemudian klik link yang ditunjukan Cbox admin yang akan menuju halaman Cbox dan silahkan login masukkan Cbox name dan password anda dan klik tanda panah di sampingnya. Lihat contoh gambar Cbox login di bawah ini :

Lihat contoh inbox email di bawah ini :

5. Setelah login pada control panel Cbox anda silahkan copy dan paste di blog anda  kode html yang sudah disiapkan untuk anda. Selesai.  Lihat gambar kode html di bawah ini :

Cara menempatkan aplikasi Cbox di blogspot silahkan login ke blogger ►Dasbor/Dashboard ► Rancangan/Lay Out ►Tambah Gadget/Add Gadget ►Pilih Gadget HTML ► Paste 

Dengan tips dan triks Cara membuat chat box di blog dengan aplikasi Cbox, semoga bisa membantu anda.


selamat mencoba dan sukses selalu

jangan lupa LIKE THIS YOO...

Sumber : http://tanyajawabsemua.blogspot.com/2012/04/cara-membuat-chat-box-di-blogger.html#ixzz2AwyjUlSG

Read More

Tips Blog : Cara Memasang Widget Update Status Twitter Pada Blog

Garuda Mania - Hallo sobat garuda mania, Pada kesempatan ini saya akan menshared tips blog lainnya. tips ini saya dapatkan dari sesama blogger jadi kalo ada yang merasa tersinggung karena tipsnya sama/copas, admid minta maaf.. Sobat blogger,Pernah melihat blog yang memiliki widget update status / tweet twitter di bagian sidebarnya? Jika pernah mungkin anda akan mulai bertanya-tanya, 'bagaimana sih cara memasang widget ini di blog kita?'. Googling kesana-kemari tidak ketemu dan hampir menyerah, itulah yang saya alami (mungkin juga anda).

Memang, ada banya situs yang memberikan tutorial ini. Namun widget yang diberikan pada situs itu memiliki kelemahan, yaitu tidak bisa menampilkan retweet atau mention dari orang lain. Selain itu, keistimewaan widget ini kita tidak perlu mendaftar dulu ke situs khusus, artinya kita hanya tinggal mengubah sedikit kode yang saya berikan saja. Sudah tidak sabar ingin memasang widget spesial ini? Berikut adalah ulasannya.

• Pertama, masuk ke dalam akun blogger anda.
• Setelah itu klik menu 'Tata Letak' atau 'Layout'.
• Kemudian klik menu 'Tambah Gadget'.
• Pilih HTML/JavaScript.
• Pastekan kode berikut di dalamnya.

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

  version: 2,

  type: 'search',

  search: '@kupastuntasCOM',

  interval: 6000,

  title: 'Follow This Site on Twitter',

  subject: '@kupastuntasCOM',

  width: 'auto',

  height: 200,

  theme: {

    shell: {

      background: '#404040',

      color: '#ffffff'

    },

    tweets: {

      background: '#ffffff',

      color: '#444444',

      links: '#b31919'

    }

  },

  features: {

    scrollbar: false,

    loop: true,

    live: true,

    hashtags: true,

    timestamp: true,

    avatars: true,

    toptweets: true,

    behavior: 'default'

  }

}).render().start();

</script>

• Perhatikan tulisan yang berwarna biru dan dicetak tebal.
• Ubahkan tulisan itu dengan alamat twitter akun blog anda. Contoh: @namabloganda.
• Kemudian klik simpan atau save. Dan selesai!

Read More

Tips Blog: Cara Membuat Tulisa/Link Bekedip

Cara Membuat Tulisa/Link Bekedip

Garuda Mania - Selamat Sore, Pada sore Ini saya akan coba meshared salah satu trik untuk mempercantik blog anda. Blogging memang adalah sebuah hoby yang mengharuskan penghobinya terus belajar dan belajar. Dengan belajar tanpa putus asa walau banyak menuai gagal itulah mungkin salah satu resep dimana blog yang dikelolanya supaya menuai sukses. Salah satu yang ingin seorang blogger belajari pastinya adalah Cara Membuat Tulisan | Kata | Link Berkedip di Blog / Posting Blog Dengan Mudah. Walau ini sepertinya hal yang sangat sepele tentunya harus dipelajari juga agar kita benar-benar mahir dalam teknik HTML.

Cara membuat tulisan berkedip inipun tidaklah sulit, anda tinggal menambahkan kode <blink>..</blink> saja pada tulisan / link yang ingin diedit. Contoh: misalnya anda ingin mengedipkan tulisan Pasang Iklan, maka anda tinggal menulisnya seperti ini: <blink>Pasang Iklan</blink> di HTMLnya. Lihatlah tulisan yang ditebalkan itu, sudah paham? Jika anda sudah selesai maka hasilnya akan seperti ini Pasang Iklan.

JANGAN LUPA LIKE THIS PAGE

Read More

Cara Memasang Widget FansPage Facebook tersembunyi di samping kanan Blog

Garuda mania - Selamat Sore. Pada kesempatan ini saya akan share bagaimana cara membuat/memasang widget FansPage Facebook tersembunyi di samping kanan blog. Widget merupakan salah satu tool untuk mempercantik blog anda. Hal ini patut anda lakukan jika blog anda sudah banyak memuat widget-widget dan anda pun sudah tidak tahu lagi ingin memasang/menaruh widget FansPage Facebook ini. Widget ini tidak cuma untuk memasang Like FansPage Facebook tersembunyi saja, tetapi juga bisa sebagai penghias blog anda.

LANGKAH PERTAMA:

• Silahkan kalian Login atau Masuk ke akun Blogger terlebih dahulu.
• Setelah anda berada di dasbor blogger klik More Options atau opsi lainnya.
• Pilih menu Template.
• Kemudian klik Proceed atau Lanjutkan.
• Sebagai jaga-jaga anda Backup dulu Template blognya, jadi kalau ada kesalahan tinggal di download lagi template yang udah di Backup.
• Kemudian centang Expand Template Widget.
• Terus cari kode </head> agar memudahkan pencarian anda tinggal tekan CTRL + F
• Copykan kode berikut di atas kode </head> tadi.

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

• Setelah itu klik Save atau Simpan.

LANGKAH KEDUA:

• Pilih menu Layout atau Tata Letak.
• Setelah itu klik Add a Gadget atau Tambah Gadget.
• Kemudian pilih elemen HTML/JavaScript.
• Masukkan kode berikut.

<script type="text/javascript">

//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=LETAKKAN URL PAGE ANDA DI SINI&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://zootodays.blogspot.com/2012/04/cara-memasang-widget-like-fanspage.html">Click this</a></span></div></div>

• Sebelum di Save atau Simpan anda harus mengganti kata "LETAKKAN URL PAGE ANDA DI SINI" dengan URL halaman atau FansPage anda. Jika masih bingung apa itu URL anda dapat melihatnya seperti di gambar berikut.
  
• Terakhir Klik Save atau Simpan.
• Selesai.

Read More

Cara membuat Auto Read More pada Blog

Hallo sobat bloger semua pada siang ini saya akan membagi tips tentang  Cara membuat Read More di blog. nah tanpa basa-basi lagi langsung aja lihat cara di bawah ini... heheheh



Cara membuatnya sob :

1. Log in di Blogger.com
2. pilih Edit HTML, click Expand Widget Templates
3. carilah kode </head> dan copy kode di bawah ini letakkan sebelum kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Rifaldhi
visit http://www.rifaldhi.co.cc
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

4. cari kode <data:post.body/> atau <p><data:post.body/></p>, ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><br/><b>Read More … </b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. SAVE

Read More

Cara Mengganti Kursor Blogger - Modifikasi Cursor Blogspot.

Kali ini kita akan membahas tentang cara mengubah tampilan kursor yang ada di blog kita. Jika sobat masih penasaran dengan yang dimaksud mengubah kursur, maka silahkan untuk memperhatikan kursor blog ini terlebih dahulu. Bagaimana? Menarik bukan....?

Nah, di atas itu adalah tampilan kursor blog ini. Bagi sobat yang ingin mengubah kursor yang ada di blog sobat, maka sobat bisa mengubahnya melalui langkah-langkah berikut:

1. login lah ke akun blogger sobat terlebih dahulu
2. Lalu klik "Layout"

3. Pilih "add a gadget" lalu pilih "HTML/Java Script" dan paste-kan kode berikut untuk mulai mengubah tampilan kursor yang ada di blog sobat:

a. Kode 1: mengubah kursor tapi tidak mengubah kursor ketika menyorot link

<style type="text/css">
body{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidVBsPY_iEBPTV9ohiophg-Cv4GiK09s5obVcIErLTqFUOWgiXv8hcp3bD_XFrEMsRS1c4KiLO1MoPqi_v-Sppnk8biaE4WbUOYOyMy0Hq78KGeVUuLNSyAj-nVXk-2k6qHvzs8exUWVgU/"), auto;}
</style>

b. Kode 2: mengubah kursor serta tetap berubah walau disorot ke arah link

<style type="text/css">
body{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidVBsPY_iEBPTV9ohiophg-Cv4GiK09s5obVcIErLTqFUOWgiXv8hcp3bD_XFrEMsRS1c4KiLO1MoPqi_v-Sppnk8biaE4WbUOYOyMy0Hq78KGeVUuLNSyAj-nVXk-2k6qHvzs8exUWVgU/"), auto;}
body a:hover{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidVBsPY_iEBPTV9ohiophg-Cv4GiK09s5obVcIErLTqFUOWgiXv8hcp3bD_XFrEMsRS1c4KiLO1MoPqi_v-Sppnk8biaE4WbUOYOyMy0Hq78KGeVUuLNSyAj-nVXk-2k6qHvzs8exUWVgU/"), auto;}
</style>

SILAHKAN UNTUK MEMILIH SALAH SATU KODE YANG SOBAT INGINKAN

4. Jika sudah, maka silahkan untuk tekan tombol "SAVE" atau "SIMPAN"


PENTING:

Sobat bisa mengganti link gambar yang telah saya tandai warna biru dengan link gambar kursor sesuai keinginan sobat. Berikut adalah beberapa link gambar kursor koleksi saya:

---

Link:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI5I06PHpe_H0lfWCkXhTcLxGuzwrTjlLW3o6NiZZPid2ZJpiQbzi-OMb35xE9qWdp1UmBLnDdGxicyn-PU0OmBebP35JNWbtEmMtIu020s_C1syJCAbudnnO9VQKH8KG7kJ2aBKY2tj8/s400/bat_banana_t4belajarblogger.png

---

Read More

Mengganti "Older Posts" Dengan Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini


1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

Kalau sudah silahkan dilihat hasilnya.

Read More

Cara Mudah Membuat Menu Horizontal Di Blog

halo sobat bloger, pada kesempatan ini saya akan berbagi sedikit tips n triks tentang membuat menu pada blog anda.. nah tanpa panjang lebar lagi ini baca artikel dibawah ini.
^_^

" Cara Mudah Membuat Menu Horizontal Di Blog "

Silahkan Ikuti Langkah-langkah berikut :

1. Silahkan login akun Blog anda.

2. Pilih menu Rancangan dan Pilih Elemen Laman
3. Setelah itu pilih Tambah Gadget 
4. Kemudian Tambahkan HTML/JavaScript

5. Dan Copy dan kode di bawah ini :

<ul class='glossymenu'> <li class='current'><a href='http://wizyulover-princes.blogspot.com/'>Home</a></li>
<li><a href='url-link-tujuan1'>JUDUL 1</a></li>
<li><a href='url-link-tujuan2'>JUDUL 2</a></li>
<li><a href='url-link-tujuan3'>JUDUL 3</a></li>
<li><a href='url-link-tujuan4'>JUDUL 4</a></li>
<li><a href='url-link-tujuan5'>JUDUL 5</a></li>
<li><a href='url-link-tujuan6'>JUDUL 6</a></li>
<li><a href='url-link-tujuan7'>JUDUL 7</a></li>
<li><a href='url-link-tujuan8'>JUDUL 8</a></li>
</ul>

6. Setelah Di Copy, Silahkan Ganti Tulisan Berwarna Merah Dengan " URL BLOG " anda.
7. Ganti Tulisan Berwarna Kuning Dengan Judul Yang Anda Inginkan
8. Kemudian Ganti Tulisan Berwarna Biru Dengan " URL Postingan ", Sesuai Judul Menu.
9. Setelah Itu Simpan Kemudian Lihat Hasilnya.

Sumber :  http://wizyuloverz.blogspot.com/2012/02/cara-mudah-membuat-menu-horizontal-di.html

Read More

Bagaimana Cara Membuat Menu Pull Up Dan Pull Down Di Blogspot

 

Nah kita di pertemukan lagi nih untuk membahas beberapa cara di dalam tutorial blogspot, nah untuk masalah kali ini kita akan membahas tips sederhana yang lagi netren di dunia bloger yaitu Cara MEmbuat Menu Pull Up Dan Pull Down Di Blogspot,nah tanpa banyak bicara kita langsung saja ke Tutorial yang akan kita bahas

Yang sobat wajib lakukan adalah Login Ke Blogger setelah itu masuk Ke Dashbord lalu Ke Perancangan lalu jangan lupa masuk ke Edit Html, jangan lupa Centang Expant Template Widget

Kemudian Cari Kode ]]></b:skin> lalu Letakkan Kode Berikut Ini Di atas Kode tersebut

#mangetsu {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#mangetsu a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mangetsu img
{
border:0;
}
#mangetsu a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

Nah sekarang cari kode </body> Dan Letak Kode Dibawah Ini Tepat Diatasnya :

<a name='Ilham-bottom'></a>

 Langkah Terakhir Tinggal Memasukan Kode Dibawah  Ini Tepat Dibawah Kode <body>

 <div id='mangetsu'>
<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8pis5bl0uGtHQtVFpPcWL1M4W5CoYmZApzhlktJa4VLLsw09WqwHBaOtATVIvRwOWbSYfujQVufM3GW67BaYOgtH9AQxPzEjW5j2ajQGdfYF3w7m2d8lsFQnLp9HnJHV7_ipwMH2kvG4/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ7Sn7i5JMSEXGEBi3e2-oC2zxi3pL0IWnaW2Mp5fpcxfodYHknUMBl4EXokizzg5Cn-3-1wr9AoVZ1FDKwObMno7LBiue0xPHFDiOiYE6-_KZLM1E8eXXb6Sk4fBxUs4VzIHo7sbV9GU/s320/pre-icon1.png'/></a></td>
<td><a href='#ilham-botto' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRYmZZ-HoSEwIhvDx8pk_sqNc4K79bxIAM8IXETX2HX2Im_ecRh8ICTzN8ncs0aH-UjSVlVINx8aKoRW4Xs_qW45cH8H60xRLpPqLSQCKQ7OJdNH441kp7hzyPSFpOB5zK29NjNn4SgkU/s320/next-icon2.png'/></a></td>
</tr>
</table>
</div>
Nah Tinggal Di save saja kalau begitu,ets jangan lupa kalau mau berkreasi dengan gambar sendiri pada code terakhir yang saya garis tebali bisa di ganti URL sobat sendiri sesuai keinginan gambar yang sobat Inginkan sekian dulu tips dari saya  Bagaimana Cara Membuat Menu Pull Up Dan Pull Down Di Blogspot

Read More