Dummy Blog

Pertama-tama masuklah ke halaman tata letak elemen halaman, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini, kemudian letakkan di dalam formulirnya:

<style type="text/css">
  #highlight{font:bold 50px Impact,Arial,Sans-Serif;}
</style>
<script language="javascript" type="text/javascript">
     var teks="EFEK PELANGI" // teks Anda di sini
     var speed=20 // atur kecepatan perubahan warna

if (document.all||document.getElementById) {
     document.write('<span id="highlight">' + teks + '</span>')
     var storetext=document.getElementById? document.getElementById("highlight") :
document.all.highlight
} else document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")

var r=1
var g=1
var b=1
var seq=1

function changetext() {
     rainbow="#"+hex[r]+hex[g]+hex[b]
     storetext.style.color=rainbow
}

function change() {
if (seq==6) {
b--
if (b==0)
seq=1
}
if (seq==5) {
r++
if (r==12)
seq=6
}
if (seq==4) {
g--
if (g==0)
seq=5
}
if (seq==3) {
b++
if (b==12)
seq=4
}
if (seq==2) {
r--
if (r==0)
seq=3
}
if (seq==1) {
g++
if (g==12)
seq=2
}
changetext()
}

function starteffect() {
     if (document.all||document.getElementById)
     flash=setInterval("change()",speed)
}

starteffect()
</script>

Ganti kode yang Saya beri warna merah dengan teks yang kamu inginkan, atur juga kecepatan perubahan warna pada kode yang Saya beri warna biru. Simpan perubahan dan lihat hasilnya"

Label: Efek, JavaScript, Widget

Pertama-tama masuklah ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode di bawah ini, kemudian letakkan di dalam formulirnya:

<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://hompimpa.googlecode.com/files/tabs%23FF13E5.png') no-repeat;
}
.gbcontent {
  float:left;
  border:2px solid #FF13E5;
  border-right-width:15px;
  background:#F5F5F5;
  box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8);
  -moz-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8);
  opacity:0.7;
  filter:alpha(opacity=70);
}
</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 BUKU TAMU DI SINI

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

Klik Simpan, maka kamu akan mendapatkan hasil seperti ini:

Lebih Banyak Tema

Untuk tema yang lebih beragam, kamu bisa mengganti kode yang Saya beri garis bawah dengan URL di dalam link Pilih!. Klik kanan pada link tersebut kemudian pilih Copy Link Location. Gunakan URL tersebut untuk menggantikan URL yang Saya beri garis bawah. Salin juga kode warna di bawahnya, kemudian gunakan untuk menggantikan kode yang Saya beri garis bawah:

Label: JavaScript, Widget

Tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini, kemudian letakkan di dalam formulirnya:

<style type="text/css">
#pageshare {
  position:fixed;
  top:25%;
  left:0px;
  -webkit-border-radius:0 5px 5px 0;
  -moz-border-radius:0 5px 5px 0;
  border-radius:0 5px 5px 0;
  background-color:#fff;
  padding:0 0 2px 0;
  z-index:1000;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 0 2px rgba(0,0,0,0.7);
  box-shadow:0 0 2px rgba(0,0,0,0.7);
}

#pageshare .sbutton {
  float:left;
  clear:both;
  margin:5px 5px 0 5px;
}

.fb_share_count_top {
  width:48px !important;
}

.fb_share_count_top, .fb_share_count_inner {
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {
  width:49px !important;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

.FBConnectButton_Small .FBConnectButton_Text {
  padding:2px 2px 3px !important;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  font-size:8px;
}
</style>

<div id="pageshare">
     <div class="sbutton" id="gplusone">
          <script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>
          <g:plusone size="tall"></g:plusone>
     </div>

     <div class="sbutton" id="fb">
          <a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a>
          <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
     </div>

     <div class="sbutton" id="rt">
          <script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"></script>
     </div>

</div>

Klik Simpan, maka kamu akan mendapatkan hasil tampilan seperti ini:

Label: Widget

Widget ini adalah elemen-elemen terjemaham Google yang sudah sangat-sangat Saya sederhanakan. Dikhususkan untuk Anda yang tidak ingin memperlambat loading blog karena hadirnya script Google Translate yang terpasang.
Cukup salin baris tautan ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:

<ul>
     <li><a href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;">English</a></li>
     <li><a href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;">French</a></li>
     <li><a href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;">German</a></li>
     <li><a href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;">Spain</a></li>
     <li><a href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;">Italian</a></li>
     <li><a href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;">Dutch</a></li>
     <li><a href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;">Russian</a></li>
     <li><a href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;">Portuguese</a></li>
     <li><a href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;">Japanese</a></li>
     <li><a href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;">Korean</a></li>
     <li><a href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;">Arabic</a></li>
     <li><a href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;">Chinese Simplified</a></li>
</ul>

Klik Simpan.

Label: Widget

Untuk membuat efek transisi yang lembut pada pemunculan navbar seperti pada halaman demo, pertama-tama masuklah ke halaman editor HTML templatemu, kemudian kamu cari kode dengan selektor yang tampak seperti ini:

#navbar-iframe {
  ...
  ...
  ...
}

Tidak usah pedulikan deklarasi-deklarasi yang dituliskan di dalamnya, langsung hapus saja kode tersebut kemudian ganti dengan kode ini:

#navbar-iframe {
  position:absolute;
  top:0;
  padding-bottom:7px;
  z-index:10000;
  opacity:0;
  visibility:hidden;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

#navbar-iframe:hover {
  visibility:visible;
  opacity:1;
}

Klik Simpan Template.

Label: CSS, Widget

Untuk membuat widget recent comment dengan tampilan yang luar biasa ganteng seperti gambar di atas, cukup salin kode ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:

<style type="text/css">
#komentar {
  font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;
  background-color:#597624;
  margin:0px 0px;
  padding:10px 10px;
  color:#000;
  border:4px solid #597624;
  -webkit-box-shadow:inset 0px 0px 2px #000;
  -moz-box-shadow:inset 0px 0px 2px #000;
  box-shadow:inset 0px 0px 2px #000;
}

#komentar ul {
  margin:0px 0px;
  padding:0px 0px;
  border-top:1px solid #455F20;
  border-bottom:1px solid #799D1A;
}

#komentar ul li {
  border-top:1px solid #799D1A;
  border-bottom:1px solid #455F20;
  padding:3px 0px;
  list-style:none;
}

#komentar ul li b a,
#komentar ul li b a:link,
#komentar ul li b a:visited,
#komentar ul li b {
  color:#D7E5FD;
  text-shadow:0 1px 1px rgba(0,0,0,0.4);
}

#komentar ul li b:before {
  content:url(http://3.bp.blogspot.com/-abTiDALn6h0/TpJYHn1AmoI/AAAAAAAAA8I/hRAhFSBZhlY/s1600/feed-icon-green.png);
  margin:0px 4px 0px 0px;
  display:inline-block;
  *display:inline;
  vertical-align:middle;
}
</style>
<script type="text/javascript">
var jmlkomentar = 14,
    jmlkarakter = 200,
    home_page   = "http://hompimpaalaihumgambreng.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/blogger-rc-comments.js" type="text/javascript"></script>

Tentukan jumlah komentar yang akan ditampilkan pada var jmlkomentar dan jumlah karakter pada var jmlkarakter. Ganti kode yang Saya beri warna merah dengan alamat blogmu sendiri.
Klik Simpan dan lihat hasilnya:

Label: JavaScript, Komentar, Widget

Mungkin kalian sudah pernah melihat kotak kecil berisi keterangan dan pesan penulis disertai judul posting dan tanggal terbit yang biasa ditampilkan di bawah posting, namun di sini Saya hanya ingin menawarkan tampilan yang sedikit berbeda seperti ini:


Di sini Saya telah menerapkan beberapa kode perwakilan yang umum terdapat di dalam sebuah widget posting seperti kode perwakilan judul, perwakilan link judul, perwakilan tanggal terbit dan nama penulis, sehingga kamu tidak perlu lagi menuliskan nama dan URL secara manual, karena kode-kode tersebut nantinya akan menyesuaikan diri berdasarkan data-data yang telah tersimpan menurut jenisnya. Yang perlu kamu lakukan hanya mengganti gambar dan ulasannya saja.

Pertama-tama, masuklah ke halaman editor HTML templatemu kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.

Temukan kode ini:

<div class='post-footer'>


Salin kode ini, kemudian letakkan tepat di atas kode tadi:

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div class='admin-tulisan'>
          <h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a> Lokasi: Sumpiuh, Banyumas</h4>
          <div class='kontainer'>
               <img src='http://1.bp.blogspot.com/_yGa4b5VGx6w/Skrkk_0ByLI/AAAAAAAAAC8/gJy0GYR_M08/S220/toilet.jpeg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a>, diterbitkan oleh <data:post.author/> pada hari <data:post.dateHeader/>. Semoga artikel ini dapat menambah wawasan Anda. <data:post.author/> adalah seorang penulis mahadahsyat yang masih suka pipis di celana dan maunya nenen sama mama. Suka minta jajan yang aneh-aneh dan suka kentut di depan mikrofon.
               <div style='clear:both;'/>
          </div>
     </div>
</b:if>
<!-- Akhir Kotak Admin -->

Sekarang gulung formulirnya ke atas, dan segera temukan kode ]]></b:skin> atau </style>. Letakkan kode ini tepat di atasnya:

.admin-tulisan {
  display:block;
  width:98%;
  background:#CFE2E0;
  border:2px solid #fff;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  padding:0;
  margin:30px auto 10px auto;
  font:normal 11px Arial, Sans-Serif;
  color:#222;
}

.admin-tulisan .kontainer {padding:5px;}

.admin-tulisan h4 {
  background:#8A9C04;
  border:none;
  border-bottom:1px solid #699019;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
  font:bold 11px Arial,Sans-Serif;
  padding:5px 10px;
  margin:0 0 0 0;
  display:block;
}

.admin-tulisan h4 a {color:#FEEA83;}

.admin-tulisan img {
  width:70px;
  height:70px;
  margin:0 10px 0 0;
  float:left;
  border:1px solid #954B02;
  padding:4px;
  background:#C36702;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

Ganti kode yang Saya beri warna merah dengan URL foto profilmu. Untuk mendapatkan URL foto profil caranya mudah. Cukup klik kanan pada foto profil di dasbormu, kemudian pilih copy image location:

Untuk selebihnya Saya yakin kamu bisa menyesuaikannya sendiri.
Klik Simpan Template.

Label: Desain Tampilan, Footer, Widget

Selain menggunakan tag kondisional, salah satu cara praktis untuk menghemat ruang sidebar adalah dengan menerapkan sistem tabulasi widget sidebar otomatis seperti ini:


Hasil akhir proyek ini nantinya akan secara otomatis membuat sejumlah widget (bisa ditentukan jumlahnya) membentuk tabulasi-tabulasi dimana judul widget akan menjadi elemen tabulasinya, sedangkan konten widget akan menjadi tubuhnya.

Pertama-tama masuklah ke halaman editor HTML templatemu, kemudian cari script yang tampak seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

Jika templatemu sudah dilengkapi dengan script tersebut, kita bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum ada, salin dulu script tersebut lalu letakkan di atas kode </head>

Setelah itu salin kode ini kemudian letakkan di bawah script tadi:

<script type='text/javascript'>
//<![CDATA[
var starttab = 0;
var endtab = 3;
var sidebarname = 'sidebar-wrapper';

var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class='widget-wrapper'><ul class='tab-wrapper'></ul></div>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class='tab' id='tabid"+sidebarname+j+"'>"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+"  .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("hompitab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .hompitab").hide();$jtab1("#widg"+$jtab1(this).attr("id")).fadeIn();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()});

//]]>
</script>

Terakhir tinggal meletakkan kode CSS ini di atas kode ]]></b:skin> atau </style>:

/*
 * Modifikasi 3 Oktober 2011 :: Taufik Nurrohman
 * (http://hompimpaalaihumgambreng.blogspot.com)
 * (original: http://www.abu-farhan.com)
 */

.hompitab {
  position:relative;
  z-index:1;margin:0px 0px;
  padding:0px 0px;
  border:1px solid #ccc;
  background:#fff;
}

.hompitab .widget-content {
  margin:10px 15px !important;
}

ul.tab-wrapper {
  margin:15px 0 -10px 0;
  padding:0 0 0 0;
}

ul.tab-wrapper li {
  position:relative;
  z-index:0;
  cursor:pointer;
  background:#666;
  padding:6px 8px 5px;
  text-decoration:none;
  color:#ebebeb;
  font:bold 11px Arial,Sans-serif;
  text-shadow:0 1px rgba(0,0,0,0.4);
  display:inline;
  list-style:none !important;
  margin:0px 1px;
  text-transform:uppercase;
  -webkit-border-radius:3px 3px 0px 0px;
  -moz-border-radius:3px 3px 0px 0px;
  border-radius:3px 3px 0px 0px;
}

ul.tab-wrapper li.active-tab {
  border:1px solid #ccc;
  border-bottom-color:#fff;
  background:#fff !important;
  z-index:2;
  color:#666;
  text-shadow:none;
}

Ganti kode yang Saya beri warna merah dengan ID sidebarmu. (ID sidebar??)

Untuk menentukan ID sidebar, kamu cari baris kode yang kurang lebih tampak seperti ini:

<div id='sidebar-wrapper'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
          <b:widget id='PopularPosts1' locked='false' title='Populer' type='PopularPosts'/>
          <b:widget id='Label1' locked='false' title='Media' type='Label'/>
          <b:widget id='BlogArchive1' locked='false' title='Arsip' type='BlogArchive'/>
          <b:widget id='HTML4' locked='false' title='Label' type='HTML'/>
          <b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
     </b:section>
</div>

Nah, kode yang Saya beri warna merah itulah yang dimaksud sebagai ID sidebar.
Kode var starttab=0;var endtab=3; adalah variabel untuk menentukan jumlah widget yang akan dijadikan tabulasi. Urutan pertama dimulai dari 0, keudian tentukan batas akhir widget pada variabel var endtab. Misalnya, jika kamu menuliskan angka 3 pada var endtab, maka empat buah widget di sidebarmu akan secara otomatis berubah menjadi elemen tabulasi, sementara selebihnya tidak.

Klik Simpan Template.

Contoh Template dengan Sistem Tabulasi Sidebar

Berikut ini adalah beberapa contoh template yang dilengkapi dengan sistem tabulasi sidebar, namun dengan metode target tabulasi yang sedikit berbeda. Ingin tahu perbedaannya? Bongkar saja!!!

Label: Footer, JQuery, Sidebar, Widget