Laman

Monday, 30 April 2012

Cara Memasang Kotak Komentar Facebook Di Blog


Sebelumnya Saya sudah pernah Posting tentang "Cara Menambahkan Kotak Komentar Menarik Di Blogger", dan kali ini Saya akan Posting tentang "Cara Memasang Kotak Komentar Facebook Di Blog". Mungkin Tips ini sudah banyak yang di Share oleh Sobat2 Blogger yang lainnya, tapi tidak ada salahnya-kan, kalau Saya Nge-Sharenya juga. OK, kita langsung ke langkah-langkahnya saja.

[1]. Pertama, pastinya LogIn dulu ke Blog Kalian.
[2]. Kemudian Dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Lanjut, Centang kotak "Expand Templte Widget".
[4]. Lalu cari Code di bawah.
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
[5]. Kalau sudah ketemu, sekarang Copy dan Paste-kan Code di bawah tepat di ATAS Code </b:includable>.  
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/>
<script src=' http://connect.facebook.net/en_US/all.js#appId=323420961010532&amp;xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='477'/>
</b:if>
Maka Keseluruhan Codenya Seperti Di Bawah.
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/>
<script src=' http://connect.facebook.net/en_US/all.js#appId=323420961010532&amp;xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='477'/>
</b:if>

</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
KETERANGAN :
* Tulisan yang berwarna Merah (477), adalah panjang Kotak Komentarnya, Kalian bisa menggantinya sesuai dengan kebutuhan Kalian.


[6]. Terakhir, tinggal di SAVE dan lihat hasilnya.

Sekian dulu Tips Blogger kali ini, semoga Tips ini bermanfaat buat Kalian.

Salam Blogger Indonesia.

Tuesday, 17 April 2012

Cara Membuat Judul Blog, Judul Postingan, dan Judul Widget Miring

Heloo sobat Blogger, sesuai dengan permintaan teman Saya, kali ini Saya akan memberikan Tips yaitu "Cara Membuat Judul Blog, Judul Postingan, dan Judul Widget Miring". Jadi kita akan membuat Judul Blog, Judul Postingan, dan Judul Widget menjadi miring-miring. Sebagai Demo, Kalian bisa lihat pada Blog Saya ini, Judul Blog, Judul Postingan, dan Judul Widget-nya kan miring, nah.. kita akan membuat yang seperti itu. OK, kita langsung ke langkah-langkahnya.

[1]. Pertama, Login dulu ke Blog Kalian.
[2]. Dari Dasbor, cari Rancangan --> Edit HTML.

A. Judul Blog Miring.

Cari Code /* Header. Selengkapnya kira-kira sperti di bawah.

/* Header
----------------------------------------------- */
.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font: $(description.font);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}

.header-inner .Header .titlewrapper {
  padding-top: $(header.padding.top);
}
* Setiap Template pasti Codenya berbeda-beda.

Kalau sudah ketemu, sekarang HAPUS Code di bawah Code Pertama. Kalau kurang jelas, HAPUS Code seperti di bawah.
.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font: $(description.font);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}

.header-inner .Header .titlewrapper {
  padding-top: $(header.padding.top);
}
Kalau sudah di HAPUS, sekarang Copy dan Paste-kan Code berikut tepat di bawah Code,
Code Yang Di Cari.
.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}
Code Yang Di Tambahkan.
 #header{float:center; width:490px; margin:0; text-align:center; color:#000000}

#header h1{font-family:'Molengo',Trebuchet MS,Serif; font-size:48px; font-weight:bold; margin:0; padding:10px; color:#000000; transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); line-height:1.0em}

#header h1:hover{transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg);}

#header a{color:#000000; text-decoration:none}

#header a:hover{color:#000000;}

#header .description{font-size:14px; font-family:'Molengo',Trebuchet MS,Serif; font-weight:bold; color:#efefe3; margin:0; padding:0 10px; text-transform:none}

#header img{margin:0 auto}

#header-center{width:480px; float:center; padding:0; margin-top:10px}
.center{padding-right:10px; margin:0}
Hingga Menjadi Seperti Di Bawah.
.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

#header{float:center; width:490px; margin:0; text-align:center; color:#000000}

#header h1{font-family:'Molengo',Trebuchet MS,Serif; font-size:48px; font-weight:bold; margin:0; padding:10px; color:#000000; transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); line-height:1.0em}

#header h1:hover{transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); -o-transform:rotate(3deg);}

#header a{color:#000000; text-decoration:none}

#header a:hover{color:#000000;}

#header .description{font-size:14px; font-family:'Molengo',Trebuchet MS,Serif; font-weight:bold; color:#efefe3; margin:0; padding:0 10px; text-transform:none}

#header img{margin:0 auto}

#header-center{width:480px; float:center; padding:0; margin-top:10px}
.center{padding-right:10px; margin:0}
Kalau sudah, terakhir tinggal di SAVE.

B. JUDUL POSTINGAN MIRING.

Cari Code ]]></b:skin>.
Kemudian Copy dan Paste-kan Code di bawah, tepat di ATAS Code tadi.
.post-title{ opacity: 0.7; background:transparent; border:1px solid #ccc;-moz-border-radius-topleft:15px; -moz-border-radius-bottomright:15px; font-family:'Molengo',Trebuchet MS,Serif; font-size:22px; margin-bottom:2px; padding:5px 10px 10px 10px; transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); line-height:1.2em}
.post-title:hover{transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);}
.post-title a, .post-title a:visited, .post-title strong{display:block; color:#ccc}
.post-title strong, .post-title a:hover{color:#fff}
KETERANGAN :
* Tulisan yang berwarna Biru, ganti dengan Warna yang Kalian inginkan. Code Warna HTML...? Klik di SINI.

Kalau sudah, sekarang SAVE.

C. JUDUL WIDGET MIRING.

Cari Code ]]></b:skin>.
Kemudian Copy dan Paste-kan Code di bawah, tepat di ATAS Code tadi.
.sidebar h2{background-color:transparent; border:1px solid #ccc; -moz-border-radius-topleft:15px; -moz-border-radius-bottomright:15px; margin-bottom:2px; padding:8px 10px 10px 10px; color:#FFA500; font-family:'Molengo',Trebuchet MS,Serif; font-size:20px; transform:rotate(-3deg); -moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -o-transform:rotate(-3deg); font-weight:bold}
.sidebar h2:hover{opacity:0.7;transform:rotate(-3deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg)}
KETERANGAN :
* Tulisan yang berwarna Biru, ganti dengan Warna yang Kalian inginkan. Code Warna HTML...? Klik di SINI.

Kalau sudah, sekarang SAVE.

Sekian dulu Tips kali ini, kalau ada pertanyaan, silahkan Kalian isi Kotak Komentar di bawah. Semoga Tips kali ini bermanfaat buat Kalian semua.

Salam Blogger Indonesia.

Friday, 13 April 2012

Cara Membuat Tombol Up Down Pada Blog


Sebelumnya Saya sudah pernah Posting tentang "Cara Membuat Double Klik untuk Back To Top (Kembali Ke Atas) Pada Blog", dan "Cara Menambahkan Gambar Back To Top (Kembali Ke Atas) Pada Blog". Tips kali ini agak berbeda dengan sebelumnya, karena Tips kali ini Kalian tidak perlu meng-Klik gambar, tapi tinggal taruh Kursor Mouse Kalian pada gambarnya, dan Secara otomatis akan bergerak Ke Atas maupu Ke Bawah. Bagaimana, Kalian tertarik...? jika tertarik, silahkan ikuti langkah-langkah di bawah.

[1]. Pertama, Login dulu ke Blog Kalian.
[2]. Kedian dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Lalu cari Code </body>.
[4]. Kalau sudah ketemu, Copy dan Paste-kan Code di bawah ini, tepat di ATAS Code </body>.
<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
src="https://sites.google.com/site/rakasajmk/download-1/download-3/Up.png" border="0" /></a><br />
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
src="https://sites.google.com/site/rakasajmk/download-1/download-3/Down.png" border="0" /></a>
</div>

<script type='text/javascript'>
//<![CDATA[

var Hoffset=60
var Voffset=60
var thespeed=10 //Kecepatan

var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}

function scrollwindow(){
window.scrollBy(0,myspeed)
}

function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)

//]]>
</script>
KETERANGAN :
* Tulisan yang berwarna Biru, ganti dengan URL Gambar Kalian.

* Dan tulisan yang berwarna Kuning, menunjukan kecepatannya. Semakin besar angkanya, semakin cepat pula gerakannya.

[5]. Terakhir tinggal di SAVE, dan lihat hasilnya.

Semoga bermanfaat..

Wednesday, 11 April 2012

Cara Membuat Link Otomatis Ketika Postingan Di CoPas

Copy Paste, hemm setiap orang pasti suka MengCopy Paste-kan Postingan kita, dan sering kali mereka tidak menyertakan Sumbernya atau Link Blog yang di CoPas. Oleh sebab itu, Saya membuat Postingan ini buat para Blogger yang merasa Postingannya di CoPas tapi tidak di sertakan Sumbernya. OK, berikut langkah-langkahnya.

[1]. Pertama, pastinya Login dulu ke Blog Kalian.
[2]. Kemudian dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Lalu cari Code <head>.
[4]. Setelah ketemu, Copy dan Paste-kan Code di bawah ini, tepat di BAWAH Code tadi.
<script type='text/javascript'>
if(document.location.protocol==&#39;http:&#39;){
var Tynt=Tynt||[];Tynt.push(&#39;cJE4D4kSKr4yYsacwqm_6l&#39;);Tynt.i={&quot;ap&quot;:&quot;Baca Selengkapnya Di :&quot;};
(function(){var s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;http://jmk-js.googlecode.com/files/Link%20CoPas.js&#39;;var h=document.getElementsByTagName(&#39;script&#39;)[0];h.parentNode.insertBefore(s,h);})();
}
</script>
KETERANGAN :
* Tulisan yang berwarna Biru, ganti dengan kata-kata yang Kalian inginkan.

[5]. Kemudian Simpan Perubahan.

Sekarang, Coba Copy Paste Postingan Kalian untuk memastikan apakah cara ini berhasil atau tidak.

Semoga Bermanfaat.

Wednesday, 4 April 2012

Cara Membuat Variasi Blockquote Pada Blog

Blockquote, adalah sebuah tag HTML, dan biasanya digunakan untuk menampilkan Quote (Kutipan) pada Blog. Setiap Template pasti mempunyai Blockquote-nya masing-masing. Tapi kadang kala kita bosan melihat Blockquote yang itu-itu saja, dan kita ingin memberi sentuhan sedikit untuk mempercantiknya. Jika Kalian merasa tertarik, silahkan ikuti langkah-langkah di bawah.

[1]. Pertama, pastinya Login dulu ke Blog Kalian masing-masing.
[2]. Kemudian, dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Lalu cari Code ]]></b:skin>. [Tekan CTRL + F atau F3 untuk mempermudah pencarian].
[4]. Kalau sudah ketemu, Pilih salah satu Blockquote di bawah, dan CoPas Codenya tepat di ATAS Code ]]></b:skin>.

SATU.

.post blockquote{ overflow:auto; height:220px; background-position:-10px -7px; border: 1px dashed #ccc; margin: 10px; padding: 10px; background:#666 url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif); text-align: justify; line-height:1.4em; opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #F70000}
.post blockquote:hover{color:#fff; font-size:15px; background:#666 url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif); opacity:0.9; filter:alpha(opacity=40); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}
KETERANGAN :
* Tulisan yang berwarna Biru, bisa Kalian ganti dengan URL gambar Kalian. Usahakan gambarnya yang berukuran kecil.
* Kalian juga bisa mengeditnya sesuai dengan kreasi Kalian sendiri.

DUA.

.post blockquote {background:#CCFFFF;
background-image: url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif); background-repeat: no-repeat;padding: 30px;
border: 2px #000000 dashed;overflow:auto;max-height:150px;}
.post blockquote:hover {
background-image: url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif); background-repeat: no-repeat;}
KETERANGAN :
* Tulisan yang berwarna Biru, bisa Kalian ganti dengan URL gambar Kalian. Usahakan gambarnya yang berukuran kecil.

* Sedangkan tulisan yang berwarna Merah, ganti dengan Warna Background yang Kalian suka. [Jika Kalian ingin membuat Background-nya Transparan, tinggal ganti dengan tulisan "transparent" tanpa tanda petik].

* Dan tulisan yang berwarna Kuning, ganti dengan warna Garis Pinggir yang Kalian suka. Jika Kalian bingung mencari Code Warna HTML, Klik saja di SINI.

[5]. Terakhir tinggal di SAVE, dan lihat hasilnya.

Semoga Tips Kali Ini Bermanfaat Buat Kalian, dan Jangan Lupa Tinggalkan Komentar Kalian Ya. Salam Blogger Indonesia.