Cara Membuat Menu Label Dropdown

02.12 ---
Hai pengunjung Alprablog. Pada postingan sebelumnya sudah pernah di singgung cara membuat menu archive dropdown. Pada Tutorial kali ini Alpra akan menjelaskan cara membuat menu label dropdown. Menu Label kalian akan tampak seperti gambar berikut.


Langkah - langkahnya :

1. Login Blogger.com
2. Masuk ke Rancangan ~> Edit HTML
3. Expand Template Widget.
4. Cari Kode Berikut, Gunakan F3

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

5. Ganti kode tersebut dengan kode berikut.

<select onchange='javascript:window.open(this.options[this.selectedIndex].value);' style='width:90%'>
<option>Select Categories</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
<option value='http://alprablog.blogspot.com/2011/06/membuat-menu-label-dropdown.html'>Get This Gadget
</option>
</select>

6. Simpan

Backlink Gratis (Link Exchange)

10.23 ---
Link Exchange

1. Untuk memasukan backlink Silahkan pasang dulu link saya pada website/blog Anda.


Alprablog™



2. Isi data pada widget yang ada dibawah.

Your name: Diisi dengan nama blog anda (Contoh: Alprablog)
Your URL: Diisi alamat url blog anda (Contoh: http://alprablog.blogspot.com/)

3. Klik pada tulisan "Enter"
4. Maka secara otomatis link kalian akan terpasang di blog ini.




Saya akan mengecek link setiap hari, saya hanya mencantumkan list blog yang jujur :D

Cara Membuat Menu Archive Dropwdown

10.00 ---
Cara Membuat Menu Archive Dropwdown - Hai, semua. Sory  updatenya malem-malem. Kalau siang tidak sempet untuk membuat postingan. Langsun aja dipersingkat. Tutorial yang akan Alpra berikan adalah cara membuat archive dropdown.. Sudah taukan dengan menu dropdown? yang menunya turun ke bawah itu :D untuk lebih jelas silahkan lihat gambar di bawah.


Langkah - langkahnya :

1. Login Blogger.com
2. Masuk ke Rancangan ~> Elemen Laman.


3. Klik Gadget Archivenya.


4. Atur archive seperti gambar berikut.

5. Simpan.

Menghilangkan Tulisan Langgan:(Entri Atom)

01.05 ---
Menghilangkan Langgan : (Entri Atom) ini sebenarnya sangat lah mudah. banyak cara yang lain yand dapat dilakukan, seperti menghapus kode. Cara yang akan Alpra berikan sangat mudah. Yaitu hanya menambahkan sedikit kode CSS.

Langkah - langkahnya :

1. Login Blogger.com
2. Masuk ke Rancangan ~> Edit HTML
3. Cari kode ]]></b:skin>. Gunakan F3 untuk mencarinya.
4. Paste kode berikut tepat di atasnya.

.feed-links {display:none}

5. Simpan.

Pasang Radio Online Pada Blog

11.20 ---
Pasang Radio Online Pada Blog - Radia Online ini berguna untuk memberikan hiburan kepada pengunjung. Widget radio yang akan saya berikan adalah radioa dari malaysia Era FM. Radio lumayan bagus, karena isinya kebanyakan lagu - lagu.


Langkah - langkahnya :

1. Login Blogger.com
2. Masuk ke Rancangan ~> Elemen Laman.
3. Tambah Gadget ~> HTML/Javascript



4. Masukan kode berikut.

<center><object type="application/x-shockwave-flash" data="http://ads.era.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/era/era.swf" width="145" height="50"></object><span><a href="http://alprablog.blogspot.com/2011/06/pasang-radio-online-pada-blog.html" target='blank'><div style="color: rgb(68, 68, 68);">
<span style="font-size:xx-small;">Get This Gadget</span></div></a></span></center>

5. Simpan.

Cara Disable Text Highlight

10.03 ---
Cara disable text highlight ini berguna untuk mencegah artikel dari copy paste. Pada postingan sebelumnya sudah diterangkan cara disable klik kanan. Seperti halnya kita baru membuat blog. Pastinya bingung informasi apa yang ingin di posting. Tentunya mencari artikel blog lain. Ada juga website yang mencegah artikelnya dicuri orang lain dengan cara disable klik kanan dan disable text highlight. Ikuti langkah di bawah ini jika Anda ingin melindungi artikel Anda dari Copy Paste.

Langkah - langkahnya :

1. Login Blogger.com.
2. Masuk ke Rancangan ~> Edit HTML
3. Cari Kode <head>.
4. Pastekan script berikut tepat di bawahnya.

<script type='text/javascript'>
if (typeof document.onselectstart!=&quot;undefined&quot;)
{document.onselectstart=new Function (&quot;return false&quot;);}
else{ document.onmousedown=new Function (&quot;return false&quot;);
document.onmouseup=new Function (&quot;return true&quot;); }
</script>

5. Simpan.

Membuat Tombol Show/Hide Pada Postingan

08.37 ---
Membuat Tombol Show/Hide Pada Postingan - Hai, sahaba blogger. Tutorial kali saya akan menjelaskan cara menyembunyikan text/gambar atau sering disebut juga tombol show/hide.Membuat tombol show hide ini cukup sederhana.

Silahkan Letakan kode berikut pada postingan kalian. Letakan pada Edit HTML, bukan di Compose

<div><div style="margin-bottom: 2px;"><i><b><small>Klik Untuk melihat</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">

Copyright © 2011 Alpra | Tutorial Blog.

</div></div></div>

Keterangan : Ganti text  yang berwara merah dengan kata atau gambar yang anda inginkan.

Hasilnya seperti di bawah ini.

Klik Untuk melihat


Copyright © 2011 Alpra | Tutorial Blog.

Cara Auto Hidden Navbar Blogger

13.00 ---
Pada Tutorial sebelumnya saya sudah menjelaskan cara menyembunyikan navbar pada blogger anda. Mungkin ada juga yang masih memerlukan navbar tersebut untuk mecari blog lain. Kali ini saya akan menjelaskan cara membuat navbar menjadi auto hide. Seperti gambar di bawah ini.

Caranya cukup sederhana :

1. Login Blogger.com
2. Masuk ke Rancangan ~> Edit HTML
3. Cari ]]></b:skin>. Gunakan F3 agar lebih mudah.
4. Masukan kode berikut tepat di atasnya.

#navbar-iframe {
opacity:0.0 0.0 ;
height: 10px;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0 1.0;height: 30px;
filter:alpha(Opacity=100, FinishedOpacity=100)
border: 2px;}

5. Simpan.

Pasang Chatbox Tersembunyi Versi 2

11.21 ---
Pada postingan sebelumnya sudah sudah menerapkan cara memasang chatbox pada blog dan menyembunyikan chatbox versi 1. Pada Tutorial kali ini saya akan menjelaskan cara menyembunyikan chatbox versi 2. Pada widget ini kita tidak dapat memasang widget ini keduanya (versi 1 dan 2). Anda harus memilih salah 1 yang ingin Anda gunakan.

Langkah - langkahnya :

1. Login Blogger.com
2. Masuk ke Rancangan ~> Elemen Laman.
3. Tambah Gadget ~> HTML/Javascript
4. Masukan kode di bawah ini.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:125px;
width:30px;
float:left;
cursor: url(http://cur.cursors-4u.net/games/gam-13/gam1251.cur), progress;
background:url('http://i1202.photobucket.com/albums/bb372/alprablog/others/buku-tamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #40d1fe;
background:#000000 repeat-y center;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Masukan Kode Chatbox Anda Di Sini.

<br />


<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
<span ><a href="http://alprablog.blogspot.com/2011/06/pasang-chatbox-tersembunyi-versi-2.html" target='blank'><div style="color: rgb(68, 68, 68);">
<span style="font-size:xx-small;">Get This Gadget</span></div></a></span>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

Keterangan : Ganti text yang berwarna merah dengan kode chatbox Anda.

6. Simpan.

Cara Menyembunyikan Navbar Pada Blogger

10.41 ---
Cara Menyembunyikan Navbar Pada Blogger - Navbar adalah bar yang terdapat blog. Navbar terletak di atas blog. Nabar ini digunakan blogger untuk memudahkan pencarian blog. Tanpa harus pergi ke pencarian blog pada Google. Navbar dapat terlihat seperti gambar di bawah ini.

Tapi kadang juga navbar membuat tampilan blog menjadi tidak sempurna. Setelah Navbar dihilangkan menjadi seperti gambar di bawah.


Cara cukup sederhana.

1. Login Blogger.com
2. Masuk ke Rancangan ~> Edit HTML
3. Cari ]]></b:skin>. Gunakan F3 agar lebih mudah.
4. Masukan kode berikut tepat di atasnya.

#navbar-iframe  {
height : 0;
visibility : hidden;
display : none;
}

5. Simpan

Baca juga : Cara Auto Hidden Navbar Blogger.

Cara Mengganti Favicon

12.37 ---
Cara Mengganti Favicon - Favicon adalah gambar yang tampil di sebelah kiri addres bar. Setiap website pasti memiliki favicon yang berbeda. Begitu juga blog yang menggunakan domain dari blogger biasa menggunakan tampilan favicon seperti di bawah ini.


Kita dapat mengganti favicon dasar blogger dengan gambar yang kita inginkan. Seperti gambar di bawah ini.


Langkah - langkahnya :

1. Login Blogger.com
2. Masuk Rancangan ~> Edit HTML
3. Cari <b:skin><![CDATA[. Gunakan F3 agar lebih mudah.
4. Masukan Kode di bawah ini tepat di atasnya.

<link href='url-image' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Keterangan : Ganti text yang berwarna merah dengan url image anda.

6. Simpan

Disable Klik Kanan Versi 1

01.40 ---
Disable Klik Kanan Versi 1 - Kita sudah menemui banyak website pada pencarian Google. Tentunya website juga mempunyai hak cipta untuk melindungi artikelnya dari copas. Kita juga dapat melindungi artikel kita dari orang lain yang ingin copas. Tutorial kali ini saya akan memberitahu cara disable klik kanan agar artikel anda tidak di copy oleh orang lain.

Langkah - langkahnya :

1. Login Blogger.com
2. Masuk Rancangan ~> Elemen Laman
3. Tambah Gadget ~> HTML/Javascript
4. Masukan Script Berikut

<script>
var message="Dilarang Copas !";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

Keterangan : Ganti text yang berwarna merah dengan kata yang anda inginkan.

5. Simpan.

Guest Book

00.16 ---
Peraturan :
Dilarang meninggalkan pesan lebih dari 4 kali.
Dilarang Melecehkan/Menghina user lain.
Do not Advertising.

Jika ingin meninggalkan pesan + mendapat backlink, silahkan gunakan kolom komentar !


Kumpulan Tutorial Blogger/Blogspot

06.49 ---



Upload File

03.25 ---

Pasang Kotak Komentar Klasik Pada Blog

01.39 ---
Pasang Kotak Komentar Klasik Pada Blog - Mungkin kalian sudah tau dengan komentar klasik. Yaitu kotak yang dapat menggunakan kode <b>, <i>, <a>. Dan juga kotak komentar ini dapat digunakan apabila blog anda lambat di buka.

Silahkan Lihat

Live Demo.

Lalu klik salah satu postingannya.

Langkah - langkah untuk memasangnhya :

1. Login Blogger.com.
2. Masuk Rancangan ~> Edit HTML
3. Expand Template Widget.
4, Cari Kode <h4 id='comment-post-message'><data:postCommentMsg/></h4>. Gunakan F3 agar lebih
mudah.
5. Pastekan kode berikut tepat di bawahnya.

<div style='margin-bottom:5px'>
<a expr:href='&quot;http://www.blogger.com/comment.g?blogID=3402304307070702176&amp;postID=&quot; +data:post.id+ &quot;&amp;isPopup=true&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0, location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;' title='Popup Window Komentar'>
<b style='border:1px solid #c0c0c0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:2px 10px; color:#333333; background-color:#f6f6f6;'>Klik Disini bila kotak komentar tidak muncul</b>
</a>
</div>

6. Simpan dan lihat hasilnya :D

Menampilkan Hanya Judul Posting di Beranda

05.14 ---
Kebanyakan orang memilih penampilan uang simple. Karena simple dapat mempengaruhi berat dan kecepatan blog. Begitu juga dengan Google yang mendesign sedemikian rupa agar webnya terlihat simple. Bukan masalah menarik. Pada Tutorial kali ini Alpra akan membuat blog anda terlihay simple. Yaitu dengan cara membuat hanya judul postingan saja yang muncul pada halaman beranda.

Langkah-langkahnya :

1. Login Blogger.com.
2. Masuk ke Rancangan ~> Edit HTML
3. Expand Template Widget
4. Cari Kode <b:include data='post' name='post'/>. Gunakan F3 agar lebih mudah.
5. Ganti Kode <b:include data='post' name='post'/> dengan kode berikut.

<b:if cond='data:blog.homepageUrl == data:blog.url'><b:if cond='data:blog.pageType != &quot;item&quot;'><a expr:href='data:post.url'><div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;'><data:post.title/></div></a><b:else/><b:include data='post' name='post'/> </b:if><b:else/><b:include data='post' name='post'/></b:if>

Keterangan : Ganti Text yang berwarna merah dengan style yang anda inginkan.

6. Simpan.

CSS Compressor (Advanced Mode)

10.30 ---


Switch to Regular mode.



Spaces and tabs

Replace multiple spaces with just one space

Remove space around chars ;:{},

Leave space between selectors (?)

Leave space between properties (?)


Remove tabs

New lines handling

Leave lines as they are

Replace multiple empty lines with just one empty line

Remove all newlines


Comment handling (?)

Don't strip any comments

Strip ALL comments

Strip comments at least
chars long


Other options

Compress color codes where possible (?)

Remove unnecessary semi-colons

One command per line (?)


Your CSS code:









CSS Compressor

10.22 ---
CSS Compressor digunakan untuk memperpendek kode css. Kode CSS diperpendek agar loading blog kalian lebih cepat dan ringan. Silahkan masukan kode CSS anda pada kotak yang telah disediakan, lalu klik Compress It.

Selamat Mendoba





Switch to Advanced mode instead for greater customization.

Compression mode: (?)

Light


Normal

Super Compact

Comments handling: (?)

Don't strip any comments


Strip ALL comments


Strip comments at least
chars long (NOT counting line breaks within comment)

Insert CSS code:











Pasang Recent Post With Thumbnail

06.51 ---
Pada postingan sebelumnya sudah dijelaskan cara membuat menu tab view.  Nah, pada postingan kali ini saya akan menjelaskan cara memasang recent post with thumbnail atau cara pasang recent post pada menu tabview. Ini termasuk gadget penting untuk blog anda.

Langkah - langkahnya :

1. Login Blogger.com
2. Masuk ke Design ~> Tata Letak.
3. Tambah Gadget HTML/Javascrip.
4. Pastekan kode berikut pada gadget kalian.

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://alprablog.wap.sh/no-image.jpg";
imgr[1] = "http://alprablog.wap.sh/no-image.jpg";
imgr[2] = "http://alprablog.wap.sh/no-image.jpg";
imgr[3] = "http://alprablog.wap.sh/no-image.jpg";
imgr[4] = "http://alprablog.wap.sh/no-image.jpg";

showRandomImg = true;
boxwidth = 275;
cellspacing = 8;
borderColor = "transparent";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://alprablog.blogspot.com/";
</script>
<script src="http://www.geocities.ws/alprablog/user/js/recent-post-withthumbnail.js" type="text/javascript"></script>

Keterangan : Ganti Text yang berwarna merah dengan url blog anda, text berwarna biru dengan jumlah post yang akan ditampilkan.

5. Simpan.

Pasang Artikel Terkait Di Bawah Postingan.

06.11 ---
Tutorial kali ini adalah cara memasang Artikel Terkait di bawah postingan. Artikel terkait ini adalah untuk melihat beberapa postingan pada blog anda yang terkait dengan Label postingan yang di atasnya.Jadi, pengunjung tidak perlu mengklik label pada blog untuk melihat artikel lainnya.

Langkah -langkahnya :

1. Login Blogger.com
2. Masuk ke Design ~> Edit HTM:L.
3. Expand Template Widget.
4. Cari Kode <data:post.body>. Ginakan F3
5. Pastekan kode berikut tepat di bawah <data:post.body> yang kedua.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='recent-alpra'>
<div class='widget-content-bottom'>
<h3>Artikel Terkait</h3>
<div style='overflow:auto; width:100%; height:250px;'>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
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;data2007&#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></div></div>
<span><a href='http://alprablog.blogspot.com/2011/06/pasang-artikel-terkait-di-bawah.html' target='blank'><div style='color: rgb(68, 68, 68);'>
<span style='font-size:xx-small;'>Get This Gadget</span></div></a></span>
</b:if>

6. Simpan.

Cara Mengganti Cursor Pada Blog

02.14 ---
Hai sobat. Tutorial kali ini adalah cara mengganti cursors pada blog anda. Sebenarnya saya sudah lama ingin memposting cuma tidak ada waktu. Cursor ini sebenarnya cukup menarik buat blog anda. Karena selalu dilihat oleh pengunjung. Blog anda akan terlihat lebih keren setelah mengganti cursor anda. Langsung aja buat yang ingin mencoba.

Langkah - langkahnya :

1. Login Blogger.com
2. Masuk Design ~> Edit HTML
3. Cari Kode </head>. Gunakan F3 agar lebih cepat.
4. Pastekan kode berikut tepat di atasnya.

<style type='text/css'>body, a, a:hover {cursor: url(http://cur.cursors-4u.net/user/use-1/use66.cur), progress;}</style>

Keterangan : Silahkan ganti text yang berwarna merah dengan link cursor anda. Link cursor harus di akhiri dengan format .cur. Bila cursor dengan format .ani tidak akan bisa di gunakan.

Beberapa cursor yang dapatanda gunakan :


http://cur.cursors-4u.net/user/use-1/use65.cur





http://cur.cursors-4u.net/user/use-1/use67.cur





http://cur.cursors-4u.net/others/oth-6/oth561.cur



5. Simpan.

Silihkan kunjungi cursors-4u.com untuk mancaru pilihan cursor.

Pasang Chatbox Tersembunyi Versi 1

01.11 ---
Tutorial sebelumnya sudah pernah diberitahukan cara pasang chatbox pada blog. Nah, tutorial kali ini adalah cara pasang chatbox tersembunyi versi 1. Agar blog anda kelihatan lebih simple sebaiknya anda gunakan ini. Dan juga tidak ada terlalu banyak gadget pada blog anda. Adapun cara pasang chatbox tersembunyi versi 2. Silahkan ikuti langkah - langkah di bawah ini untuk versi !.


Langkah-langkah :

1. Login Blogger.com.
2. Masuk ke Design ~> Elemen Laman
3. Tambeh Gadget
4. Pilih HTML/Javascript.
5. Masukkan kode berikut pada gadget Anda.

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #000;
background:#ffffff;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Tutup ]</b></a></div>

Masukan Kode Chatbox anda di sini

<script src="http://www.geocities.ws/alprablog/user/js/hiddengb2.js"></script>
</td></tr></table>
</div>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://i1202.photobucket.com/albums/bb372/alprablog/others/buku-tamu.png"/>
</a>
</div>


6. Simpan dan liat hasilnya.

Keterangan : Ganti text yang berwarna merah dengan kode chatbox anda.

Cara Bikin Tab View

00.28 ---
Cara Bikin Tab View - Sudah lama saya tidak update ya. Tutorial kali ini adalah cara bikin tab view pada blog anda, Mungkin kalian sudah tau apa itu tab view? Susah ngejelasinnya, untuk melihat demonya silahkan lihat di sini. Lumayan menarik kan? Silahkan ikuti langkah-langkahnya.

Langkah - langkahnya :

1. Login Blogger.
2. Masuk ke Design ~> Tata Letak
3. Tambah Gadget
4. Pilih HTML/Javasript
5. Masukkan kode berikut pada gadget anda.

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#00BF08; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #EF8100; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#EF8100; /*

Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>

<script type='text/javascript' src='http://www.geocities.ws/alprablog/user/js/tabview.js'>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul Ke-1</a>
<a>Judul Ke-2</a>
<a>Judul Ke-3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi judul Ke-1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi judul Ke-2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi judul Ke-3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

6. Simpan.

Keterangan : Anda bisa mengedit warna ukuran dan lainnya dengan sesuka hati anda.

Pasang Chat Box Pada Blog

00.57 ---
Chatbox adalah kotak pesan untuk pengunjung meninggalkan pesan di blog anda.Ini termasuk gadget penting buat blog anda. Banyak situs yang menyedaiakannya. Anda cukup mendaftar pada website yang menyediakan chatbox ini. Saya tidak bisa menjelaskannya satu persatu Silahkan anda kunjungi beberapa website di bawah ini.

1. Teriaklah.com Shourbox Indonesia

2. Chatbox.com

4. Cbox.ws

5. Shoutbox.com

6. Sbox.ws

7. Shoutcamp.com

8. Shoutmix.com

9. Shoutmix.net

10. 99shoutbox.com

11. Myshoutbox.com

12. Wilsontechnology.com

13. Shoutbox.widget.me

Itulah beberapa website yang menyediakan chatbox.
Semoga bermanfaat.

Cek Kode Warna

00.31 ---
Cek Kode Warna - Kode warna adalah penting untuk anda. Untuk memudahkan anda mengedit HTML anda sendiri. Silahkan Gunakan lah Kode Warna Berikut untuk mencari warna yang anda inginkan. Untuk melihat kumpan kode warna yang keren - keren. Klik >0<







































































































































































































































Kode warna yang terpilih :


                             HTML COLOR CODE



Pasang Share History on Fb, Buzz, Digg, Twett.

23.42 ---
Kali  ini saya akan memberitahukan kalian cara memasang share this history on Facebook, Buzz, Digg, Twett. Ini sangat berguna untuk pengunjung agara bisa membagikan postingan orang lain. Tanpa harus Copy Past. Contohnya bisa dilihat di Blog ini. Tutorial lebih lanjut ikuti langkah di bawah ini.
Langkah-langkah :

1. Masuk ke Blogger.
2. Pilih Edit HTML
3. Contreng Expand Template Widget.
4. Cari Kode <data:post.body> gunakan F3 untuk mencarinya.
5. Pastekan kode di bawah ini tepat di atasnya data:post.body> yang pertama.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:4px 0px 30px 0px;width:100%;float:left;height:20px;'>
    <div style='float:left;padding-left:0px;font:normal 12px Georgia;font-style:Italic;'>

    Share this history on :

    </div>

    <div style='float:left;padding-left:10px;'>

    <a name='fb_share' type='button_count'/>

    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>

    </script></div>

    <div style='float:left;padding-left:10px;'>

    <a class='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>

    <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>

    </div>

    <div style='float:left;padding-left:10px;'>

    <a class='DiggThisButton DiggCompact'/>

    <script type='text/javascript'>

    (function() {

    var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];

    s.type = &#39;text/javascript&#39;;

    s.async = true;

    s.src = &#39;http://widgets.digg.com/buttons.js&#39;;

    s1.parentNode.insertBefore(s, s1);

    })();

    </script>

    </div>

    <div style='float:left;padding-left:10px;'>

    <a class='twitter-share-button' data-count='horizontal' data-via='aldy_dizzy' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

    </div>

    </div>
    </b:if>

6. Simpan.

Demo Design Facebook Like Box

20.58 ---

Memasang Auto Read More

04.59 ---
Memasang Auto Read More - Auto read more ini berfungsi untuk memudahkan pengunjunag membaca artikel anda. Apalagi artikelnya terlalu panjang, sebaiknya menggunakan auto read more. Karena bila artikel yang panjang tidak menggunakan auto readmore maka isinya akan acak-acakan. Sebenarnya memasang auto readmore ini bukan lah mempercepat loading blog, hanya membuat blog terlihat simple. Artikel-artikel pada halaman beranda bukannya tidak ditampilkan tapi hanya di sembunyikan. Berikut Tutorialnya.

Langsung aja langkah-langkahnya :
1.Login Blogger.
2.Masuk Design Edit HTML
3.Ceklist Expand Template Widget.
4.Letakkan script berikut di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script src='http://www.geocities.ws/alprablog/user/js/readmore.js'/>

5.Kemudian cari kode <data:post.body> . Gunakan CTRL + F agar lebih  mudah. Ganti kode tersebut dengan kode berikut

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read More</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6. Simpan.

Memulai Posting

04.37 ---
Memulai Posting - Sebelumnya kita sudah mencoba untuk membuat blog. Sekarang kita akan mencoba untuk memuali membuat postingan pada blog kita. Cara tidak begitu sulit. Anda dapat memposting apapun yang menurut anda layak untuk dipublikasikan. Jangan coba-coba untuk memposting hal-hal yang negatif. Karena itu dapat merusak citra blog kalian. Silahkan aja ikuti langkah di bawah ini.

Langkah-langkahnya :

1. Login ke Blogger.com

2. Pilih Entri Baru. 


3. Silahkan Masukkan Judul dan isi Postingan.



4. Klik Terbitkan Entri (Publish) untuk menerbitkan entri.

Cara Bikin Blog

02.51 ---
Cara bikin blog sebenar cukup mudah. Blog ini berfungsi untuk menyebarluaskan informasi yang anda miliki kepada orang banyak..Adapaun cara lain yaitu dengan wordpress. Tapi, di sini saya menggunakan blogger. Karena blogger memiliki website induk yaitu Google. Semua postingan langsung di tampilkan halaman pencarian google. Jadi, anda tidak perlu untuk menambahkan urlo anda pada webmaster google.

Silahkan ikuti langkah di bawah ini.


1.Masuk Ke Blogger.com.

2. Klik Memulai.


3. Cipatakan Akun Google.



4. Beri Nama Blog.contoh (alprablog.blogspot.com)


5. Pilih Template Anda.


Selesai, blog anda sudah jadi. Silahkan di check.