Memasang Kode Warna Di Blog

Sambil ngutak ngatik tampilan blog posting tentang cara pasang kode warna di blog deh. Sobat blogger pastinya pada saat memodifikasi tampilan blog terkadang pelu merubah warna dalam blog, entah itu warna teks, background, atau lainnya. Nah mengganti warna dalam blog adalah dengan mengganti kode warna html. Jadi kalo sobat blogger mau menyediakan kode warna untuk rekan-rekan blogger yang lainnya di halaman posting  silakan ikuti caranya nih. 

Sebaiknya buat kode warna di halaman posting aja. Kalo di sidebar nanti malah bikin berat loading blog

Ini untuk ngebuat kode warna yang simpel lho ya...  Kalo mau lebih lengkap menampilkan kode warna silakan di modif sendiri. Langsung ke caranya ya.

1. Dah pasti Login dulu ke akun blogger sobat.

2. Klik Tata Letak / Layout.

3. Klik Edit HTML.

4. Cari kode </head>, biar gampang tekan F3 kemudian ketikkan </head> di kolom pencarian.

5. Copy paste kode berikut diatas kode </head>.

<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>
<script type='text/javascript'>
var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;
function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}
// Picker ---------------------------------------------------------
function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
hueUpdate();
dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}

executeonload(init);

function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}
function hueUpdate(newVal) {
var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
pickerSwatchUpdate();
}
function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);
h = h / 180;
var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);
var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}
</script><!--[if gte IE 5.5000]>
<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
YAHOO.util.Event.addListener(window, "load", correctPNG);

</script>
<![endif]-->

6. Setelah itu Klik Save Template.
7. Sekarang kita buat posting baru.
8. Masukkan kode berikut ini di halaman posting, tapi masukkan kodenya pada mode EDIT HTML ya.

<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">

 Selesai deh.
 Moga bermanfaat...

Screen Shotnya nih :

Membatasi Jumlah Posting Pada Halaman Label

Label dalam blog adalah sesuatu hal yang wajib. Label bisa juga diartikan sebagai pengkategorian posting. Tujuannya untuk memudahkan pengunjung mencari artikel yang berhubungan. Maka dari itu jangan lupa memberi label sesuai dengan materi posting. Nah label bisa ditaruh di sidebar atau sebagai menu. 

Cuma sayangnya ketika label di klik, pastinya halaman akan memuat semua postingan dalam label tersebut. Kalau jumlah posting dalam satu label tersebut banyak tentunya akan membuat loading blog jadi berat. Agar halaman bisa menampilkan posting dengan jumlah tertentu maka kita perlu sedikit menambahkan kode pembatas seperti dibawah ini :

 

+&quot;?max-results=5&quot;

Angka 5 adalah banyaknya posting yang muncul pada halaman ketika label di klik. Anda bisa merubahnya sesuai dengan selera.

Bagi Anda yang sudah memasang label pada widget sidebar dalam bentuk list atau  berikut cara menambahkan kode pembatasnya :
1. Masuk ke Akun Blogger Anda
2. Klik Ranncangan / Design > Edit HTML
3. Klik Download Template Lengkap terlebih dahulu untuk antisipasi jika terjadi eror
4. Centang Expand Template Widget
5. Cari kode seperti dibawah ini ( gunakan Ctrl + F atau tekan F3 untuk memudahkan pencarian )

<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:ifcond='data:blog.url == data:label.url'>
            <spanexpr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection'expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:ifcond='data:showFreqNumbers'>
            <spandir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>

6. Tambahkan kode pembatas +&quot;?max-results=5&quot;

7. Sehingga hasilnya akan seperti di bawah ini

<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:ifcond='data:blog.url == data:label.url'>
            <spanexpr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection'expr:href='data:label.url + &quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:ifcond='data:showFreqNumbers'>
            <spandir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>

Untuk yang menggunakan label dalam bentuk cloud silakan cari kode berikut, letaknya dibawah kode label list :

<b:loopvalues='data:labels' var='label'>
        <spanexpr:class='&quot;label-size label-size-&quot; +data:label.cssSize'>
          <b:ifcond='data:blog.url == data:label.url'>
            <spanexpr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection'expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <spanclass='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>

Tambahkankode pembatas + &quot;?max-results=5&quot;

Maka hasilnya akan tampak seperti di bawah ini.

<b:loopvalues='data:labels' var='label'>
        <spanexpr:class='&quot;label-size label-size-&quot; +data:label.cssSize'>
          <b:ifcond='data:blog.url == data:label.url'>
            <spanexpr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection'expr:href='data:label.url +&quot;?max-results=5&quot;'><data:label.name/></a>
          </b:if>
          <b:ifcond='data:showFreqNumbers'>
            <spanclass='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>

Cara diatas untuk label yang dipasang di widget sidebar blog, baik label dalan bentuk list maupun cloud. Untuk label di menu navigasi breadcrumbs dan post footer line jika di klik masih akan menampilkan semua poting. Anda juga bisa membatasi banyaknya posting yang muncul pada kedua link label tersebut. Caranya sama dengan diatas, cari kode seperti dibawah ini :

<divid='breadcrumbs'>
Browse: <aexpr:href='data:blog.homepageUrl'>Home</a> &gt; <b:ifcond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url'rel='tag'><data:label.name/></a><b:ifcond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <aexpr:href='data:post.link'><data:post.title/></a>
</div> 

Tambahkan kode pembatasnya, makahasilnya seperti di bawah ini.

<divid='breadcrumbs'>
Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt;<b:if cond='data:post.labels'><b:loop values='data:post.labels'var='label'>
<aexpr:href='data:label.url +&quot;?max-results=5&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast !=&quot;true&quot;'> &gt; </b:if>
</b:loop>
</b:if> &gt; <aexpr:href='data:post.link'><data:post.title/></a>
</div>

. Cari kode seperti ini di bawah ini atau yang mirip dengankode tersebut, yaitu kode untuk label pada post footer line.

<divclass='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
         <data:postLabelsLabel/>
          <b:loopvalues='data:post.labels' var='label'>
            <a expr:href='data:label.url'rel='tag'><data:label.name/></a><b:if cond='data:label.isLast !=&quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

Kemudian tambahkan kode pembatasnya, maka jadinya akanseperti di bawah ini.

<divclass='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
         <data:postLabelsLabel/>
          <b:loopvalues='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?max-results=5&quot;'rel='tag'><data:label.name/></a><b:if cond='data:label.isLast !=&quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

Klik tombol SIMPAN TEMPLATE.

Selesai

Membuat Buku Tamu / ShoutMix Tersembunyi Di Sisi Blog

ShoutMix atau Buku Tamu atau kolom komentar yang tersembunyi di sisi blog juga bisa menghemat ruang blog. Kalau blog anda penuh dengan konten maka sebaiknya anda menggunakan shoutmix tersembunyi agar blog terlihat rapih. Langkahnya :

1. Masuk dulu ke shoutmix.com untuk mendapatkan kode shoutmix anda, klik disini aja nih, setelah masuk klik create shoutbox, isi semua kolomnya trus centang "I have read and agree to the Terms of Service." Lanjut klik continue. Kalo udah dapet kodenya simpan dulu kode shoutmix anda.

2. Seperti biasa login ke akun blogger anda, klik Rancangan>Lemen Halaman>Tambah Gadget>pilih HTML/JavaScript.

3. Masukkan kode berikut nih :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i37.tinypic.com/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">

LETAKKAN KODE SHOUTMIX/CBOX ANDA DI SINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[CLOSE]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

4. Ganti kalimat " LETAKKAN KODE SHOUTMIX/C BOX ANDA DISINI" dengan kode shoutmix yang sudah anda simpan tadi. Sesuaikan gambar, tinggi, lebar, dan garis tepi dengan mengganti tulisan yang berwarna biru sesuai dengan selera anda.

5. Simpan dan selesai...

Membuat Widget Followers Yang Tersembunyi Di Sisi Blog

Untuk menghemat ruang blog widget followers bisa dibenamkan disisi blog. Jadi yang muncul disisi blog cuma judul widgetnya aja dan kalo di klik baru muncul halaman widgetnya. Untuk langkahnya sebagai berikut : 

1.  Login ke akun blogger anda, sebelumnya anda masuk dulu ke Google Friend Connect atau  klik aja disini untuk masuk ke Google Friend Connect, tujuannya untuk mendapatkan kode widget follower anda. Setelah masuk ke Google Friend Connect, klik tambahkan gadget anggota dan atur lah warna widget follower anda. Setelah selesai klik buat kode. Dan kode script follower anda akan mucul. Simpan dulu ya.

2. Lanjut masuk ke dasbor blogger anda setelah anda tadi sudah mendapatkan kode follower anda, buka Rancangan, Lemen Halaman, Klik Tambah Gadget dan pilih HTML/JavaScript.

3. Masukkan kode berikut :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:350px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1094.photobucket.com/albums/i443/irawan9/folllowers.jpg') no-repeat;
}

.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">

Kode Widget Follower Anda Disini

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (10-gb.offsetWidth).toString() + "px";
</script></div></div>

4. Ganti tulisan yang dicetak miring berwarna merah diatas dengan kode follower yang sudah anda simpan tadi, dan ganti tulisan yang berwarna biru dengan alamat url gambar anda atau bisa juga menggunakan alamat diatas.

5. Simpan gadget dan lihat hasilnya.

Kode Warna HTML Blogger

Nah...ini dia gan, kode warna HTML Blogger. Ga perlu dijelasin lagi fungsi dari kode-kode warna html blogger. Kalau yu seorang blogger pastinya dah tau dah nih kode fungsinya buat apa? Seperti biasa langsung aja gan. Pasti seneng yang praktis-praktis kan? Klik aja di warna yang mo dipilih. Kode otomatis muncul (liat di kotak bawah ya gan ).

Kode warna yang dipilih :

Semoga bermanfaat dah...

Membuat Menu Horizontal Pada Blog

Menu pada blog pastinya sangat membantu pengunjung mencari kategori yang diinginkan. Selain itu menu juga dapat memperindah tampilan blog apabila letaknya diatur dengan baik menyesuaikan template. Langsung menuju materi gan untuk membuat menu horizontal secara manual.

1. Login ke akun blogger
2. Klik Tata Letak dan pilih tab Edit HTML
3. Centang Expand Template Widget, sebelumnya ada baiknya download template lengkap dulu untuk mengantisipasi bila terjadi kesalahan pada saat edit atau tidak maksimal hasilnya
4. Cari kode ]]></b:skin>
5. Copy paste kode berikut diatasnya

/*CSS untuk menuhorizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}

.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan sub menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link sub menu ketika pointer digerakkan diatasnya.

 6. Cari kode berikut :

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

 5. Kalau sudah ketemu copy paste kode berikut tepat dibawah kode tadi

<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>About Me</a></li>
<li><a href='URL 3'>Contact Me</a></li>
</ul>
</div>

 6. Ganti tulisan yang berwarna merah dengan URL yang anda tuju dan ganti yang berwarna biru dengan nama menu anda

7. Klik simpan template

Silakan anda menambahkan variasi sendiri untuk warna, font, lebar menu dan sebagainya. Atau jika ingin mencoba membuat menu dengan cara offline silakan anda download CSS Menu Generator.

Download CSS Menu Generator

Membuat Daftar Isi Otomatis Pada Sidebar Dengan Scroll Atau Dengan Efek Berjalan

Kalo kemarin saya sudah posting gimana caranya bikin daftar isi manual pada side bar, sekarang saya mau share cara membuat daftar isi pada blog secara otomatis dengan scroll atau dengan efek berjalan. Langsung menuju ke materi gan. Berikut langkahnya :

1. Seperti biasa jeee, login ke akun blogger anda
2. Klik Rancangan dilanjut klik Tambah Gadget pilih HTML / JavaScript
3. Untuk Daftar Isi dengan Scroll masukkan kode berikut :

<style></style>
<div style="margin: 0px; padding: 0px; overflow: auto; width: 400px; height: 200px; background-color: rgb(128, 0, 0);">
<script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 150;var showpostdate = false;var showpostsummary = false;var numchars = 150;var standardstyling = true;</script><script src="http://araya19.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br /><br /></div>

4. Tulisan yang berwarna biru bisa diganti menyesuaikan dengan lebar sidebar blog sobat, nah yang warna merah ganti dengan alamat blog sobat yay, yang berwarna hijau itu warna backgroundnya, ganti lah sesuka hati atau kalo mau dikosongin tinggal ganti aja dengan kata none

5. Untuk Daftar Isi Dengan Efek Berjalan masukkan kode berikut nih :

<marquee direction="down" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200"><br/><br/><script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://araya19.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br/><br/></marquee>

6. Seperti diatas, warna merah ganti dengan alamat blog sobat ya, warna biru untuk mengatur ketinggian. Silakan diutak-atik sendiri untuk mendapatkan hasil yang maksimal yang sesuai dengan keinginan sobat deh.

7. Terakhir simpan dan lihat hasilnya

Menghilangkan Tanda Obeng Pada Blog

Sebenarnya menghilangkan tanda obeng pada blog tidak terlalu penting. Karena tanda obeng hanya muncul pada saat si empunya blog sedang mengedit blog. Tapi bagi empunya blog yang risih dengan tampilan obeng, tanda obeng tersebut masih bisa dihilangkan dari pandangan mata. Berikut caranya :

1. Seperti biasa login ke akun blogger anda
2. Klik Rancangan dilanjut dengan klik tab EDIT HTML
3. Cari kode ]]></b:skin>
4. Copy paste kode berikut diatasnya

.quickedit{
display:none;
}

Kalau anda sebelumnya sudah pernah mengedit template anda dengan kode yang lainnya diatas kode ]]></b:skin>, maka tempatkan kode .quickedit{ tersebut diatas kode yang sudah anda masukkan terlebih dahulu.

Membuat Efek Bintang Jatuh Dari Kursor Pada Blog

Masih ingin menghias blog anda dengan berbagai macam efek? Yang satu ini bisa dicoba. Kursor akan menampilkan efek bintang berjatuhan pada saat mouse diseret. Caranya mudah. Berikut langkahnya :

1. Login ke akun blogger anda
2. Klik Rancangan kemudian klik Tambag Gadget
3. Pilih HTML/JavaScript
4. Copy paste kode berikut dan letakkan dimana saja. Agar tidak mengganggu posisi tata letak blog sebaiknya ditempatkan dibawah saja

<script src="https://sites.google.com/site/ajurna1/freeware/bintangcrusor.js"></script>

5. Simpan template

Selesai...

Apabila script diatas tidak bisa digunakan silakan anda mencoba script dibawah dengan berbagai macam warna efek.

<script src="http://imtikhan.googlecode.com/files/red_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/yellow_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/green_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/blue_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/black_star.js" type="text/javascript"></script>

<script src="http://imtikhan.googlecode.com/files/white_star.js" type="text/javascript"></script>

Membuat Navigasi Breadcrumb Pada Blog

Membuat Navigasi Breadcrumb pada blogspot memang harus dilakukan secara manual. Tidak seperti pada wordpress yang memang kebanyakan templatenya sudah SEO Friendly alias sudah tersedia navigasi breadcrumbnya Nah untuk membuat blogspot SEO Friendly ada baiknya kita memasang navigasi breadcrumb di blog. Berikut langkahnya :

1. Login ke akun blogger anda
2. Klik Rancangan kemudian klik tab EDIT HTML
3. Beri centang pada Expand Template Widget
4. Cari kode ]]></b:skin>
5. Copy paste kode berikut diatas kode tadi

.breadcrumbs {
padding: 5px 5px 5px 0;
margin: 0 0 5px;
font-size: 95%;
line-height: 1.4em;
border-bottom: 1px solid #ccc;
}

6. Kemudian cari lagi kode berikut :

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

7. Copy paste kode berikut diatas kode tadi

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
You Are Here &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

8. Simpan template dan lihat hasilnya
Anda akan melihat hasilnya diatas postingan yang anda buka pada blog.

Membuat Link Berkedip Pada Saat Disorot Mouse

Ingin link dalam blog anda berkedip warna warni pada saat disorot mouse? Berikut caranya :

1. Login ke akun blogger
2. Klik Rancangan lanjut klik tab EDIT HTML
3. Cari kode </head>, tekan F3 untuk memudahkan pencarian
4. Kalau sudah ketemu copy paste kode berikut tepat dibawahnya

<script src="http://ajurna.googlecode.com/files/rainbow.js"></script>

5. Simpan template dan lihat hasilnya

Membuat Daftar Isi Pada Sidebar

Membuat Daftar Isi pada sidebar blog caranya mudah dan praktis. Mungkin anda ingin lebih memudahkan pengunjung blog anda menelusuri isi postingan blog anda dengan daftar isi yang mudah terlihat. Caranya sebagai berikut : 

1. Login ke dasboard blogger anda klik Rancangan
2. Klik tambah gadget kemudian cari HTML/Javascript
3. Masukkan kode berikut ini :

<script type="text/javascript"></script>
    <div id="fungsiscroll" class="sidebar section">
    <h2 class="title" align="left">Daftar Isi</h2>
    <div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 160px">
    <ul>
    <li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li>
    <li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li>
<li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li>
<li>> <a href="http://Link URL Yang Dituju"> Nama Artikel </a></li> MP3</a></li>
    </ul>
    </div>
    </div>

Ganti tulisan yang berwarna merah dengan alamat URL atau alamat blog anda atau link postingan anda. Lihat link postingan anda di adress bar pada saat anda membuka halaman posting dan letakkan di tulisan yang berwarna merah. Anda juga bisa mengganti tulisan "Daftar Isi" yang berwarna biru sesuai dengan selera anda. Juga untuk tinggi kolomnya sesuaikan saja dengan selera anda dengan mengubah nilai HEIGHT.

4. Simpan dan lihat hasilnya

Sekedar untuk contoh memasukkan link posting lihat dibawah :

<script type="text/javascript"></script>
    <div id="fungsiscroll" class="sidebar section">
    <h2 class="title" align="left">MP3 GRATIS</h2>
    <div style="OVERFLOW: auto; WIDTH: 95%; HEIGHT: 160px">
    <ul>
    <li>> <a href="http://araya19.blogspot.com/2011/03/free-download-bon-jovi-mp3.html"> BON JOVI  </a></li>
    <li>><a href="http://araya19.blogspot.com/2011/02/free-download-dream-theater-mp3.html">DREAM THEATER</a></li>
<li>><a href="http://araya19.blogspot.com/2011/02/free-download-roxette-mp3.html">ROXETTE</a></li>
<li>><a href="http://araya19.blogspot.com/2011/01/guns-n-roses-mp3.html">GUNS N ROSES </a></li>
</ul>
    </div>
    </div>


Selamat mencoba...