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.

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 == &quot;item&quot;'>
<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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; 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...!!!

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.

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.

<!-- Digg Code by www.indonesianblog-jmk.blogspot.com -->
<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>
<!-- Digg code ends here -->

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...!!! ^_

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

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.

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.

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

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