Cara Membuat/Megganti Icon Label Blog

Tips kali ini membahas tentang Icon Label Blog, Kalian tentunya tau dong Label Blog, kalo tidak tahu coba Kalian perhatikan gambar di bawah :

OK pasti sudah tahu dong...???. Kita langsung masuk ke langkah-langkahnya saja. Berikut langkah-langkahnya.

[1]. Pertama pastinya Login dulu ke Blog Kalian.

[2]. Lalu cari Rancangan --> Edit HTML --> Centang tulisan "Expand Widget Template".

[3]. Trus cari Code ]]></b:skin> (agar lebih mudah mencari tekan CTRL + F atau F3 pada Keyboard).

[4]. Kalo sudah ketemu Copy dan Paste-kan Code di bawah, tepat di atas Code tadi.

/*Label
----------------------*/
#Label1 ul, #Label2 ul{
list-style:none;
margin:0 0 0;
padding:0 0 8px;
}
#Label1 li, #Label2 li{
background:url(http://www.paramitra.com/gfx/icon-flag-id.gif) no-repeat;
padding-top:0;
padding-right:0;
padding-bottom:3px;
padding-left:20px;
margin-bottom:3px;
border-bottom:1px dotted #063E3F;
line-height: 1.2em;
}

NB :
- Ganti URL gambar yang ada pada Code (http://www.paramitra.com/gfx/icon-flag-id.gif), dengan URL gambar Kalian. Ingat gambar harus berukuran kecil, agar pas.

[5]. Terakhir tinggal di SAVE, dan lihat hasilnya. Pasti Icon Label Blog Kalian sudah berubah.

Ohh ya, Saya hampir lupa, pada Pengaturan Widget Label harus dalam Mode "Daftar", kalo tidak maka Iconnya tidak akan muncul. Agar lebih jelasnya, Lihat Gambar Di Bawah.

Semoga Bermanfaat...!!!

readmore »»  

Cara Membuat Variasi Text Pada Blog

Kalian mungkin masih asing dengan Judul Postingan kali ini, agar Kalian tidak merasa bingung tentang Variasi Text Pada Blog, maka Saya sertakan contohnya. Bisa di lihat pada tulisan di bawah, coba arahkan Kursor Kalian ke tulisan di bawah. Atau pada Judul Postingan kali ini.

Cara Membuat Variasi Text Pada Blog

Jadi seperti itulah maksud Judul Postingan Kali ini.
Ok, kalo Kalian merasa tertarik, silahkan ikuti langkah-langkah berikut ini :

[1]. Pertama pastinya Login dulu ke Blog Kalian.
[2]. Trus cari Rancangan --> Edit HTML.
[3]. Lalu cari Code ]]></b:skin> (agar lebih mudah mencari tekan CTRL + F atau F3, pada Keyboard).
[4]. Copy dan Paste-kan Code di bawah ini tepat di atas Code yang tadi.

.comments2{color: #613838;}.comments2:hover{font-family:Georgia,Century gothic,Arial,Helvetica,sans-serif;text-shadow: 0 0 3px #000000, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;}

[5]. Kalo sudah tinggan di SAVE.
[6]. Sekarang coba buat Postingan, trus masuk ke kolom Edit HTML pada Postingan, lalu masukan Code di bawah ke dalam Postingan Kalian. Contohnya bisa di lihat di bawah.

<div class="comments2"> </div>

Cara memasukannya bisa di lihat di bawah.

<div class="comments2">Kata-kata atau Postingan Kalian</div>

NB :

- Tulisan yang berwarna Hijau, itu adalh Code yang harus di masukan kedalam Postingan.

- Sedangkan tulisan yang berwarna Biru, itu adalah kata-kata atau tulisan yang akan di beri Effect.

[7]. Terakhir tinggal klik Terbitkan Entri dan lihat hasilnya. Coba Kalian sorotkan Kursor Kalian ke Tulisan yang tadi di beri Effect.

Semoga Bermanfaat...!!!

readmore »»  

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.

readmore »»  

Cara Membuat Tooltip/Info Tips Otomatis Di Blog

Hello sobat Blogger semua, kembali Saya Update Tips Blogger. Sesuai permintaan salah satu teman FB Saya, Saya Sahre Tips ini. Sebelumnya Kalian tahu apa itu Tooltip....? jika belum tahu, Saya akan jelaskan sedikit.

Tooltip atau yang disebut juga sebagai Infotip adalah sebuah informasi yang langsung muncul saat Kursor Mouse mengarahkan pada suatu Link, dan pada posting kali ini, Saya akan membagikan langkah - langkah membuat Tooltip Otomatis di Blog. Sebagai contoh Kalian bisa lihat di Blog Saya ini, atau pada SS di atas. OK kita masuk ke langkah-langkahnya.

[1]. Pertama pastinya LogIn dulu ke BLOG Kalian.

[2]. Lalu dari Dasbor, cari Template --> Edit HTML.

[3]. Kemudian centang "Expand Template Widget".

[4]. Lalu cari Code <body>. (Gunakan CTRL + F atau F3 untuk mempermudah pencarian).

[5]. Kalau sudah ketemu, sekarang CoPas Code di bawah ini tepat di BAWAH Code <body>.

<script src='http://jmkjs.googlecode.com/files/1.%20ToolTipJmK.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Blog-JmK </a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000; -moz-opacity: 0.1; opacity: 0.9; -khtml-opacity: 0.0; color:#00ff00}"
};
//]]></script><script src='http://jmkjs.googlecode.com/files/3.%20ToolTip%20JmK.js'/>
<script src='http://jmkjs.googlecode.com/files/2.%20JmKToolTip.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>

KETERANGAN :

* Code yang berwarna BIRU, Kalian bisa menyesuaikanya dengan keinginan Kalian. Code Warna HTML, klik di SINI.

PERHATIAN :

KALIAN HANYA BOLEH MENGEDIT CODE YANG BERWARNA BIRU SAJA, APABILA KALIAN MENGEDIT CODE YANG LAINNYA, TOOLTIPNYA AKAN ERROR.

[6]. Lanjut, sekarang cari Code </body>, dan tambakan Code di bawah tepat di ATAS Code </body>.

</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script>

[7]. Dan terakhir tinggal di SIMPAN dan lihat hasilnya.

Sekian dulu Tips Blogger kali ini, semoga Tips kali ini bermanfaat buat Kalian semua, dan buat Teman FB Saya semoga  tanda tanyanya sudah terjawab. Dan jika ada pertanyaan tentang Tips ini, silahkan Kalian tulis pertanyaan Kalian di Kotak Komentar di bawah.

Salam Blogger Indonesia.

readmore »»  

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

readmore »»