Cara menyembunyikan buku tamu/guest book di blog

Cara menyembunyikan buku tamu/guest book di blog atau cara agar buku tamu/guest book bisa tersembunyi di blog.

Buku tamu adalah tempat untuk menaruh pesan singkat/ komentar di blog anda, dalam membuat buku tamu harus menggunakan jasa web yang menyediakan layanan buku tamu. Maksud dari judul tersembunyi disini bukanlah buku tamu yang tidak terlihat oleh pengujung, tetapi buku tamu ini akan berada di sebelah artikel blog dan akan terbuka apabila ada yang klik pada gambar buku tamu tersebut. Cara ini merupakan salah satu cara dalam menghemat tempat pada blog kita. Selain itu, untuk menghemat tempat pada blog, anda juga bisa menambahkan tab view di blog Anda. Jika anda tertarik untuk membuat buku tamu tersembunyi ini, silahkan ikuti langkah berikut:

Sebelum anda membuat buku tamu anda menjadi tersembunyi tentunya anda harus membuat Buku Tamu terlebih dahulu, anda bisa mendapatkannya di Shoutbox, Cbox, atau Shoutmix. Setelah anda memiliki kode buku tamu tersebut, lanjut ke langkah berikut ini:

1. Pertama anda harus login di blogger anda.

2. Kemudian anda Klik Tata Letak --> Tambah Gadget --> Pilih HTML/Java Script.
3. Setelah itu anda Copy kode berikut dan Pastekan Pada kotak HTML

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdSHpmv5qDLLngY6u-3xMo854tT_k6aBqaKeKf6XnRrgydJtNiXI5FFre68Bp8_JIVKoSRY4x0g46C6Ys1UcIRbqj0W2FU_AR7eDGQUrNGBrISwU1auJ5zv6bm7wwlw_fY7JtJfpXDqW0O/') 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">

< Taruh disini kode Shoutbox Anda>

<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href="http://amronbadriza.blogspot.com/" target="_blank">Blogaul</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">

[tutup]

</a>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div>

Ubah tulisan < Taruh disini kode Shoutbox Anda> dengan kode script buku tamu anda.

4. Langkah yang terakhir Save Widget anda.

Demikianlah yang dapat saya sampaikan pada artikel kali ini mengenai cara memasang buku tamu tersembunyi. Semoga apa yang saya samapaikan di atas dapat bermanfaat buat anda.

Cara membuat Menu Bar pada blog

Kali ini saya akan menjelaskan bagaimana cara membuat menu bar pada blog. Pada postingan sebelumnya saya juga telah menjelaskan bagaimana cara membuat menubar pada template klasik.  Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:

Karena banyaknya sobat blogger yang berkomentar karena kebingungan membuat menubar, saya update lagi postingan ini agar lebih relevan dan mudah:

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}

Kali ini saya akan menjelaskan bagaimana cara membuat menu bar pada blog. Pada postingan sebelumnya saya juga telah menjelaskan bagaimana cara membuat menubar pada template klasik.  Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:

Karena banyaknya sobat blogger yang berkomentar karena kebingungan membuat menubar, saya update lagi postingan ini agar lebih relevan dan mudah:

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}

7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7

<div id='menubar'>
<ul>
<li><a href='http://pujudnet.blogspot.com/'>Home</a></li>
<li><a href='http://pujudnet.blogspot.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.com/'>Edit me</a></li>
</ul>
</div>

9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini

<div id='menubar'>
<ul>
<li><a href='http://pujudnet.blogspot.com/'>Home</a></li>
<li><a href='http://pujudnet.blogspot.com.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.com.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.comt.com/'>Edit me</a>
<ul>
<li><a href='http://pujudnet.blogspot.com.com/'>Edit me</a></li>
<li><a href='http://pujudnet.blogspot.com.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>

Keterangan:

• Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
• Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
• Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
• Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
• Seandainya sobat tidak menemukan kode <div id="content-wrapper"> sobat bisa mengedit cara no 8 di laman>add widget>javascript/html.salin kode di no.8 tersebut

Cara Memasang Label Dropdown di blog

 

Setelah sebelumnya saya sudah berbagi ilmu mengenai cara menambahkan gadget label di blog, pada kesempatan kali ini saya akan berbagi ilmu mengenai label juga yaitu mengenai  Cara Membuat Label Bentuk Dropdown Di blog. Label bentuk dropdown ini lebih minimalis sehingga tidak terlalu banyak memakan tempat. Oke langsung saja caranya seperti berikut ini:

1. Anda Login/ masuk ke aknu Blogger anda.

Sebelum anda membuat label dropdown ini anda buat dulu label seperti pada artikel: cara menambahkan gadget label di blog
2. Pada halaman Dasbor, pilih Rancangan --> Edit HTML --> Beri tanda centang pada Expand Template Widget 

3. Kemudian anda Cari kode berikut :

<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr: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'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>

  Supaya lebih mudah untuk mencari kode tersebut gunakan CTRL + F 

  Jika sudah ketemu hapus kode tersebut dan ubah dengan kode di bawah ini :

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Pilih Kategori</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Pada tulisan pilih kategori  dapat anda ganti sesuai dengan selera anda.

4. selanjutnya simpan dan lihat hasilnya

Demikian yang dapat saya sampaikan mengenai cara membuat label bentuk dropdown di blog. semoga cara-cara di atas dapat bermanfaatu buat anda.

Cara Memasang Label Dropdown di blog

 

Setelah sebelumnya saya sudah berbagi ilmu mengenai cara menambahkan gadget label di blog, pada kesempatan kali ini saya akan berbagi ilmu mengenai label juga yaitu mengenai  Cara Membuat Label Bentuk Dropdown Di blog. Label bentuk dropdown ini lebih minimalis sehingga tidak terlalu banyak memakan tempat. Oke langsung saja caranya seperti berikut ini:

1. Anda Login/ masuk ke aknu Blogger anda.

Sebelum anda membuat label dropdown ini anda buat dulu label seperti pada artikel: cara menambahkan gadget label di blog
2. Pada halaman Dasbor, pilih Rancangan --> Edit HTML --> Beri tanda centang pada Expand Template Widget 

3. Kemudian anda Cari kode berikut :

<ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr: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'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>

  Supaya lebih mudah untuk mencari kode tersebut gunakan CTRL + F 

  Jika sudah ketemu hapus kode tersebut dan ubah dengan kode di bawah ini :

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Pilih Kategori</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Pada tulisan pilih kategori  dapat anda ganti sesuai dengan selera anda.

4. selanjutnya simpan dan lihat hasilnya

Demikian yang dapat saya sampaikan mengenai cara membuat label bentuk dropdown di blog. semoga cara-cara di atas dapat bermanfaatu buat anda.

Cara Membuat Kolom Scroll Pada Blog Archive

Beberapa hari ini saya berusaha mencari bagaimana Cara Membuat Kolom Scroll Pada Blog Archive. Dalam hati, kok Arsip blog saya kok panjang banget ke bawah... terlihat tidak bagus jadinya. Pencarian pun tidak sia-sialah. Ketemu deh hasilnya.saya akan mencoba membagi pengalaman tentang tutorial Cara Membuat Kolom Scroll Pada Blog Archive.Mudah-mudah ini bisa digunakan oleh kawan-kawan semua.

Kali ini kita akan Membuat Kolom Scroll Pada Blog Archive. Kenapa memerlukan Scroll, karena tanpa scroll maka arsip blog yang banyak akan membuat blog panjang ke bawah, dan kelihatanya tidak menarik. Untuk itulah kolom scroll diperlukan.

Sewaktu teman-teman memposting suatu artikel dan di-archive-kan secara Hierarki dan Judul Artikelnya ditampilkan, maka semua artikel yang ada di Blog Archive tersebut akan tampil memanjang ke bawah. Nah untuk membuatnya terlihat sedikit rapi agar tidak memanjang terlalu ke bawah, maka kita akan membuat Kolom Scrollnya.

Untuk membuatnya silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates,
3. Cari kode berikut <div id='ArchiveList'> atau ArchiveList

Catatan: Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka teman-teman harus memasang Blog Archive nya terlebih dahulu dengan cara, klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.

4. Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:

<div class='widget-content'>

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>

</div>

<b:include name='quickedit'/>
</div>
</b:includable>

5. Harap disesuaikan saja kodenya, karena tidak semua templates sama,
6. Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height: 200px,
7. Jika sudah klik Save templates dan lihat hasilnya.

Seperti itulah Cara Membuat Kolom Scroll Pada Blog Archive, semoga bisa bermanfaat untuk teman-teman semua dan selamat mencoba. Salam Blogger.

Referensi: http://anggasona-anotherbestblog.blogspot.com