April 2013 | Tutorial Blogger

Monday, April 1, 2013

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'/><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><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</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 »»

Cara Membuat Tombol Digg Pada Blog

Tombol Digg adalah yang populer saat ini dan dapat meningkatkan banyak trafik. Jika Kalian ingin membuat posting Kalian lebih dikenal maka sebaiknya tambahkan tombol ini. Langkah-langkanya sebgai berikut.

[1]. Login dulu ke Blog Kalian
[2]. Lalu cari Tata Letak dan Klik Edit HTML
[3]. Download Template Lengkap
[4]. Trus cenang Expand Widget Template
[5]. Cari Code "<data:post.body/>" (Tanpa Tanda Petik)
[6]. Copy dan Pastekan Code di bawah ini sebelum Code di atas.


<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>


NB :
- Tulisan yang berwarna Merah, bisa Kalian ganti dengan URL Blog Kalian.
- Jika Kalian menaruh Codenya di bawah Code <data:post.body/>, maka tombol Diggnya akan ada di bawah Postingan. Begitupun sebaliknya.

[7]. Simpan Template Kalian dan Lihat Hasilnya

Sekarang Kalian pun bisa melihat tombol Digg pada postingan Kalian.

Semoga Berhasil...!!! ^_
^

readmore »»

Cara Membuat Text Area Dengan Fungsi One Klik Pada Blog

Text Area, hemm, Kalian tentunya sudah pada tahu apa itu Text Area, buat yang belum tahu, Saya akan jelaskan sedikit. Text Area adalah kumpulan Text atau Tulisan yang berada dalam kotak yang mempunyai fungsi scroll, ini dimaksudkan agar meminimalkan tempat atau tidak memakan tempat untuk penempatan Text atau Tulisan tersebut, dan dimaksudkan juga agar pengunjung Blog dapat dengan mudah meng-CoPas dari tulisan tersebut. OK, Kalian pasti sudah tahukan fungsi dari Text Area. Kita lanjut ke langkah-langkahnya saja.

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

[2]. Lalu dari Dasbor, pilih Post, kemudian buat sebuat Postingan Baru.

[3]. Kalau sudah, sekarang CoPas Code di bawah ke dalamnya. (Pada Mode Edit HTML pada Postingan).

Kalau Kurang Jelas Menempatkan Codenya, Coba Kalian Lihat SS-nya Di Bawah.

Code-nya :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();"
type="button" value="Select All"> </div><div align="center"></div><p
align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt"
rows="100" wrap="VIRTUAL" cols="55">ISI DENGAN TEXT KALIAN / LINK DI SINI</textarea></p></div></form>

KETERANGAN :

* Code yang berwarna Biru, Kalian bisa sesuaikan dengan Tinggi dan Lebar pada Postingan Kalian.

* Dan tulisan yang berwarna Merah, ganti dengan Text atau Tulisan yang Kalian ingin di isi di Text Area.

[4]. Terakhir tinggal di Publikasikan saja Postingannya, dan lihat hasilnya.

OK, sekian dulu Tips Blogger kali ini, semoga Tips kali ini bermanfaat buat para Blogger semua, dan jika ada pertanya tentang Tips ini, silahkan Kalian tinggalkan pertanyaan Kalian di Kotak Komentar di bawah.

Salam Blogger Indonesia.

readmore »»

Cara Membuat Scroll Pada Related Post

Kalian pasti sudah tahu-kan apa itu Scroll pada Related Post, seperti yang terlihat pada gambar di atas, kalo Kalian tertarik, silahkan ikuti langkah-langkah berikut ini :

[1]. Login dulu ke Blog Kalian

[2]. Klik Layout --> Edit HTML --> centang Expand Template Widget
[3]. Cari Kode <data:post.body/>
[4]. Kalau sudah ketemu, Copy dan Paste-kan Script/Code dibawah ini, di atas Code tadi.

<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div> </b:if>

[3]. Selanjutnya cari Code ]]></b:skin>
[4]. Jika sudah ketemu Copy dan Paste-kan Code berikut diatas Code tadi.

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

[5]. Simpan dan lihat hasilnya

Selamat Mencoba...!!!

readmore »»

Cara Membuat Scroll Pada Postingan Blog

Scroll pada Postingan, hemm mungkin Kalian sudah tau tentang judul Postingan kali ini. Seperti pada Blog ini, pada Postingan, pasti terlihat ada Scroll-nya. Scroll berfungsi sebagai "Penghemat Ukuran Postingan". Dari Postingan yang Panjang menjadi Pendek. Bagaimana, Kalian tertarik...? kalau tertarik silahkan ikuti langkah-langkah di bawah ini.

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

[2]. Dari Dasbor, cari Postingan.

[3]. Buat sebuah Entri Baru.

[4]. Kemudian, pada Mode Edit HTML pada Postingan, masukan Code di bawah ini, ke dalamnya.

<div style="overflow:auto;width:450px;height:400px;padding:10px;border:2px solid none">

</div>

KETERANGAN :
* Tulisan yang isi BG Biru, bisa Kalian sesuaikan dengan keinginnan Kalian.

Lihat Gambar Di Bawah Kalau Kalian Bingung Memasukan Codenya.

KETERANGAN :
* Kalau Kalian memasukan Postingan, pada Mode HTML, Copy semua Codenya. Lihat gambar di bawah.

Hingga Menjadi Seperti Gambar Di Bawah.

[5]. Terakhir, tinggal di Publise.

Jika ada pertanyaan, silahkan Kalian isi di Kotak Komentar.

readmore »»

Cara Membuat Scroll Pada Kotak Komentar Blog

Sebelumnya Saya sudah pernah Posting tentang "Cara Membuat Scroll Pada Postingan Blog", dan kali ini Saya akan Posting tentang "Cara Membuat Scroll Pada Kotak Komentar Blog". OK, Saya tidak perlu menjelaskan tentang Tips ini kan, Toh Kalian juga sudah pada tahu tentang Tips ini. Kita langsung ke Langkah-Langkahnya.

[1]. LogIn dulu ke BLOG Kalian.

[2]. Kemudian dari Dasbor, cari Rancangan --> Edit HTML.

[3]. Lalu centang "Expand widget template", dan cari Code #comments-block{ atau #comments-block {.

[4]. Kalau sudah ketemu, sekarang CoPas Code di bawah ini tepat di BAWAH atau SETELAH Code di atas.

max-height:300px;border:1px solid #eee;overflow:auto;

KETERANGAN :

* Code yg berwarna Biru, Kalian bisa menggantinya dengan Tinggi Scroll-nya dan Warna Garis Pinggir-nya. Code Warna HTML..? Klik di SINI.

[5]. Kemudian terakhir, tinggal di SIMPAN dan lihat hasilnya.

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

Salam Blogger Indonesia.

readmore »»

readmore »»

Cara Membuat Pesan Maintenance Pada Blog

Pada saat kita mengedit Blog kita apakah mengedit Template atau apapu, dan ingin mengisi pesan pada Blog kita, maka Saya punya Tipsnya. Silahkan ikuti langkah-langkah di bawah untuk membuatnya.

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

[2]. Trus cari Rancangan --> Edit HTML.

[3]. Cari Code ]]></b:skin>.

[4]. Lalu Copy dan Paste-kan Code di bawah ini, tepat di atas Code tadi.

html {
height: 100%;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz2y9ap_6ScXgIuyn_PCHLk2-6U1BkQeV8ruJ6qzBP86T8P9By9R0XZZKq1O73EED1v9Vl3-KXxW5U6WbEV7FSD70O_7ZVET2dUh7JaIplbB_eCs1-sXIq1E0Zm1JWaiHGy3F-8OsJk1g/s1600/under-maintenance.gif) no-repeat center 50%;
margin: 0;
}
body {
display: none;
}

NB :

- Tulisan yang berwarna Biru, ganti dengan URL gambar Maintenance Kalian.

[5]. Simpan dan lihat hasilnya, pasti Blog Kalian ada pesan Maintenancenya.

NB :

- Dan jika Kalian ingin menghilangkannya, tinggal hapus Code tersebut dan simpan kembali.

Semoga Bermanfaat...!!!

readmore »»

Cara Membuat Navbar Blog Auto Hide

Menyembunyikan Navbar pada Blog, apa itu navbar..???, Navbar adalah bagian yang terlihat pada bagian teratas Blog Kalian. Yang mana pada bagian tersebut terdapat tulisan Posting Baru, Kostumisasi, dan Keluar. Seperti pada judul postingan kali ini, Saya akan memberikan Cara Menyembunyikan Navbar Blog (Auto Hiden Navbar). OK langsung saja, berikut langkah-langkahnya :

[1]. Seperti biasa Login dulu ke Blog Kalian.

[2]. Trus cari Rancangan --> Edit HTML.

[3]. Cari Kode body { (Tanpa Tanda Petik).

[4]. Trus Copy Code dibawah ini.

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)} #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

[5]. Pastekan Code yang tadi di Copy di ATAS Code body {.

[6]. Terahir tinggal SAVE.

Sekarang coba arahkan Cursor Mose ke atas tempat Navbar, dan lihat hasilnya...

Semoga Berhasil...!!!

readmore »»

Cara Membuat Read More Di Blog v.02

Read More, Tombol ini sangat berguna untuk para Blogger yang mempunyai Postingan yang panjang. Sebelumnya Saya sudah pernah Posting v.01-nya, dan kali ini yang v.02-nya. Tips ini juga bermanfaat untuk memperindah Postingan Kalian. Bagaiman Kalian tertarik...? kalau tertarik, silahkan ikuti langkah-langkah di bawah.

[1]. Pertama, pastinya Login dulu ke Blog Kalian.
[2]. Dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Centang Expand Template Widget.
[4]. Kemudian, cari Code </head>.
[5]. Lalu Copy dan Paste-kan Code di bawah ini tepat di BAWAH Code tadi.

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://jmk-js.googlecode.com/files/Read%20More%20JmK.js' type='text/javascript'/>

[6]. Kalau sudah, cari Code <data:post.body/>, atau jika tidak ada, cari Code <p><data:post.body/></p>.
[7]. Kalau sudah ketemu, HAPUS Code tersebut dan ganti dengan Code di bawah.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img align='right' alt='read more' margin='0' border='0' width='80' height='35' src='https://sites.google.com/site/rakasajmk/download-1/download-4/Read%20More%20JmK%205.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

KETERANGAN :
* Code yang berwarna Biru, adalah URL Button Read Morenya. Kalian bisa menggantinya dengan URL Button Kalian.

[8]. Terakhir, tinggal di SAVE dan lihat Hasilnya.

Semoga Bermanfaat...!!!

readmore »»

Cara Membuat Read More Di Blog V.01

Read More atau Baca Selanjutnya, adalah tombol yg sangat berguna apabila kita membuat Postingan yg lumayan panjang. Dan mungkin Kalian sudah mengetahuinya, dan Saya memberikan Cara Membuatnya. OK langsung saja ke tutornya ya..

[1]. Seperti biasa Login dulu ke Blog Kalian.

[2]. Trus cari Setelan --> Format.

[3]. Cari tulisan "Template Entri" kan ada kotak kosong tuh.

[4]. Isikan kotak kosong tersebut dengan Script di bawah.

<span class="fullpost">
</span>

[5]. Lalu Simpan Setelan.

[6]. Trus coba Kalian buat sebuat Entri, lihat gambar di bawah.

[7]. Pasti ada menu seperti di gambarkan, cara kerjanya lihat pada gambar di bawah.

[8]. Selesai

Semoga Berhasil Ya...!!!!!

readmore »»

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=='http:'){
var Tynt=Tynt||[];Tynt.push('cJE4D4kSKr4yYsacwqm_6l');Tynt.i={"ap":"Baca Selengkapnya Di :"};
(function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://jmk-js.googlecode.com/files/Link%20CoPas.js';var h=document.getElementsByTagName('script')[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.

readmore »»

Cara Membuat Link Bergerak

Kalian pasti sudah tahukan, apa itu link bergerak, tu tuh kalo kita sorot kursor ke link blog kita, maka linknya akan bergerak. Ok, pasti Kalian sudah tahukan, langsung saja ke materi.

Ikuti langkah-langkah berikut ini :

[1]. Seperti biasa Login dulu ke Blog Kalian Masing2
[2]. Trus cari Rancangan --> Edit HTML
[3]. Cari Code </head>, trus Copy dan Paste-kan Code di bawah ini, tepat di atas Code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>

[4]. Simpan dan lihat hasilnya.

Semoga Berhasil...!!!

readmore »»

Cara Membuat Kursor Berubah Saat Menyorot Link

Sebelunya Saya sudah pernah bahas tentang Cara Mengganti Kursor Di Blog, dan itu hanya satu Kursor saja, tapi kali Saya akan memberikan Tips Cara Membuat Kursor Berubah Saat Menyorot Link. Kalau Kalian tertarik silahkan ikuti langkah-langkah di bawah ini.

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

[2]. Trus cari Rancangan --> Edit HTML

[3]. Lalu cari Code </head> (tekan CTRL + F atau F3 pada Keyboard untuk mempermudah pencarian)

[4]. Copy dan Paste-kan Code di bawah ini, tepat di atas Code </head>

<style type='text/css'>body, a, a:link{cursor:url(https://sites.google.com/site/rakasajmk/download-1/download-2/KursorJmK.gif), default;} a:hover {cursor:url(https://sites.google.com/site/rakasajmk/download-1/download-2/JmKKursor.gif),wait;}</style>

NB :

- Ganti tulisan yang berwarna Merah dengan URL Kursor Kalian

[5]. Terakhir tinggan di SAVE dan lihat hasilnya. Pasti Kursor Blog Kalian berubah saat menyorot Link. Oh ya Saya hampir lupa, "Tidak Semua Link Ya".

Sekian dulu Tips kali ini, N' jangan lupa tinggalkan Komentar Kalian di bawah ya. Semoga Bermanfaat...!!!

readmore »»

Cara Membuat Komentar Admin Berbeda Dengan Komentar Pengunjung

Hello sobat Blogger, bagaimana kabar Kalian, semoga baik2 saja. Kali ini Saya akan Posting Tips Blogger yaitu "Cara Membuat Komentar Admin Berbeda Dengan Komentar Pengunjung". Sebenarnya sudah lama Saya mau Posting Tips ini, namun karena terlalu banyak Tips Blogging yg belum ke Publis, jadinya Saya bingung mau Publis yang mana, jadi hari ini Saya putuskan Publis yang ini aja. OK, lanjut kita ke langkah-langkahnya.

[1]. Pertama, seperti biasa, LogIn dulu ke BLOG Kalian masing2.

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

[3]. Kalau sudah, sekarang cari Code </body>. (Gunakan CTRL + F atau F3 untuk mempermudah pencarian).

[4]. Kalau sudah ketemu, sekarang CoPas Code di bawah ini tepat di ATAS Code </body>.

<script src='http://jmkjs.googlecode.com/files/Admin.js'/>

<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #000000')
.css('background','#3399FF url("https://d592ae48-a-62cb3a1a-s-sites.googlegroups.com/site/rakasajmk/home/page-3/Admin.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

KETERANGAN :

* Code yang berwarna Biru, Kalian bisa menggantinya dengan warna Garis Pinggir dan warna Backgroundnya. Code Warna HTML...? Klik di SINI.

* Dan URL yang berwarna Merah, Kalian bisa menggantinya dengan URL Gambar Kalian.

[5]. Dan terakhir, tinggal di SIMPAN dan lihat hasilnya.

OK, sekian Tips Blogger kali ini, jika ada pertanyaan tentang Tips ini, silahkan Kalian tuliskan pertanyaan Kalian di Kotak Komentar di bawah, dan semoga Tips kali ini bermanfaat buat Kalian semua.

Salam Blogger Indonesia.

readmore »»

Subscribe to: Comments (Atom)