Cara Membuat chat seperti facebook di blog

Kali ini saya akan share Cara Membuat chat seperti facebook di blog, ok langsung aja. Cekidot..

1. Pergi ke situs Envolve Chat. Klik disini
2. Sign Up.
3. Pertama isikan URL blog sobat, Nama, Email dan Password.
4. Terakhir, pilih site yg ingin dipasang chat. Kalau Blogger.com pilih Other.
5. Kemudian copy kode yg didapat ke html/javascript.

Ok, sekian tutorialnya. Contoh Chat bisa dilihat di bawah blog ini. Thanks Read more

Cara Membuat Ads Banner 125x125 Keren

Hay sob kali ini saya akan share Cara Membuat Banner 125x125 Keren seperti yang ada di Blog Blogger Indonesia. Langsung ikuti stepsnya: 

ScreenShot:

1. Buka Blog Sobat,
2. Pilih Template,
3. Pilih edit Template,
4. Lalu Ctrl+f cari kode ]]></b:skin>,
5. Setelah itu masukkan kode dibawah ini tepat di atas kode ]]></b:skin>,

#MAHJ125 img {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

border: 1px solid #0000FF;

margin: 0px 0px;

text-align: center;

padding: 0px;

margin-left: 0px;

-webkit-transition: all 0.5s ease-out;

-moz-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

}

#MAHJ125 img:hover {

border-radius:1px;

border:1px solid #0000FF;

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: grayscale(0%);

-moz-transform:rotate(715deg);

-webkit-transform:rotate(715deg);

-o-transform:rotate(715deg);

}

5. Lalu letakkan script berikut di tempat sobat mau pasang,

<div id='MAHJkotakbesar1'/><div id='MAHJ125'>

<a href="http://goo.gl/mxGyCL" target="_blank" title="MaenCit | By Way Of Life"><img src="http://goo.gl/ikDMCW" alt="MaenCit | By Way Of Life" /></a>

<a href="http://goo.gl/mxGyCL" target="_blank" title="MaenCit | By Way Of Life"><img src="http://goo.gl/ikDMCW" alt="MaenCit | By Way Of Life" /></a>

<a href="http://goo.gl/mxGyCL" target="_blank" title="MaenCit | By Way Of Life"><img src="http://goo.gl/ikDMCW" alt="MaenCit | By Way Of Life" /></a>

<a href="http://goo.gl/mxGyCL" target="_blank" title="MaenCit | By Way Of Life"><img src="http://goo.gl/ikDMCW" alt="MaenCit | By Way Of Life" /></a>

</div></div>

NB: Tulisan yang berwarna hijau silahkan sobat ubah sendiri itu url banner sobat dan nama banner sobat.

Sekian Tutorial Ini , , Semoga Bermanfaat!!!

Sumber : Blogger Indonesia & Maen-Cit

Read more

Cara Membuat Loading Animasi V2

Kali ini saya akan memberikan tutorial cara membuat animasi Loading di blog. Tutorial ini saya dapatkan di Arsyie Kaze, kalau menurut blog Om-Dayz "Animasi loading blog bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat". Daripada bingung mending langsung saja ke caranya.. :)

Pasang CSS Animasi Loading
Taruh kode CSS berikut di atas kode ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;
border: 5px solid #00a3ff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px #00a3ff;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;
border: 5px solid #00a3ff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #00a3ff;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

Pasang JQuery Terbaru
pasang script jquery 1.7.2 tepat di atas tag </head> atau kalau ada JQuery terbaru, silahkan pasang yang terbaru.

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

Pasang Script Loading Animasi
Letakkan kode berikut tepat di atas tag </body>

<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = &quot;http://&quot; + top.location.host.toString();
    var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;]&quot;);
    $internalLinks.click(function() {
        $(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=&#39;_blank&#39;
    $(&#39;#loadhalaman&#39;).click(function() {
        $(this).hide();
    });
});
</script>

Keterangan :

untuk yang ingin menyesuaikan warna loading nya dengan warna lain,bisa mengganti warna nya, lihat kode CSS loading halaman yang paling atas tadi dan ganti kode warna yang ditulis dengan warna biru muda dengan kode warna yang diinginkan.

• Jika ingin memilih kode warna bisa dilihat disini

Sekian Tutorial saya tentang Cara Membuat Animasi Loading Di Blog, Dan jangan lupa tinggalkan jejak.

Sumber : http://arsyiegakure.blogspot.com/2013/07/cara-membuat-loading-animasi-v2.html

Read more

Membuat komentar Buka/Tutup

Bagaimana cara membuat tombol buka tutup pada komentar blog? Fungsi dari tombol ini adalah agar komentar blog Anda tidak memanjang kebawah jika terlalu banyak komentar pada posting blog sehingga terkesan lebih rapi.Anda sedang mencari dan ingin membuat tombol buka tutup pada komentar blog? Berikut simak dan ikuti langkah-langkahnya :

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > letakkan kursor pada area kode HTML.
3. Cari kode ]]></b:skin> dengan menggunakan Ctrl + F.
4. Letakkan kode berikut tepat diatas ]]></b:skin> 

a.openpanel {display:block;width: 100% ;height: 30px ;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background: #9E9E9E ;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;}
a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;}
a.openpanel.active {background-color:#;}
a.openpanel.active em {top:6px;border color:transparent transparent white transparent;}
div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}
div.openclosePanel {padding:10px 20px 20px;margin:0px 0px !important;}

5. Cari kode </head> kemudian letakkan kode berikut diatas </head> 

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

<script type='text/javascript'> //<![CDATA[
var panelSelector = '#comments',
openPanelText = "Poskan Komentar",
closePanelText = "Tutup Komentar", 
slideDownPanelSpeed = 600;
slideUpPanelSpeed = 400;
//]]>
</script>
<script src=' http://id-pemula-javascript.googlecode.com/files/openclosepanel.js '/>

Keterangan :
Hapus kode yang berwarna biru diatas jika pada template Anda sudah terpasang kode tersebut.
6. Klik Pratinjau template untuk melihat hasilnya, jika terjadi error.
7. Kemudian Simpan template.
Dan Jadi'a Seperti Gambar Di Bawah Ini..

Sebelum Di Buka!



Setelah Di Buka!


Nah, sekarang komentar pada posting blog Anda lebih rapi dan tidak lagi memanjang kebawah. Semoga bermanfaat bagi kita semua.

Sumber http://cyber-che4t.blogspot.com/2013/09/cara-membuat-buka-tutup-pada-komentar.html?showComment=1380610943472#c4440974122295040280 Read more

Cara Menampilkan Widget Hanya di Homepage

Saat mengatur beberapa widget agar lebih rapih dan teratur sering sekali kita lakukan.Halaman Homepage dan Posting adalah dua buah tempat untuk menampilkan dan menyembunyikan salah satu widget yang dianggap terlalu banyak dan membuat sulit untuk dilihat. Lalu, cara yang paling baik untuk melakukan design terhadap widget atau gadget pada blog kita adalah dengan cara widget tersebut kita tampilkan hanya pada suatu halaman tertentu.

Untuk menampilkan dan menyembunyikan beberapa widget caranya cukup mudah. Jadi, ada beberapa widget yang kita tampilkan hanya pada halaman posting tetapi tidak ingin terlihat pada halaman Home. Berikut panduan cara merubahnya :

1. Carilah widget apa yang ingin kita sembunyikan. Elemen Widget atau Gadget yang sudah ada pada template seperti Blog Archive, Popular Post dan lainnya mungkin untuk beberapa template tidak dapat disembunyikan.

2. Masuklah ke Template - Edit HTML - Ceklis Expand Widget Template.
3. Tekan CTRL + F, Untuk mencari nama widget tersebut.
4. Ketikkan nama widget yang ingin kita sembunyikan, contoh : Buku Tamu. Atau bisa juga dengan mencari ID Widget tersebut. Contoh : HTML1, HTML12, dll.
5. Setelah berhasil ditemukan, amati script berikut ini :

 <b:widget id='HTML11' locked='false' title='' type='HTML'><b:includable id='main'>  <!-- only display title if it's non-empty -->  <b:if cond='data:title != &quot;&quot;'>    <h2 class='title'><data:title/></h2>  </b:if>  <div class='widget-content'>    <data:content/>  </div>  <b:include name='quickedit'/></b:includable></b:widget>

A. Untuk Menamilkan Widget hanya dihalaman utama / Homepage :
Tambahkan dan sisipkan kode HTML berikut pada script diatas :
<b:if cond='data:blog.url == data:blog.homepageUrl'>

</b:if>
Contoh cara menyisipkannya adalah sebagai berikut :

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Warna kode merah adalah kode yang ditambahkan tadi, letakkanlah seperti contoh diatas.

B. Untuk Menampilkan Widget atau Gadget hanya di halaman Posting Artikel :
<b:if cond='data:blog.pageType == "item"'>

</b:if> ( Cara menyisipkannya sama seperti contoh diatas )

C. Untuk Menampilkan Widget hanya pada Halaman Tertentu ( Berdasarkan URL ) :
<b:if cond='data:blog.url == "Ganti dengan URL Halaman di sini"'>

</b:if>

D. Cara Menampilkan Widget hanya pada halaman statis / Static Page :
<b:if cond='data:blog.pageType == "static_page"'>

</b:if>
E. Cara Menyembunyikan Widget Hanya pada suatu URL Halaman tertentu :
<b:if cond='data:blog.url != "URL Halaman"'>

</b:if>

 Semua Kode tadi adalah untuk menampilkan widget hanya pada halaman tertentu, bagaimana kalau hanya menyembunyikan widget/gadget di suatu halaman. Caranya adalah dengan mengubah tanda == menjadi != . Contoh : <b:if cond='data:blog.pageType != "item"'>

Setelah tag HTML tadi ditambahkan, Save template Anda dan lihat hasilnya. Semoga dapat bermanfaat untuk para blogger semua. Semua Widget yang kita tambahkan dengan HTML/Javascript dapat senantiasa kita sembunyikan dan tampilkan pada halaman Utama. 

Sumber : http://impoint.blogspot.com/2013/01/cara-menampilkan-widget-hanya-di.html#axzz2gRiCEuEZ Read more

Memasang Musik (Ringan) di Blog

Oke, kali ini saya akan mengshare sebuah tutorial tentang cara memasang widget lagu atau musik di blog. Kalian pasti sudah tahukan apa widget musik itu? Saya anggap semuanya sudah tahu. Contohnya kalian bisa mendengarkannya sewaktu membuka blog ini. Kalian akan mendengar sebuah lagu. Bagaimana cara memasangnya? Oke langsung saja, berikut ini adalah caranya :

• Pertama, upload lagu kalian dulu (Saya sarankan berformat Swf agar lancar) di Site Google.
• Jika sudah, kalian ambil link lagunya.
• Setelah itu buka dasboard blog kalian.
• Masuk ke Template, pilih Edit HTML.
• Masukkan kode di bawah ini tepat di atas kode </body> (Jika tidak ada, kalian cari yang mirip).

<div style='text-align: center;'><embed height='0' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='high' src='https://sites.google.com/site/deidararyujinki/home/Size%20Of%20the%20Moon%20%28Tsuki%20No%20Ookisa%29.swf?attredirects=0' type='application/x-shockwave-flash' width='0'/> </div>

• Terakhir tinggal disimpan. 

Keterangan :

Ganti kode yang berwarna KUNING dengan url/alamat lagu yang sudah kalian upload tadi.

Berikut ini adalah url lagu yang pernah saya pakai di blog ini, kalian bisa memakainya jika kalian mau.

1. Niwaka Ame Ni Mo Makezu (Opening 13 N.S) :

https://sites.google.com/site/deidararyujinki/home/Naruto_Shippuden_Opening_13_Full_-_Niwaka_Ame_Ni_Mo_Makezu_-_Nico_Touches_The_Walls.swf?attredirects=0

2. Lagu Bijuu :

https://sites.google.com/site/deidararyujinki/home/Lagu%20Bijuu.swf?attredirects=0

3. JKT 48 - Fortune Cookie :

https://sites.google.com/site/deidararyujinki/home/JKT48%20-%20Fortune%20Cookie%20in%20Love%20%28Fortune%20Cookie%20yang%20Mencinta%29.swf?attredirects=0

4. Ost. Bakegyamon - Mobius :

https://sites.google.com/site/bakarbakaba/Bakegyamon%20Opening%201%20-%20Mebius%20-%20YouTube%2000_00_00-00_01_30.swf?attredirects=0

5. Ost. Persona 4 - Key Plus Word :

https://sites.google.com/site/bakarbakaba/Hirata%20Shihoko%20feat.%20Kawamura%20Yumi%20-%20Key%20Plus%20Words.swf?attredirects=0

6.  Ost. Devil Survivor 2 T A - Take Your Way :

https://sites.google.com/site/bakarbakaba/Fourth.swf?attredirects=0

7. Ost. To Aru Kagaku No Railgun S - Sister's Noise :

https://sites.google.com/site/bakarbakaba/Five.swf?attredirects=0

8. Ost. Fate Zero - MEMORIA

https://sites.google.com/site/yondamusicneo/Fate%20Zero%20ED%20-%20MEMORIA.swf?attredirects=0

9. Ost. Accel World - Burst The Gravity

https://sites.google.com/site/yondamusicneo/Yondarkness.swf?attredirects=0 

Ya itulah ada lagu yang saya sediakan. Semua adalah Ost. serial Anime. Jika kalian ingin lagu lain, kalian bisa upload sendiri. Oke, sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas silakan tanyakan di komentar.

Sumber : http://accelerator-bunshin.blogspot.com/2013/08/cara-memasang-widget-musik-lagu-ringan.html Read more