Pengganti

Tampilkan postingan dengan label widget. Tampilkan semua postingan

Sabtu, 07 Desember 2013

Membuat Hidden Widget Buku Tamu Widget Tersembunyi

Pada tulisan sebelumnya saya membahas tentang bagaimana membuat rolling widget (widget bergeser) yang bisa keluar masuk dari balik halaman blog kamu. Nah, pada tulisan kali ini saya akan membahas hidden widget (widget bersembunyi). Widget ini akan muncul dan bersembunyi lagi jika kamu mengkliknya.

Sebenarnya cara membuat hidden widget ini tidak jauh berbeda dengan cara membuat rolling widget, perbedaannya hanya pada script-nya saja. Jika kamu penasaran dan ingin tahu cara membuatnya ikuti saja langkah-langkah berikut:

Kopikan script di bawah ini (Gunakan Control C):


<!-- Mulai Hidden Widget -->
<style type="text/css">
.gb_fixed{
position:fixed;
top:10px; /*jarak dari atas*/
right:0px;  /*jarak dari samping kanan*/
z-index:+1000;
}
* html .gb_fixed {position:relative;}
#hidden_gb {
display:none;
border:2px solid #A5BD51; /*ketebalan dan warna kotak*/
background:#F0F0F0; /*warna latar*/
padding:5px 10px 0px 10px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb" cellpadding="0" cellspacing="0">
<tr><td>
<!-- Gambar Atas -->
<div style="text-align:center;"><a href="javascript:void(0)" onclick="gb_showHideGB()" title="Close/Tutup"><img style="border:0px; width:100px; height:auto;" alt="Guestbook" src="http://sites.google.com/site/ruangsc/imgsb/guestbook.png" /></a></div>

Kode Shoutbox atau Buku Tamu

<br/>
<script type="text/javascript" src="http://enes-sc.googlecode.com/files/hiddenwidget.js"></script>
</td></tr></table></div>
<!-- Gambar Samping -->
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img style="border:0px;" src="http://sites.google.com/site/ruangsc/imgsb/GB1.png" /></a>
</div>
<!-- Selesai Hidden Widget -->

Ubahlah yang hurup yang diberi warna merah tebal sesuai dengan kebutuhan kamu.
Keterangan:
Pada widget di atas disetting menggunakan gambar samping Buku Tamu hijau, seperti ini:

ketebalan dan warna kotak dengan 2px solid #A5BD51
URL gambar dengan
http://sites.google.com/site/ruangsc/imgsb/GB1.png

Tapi jika kamu mengginginkan yang biru (gambar Gueestbook), gantilah ketebalan dan warna kotak serta gambar dengan pilihan di bawah ini:

ketebalan dan warna kotak dengan 3px solid #003399
URL gambar dengan
http://sites.google.com/site/ruangsc/imgsb/GB2.png
Setelah memilih salah satu gambar tersebut, lalu gantilah kalimat Kode Shoutbox atau Buku Tamu dengan script Shoutbox Chat yang kamu miliki.
Ubahlah ukuran tinggi (height) Shoutbox sehingga tidak melebihi tinggi halaman blog kamu.

Selanjutnya kamu lakukan langkah atau cara berikut:

Dari Dashboard blogger, pilih Tata Letak - Elemen Halaman.
Kemudian klik Tambah Gadget dan pilih HTML/Javascript.
Paste script Hidden Widget tadi dan jangan diberi judul (title).
Setelah itu save dan ucapkan Alhamdulillah...

Nah, cukup mudah kan? Ok coy, selamat mencoba...

Tambahan:
Berikut adalah beberapa gambar atas yang bisa kamu pilih (klik untuk melihatnya):
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/guestbook.png
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/guestbook1.gif
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/guestbook2.gif

Referensi: Dari berbagai sumber

ReadFull Article ..

Kamis, 07 November 2013

Menampilkan widget hanya di postingan atau homepage tanpa ribet

Hai sobat blogger!!! Pada postingan sebelumnya aku memposting tentang bagaimana cara meningkatkan pengunjung blog, kali ini, walaupun sedikit berbeda, ada tips yang tidak kala menariknya bro!!!

Tutorial blogspot kali ini saya yakin sangat membantu teman blogger dalam menghias tampilan blog kesayangannya. Adalah teknik menampilkan widget hanya di postingan atau homepage PLus tanpa ribet. Tanpa ribet? maksudnya??

Kita liat perbandingannya..

yang ribet:

A. Widget hanya tampil di homepage

Ini dia cara yang biasa di gunakan.

1. Log in ke blogger

2. Masuk ke Rancangan

3. Edit HTML - Centang kotak Expand Template Widget

4. Setelah itu cari nama widget yang sobat pasang, seperti kode dibawah ini

<b:widget id=HTML1 locked=false title=tutorial blogspot type=HTML>

<b:includable id=main>

<b:if cond=data:blog.homepageUrl == data:blog.url>

<b:if cond=data:title != "">

</b:if>

<data:content/>

</div>

<b:include name=quickedit/>

</b:if>

</b:includable>

</b:widget>

B. Widget hanya tampil di postingan

1. Log in ke blogger

2. Masuk ke Rancangan

3. Edit HTML - Centang kotak Expand Template Widget

4. Selanjutnya cari nama widget yang ingin disembunyikan,

<b:widget id=HTML1 locked=false title=tutorial blogspot type=HTML>

<b:includable id=main>

<b:if cond=data:blog.url != data:blog.homepageUrl>

<b:if cond=data:title != "">

</b:if>

<data:content/>

</div>

<b:include name=quickedit/>

</b:if>

</b:includable>

</b:widget>

Ket :

Kode yang berwarna merah yang harus di tambahkan

Sebenarnya sih tidak salah, bahkan sayapun menggunakannya. tapi sebelum saya mengetahuinya.

Kali ini caranya cukup simpel, bahkan newbie pun bisa langsung bisa membuatnya. Dari pada ane banyak bacot, mendingan kita langsung saja ke TKP.

A. Widget hanya tampil di homepage

1. Log in dulu ke Blogger

2. Masuk ke rancangan

3. EDIT HTML - Jangan centang kotak expand template widget

4. Cari kode ]]></b:skin>

5. Copas kode berikut di bawahnya

<b:if cond=data:blog.pageType == "item">

#kode widget{display:none}

</b:if>

</style>

Untuk menampilkan widget hanya di postingan, kita cukup mengganti kode yang berwarna biru

dengan kode !=

sehingga menjadi seperti ini:

<b:if cond=data:blog.pageType != "item">

#kode widget{display:none}

</b:if>

</style>

Ket:

kode widget biasanya terdapat di antara tag <body> hingga penutupnya </body>

kodenya yang umum seperti ini:

<b:widget id=HTML5 locked=false title=Ide bagus on facebook type=HTML/>

HTML5 adalah kode widgetnya.

yang berwarna biru adalah kode widgetnya.

Sekian dulu postingan saya bro.. semoga membantu sobat - sobat blogger sekalin dalam menghias blog

HAPPY BLOGGING

ReadFull Article ..

Jumat, 25 Oktober 2013

Cara Menambahkan Efek Scroll Pada Widget Bloglist

Cara Menambahkan Efek Scroll Pada Widget Bloglist - Hallo sobat blogger?? pada postingan kali ini saya akan berbagi kepada kalian yaitu Cara Menambahkan Efek Scroll Pada Widget Bloglist . Memang banyak orang yang menggunakan widget bloglist dari dari gadget blogger. Dengan memanfaatkan widget bloglist ini, kita bisa melihat artikel - artikel terbaru dari blog yang terdapat didalamnya, sehingga kita dapat mengetahui setiap topik bahasan dalam blog-blog tersebut.

Sayangnya, jika isi dari widget bloglist ini terlalu banyak maka akan terlihat memanjang dan akan memenuhi halaman blog. Nah, maka dari itu fungsi scroll pada widget bloglist ini sangat berguna. Memang kelihatan sulit untuk menambahkan fungsi scroll, karena widget ini bukan merupakan HTML/JavaScript. Cara menambahkannya pun cukup mudah, hanya menambahkan perintah overflow, lalu atur tinggi dan fungsi scroll pun sudah jadi. Dan seperti yang kamu lihat, widget bloglist milik saya juga menggunakan fungsi scroll (pada sidebar yang berjudul Friends link)

Mari kita simak Tutorialnya :

1. Langkah pertama, harus Login ke Account Blogger terlebih dahulu

2. Langkah kedua, Bagi yang belum membuat widget bloglist, dapat lihat tutorialnya disini (bagi yang sudah punya tidak usah ikuti langkah kedua)

3. Masuk ke Template lalu Edit HTML

4. Jangan lupa untuk mencentang "Expand Template Widget"

5. Cari kode BlogList

6. Perhatikan baik-baik kode dibawah ini :

<b:widget id=BlogList1 locked=false title=Friend links type=BlogList>
<b:includable id=main>
    
    <b:if cond=data:title != "">
      <h2 class=title><data:title/></h2>
    </b:if>

    <div class=widget-content Sisipkan kode>

7. Tambahkan/sisipkan perintah style=overflow:auto; height:200px pada kode yang berwarna biru

sehingga menjadi seperti dibawah ini.

Keterangan : Atur ukuran tinggi (height) sesuai kebutuhan

8. Sebelum Menyimpan Template, sebaiknya di pratinjau/preview terlebih dahulu untuk melihat apakah widget bloglistnya udah ditambahkan fungsi scroll atau belum

9. Bila sudah benar, Klik Simpan Template

Mudahkan ?? kita hanya perlu menambahkan perintah overflow, dan widget bloglistnya sudah mempunyai fungsi scroll.

Kalau sobat masih tidak mengerti, sobat dapat bertanya pada kolom komentar di bawah ini.

Semoga bermanfaat :D

ReadFull Article ..