Membuat CahtBox Auto Hiden

Pada kesempatan kali ini Bang Dayat akan share Cara Membuat Auto Hidden Chat Box,mungkin sudah banyak yang posting tentang Cara Membuat Auto Hidden Chat Box ini. Membuat auto hidden chat box ini supaya blog Anda terlihat lebih atraktif dan tentunya mengehemat side bar blog Anda., karena Buku Tamu ini akan otomatis tersembunyi ketika Anda membuka blog, dan akan terbuka ketika Anda mengklik untuk mengisinya. 

Ikuti langkah-langkah di bawah ini:
1. Masuk/login blog
2. Klik Rancangan/Design
3. Klik Elemen Laman/Page Elements
4. Klik Add Gadget
5. Cari Gadget HTML/JavaScript
6. Copas kode di bawah ini:
debby

KODE CSS/JAVASCRIPT :

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i642.photobucket.com/albums/uu147/remoxp/Chatbox.png') 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">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="230" height="275" src="http://www6.cbox.ws/box/?boxid=693379&amp;boxtag=27h2kj&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-693379" style="border:#DBE2ED 1px solid;" id="cboxmain6-693379"></iframe></div>
<div><iframe frameborder="0" width="225" height="60" src="http://www6.cbox.ws/box/?boxid=693379&amp;boxtag=27h2kj&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-693379" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform6-693379"></iframe></div>
</div>
<!-- END CBOX -->
<div style="text-align:center; font-size:xx-small;">Get This Widget<a href="http://anakgilaonline.blogspot.com/2012/04/cara-membuat-auto-hidden-chat-box.html" target="blank">Get This Widget</a></div>

<a href="javascript:showHideGB()">
</a></div>

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

7. Simpan dan lihat hasilnya. 

Keterangan :

• Kode yang berwarna BIRU adalah URL gambar kalian, jika punya gambar sendiri ganti URL itu dengan URL gambar kalian sendiri
• Kode yang berwarna MERAH adalah kode Chat Box kalian.

Nah itulah beberapa langkah untuk Cara Membuat Auto Hidden Chat Box dengan mudah,  semoga bermanfaat bagi kawan-kawan semua.

Salam Bang Dayat

Menghilangkan Langganan Enteri Atom di Blog

Haii sob ada postingan baru nich .hehehe di malam yang sunyi ini saya mau menjelaskan bagaimana Cara Menghilangkan Link Berlangganan Entri Atom di Blog.Kamu tentunya pernah melihat tulisan seperti ini kan Langgan: Poskan Komentar (Atom) ?yupzz tulisan ini biasanya ada di bawah postingan blog kita. bagi sebagian orang tulisan ini mungkin membuat risih,atau ga enak aja buat dipandang .hehehehe bagaimana cara menghilangkanya ? yuupzz..Cara Menghilangkan Link Berlangganan Entri Atom di Blog ini Cukup mudah.Caranya tinggal ikuti aja langkah-langkah Menghilangkan Link Berlangganan Entri Atom Berikut Ini.

1.Login Ke blogger Dengan ID kamu.

2.Klik Tata Letak Kemudian Klik Edit HTML.

3.Selanjutnya Cari Kode ]]></b:skin> .Atau biar lebih gampang gunakan tombol CTRL+F.

4.Kalo Udah ketemu copy dan paste kode berikut diatasnya.

.feed-links{
display:none;
}

5.Kalo Udah selesai jangan lupa klik Simpan Template.

6.Tinggal kamu lihat hasilnya dech .pasti itu link udah ilang.hehehe

Membuat Menu TAB View

Saya sendiri kadang bingung, banyak widget yang harus di tampilkan di sidebar blog saya tapi karena tempat tidak mencukupi akhirnya tidak saya pasang. Untuk mengatasi semua itu kita bisa memakai cara dengan membuat menu tab view 3 kolom yang tentunya akan menghemat tempat, karena kita bisa menaruh widget-widget blog yang kita inginkan di dalam menu tab view tersebut.
Berikut Cara Membuat Menu Tab View :
Masuk blogger > rancangan > edit html > centang expand template widget
cari kode ]]></b:skin>
copy kode di bawah ini kemudian paste tepat di atas kode ]]></b:skin>

KODE CSS/JAVASCRIPT :

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font: 12px Arial, "Times New Roman", Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CEF6CE;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Perhatikan tulisan :
width: 103px; = lebar tabs (tab1, tab2, tab3).
background-color: #CEF6CE; = warna latar belakang tabs (tab1,tab2,tab3).

selanjutnya cari kode </head>kemudian pastekan kode script di bawah ini tepat di atas kode </head>

KODE CSS/JAVASCRIPT :

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

Kemudian Simpan / Save Template.
Selanjutnya Klik Design/Rancangan >> Page Element >> Add a Gadget >>HTML/Javascript
copy kode di bawah ini di dalam box atau kotak HTML/Javascript
Debby

KODE CSS/JAVASCRIPT :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Perhatikan tulisan merah width: 350px; ini adalah ukuran kotak seluruhnya bukan per tab. Kemudian tulisan Judul Tab 1,2,3 itu adalah lah judul tab, contoh gambar di atas judulnya adalah recent post, recent comment, statistic. Kemudian Isi tab 1,2,3  bisa di isikan script html, banner dan script widget lainnya.. Sampai disini selesai tidaklah begitu sulit Cara Membuat Menu Tab View, hanya membutuhkan kesabaran sedikit saja :D

Silahkan di coba semoga berhasil.

Membuat Recent Post Coment Satistic Bersampingan

Recent Comment adalah Komentar Terakhir yang ada di blog kita, baik komentar dari pengunjung mau pun komentar dari kita sendiri atau admin.

Cara membuat recent comment di blog ini maksudnya adalah menampilkan komentar terakhir yang ada di blog kita. Ini salah satu widget favorit saya, kenapa karena memudahkan saya untuk memantau siapa saja yang berkomentar di blog saya. Selain itu menurut saya recent comment ini juga berfungsi untuk menarik perhatian pengunjung untuk masuk ke artikel yang sudah di komentari pengunjung lainnya dan ini saya rasa bisa juga di kategorikan dalam teknik seo.
Contoh recent comment bisa lihat gambar di samping, recent comment yang ada di blog saya, saya masukan ke dalam tab menu view, jika belum tahu cara membuat menu tab view bisa baca : Cara Membuat Menu Tab View.

Ok langsung saja Cara Membuat Recent Comment di Blog :
Masuk blogger > Design/Rancangan >> Page Element >> Add a Gadget >>HTML/Javascript

Kemudian pastekan script di bawah ini di dalam box HTML/Javascript

KODE CSS/JAVASCRIPT :

<script style="text/javascript" src="http://antigaptek.googlecode.com/files/recentcomment.js">
</script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script> <script src="http://antigaptek.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Ganti tulisan berwarna merah antigaptek.com dengan alamat blog atau web anda dan terakhir lihat hasilnya.

Pasang Download Artikel PDF di blog

Sudah lama saya tidak posting karena saya sedang berburu backlink untuk artikelipaymu.com pembayaran online indonesia, tapi hasilnya masih belum memuaskan. Hehehe...
Pasang Download Artikel Blog file PDF maksud nya adalah sebuah widget yang berfungsi untuk mendownload artikel yang kita posting otomatis dalam format file PDF. Menurut saya widget ini sangat berguna karena memudahkan pembaca untuk menyimpan artikel kita, apa lagi artikel yang berbentuk tutorial-tutorial artikel ini sangat penting untuk di simpan agar bisa di ingat dan di pelajari di kemudian hari. Lihat Gambar disamping adalah contoh artikel yang di download dalam format PDF.

Berikut ini cara Pasang Download Artikel Blog file PDFdi blog :
cara nya sangat mudah kita hanya menuju ke web http://joliprint.com/ kemudian pilih blogger gadget, dan langkah selanjutnya sudah ada di web tersebut jadi sobat tinggal mengikutinya saja.

Cara kedua adalah dengan widget yang sudah saya modifikasi, dan widget nya terletak di setiap akhir artikel.
Cari kode <data:post.body/> kemudian copy kan kode di bawah ini tepat di bawah kode<data:post.body/>

Debby

KODE CSS/JAVASCRIPT :

<div style='font-size:16px; text-align:center; padding-bottom:20px'>
<script charset='ISO-8859-1' src='http://antigaptek.googlecode.com/files/savetopdf.js'type='text/javascript'/>
<script type='text/javascript'>$joliprint().set(&quot;buttonUrl&quot;, &quot;https://lh5.googleusercontent.com/-FY_LScSt-9U/Ti2ImQ3uHJI/AAAAAAAAAZo/T16TIOWidy8/savetopdf1.png&quot;).write();</script>
<br><b><u>Untuk Download Artikel Klik Gambar</u></b></br>
</div>

perhatikan https://lh5.googleusercontent.com/-FY_LScSt-9U/Ti2ImQ3uHJI/AAAAAAAAAZo/T16TIOWidy8/savetopdf1.png itu adalah link url gambar jadi bisa di ganti dengan gambar sobat sendiri.

Widget ini apabila gambar di klik maka artikel langsung di download.berikut screen shoot contohnya :

 

Semoga dengan widget ini, artikel kita bisa di simpan banyak orang karena di anggap penting dan berguna.

Membuat Tombol reply komentar di blog

Pada saat blogwalking ke sobat-sobat blogger yang menggunakan blogspot saya melihat ada beberapa blog pada bagian form komentarnya memiliki tombol reply comment atau balas komentar.
Tombol reply komentar di blog sangat memudahkan kita untuk membalas komentar dari sobat-sobat pengunjung kita. Dimana jika ingin membalas komentar kita hanya cukup klik tombol reply saja.
Berikut cara membuat tombol reply komentar di blog :
Masuk blogger > rancangan > edit html > centang expand template widget
Kemudian cari kode <data:commentPostedByMsg/>, copy kan script berikut ini tepat di bawah kode <data:commentPostedByMsg/>

KODE CSS/JAVASCRIPT :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=7640545051138011304&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onClick='javascript:window.open (this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450,&quot;);return false;' style='padding:0px 5px; border:1px solid #ddd;'>Reply Comment</a>
</b:if>

Kemudian simpan template.

Perhatikan tulisan yang berwarna merah  blogID=7640545051138011304 pada script di atas. Blogid tersebut dengan blog id sobat.
Cara nya masih di edit html, kemudian tujukan pandangan sobat ke address bar browser sobat.
Nah di situ akan terlihat blogid sobat. Jika kurang jelas lihat di screenshoot di bawah ini.