Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Memasang Box Info Admin Blog Di Atas Komentar

Biasanya, Box Info Admin pada blog terpasang di bawah postingan/aartikel. Namun, saya mencoba memposting ulang tapi Box Info Admin ini berada di area komentar bagian atas.

Nah, untuk demonya bisa dilihat di sini!

Ikuti langkah-langkah di bawah ini:
  1. Login di akun blogger Anda.
  2. Klik Rancangan, Edit Html dan Centang Expand Template Widget.
  3. Cari kode ]]></b:skin>
  4. Copy kode berikut di atasnya.
  5. /* Info Admin Blog */ .authorinfo {background:transparent;margin:20px 0 5px 0;padding:5px;overflow:auto;color:#000;border: 3px double #666;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;font-size:12px; -o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out;} .authorinfo:hover {background:#666;color:#fff; border: 3px double #ccc;} .authorinfo p{margin:0;padding:0} .authorinfo a{color:#ff0000} .authorinfo img{background:#000;border: double 2px #fff;float:left;margin:0 6px 0 0;padding:6px;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
  6. Selanjutnya, cari kode berikut:
  7. < div class='comments' id='comments'>
  8. Simpan kode berikut tepat di atas kode di tadi:
  9. <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='authorinfo'> <p> <img alt='Authorimage' class='avatar avatar-70 photo' height='50' src='https://lh5.googleusercontent.com/-XZvUlBwBa9o/TrEQIQP2qXI/AAAAAAAAADE/wUdpjeiftEA/s128/Airmata.png' width='80'/> <div style='font-family: Comic Sans MS; color: #000;'> <b><span><a expr:href='data:post.href'><data:post.title/></a></span></b></div> <div style='text-align: justify; font-family:arial'> <span>Author by : <a expr:href='data:blog.homepageUrl'><data:post.author/></a></span><br/> <span>Tanggal: <a expr:href='data:post.href'><b:if cond='data:post.dateHeader'><data:post.dateHeader/></b:if></a></span><br/> <span>Pukul: <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></span><br/> <span>Label: <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == &quot;true&quot;'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if></b:loop></b:if></b:loop></span> </div> </p> </div> </b:if>
    Catatan: Ganti tulisan berwarna merah dengan foto yang ingin Anda pasang. Tulisan berwarna biru bisa Anda ganti sesuai dengan keinginan Anda.
  10. Simpan Template dan lihat hasilnya saat salah satu posting dibuka. Lihat di bagian atas kotak komentar blog Anda.

Sekian dan semoga bermanfaat!
Baca Lengkap....

Google Update Pagerank, Dapat 1 Peringkat

Tidak disangka-sangka kalau bulan ini ternyata google update pagerank lagi. Saya sendiri sempat terkejut melihat pagerank blog saya karena google baru saja update pagerank pada bulan oktober lalu kalau tidak salah. Beberapa teman memprediksikan jika google akan mengupdate pagerank setiap bulan. Wah, kayaknya akan bagus kalau begitu.

Awalnya saya percaya tidak percaya juga kalau pagerank blog ini naik meskipun hanya naik 1 peringkat. Tapi saya senang mengingat blog ini umurnya masih sangat muda. Setelah mencari-cari info dari mbah google, ternyata google update pagerank tanggal 10 November lalu. Bertepatan dengan hari pahlawan ya.....!!!

Bagi sobat yang belum lihat pagerank blognya, buruan cek dulu. Siapa tahu PR blog sobat naik dan semoga tidak saja yang sudah punya PR tidak turun.

Untuk cek pagerank blog sobat, silahkan klik di sini!
Baca Lengkap....

Cara terbaru Mengganti Icon Blog Address Bar

Untuk postingan kali ini, saya akan menjelaskan memberikan tips Cara terbaru Mengganti Icon Blog Address Bar. Mungkin sudah banyak yang membahas tentang ini, tapi tidak ada salahnya jika saya buat postingan ini sekedar berbagi kepada yang belum tahu. Oke, kita langsung saja ke langkah-langkahnya.

Ikuti langkah-langkah berikut:
  1. Siapkan gambar berformat apa saja (gif, jpg, ico, dll) dengan ukuran 24x42 pixel atau 32x32 pixel yang jelasnya harus berukuran kotak.
  2. Login ke http://draft.blogger.com Anda atau klik di sini!
  3. Centang box tulisan "Make Blogger in Draft my deafult".
  4. Lihat menu di sebelah kiri, lalu pilih Layout. (Lihat gambar di bawah).
  5. Tunggu sampai muncul gambar seperti di bawah ini:
  6. Klik Favicon dan upload gambar yang telah Anda buat.
  7. Terakhir klik Save Arragerement.

Sekian tips Cara terbaru Mengganti Icon Blog Address Bar. Semoga bermanfaat!
Baca Lengkap....

Membuat Search Engine Menarik dan Cantik

Selamat Bertemu Kembali. Mau cerita dulu tapi tidak punya bahan. Langsung saja ke isi tulisannya supaya tidak bosan bacanya. Oke!!!

Sebenarnya inti dari tulisan ini bukan sesuatu yang baru karena fitur ini sudah disediakan oleh pihak BLOGGER. Tapi, bagi yang ingin memiliki fitur tersebut dengan tampilan yang unik, bisa memakainya. Fitur yang saya maksudkan adalah kotak Search Engine.

Cara membuatnya seperti berikut. Untuk cara pertama ini, tinggal copy paste saja ke sidebar/widget blog Anda. Kode di bawah ini adalah kode standar. Artinya, tampilannya adalah tampilan umum (tampilan biasa saja).

Perhatikan kode berikut:

<form action="http://nama-blog.blogspot.com/search"
method="get"><input class="textinput" name="ian" size="25" type="text"/> <input value="Search" class="buttonsubmit" name="submit" type="submit" />
</form>

Kode di atas akan menghasilkan seperti ini.



Agar bervariasi, bisa menambahkannya dengan latar gambar. Lihat contohnya.

<div style="border: 4px groove green; background-image: url(https://lh3.googleusercontent.com/_QeIxO28ukBc/TZLjW_tRnmI/AAAAAAAAALY/pA6d3PspvXo/385512.jpg); width: 350px; padding:15px 15px 0 15px;">
<form action="http://nama-blog.blogspot.com/search"
method="get"><input class="textinput" name="ian" size="25" type="text"/> <input value="Search" class="buttonsubmit" name="submit" type="submit" />
</form></div>

Kode di atas akan menghasilkan kotak Search seperti di bawah.


Catatan: Tulisan berwarna kuning ganti dengan alamat blog Anda, sedangkan tulisan berwarna merah ganti dengan apa saja sesuai dengan keinginan Anda.

Untuk cara yang kedua, dengan memasukkan langsung ke dalam kode HTML blog Anda.

Caranya, yaitu:
  1. Login ke akun Anda.
  2. Pada halaman DASBOR, klik PENGATURAN.
  3. Klik EDIT HTML.
  4. Silahkan copy kode berikut ke tempat di mana Anda akan menyimpannya.

<form action='/search' class='cariform' method='get'>
<input class='carifield' id='q' name='q' onblur='if (this.value == "") {this.value = "Cari Artikel di Sini . . . .";}' onfocus='if (this.value == "Cari Artikel di Sini . . . .") {this.value = ""}' type='text' value='Cari Artikel di Sini . . . .'/>
<input class='caributton' type='submit' value='Cari' />
</form>

Langkah selanjutnya, Anda membuat kode CSS-nya biar tampilannya menarik. Letakkan kode berikut ini di atas kode ]]></b:skin>.

/*- Pencarian -*/
.cariform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #5e6366;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.cariform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.cariform .carifield {
background: #DBDBDB url(E:/Wallpaper/Desain Ian/bukutrans.png);
padding: 7px 6px 5px 8px;
width: 240px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.cariform .caributton {
color: #000;
border: solid 1px #494949;
font-size: 14px;
font-weight: bold;
height: 28px;
width: 45px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #ccc;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

Setelah itu, simpan template Anda. Selesai dan lihat hasilnya. Demikian cara membuat kotak Search Engine pada blog. Sampai bertemu kembali pada postingan berikutnya.
Baca Lengkap....

Membuat Daftar Link Text Unik (Modif)

Pada postingan ini, saya memberikan alternatif kode Daftar Link Text sesuai abjad dengan scrool. Mulai dari A, B, C, D,..., dan seterusnya sampai Z. Daftar ini bisa di pasang pada sidebar dan juga bisa langsung memasangnya pada postingan Anda. Untuk demonya, bisa di lihat DI SINI. Langsung saja ke kodenya, oke!!!

  1. Seperti biasa, silahkan login ke akun Anda.
  2. Klik Rancangan dan Tambah Gadget jika ingin memasangnya pada sidebar blog Anda.
  3. Copy kode berikut ke dalamnya.
  4. <style type="text/css"> #ir211208{background:#F2F2F2;color:#000;margin:0;border:3px double #000;width:95%;height:263px;padding:5px;overflow:auto;font-family:trebuchet ms;font-size:13px;box-shadow: 0px 0px 5px #000;-webkit-box-shadow: 0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;margin-top:5px} #exchange{width:100%;height:234px;overflow:auto;border:1px inset #fff} #judul{padding:3px 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmvN3wrc3IYYiZyxYZB0GCNfHxrFao4AONFSXBtS8RHhl2MJjA7QqW-6POK3A_MODC8FpzEchodNSilbG-znE26i-sUDKhy_eNg3El6cBETw-P_nN426y6dnbKBk97Pz1DpfJb7-PZXP2Z/) maroon;height:25px;color:#fff;font-size:14px;font-weight:bold} .area{border:none;margin:10px 0 0;padding:5px 0 5px;} .bottom{padding:0;margin:0} .bottom1{text-align:left;font-size:11px;padding:7px 0px 0px 0px;border:none;float:left} .bottom2{text-align:right;font-size:11px;padding:7px 0px 0px 0px;border:none;float:right} </style> <div id="ir211208"> <div id="exchange"><center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; A &lt;&lt;</marquee></div> <a href="http://www.ilmublog.co.cc" target="new" title="Anak Pesisir">Anak Pesisir</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; B &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; C &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; D &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; E &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; F &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; G &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; H &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; I &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; J &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; K &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; L &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; M &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; N &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; O &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; P &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; Q &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; R &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; S &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; T &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; U &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; V &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; W &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; X &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; Y &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">&gt;&gt; Z &lt;&lt;</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center></div> <div class="bottom"> <div class="bottom1">Mau widget ini? Klik <a href="https://jaririndu.blogspot.com/2011/08/membuat-daftar-link-text-unik-modif.html" target="_blank">di sini &gt;&gt;</a></div> <div class="bottom2">Desain by: <a href="https://ian-konjo.blogspot.com/" target="_blank">Ian Konjo</a></div> </div></div>
  5. Silahkan beri judul dan klik Save.

Catatan:
- Tolong jangan menghapus link Blog saya (Anak Pesisir).
- Ganti tulisan berwarna MERAH TERANG dengan URL Blog teman Anda.
- Tulisan berwarna KUNING ganti dengan nama blog teman Anda.
- Warna HIJAU Anda ganti dengan Nama Blog/Nama Pemilik Blog teman.

Ok!! Sekian artikel Membuat Daftar Link Text Unik (Modif) sesuai Abjad dengan scrool.
Baca Lengkap....

Link-Link Penting Untuk para Blogger

Bagi Anda para blogger yang ingin mengecek keadaan blog/website, Anda bisa memanfaatkan link-link di bawah ini.
  1. Feed Validator (http://www.feedvalidator.org). Ini bisa Anda gunakan untuk melakukan cek pada RSS blog Anda atau pada feed atom blog Anda.
  2. About Us (http://www.aboutus.org). About Us secara dinamis menciptakan halaman dari informasi yang dapat diakses publik pada situs web/blog, seperti Meta Tag dan Informasi Who is.
  3. Copy Scape (http://www.copyscape.com). Copy Scape didedikasikan untuk membantu melindungi konten blog Anda dan dapat digunakan untuk mencari duplikat konten Anda di web/blog lain.
  4. Pre Checker (http://www.prchecker.info). Pre Checker ini dapat digunakan untuk mengecek Pagerank web/blog Anda.
  5. Alexa (http://www.alexa.com). Yang satu ini, pasti Anda sudah tahu, yaitu untuk mengecek informasi Alexa Ranking web/blog Anda.
  6. Backlink Watch (http://www.backlinkwatch.com). Untuk mengecek jumlah backlink pada web/blog Anda.
  7. Website Outlook (http://www.websiteoutlook.com) berguna untuk mengecek harga jual web/blog Anda.
  8. Validator (http://validator.w3.org). Untuk memeriksa validitas dokumen web/blog dalam HTML, XHTML, SMIL, MathML, dan sebagainya.
  9. Whois (http://www.whois.net), Untuk mengecek pemilik suatu web/blog.

Selamat mencoba dan semoga sukses!!!
Baca Lengkap....

Membuat Buku Tamu Menarik

Tutorial ini masih berhubungan dengan postingan saya Membuat Garis Tepi Gambar Berdisko. Buku tamu menarik yang saya maksud adalah buku tamu melayang yang merupakan widget shoutmix atau cbox tersembunyi di sisi kiri blog dan ditampil jika diklik. Contohnya bisa Anda lihat di sebelah kiri blog kesayangan saya ini.

Cara membuatnya adalah sebagai berikut:
  1. Login ke akun blogger Anda.
  2. Pilih Rancangan, lalu Tambah gadget HTML/Javascript.
  3. Masukkan script berikut ke dalam gadget HTML/javascript tersebut:

    <style type="text/css">
    #gb{
    position:fixed;
    right:450px;
    z-index:+1000;
    }
    #tabGb {
    position:fixed;_position:relative;top:35px; left:0;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); }
    * html #gb{position:relative;}

    .gbcontent{
    float:left;
    border:4px solid #fff;
    background:#666;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    padding:3px;
    }

    </style>
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.top = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="gb">

    <div class="gbcontent">

    <!-- LETAKKAN KODE SHOUTBOX ANDA DI SINI! -->

    <center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Tutup Buku Tamu" class="close" /></a>

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

    <div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTBdcqBcii0KgOW76fNKc446m4p2lGe4oMbnH-iEL1iRMXsnkiNn4owTckxMzB3BmWdaqM21bHx7YYimPRziq8-uheMb-9CE2FdWCSp5WM4GdHF9vnAmAyN1BrjvhyphenhypheniobgEHsg4zozs4/" id="flash0" class="flashgroup" /></a></div>


    <style type='text/css'>
    img.flashgroup {border:5px solid white;}
    </style>

    <script type='text/javascript'>
    //<![CDATA[

    /*
    Script By http://www.javascriptkit.com/script/script2/flashimage.shtml
    */

    //Warna garis yang berkelap-kelip
    var flashcolor="#00FF00"
    //Kecepatan garis berkelap-kelip (semakin rendah, semakin cepat)
    var speed=150

    /////No need to edit below here////
    var curborder=new Array()
    var increment=0
    var flashobject=new Array()

    if (document.all||document.getElementById){
    while (document.getElementById("flash"+increment)!=null){
    flashobject[increment]=document.getElementById? document.getElementById("flash"+increment).style : eval("document.all.flash"+increment+".style")
    curborder[increment]=0
    increment++
    }
    }


    function flash(which){
    if (curborder[which]==1){
    flashobject[which].borderLeftColor=flashcolor
    flashobject[which].borderBottomColor=flashobject[which].borderRightColor
    }
    else if (curborder[which]==2){
    flashobject[which].borderTopColor=flashcolor
    flashobject[which].borderLeftColor=flashobject[which].borderBottomColor
    }
    else if (curborder[which]==3){
    flashobject[which].borderRightColor=flashcolor
    flashobject[which].borderTopColor=flashobject[which].borderLeftColor
    }
    else if (curborder[which]==4){
    flashobject[which].borderBottomColor=flashcolor
    flashobject[which].borderRightColor=flashobject[which].borderTopColor
    }

    if (curborder[which]<=3)
    curborder[which]++
    else
    curborder[which]=1
    }

    if (document.all||document.getElementById){
    for (z=0;z<flashobject.length;z++){
    var temp='setInterval("flash('+z+')",'+speed+')'
    eval(temp)
    }
    }

    //]]>
    </script>
  4. Simpan Gadgetnya dan selesai.

Penting: Perhatikan script yang saya beri warna. Tulisan berwarna kuning harus Anda ganti dengan kode shoutbox/chatbox Anda. Yang berwarna merah ganti dengan URL gambar yang terletak di sisi blog Anda. Tulisan yang berwarna hijau ganti dengan warna kelap-kelip gambar di samping blog Anda dan angka 150 ganti sesuai selera Anda.
Baca Lengkap....

Membuat Garis Tepi Gambar Berdisko

Untuk postingan kali ini, DEMOnya bisa dilihat di bagian kiri blog ini (buku tamu IKB).

Gimana? Sudah dilihat? Kalau tertarik, saya akan memberikan langkah-langkah membuatnya.

Ini dia langkah-langkahnya:
  1. Login ke akun blog Anda.
  2. Cari kode ]]></b:skin> dan letakkan kode berikut tepat di atasnya.
  3. img.flashgroup{border:3px solid #000}
  4. Cari lagi kode dan letakkan script berikut di atasnya.
  5. <script type='text/javascript'> //<![CDATA[ /* Script By http://www.javascriptkit.com/script/script2/flashimage.shtml */ //Warna kelap-kelip var flashcolor="#00FF00" //Kecepatan kelap-kelip (semakin rendah, semakin cepat) var speed=150 /////No need to edit below here//// var curborder=new Array() var increment=0 var flashobject=new Array() if (document.all||document.getElementById){ while (document.getElementById("flash"+increment)!=null){ flashobject[increment]=document.getElementById? document.getElementById("flash"+increment).style : eval("document.all.flash"+increment+".style") curborder[increment]=0 increment++ } } function flash(which){ if (curborder[which]==1){ flashobject[which].borderLeftColor=flashcolor flashobject[which].borderBottomColor=flashobject[which].borderRightColor } else if (curborder[which]==2){ flashobject[which].borderTopColor=flashcolor flashobject[which].borderLeftColor=flashobject[which].borderBottomColor } else if (curborder[which]==3){ flashobject[which].borderRightColor=flashcolor flashobject[which].borderTopColor=flashobject[which].borderLeftColor } else if (curborder[which]==4){ flashobject[which].borderBottomColor=flashcolor flashobject[which].borderRightColor=flashobject[which].borderTopColor } if (curborder[which]<=3) curborder[which]++ else curborder[which]=1 } if (document.all||document.getElementById){ for (z=0;z<flashobject.length;z++){ var temp='setInterval("flash('+z+')",'+speed+')' eval(temp) } } //]]> </script>
  6. Save template Anda.
Keterangan: Ganti tulisan berwarna biru (langkah kedua) adalah garis tepi gambar sesuai warna kesukaan Anda. Warna kuning adalah warna disko gambar dan warna hijau adalah kecepatan disko.

Langkah selanjutnya yang harus di lakukan adalah memasang kodenya pada gambar yang ingin diberi efek garis tepi berdisko. Perhatikan kode berikut.
<img src='alamat URL gambar anda' id='flash0' class='flashgroup' />

Setiap memasang gambar di blog Anda, tambahkan id dan class seperti di atas. Jika gambar lebih dari satu, id jangan sampai sama. Tambahkan angka 1, 2, ..... dst. Lihat tulisan berwarna biru pada contoh berikut:
<img src='alamat URL gambar anda' id='flash0' class='flashgroup' />
<img src='alamat URL gambar anda' id='flash1' class='flashgroup' />
<img src='alamat URL gambar anda' id='flash2' class='flashgroup' />

Sampai di sini tutorial membuat garis tepi gambar berdisko.....!!!
Baca Lengkap....

Tools Parse Script

Silahkan pergunakan tools berikut untuk mem-parse kode HTML yang ingin ditampilkan dalam postingan Anda! Semoga bermanfaat.




Baca Lengkap....

Cara Mengetahui ID Profil Facebook

G
imana yah cara menjelaskannya. Bingung juga. Menjawab pertanyaan dari sobat blogger tentang Cara Mengetahui ID Facebook yang telah diubah menjadi nama nendiri. Kan bisa tuh, mengubah ID Facebook menjadi nama sendiri. Jika suatu hari kita membutuhkannya, pasti sulit menemukannya karena yang tertulis di sana hanya nama kita. Ada solusi yang sangat mudah untuk mengetahui ID Facebook yang telah diubah.

Caranya, silahkan login dulu ke akun Facebook Anda. Klik Profil, lalu klik kanan gambar profil Anda. Kemudian klik Salin Lokasi Gambar dan copy ke Notepad. Kalau masih bingung, lihat gambar di bawah.


Perhatikan kode Foto Profil yang Anda copy ke Notepad. Di bawah saya beri contoh:

http://profile.ak.fbcdn.net/hprofile-ak-snc4/187746_100001471566164_5304249_n.jpg

Tulisan berwarna biru itulah ID Facebook Anda. Gampangkan?
Baca Lengkap....

Mengubah Warna Background Body Blog Setiap Halaman

Salam hangat selalu! Sehubungan dengan judul postingan Mengubah Warna Background Body Blog Setiap Halaman ini, saya ingin menjelaskan sedikit. Maksudnya adalah warna background di Home Page misalnya akan berbeda dengan warna background berikutnya ketikan membuka halaman lain. Jadi, warnanya akan berubah ketika pengunjung membuka halaman lain dalam blog Anda. Contohnya bisa Anda lihat di sini. Sudah dilihat? Ok, kalau ada yang mau pasang yang seperti itu, silahkan ikuti langkah-langkahnya di bawah ini.
  1. Login ke akun blogger Anda.
  2. Klik Rancangan
  3. Klik Edit HTML
  4. Cari kode <body>. Untuk memudahkan mencarinya, tekan CTRL + F.
  5. Letakkan kode berikut tepat di bawahnya.
  6. <script> /*Random background color- by javascriptkit.com Visit JavaScript Kit (http://javascriptkit.com) for script Credit must stay intact for use*/ //Enter list of bgcolors: var bgcolorlist=new Array("#DFDFFF", "#FFFFBF", "#80FF80", "#EAEAFF", "#C9FFA8", "#F7F7F7", "#FFFFFF", "#DDDD00") document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)] </script>
  7. Setelah itu klik Save Template dan lihat hasilnya.

Catatan: Tulisan yang ditebalkan bisa Anda ganti sesuai selera Anda.

Selesai, kini warna background body blog Anda bisa berubah-ubah!

Credit: JavaScript Kit
Baca Lengkap....

Meningkatkan Page Rank dan Memperbanyak Link In Alexa

Jika anda ingin menaikkan atau memperbanyak link in di alexa blog Anda, caranya sangat mudah, yaitu dengan memposting artikel yang sama seperti yang saya posting saat ini. Ikuti langkah-langkahnya di bawah ini.

Silahkan copy link di bawah ini. Hapus link peringkat 1 dari daftar. Jadi, yang tadinya nomor urut 2 menjadi nomor urut 1, nomor 3 menjadi nomor 2, nomor 4 menjadi nomor 3, begitu seterusnya. Setelah itu, masukan link blog Anda di urutan paling bawah (nomor 10).

  1. aditkus macan kampus
  2. Bahenzz Techno
  3. speCial koRean LoVeRs
  4. Buceu
  5. Tanah sakti
  6. Kasloh blog
  7. Jaririndu Blog

Keterangan:
Jika anda mampu mengajak lima orang saja untuk mengcopy artikel ini, maka jumlah backlink yang bisa Anda dapat adalah:
Posisi 10, jumlah backlink = 1
Posisi 9, jumlah backlink = 5
Posisi 8, jumlah backlink = 25
Posisi 7, jumlah backlink = 125
Posisi 6, jumlah backlink = 625
Posisi 5, jumlah backlink = 3,125
Posisi 4, jumlah backlink = 15,625
Posisi 3, jumlah backlink = 78,125
Posisi 2, jumlah backlink = 390,625
Posisi 1, jumlah backlink = 1,953,125

Dan nama dari alamat blog dapat dimasukan kata kunci yang anda inginkan sehingga dapat menarik perhatian untuk segera diklik. Dari sisi SEO, Anda sudah mendapatkan 1,953,125 backlink dan efek sampingnya jika pengunjung downline mengklik link Anda maka anda juga mendapat traffic tambahan.

Silahkan mencoba cara ini dan jangan lupa untuk menyebarkannya ke teman-teman Anda. Hilangkan link nomor 1 dan masukan alamat blog Anda pada nomor 10. Buktikan sendiri hasilnya setelah itu baru kementar.

Peringatan:
Artikel ini harus permanen (selamanya) di blog Anda. Anda tidak boleh menghapusnya.
Baca Lengkap....

Memasang Widget Pengubah Huruf di Blog

Untuk demonya bisa Anda lihat pada bagian sidebar blog ini atau di sini. Dengan pengubah huruf ini, pengunjung bisa mengubah jenis huruf yang ingin dinguanakan. Selain itu, ukurannya juga bisa disesuaikan sesuai keinginan pengunjung blog Anda.

Cara membuatnya, tinggal copy paste saja.
  1. Login ke blog Anda.
  2. Klik Rancangan.
  3. Pada Elemen Laman, klik Tambah Gadget.
  4. Tambahkan HTML/JavaScript.
  5. Copy kode berikut ke dalamnya.
  6. <center> <script src=" http://ian-ubah-huruf.googlecode.com/files/ian.js "> </script> <form id="forma" name="selecter2" method="POST"> <select gtbfieldid="8" onchange="go2()" style="font-family: tahoma; font-size: 9pt;" name="select3" size="1"> <option value="Times New Roman">Times New Roman </option><option value=" Maven Pro">Maven Pro </option><option value=" Brawler">Brawler </option><option value=" Waiting for the Sunrise">Waiting for the Sunrise </option><option value=" Podkova">Podkova </option><option value=" The Girl Next Door">The Girl Next Door </option><option selected="selected" value="Tahoma">Tahoma </option><option value="Trebuchet Ms">Trebuchet Ms </option><option value="Jura">Jura </option><option value="Nunito">Nunito </option></select> <select gtbfieldid="9" onchange="go1()" style="font-family: tahoma; font-size: 9pt;" name="select2" size="1"> </option><option value="11px">11 </option><option selected="selected" value="12px">12 </option><option value="14px">14 </option><option value="16px">16 </option><option value="18px">18 </option><option value="20px">20 </option></select></form></center>
  7. Beri nama sesuai kemauan Anda dan klik Save.
  8. Masih di halaman Rancangan, klik Edit HTML.
  9. Copy kode berikut di atas kode <head>
  10. <link href='http://fonts.googleapis.com/css?family=Maven+Pro:regular,500,bold,900' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Brawler' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Podkova' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Jura:light,regular,500,600' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Nunito:light,regular,bold' rel='stylesheet' type='text/css'/>
  11. Save Template dan lihat hasilnya.

Sekarang pengunjung blog Anda bisa menggunakan huruf kesukaannya jika bosan dengan huruf blog Anda dan membuat pengunjung blog semakin betah mengunjungi blog Anda.
Baca Lengkap....

Membuat Galeri Foto-Foto Unik

Kalau ada yang ingin mempunyai galeri foto seperti di bawah ini, silahkan memberikan pendapatnya. Maaf kalau tidak terlalu bagus karena saya baru belajar.


  • gambar1
  • gambar3
  • gambar5
  • gambar7
  • gambar9
  • gambar2
  • gambar4
  • gambar6
  • gambar10
Baca Lengkap....

Kontes SEO 2011 di Faceblog

Seperti postingan saya sebelumnya tentang jejaring sosial blogger karya anak bangsa, kembali akan saya posting tentang Faceblog. Namun kali ini, tentang kontes SEO 2011 yang diadakan oleh komunitas tersebut. Rencananya, konteks ini diselenggarakan selama lima bulan untuk semua Blogger Indonesia. Bagi yang belum mendaftarkan blognya, silahkan menuju ke situsnya dan daftar blog Anda. Selain itu, di sana kita bisa berkomunikasi dengan para blogger lain di seluruh Indonesia. Berbagi pengalaman atau berbagi pengetahuan.

Pemenang pertama dalam konteks SEO 2011 dengan Target Keyword “Mari Berkomunitas Di Faceblog akan mendapatkan 1 buah netbook Acer Aspire One + Gratis 1 Tahun domain dan hosting unlimited server Indonesia (IIX). Ketentuan dan waktu penyelenggaraan kontes dimulai tanggal 10 April 2011 (Jam 12:00 wib) dan berakhir pada tanggal 10 September 2011 (Jam 12:00 wib). Pengumuman pemenang rencananya akan dilakukan bulan Oktober 2011. Untuk informasi lebih lengkap tentang ketentuan pendaftaran, ketentuan materi kontes, ketentuan pemenang, dan hadiahnya, silahkan kunjungi http://faceblog.web.id atau bisa klik langsung di sini!

Mari jalin persahabatan dengan penggemar blogger tanah air.
Baca Lengkap....

Cara Buat Link Download di Blog

Salam hangat dari saya! Awalnya, cara membuat link ini saya dapat dari Blog Kang Rohman (terima kasih untuk tipsnya). Kemudian saya sedikit mengubah link downloadnya. Cara membuatnya pun sangat mudah. Saya akan memberikan dua tips yang bisa Anda gunakan.

Pertama, silahkan langsung saja ke blognya Kang Rohman. Anda bisa mengikuti langkah-langkahnya.

Cara kedua, silahkan Anda Upload file ke 4Shared atau dimana saja tempat biasa Anda mengupload file. Saya contohkan di sini Upload filenya dengan http://www.sharebeast.com. Setelah proses upload selesai, copy URL file Anda ke New Tab, lalu klik ENTER. Saya ambil contoh upload file saya. Lihat gambarnya.


Setelah halaman download muncul, klik tombol download dan tunggu sampai box downloadnya muncul.

Copy URL pada box download yang muncul dan pastekan ke dalam postingan yang Anda ingin beri link download. Caranya, Anda bisa ikuti langkah pertama di atas.

Hasilnya akan seperti ini.

Silahkan klik di sini untuk download!!!

Selesai. Terbitkan postingan Anda dan pengunjung siap mendownload langsung.

Catatan: Ini berlaku jika Anda menggunakan Internet Download Manager (IDM). Satu lagi kelebihan dari langkah kedua di atas adalah link download yang ada pada blog kita seolah berasal asli dari blog kita. Artinya, situs tempat Anda mengupload file tadi tidak terbuka alias akan terdownload otomatis.

Selamat belajar dan jangan lupa komentarnya ya!!!
Baca Lengkap....

Cara Membuat Text Area

Selamat Bertemu Kembali. Selain SPOILER, seperti yang dijelaskan pada postingan Cara Membuat Spoiler Pada Postingan, ada satu cara lagi yang bisa kita gunakan pada postingan untuk menghemat ruang pada blog kita. Cara yang saya maksud adalah Text Area. Cara ini juga bisa menghemat postingan yang sangat panjang. Cara membuatnya pun sangat mudah. Tinggal copy saja kodenya.

Untuk text area standar (tanpa background) kodenya sebagai berikut:



Hasilnya seperti di bawah ini



Untuk text area dengan background warna, tambahkan saja kode berikut “background: #ccc;”. Sehingga lengkapnya seperti ini:



Hasilnya seperti dibawah ini.



Untuk mengganti background-nya dengan gambar, tambahkan “background-image: url(href="http://2.bp.blogspot.com/-j_IjH-mhPKg/TcV9pdvFeYI/AAAAAAAAAfc/fSm3ac5owoE/s1600/ANMATCAT.GIF);”. Lengkapnya seperti di bawah ini.



Hasilnya, lihat di bawah.



Tulisan berwarna hijau silahkan ganti dengan alamat gambar Anda. Kode <center></center> adalah supaya text area berada di tengah. Jika ingin lebih bervariasi lagi, tambahkan saja kode berikut:
Font-family --> Untuk model hurufnya
Font-size --> Untuk ukuran hurufnya
Padding --> Jarak antara tepi text area dengan tulisan di dalamnya
Border --> Untuk garis pinggirnya

Selesai deh membuat text area. Terima kasih telah berkunjung ke blog ini.

Selamat belajar dan jangan lupa komentarnya ya!!!!!
Baca Lengkap....

Cara Membuat Spoiler pada Postingan

Selamat Bertemu Kembali!!! Isi postingan suatu blog yang terlalu panjang akan membuat para pengunjung kurang bersemangat untuk membaca postingan tersebut sampai selesai. Nah, untuk menghemat dan membuat pengunjung betah, bisa menggunaka SPOILER. Spoiler adalah salah satu cara untuk menyembunyikan kata yang terlalu panjang atau mempersingkat ruang dalam blog Anda, sehingga ada daya tarik tersendiri bagi pengunjung untuk membacanya. Oke!!! Kita langsung mempraktekkan cara membuatnya.

Caranya sangat mudah. Tinggal copy paste saja kodenya.


Perhatikan tulisan berwarna HIJAU. Di situlah Anda harus meletakkan kata yang ingin di sembunyikan. Gampang kan??? Contohnya bisa Anda lihat pada postingan ini.

Spoiler di atas bisa juga digunakan untuk menyembunyikan gambar. Silahkan copy saja kode berikut:


Hasilnya seperti di bawah ini.



Tulisan berwarna HIJAU Anda ganti saja dengan URL gambar yang ingin disembunyikan. Oke!!! Selesai lagi satu pekerjaan.

Selamat belajar dan jangan lupa komentar ya!!!
Baca Lengkap....

Membuat Template Desain Sendiri (Bag. 6)

Selamat bertemu kembali. Sudah tidak sabar ingin segera menggunakan Template Desain Sendiri di blog Anda? Sabar, tinggal beberapa langkah lagi Anda sudah bisa menggunakannya.

Silahkan buka desain template Anda dan copy paste kode berikut:
  1. Untuk bagian Header. Cari kode <div id="header">, lalu ganti kata Judul Blog dan Deskripsi Blog dengan kode berikut:

    <b:section class='header' id='gadgetheader' preferred='yes'>
    <b:widget id='Header1' locked='false' title='JUDUL BLOG ANDA DI SINI (Header)' type='Header'/>
    </b:section>

    Keterangan: Ganti tulisan berwarna kuning dengan judul blog Anda!

    Lihat gambar:

     
  2. Untuk bagian Menu. Cari kode <div id="menu">, lalu ganti kata Menu Kiri dan Search dengan kode berikut:

    <div id="left">
    <a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="Halaman Awal">Home</a>
    <a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="Multimedia">Multimedia</a>
    <a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="Contact">Contact</a>
    <a href='http://www.NAMA BLOG ANDA.blogspot.com/' target='_blank' title="About Me">About Me</a>
    </div>

    Keterangan: Ganti tulisan berwarna kuning dengan alamat URL blog Anda!

    Lihat gambar:


    Yang harus dilakukan selanjutnya adalah mencari kode berikut,

    #menu {
    overflow: hidden;
    width: 928px; /*panjang menu*/
    font-size: 16px; /*ukuran font*/
    letter-spacing: 1px;
    margin:5px 0 5px 0;
    padding:0;
    height:30px;
    background:#ccc;
    text-align: left;
    border: 1px inset;
    }

    Lalu tambahkan kode berikut di bawahnya.

    #menu a, #menu a:visited {
    color: maroon;
    text-decoration: none;
    padding: 10px;
    }
    #menu a:hover {
    color: red;
    text-decoration: none;
    padding: 10px;
    cursor: default;
    }
    #left {
    width: auto;
    float: left;
    margin: 5px 0 0 3px;
    padding: 0;
    }

    Jadi, selengkapnya akan seperti gambar di bawah.

  3. Untuk bagian Postingan. Cari kode <div id="areapost">, lalu ganti kata Judul Postingan, Isi Postingan, Post Footer, Area Komentar dengan kode berikut:

    <b:section class="main" id="main" showaddelement="no">
    <b:widget id="Blog1" locked="true" title="Posting Blog" type="Blog">
    </b:widget>

    Lihat gambar:

  4. Untuk bagian Sidebar. Cari kode <div id="sidebar">, lalu ganti kata Sidebar Left dan Sidebar Right dengan kode berikut:

    <b:section class="sidebar" id="sidebar1" preferred="yes">
    </b:section>

    Lihat gambar:

  5. Selanjutnya, cari kode berikut. Tempatnya paling awal.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    Ganti kode tersebut dengan kode berikut:

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

  6. Kemudian kode <title>Untitled 1</title> ganti dengan kode berikut:

    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

  7. Cari kode berikut:

    <style type="text/css">
    <!--

    Ganti dengan kode di bawah. Silahkan lihat gambar di atas.

    <b:skin><![CDATA[
  8. Kemudian cari kode ini:

    -->
    </style>

    Lalu ganti dengan kode berikut:

    ]]></b:skin>
  9. Selesai.

Selanjutnya adalah Save As template yang Anda buat. Klik FILE kemudian Save As. Isi nama untuk template Anda kemudian ganti Save As Type dengan XML (lihat gambar di bawah).


Sekarang template desain sendiri siap untuk dipakai pada blog Anda.
Baca Lengkap....

Membuat Template Desain Sendiri (Bag. 5)

Selamat berjumpa kembali. Duh, tidak terasa dah Bagian 5 ya! Sebentar lagi akan selesai proses membuat templatenya. Siap untuk menyelesaikan template Anda. Oke!!!

Kita lanjut ke bagian paling bawah sebuah template, yaitu Footer. Langsung saja copy kode berikut dan letakkan di bawah kode Area Sidebar.

/*-----Untuk Area Paling bawah/footer-----*/
#footer {
width: 928px;
margin: 0;
margin-top: 5px;
padding: 0;
font: 12px arial;
text-align: left;
color: #fff;
line-height: 1.2em;
border: 1px solid black;
overflow: hidden;
}

#copyright {
padding: 10px 0 5px 10px;
}
#copyright a{
color: red;
}
#copyright a:hover {
color: yellow;
text-decoration: none;
font-style: oblique;
font-weight: bold;
}
#info {
padding: 0 0 15px 10px;
}

.clear {clear: both;}

Setelah itu, cari Footer di bagian paling bawah, kemudian tambahkan kode <div></div> di depannya.


Hapus kata Footer, lalu pindahkan kode </div> ke bawah kata Info. Supaya lebih jelas, lihat gambar di bawahnya.


Kemudian ganti kata Copyright dan Info dengan kode berikut.

<div id="copyright">2011 © Desain by <a href="ALAMAT BLOG ANDA/" target="_blank">NAMA ANDA</a></div>
<div id="info">SILAHAKAN ISI DI SINI DENGAN KATA-KATA ANDA SENDIRI</div>

Tambahkan kode <br class='clear'/> di atas kode <div id="footer"> tadi, maka akan seperti gambar di bawah hasilnya.


Akhirnya, selesai juga desain templatenya. Oke!!! Gampang kan membuat template sendiri? Kalau ada yang kurang jelas, silahkan tinggalkan komentar. Tahap ini adalah tahap awal saja, jadi belum bisa digunakan pada blog Anda. Tunggu postingan selanjutnya, Membuat Template Desain Sendiri (Bag. 6).
Baca Lengkap....