Senin, 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.

Rabu, 18 April 2012

Cara Membuat Recent Comment Menarik Pada Blog


Recent Comment, Kalian pasti sudah tahu apa itu Recent Comment kan...? Recent Comment berfungsi untuk menampilkan Komentar terbaru pada Blog kita. Hal ini membantu kita untuk mengetahui Komentar terbaru yang ada di Blog kita, sehingga kita bisa membalas Komentar yang di berikan oleh Komentator tanpa harus LogIn ke Blogger atau membuka E-Mail kita untuk mengetahui Komentar terbaru di Blog kita. Nah kali ini Saya akan memberikan sentuhan CSS pada Recent Comment. OK, Langsung ke langkah-langkahnya.

[1]. Pertama, LogIn dulu ke Blog Kalian.
[2]. Kemudian, dari Dasbor, cari Tata Letak.
[3]. Kemudian Klik "Tambahkan Gadget".
[4]. Selanjutnya, Copy dan Paste-kan Code di bawah ini ke dalamnya.
<style type='text/css'>#info-JmK {z-index: 1000;background:-moz-linear-gradient(top, #1F2326, #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;width:400px;position: fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#info-JmK{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #info-JmK:hover{width:400px;opacity:1.0;margin-left:0;}.JmKinbox {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:transparent;color:#ffffff; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}.JmKinbox:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000000; -moz-opacity: 1.0; opacity: 0.8; -khtml-opacity: 0.0; -moz-border-radius-bottomleft:30px; -moz-border-radius-bottomright:30px;}.JmKinbox2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:450px;}.JmK15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.JmK2 ul.bom {margin: 0; padding: 0;}.JmKinbox2 li {margin-left:20px;}.JmKinbox2 li a {color: #FFFFF; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.JmKinbox2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.JmKinbox2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}.JmKtouch {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.JmKtouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: red;}</style>

<div id='info-JmK'><span class='JmKtouch'>CommenT</span>
<div class='JmKinbox'><div class='JmKinbox2 JmK15'>
<h2>Recent Comment BLOG JmK</h2>
<p style='text-align:justify'>

<div style="background:transparent; border: 1px solid #FFFFFF; height: 350px; overflow: auto; padding: 5px; width: 95%;">
<script style="text/javascript" src="http://jmkjs.googlecode.com/files/Recent%20Comment%20JmK.js">
</script><script style="text/javascript">var numcomments = 20;var showcommentdate = true;var showposttitle = true;var numchars = 30;var standardstyling = false;</script> <script src="http://indonesianblog-jmk.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>

</p>
CREATED BY : <a href="http://indonesianblog-jmk.blogspot.com/"><blink>Fb-[�_B_�L�_O_�G��_]-[�_J_�.__��_�_�_�_�__��_�m_�_�__��_�_��_.��_�_�K_�_�_�]-�</blink></a>
</div></div></div>
KETERANGAN :
* Tulisan yang "Recent Comment BLOG JmK", ganti dengan Nama yang Kalian inginkan. Sedangkan untuk tulisan "http://indonesianblog-jmk.blogspot.com/", ganti dengan URL Blog Kalian.
* Tulisan "CREATED BY", ganti dengan kata-kata Kalian, untuk tulisan "Fb-[�_B_�L�_O_�G��_]-[�_J_�.__��_�_�_�_�__��_�m_�_�__��_�_��_.��_�_�K_�_�_�]-�", ganti dengan Nama Blog Kalian.

[5]. Terakhir, tinggal di SAVE.

Semoga Tips Kali Ini Bermanfaat Buat Kalian, dan Jika Ada Pertanyakan, Isi di Kotak Komentar.

Salam Blogger Indonesia.

Selasa, 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.

Jumat, 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..

Rabu, 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.

Selasa, 10 April 2012

Cara Membuat Link Friend V.02 Pada Blog


Sebelumnya Saya sudah pernah Posting tentang "Cara Membuat Link Friend Bergerak", dan kali ini Saya kembali Update V.02-nya. Seperti yang Kalian ketahui, Link Friend atau Blogroll adalah Link Sahabat2 Blogger yang kita ajak bertukaran Link Blog Kita. OK, kita langsung saja ke langkah-langkahnya.

[1]. Pertama, Login dulu ke Blog Kalian.
[2]. Dari Dasbor, cari Rancangan --> Tata Letak atau Elemen Laman.
[3]. Kemudian, Klik Tambahkan Gadget --> HTML/JavaScript.
[4]. Kemudian Copy dan Paste-kan Code di bawah ini kedalamnya.
<div class='widgetSystem'>
<div class='kulit'>
<li><a href='http://www.adaisinya.com/'>* Ada Isinya *</a></li>
<li><a href='http://danar-xp.blogspot.com/'>* anak-INDONeSIA *</a></li>
<li><a href='http://berbagi-kreativitas.blogspot.com/'>* Berbagi Kreativitas *</a></li>
<li><a href='http://cek-info.blogspot.com/'>* Cek Info *</a></li>
<li><a href='http://exsat57.blogspot.com/'>* Exsat only share for all *</a></li>
<li><a href='http://gusbuana.blogspot.com/'>* Gus Buana *</a></li>
<li><a href='http://info-adit.blogspot.com/'>* Info Adit *</a></li>
<li><a href='http://kuncir261.blogspot.com/'>* Kuncir261 Blog *</a></li>
<li><a href='http://mbahqopet.blogspot.com/'>* Mbah Qopet's Blog *</a></li>
<li><a href='http://infotipsblogging.blogspot.com/'>* My Life Is Blogging *</a></li>
<li><a href='http://dipaste.blogspot.com/'>* Sudah Bekas *</a></li>
<li><a href='http://sumbersumbermanfaat.blogspot.com/'>* Sumber Sumber Manfaat *</a></li>
<li><a href='http://torayasurabaya.blogspot.com/'>* Torayasurabaya� *</a></li>
<li><a href='http://trikdantutorialblog.blogspot.com/'>* Tutorial Blog *</a></li>
<li><a href='http://wahidsahidu.blogspot.com/'>* WahidSahidu Blog *</a></li>
<li><a href='http://by-amshyonk.blogspot.com/'>* ??-[_?�?a_?�?m_�s_�H_�y_�o_�n_�k_�]-� *</a></li>
<li><a href='http://senangnyapakecheat.blogspot.com/'>* �HARRYS BLOGZ� *</a></li>
<li><a href='http://musik246.blogspot.com/'>* MY MUSIK 246 created by ean praha *</a></li>
<li><a href='http://tianosidmugi.blogspot.com/'>* TIAN OSID MUGI *</a></li>
</div>
</div>
<style type='text/css'>
.widgetSystem {
    width: 96%;
    padding: 5px;
    background: transparent;
    margin: 5px auto;
    border: 2px inset #333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 1px 1px #333;
    -moz-box-shadow: 0 0 1px 1px #333;
    box-shadow: 0 0 1px 1px #333;
    }
.widgetSystem .nama {
    text-align: center;
    font-size: 1.5em;
    background: transparent;
    padding:5px;
    color: #FFF;
    font-family: "Times new roman", Arial, sans serif;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.widgetSystem .kulit {
    background: Transparent;
    height: 250px;
    overflow: auto;
    margin-top: 5px;
    border: 1px solid #ffffff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
    }
.widgetSystem a {
    text-decoration: none;
    margin: 5px;
    background: transparent;
    padding: 5px;
    display: block;
    color: #BBB;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    font-family: "Arial", Arial, sans serif;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s
    }
.widgetSystem a:hover {
    background: #FFFFFF;
    color: #ccc;
    }
.widgetSystem li {
    list-style: none;
    color: #CCC;
    margin: 5px
    }
</style>
KETERANGAN :
* Tulisan yang berwarna Merah, ganti dengan Link Friend Kalian atau Blogroll Kalian.
* Tulisan yang berwarna Biru, ganti dengan Nama Link Friend Kalian atau Nama Blogroll Kalian.
* Dan untuk tulisan yang berwarna Kuning, Kalian bisa sesuaikan dengan keinginan Kalian. Mulai dari Warna Background sampai Garis Pinggirnya.
* Buat Kalian yang tidak punya Code Warna HTML, jangan kawatir, Saya sudah mempersiapkannya, Klik di SINI.

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

Semoga Bermanfaat...

Jumat, 06 April 2012

Free Download 4 Template Blog Transparan Koleksi Fb-[�_B_�L�_O_�G��_]-[�_J_�.__��_�_�_�_�__��_�m_�_�__��_�_��_.��_�_�K_�_�_�]-�

Helloo sobat Blogger semua, kembali Saya sapa sobat2 Blogger, dan pada kesempatan kali ini, dan atas permintaan teman Saya, untuk pertamakalinya Saya Share Template Blog. Ok, tidak perlu berlama-lama, silahkan lihat2 dulu Template Blog Transparan koleksi Saya.


 DOWNLOAD

Saya minta maaf karena tidak menyertakan Demo, tapi hanya lewat gambar saja. Semoga Kalian suka dengan 4 Template Blog Transparan koleksi Saya, dan jika Kalian berkenan, Saya harapkan tinggalkan jejak berupa Komentar Kalian. Semoga 4 Template Blog Transparan di atas bermanfaat buat Kalian.

Salam Blogger Indonesia.

DOWNLOAD ARTIKEL : 

Rabu, 04 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.