English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Rabu, 27 Juni 2012

Cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger

Hallo Sobat !....
Kali Ini Saya akan Share Cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger..Mungkin sobat pernah lihat atau pernah berkunjung kesuatu blog dan sobat melihat kotak komentar facebook yang berdampingn dengan kotak komentar blogger...
kalau sobat belum pernah lihat,,coba scroll aja blog saya ini sampai ke bawah dan lihat kolom komentarnya....
ya itu lah hehehehehehe...
bagi sobat yang ingin membuat kotak komentar facebook berdampingan dengan kotak komentar blogger....
di bawah ini caranya :
1.    Seperti biasa Login Ke Akun Blogger anda.
2.    Pada Dasbor Pilih Rancangan Design Kemudian Pilih Edit HTML dan jangan lupa untuk mencentang kolom expand template widget.
3.    Copas kode berikut tepat dibawah kode <div class='comments' id='comments'> pada template anda.

Keterangan : apabila terdapat 2 kode <div class='comments' id='comments'> yg sama, silahkan anda pastekan ke kode yg kedua.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Masukan ID Fb anda disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
<style>.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}</style>

4 . Simpan Templatenya dan lihat hasilnya.

Semoga Berhasil Sobat !.....
Cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger 9out of 10 based on 10 ratings. 9 user reviews.

Selasa, 26 Juni 2012

Cara Buat Blog Menjadi Maintenance

Apa itu maintenance ? Maintenance adalah perbaikan sebuag web/blog sehingga tidak memungkinkan untuk di kunjungi ,nah jika Anda ingin memperbaiki Blog anda sebaiknya maintenance-kan blog anda dulu, Kalau tidak visitor / pengunjung akan mengira blog kita blog kumuh karena masih dalam perbaikan. Lalu bagimana Cara Buat Blog Menjadi Maintenance, ikuti langkah berikut :




1. login blog

2. buka rancangan >> edit HTML

3. taruh kode dibawah ini diatas kode ]]></b:skin>


html {
  height: 100%;
  background: url(http://www.freecomputermaintenance.com/wp-content/uploads/2011/09/Closed_for_Maintenance_JPG.jpg) no-repeat center 50%;
  margin: 0;
}
body {
  display: none;
}


4. Anda bisa mengganti tulisan yang berwarna merah dengan alamat gambar yang lain. Semoga bermanfaa...
Cara Buat Blog Menjadi Maintenance 9out of 10 based on 10 ratings. 9 user reviews.

Membuat Border Pada Widget Follower Atau Pengikut

Memberi border atau kotak pada widget Pengikut atau Follower dapat mempermanis penampilan widget tersebut. Berikut ini langkah-langkah membuat border pada widget Pengikut :

  1. Masuk ke akun Blogger Anda.
  2. Klik Rancangan > Edit HTML.
  3. Klik Download Template Lengkap untuk berjaga-jaga kalau nanti terjadi kesalahan dalam pengeditan.
  4. Cari kode ]]></b:skin> (Gunakan tombol Ctrl + F untuk mempercepat pencarian)
  5. Biasanya kode id untuk widget Pengikut adalah seperti di bawah ini.

    <b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'>

    Maka untuk memberi border pada widget Pengikut, silakan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

    #Followers1 .widget-content{
    height:auto;
    width:auto;
    border:1px solid #FF0000;
    }
  6. Klik tombol SIMPAN TEMPLATE.

Keterangan :
border:1px solid #FF0000; menunjukkan ketebalan garis tepi border sebesar 1 piksel. Bila Anda ingin garis yang lebih tebal lagi, silakan ganti angkanya dengan nilai yang lebih tinggi lagi. Sedangkan solid #FF0000 menunjukkan border bergaya solid, #FF0000 kode untuk warna merah. Silakan diganti kode warnanya untuk mengubah warna border.
Membuat Border Pada Widget Follower Atau Pengikut 9out of 10 based on 10 ratings. 9 user reviews.

Kumpulan aplikasi facebook seru

Kumpulan aplikasi facebook seru 9out of 10 based on 10 ratings. 9 user reviews.

Cara Membuat Tooltip Dengan jQuery

Kalian tahu apa itu tooltip, bagi yang belun tau disini saya akan menjelaskannya, kegunaan atau fungsinya...akan memberi kesan cantik pada blog, karena link2 yang ada pada blog kamu akan muncul seperti title yang bisa sangat mudah kamu atur, coba kamu arahkan mouse kamu pada blog ini, nah,itulah yang dinamakan tooltips. Sama Seperti Blog Saya Ini Ada Tooltipnya..
cara membuat tooltip


Gambar diatas menunjukkan adanya tooltips yang muncul saat pointer diarahkan ke link, lalu bagaimana cara membuat tooltip di blogger, ikuti tutorial blog singkat dibawah ini:



Login ke blogger kamu

Silahkan menuju pengaturan template

cadangkan dulu dengan mendownload template kamu untuk berjaga2 jika terjadi kesalahan dapat dengan mudah di pulihkan.

4.  Cari kode ]]></ b:skin> dan letakkan kode berikut tepat diatas kode ]]></ b:skin> 

 #easyTooltip {

padding: 5px;

border: 1px solid #008000;

color: #00cc00;

background: #004000;

}
5. Selanjutnya copy kode di bawah ini, dan letakkan di atas kode </ head> dan letakkan kode berikut diatas kode </ head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<!-- begin Tooltips -->

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;a.tooltip&quot;).easyTooltip();

});

</script>

<script type='text/javascript'>

//<![CDATA[

(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);

//]]>

</script>
6. Perhatikan kode di bawah ini, jika dalam template anda sudah terdapat kode tersebut maka tidak perlu diikut sertakan.



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


Simpan template kamu
Sekarang pada template blog kamu sudah dilengkapi dengan tooltip, untuk memanggil fungsi tooltips lihat kode dibawah ini:


<a class='tooltip' href='url link' title='pesan tooltip'>text link</a>


Nah, tambahkan yang berwarna merah tersebut pada link kamu, demikian cara membuat tooltip dengan jQuery di blogger, semoga bisa membantu kamu....bintang
Cara Membuat Tooltip Dengan jQuery 9out of 10 based on 10 ratings. 9 user reviews.

Cara Membuat Efek Blur Pada Text

Hallo Sobat Semua,,Kali ini saya akan share bagaimana Cara Membuat Efek Blur Pada Text..
Bagi kalian yang ingin mempercantik tulisan di blog dengan menggunakan efek blur,,maka lihatlah caranya di bawah ini :
Kalau Mau lihat demonya, silahkan Sentuh Tulisan Di bawah ini dengan mouse :


SOROT DI SINI GAN UNTUK DEMONYA

Gimana ?....Kalau Kalian Tertarik Silahkan Ikuti Tutorialnya di bawah :
1. Login Ke blog Sobat
2. Pergi Ke Rancangan
3. Pilih Edit HTMl (Jangan Lupa Centang Expand Template Widget)
4. Paste Kan Kode CSS Di bawah ini tepat di Atas ]]></b:skin>
CSSnya :
.edieblur {
  color:red;
}
.edieblur:hover {
  text-decoration:none;
  padding-left:0%;
color:transparent;
text-shadow:0px 0px 7px yellow;
}
 Cara Pemanggilannya :
Copy kode HTML Di bawah ini lalu pastekan terserah kalian mau di mana,,mau di postingan atau di widget blog kalian :
HTMLnya :
<div class='edieblur'>SOROT DI SINI GAN UNTUK DEMONYA</div>


Lebih Lanjut !!

untuk membuatnya link blur juga bisa sih..,cuma tambah code text-shadow:0p x0px 7px white; ini aja kok :D , jadi intinya yang membuat blur hanyalah code ini text-shadow:0px 0px 7px white; :D

Sekian tutor sederhana saya :D
Cara Membuat Efek Blur Pada Text 9out of 10 based on 10 ratings. 9 user reviews.

DONASI




Enter Amount here:
$







DONASI 9out of 10 based on 10 ratings. 9 user reviews.

Links Exchange

Links Exchange 9out of 10 based on 10 ratings. 9 user reviews.