Cara Membuat Background Blog Berdasarkan Hari

Tampilan blog yang dinamis merupakan salah satu trik untuk membuat pengunjung blog menjadi betah. Blog yang dinamis juga merupakan suatu keharusan jika ingin mendapatkan trafik pengunjung yang signifikan. Salah satu trik membuat tampilan blog yang dinamis adalah membuat gambar latar belakang blog bisa berubah secara otomatis perhari. Wah pasti penasaran dong koq bisa ???, Oke buat yang penasaran dan masih bingung saya berikan cara merubah gambar background blog berdasarkan hari secara otomatis.

Cara Pemasangan

• Login ke blog sobat.
• Klik "Design" kemudian klik "Edit HTML".
• Cari kode </Head> kemudian copy-paste kode dibawah ini tepat diatas kode </Head>

<script type='text/javascript'>
today = new Date();
day = today.getDay();
sunday = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wku1W9BIDlv8kFbky3NcPfwpDb-7wNAPI3NBZ4xDUtxLgsVIGUoz1IDtFPN__V556t2qJqvSUWpB1Bn8bUKxjep2xI6WfTLiKmiqDStFUrmpUngPpualChRK6ZEOaEkqiHPe0wSZDFw/s1600/BlueNebula.jpg&quot;;
monday = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6mKRR-AfS458V6kxmMnyMT2dpSK5IyE1vZOJHh4S65GIMVSPA5gY_cz2imJmPcat-hnwzRmulC8ym3N2KM77o1VMLCghAMkFXLH4bW-l5yoWRJLi24vIsdcF47euNjwZrXvE_ETY0Ov8/s1600/City.jpg&quot;;
tuesday = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim3s7ocxGTMSSaIAj25k8on6yrTC-_4aK9_JisSk5gM_fuDUPvumEhqxPbL_FN_K8fGQffuLNte7BORrnAooQL-kpEcx0ZW3NZR6LxJvugoa4h4Yf15FB27ztmUWiAuM959TWjGnZfdgI/s1600/HackerWall.jpg&quot;;
wednesday = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBeo_dTuZ67d6a0DZhDneB7MI21Bk3xaf0zriUaV9yvKdpY4e4rPXaqCe_yk90j8DFrW7LPA4o3OPxlh9EXjPjkkIiFwuIfvrMG2_dqgf6nrykOrI5WKStT76WkMLqlZjYTvAY_wJLAPE/s1600/Protect.jpg&quot;;
thursday = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim3s7ocxGTMSSaIAj25k8on6yrTC-_4aK9_JisSk5gM_fuDUPvumEhqxPbL_FN_K8fGQffuLNte7BORrnAooQL-kpEcx0ZW3NZR6LxJvugoa4h4Yf15FB27ztmUWiAuM959TWjGnZfdgI/s1600/HackerWall.jpg&quot;;
friday = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6mKRR-AfS458V6kxmMnyMT2dpSK5IyE1vZOJHh4S65GIMVSPA5gY_cz2imJmPcat-hnwzRmulC8ym3N2KM77o1VMLCghAMkFXLH4bW-l5yoWRJLi24vIsdcF47euNjwZrXvE_ETY0Ov8/s1600/City.jpg&quot;;
saturday = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wku1W9BIDlv8kFbky3NcPfwpDb-7wNAPI3NBZ4xDUtxLgsVIGUoz1IDtFPN__V556t2qJqvSUWpB1Bn8bUKxjep2xI6WfTLiKmiqDStFUrmpUngPpualChRK6ZEOaEkqiHPe0wSZDFw/s1600/BlueNebula.jpg&quot;;
arday = new Array(sunday, monday, tuesday, wednesday, thursday, friday, saturday);
document.write(&quot;<style>body{background: url(&quot; + arday[day] + &quot;); background-size:100% 100%; background-repeat:no-repeat; background-attachment:fixed;}</style>&quot;);
</script>

Kode "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wku1W9BIDlv8kFbky3NcPfwpDb-7wNAPI3NBZ4xDUtxLgsVIGUoz1IDtFPN__V556t2qJqvSUWpB1Bn8bUKxjep2xI6WfTLiKmiqDStFUrmpUngPpualChRK6ZEOaEkqiHPe0wSZDFw/s1600/BlueNebula.jpg" teks warna kuning merupakan kode URL link gambar yang digunakan.
Untuk merubah gambar silakan ganti baris kode ini dengan URL link gambar yang ingin digunakan.

•    Klik "Save" dan lihat hasilnya...

Memasang Animasi Spiderman

Jalan-jalan menelusuri mbah google, mampir di blog orang. Wuuuh... ada animasi mantep tiba-tiba keluar dari atas jendela blognya...spiderman begelantungan sedang mengintai pengunjung blog. Hahaha.. ntu cuma animasi aja bos, tapi cukup keren buat menghiasi blog kalian. Tampilan animasi spiderman di blog bisa kalian lihat di ARMAN BLOG, animasi blog saya uda ada, jadi saya ga pasang he. Bagi kalian yang berminat memasang animasi spiderman di blog kalian, kalian tinggal copas scrift di bawah.

• Login id blog kalian
• Pilih Rancangan, klik elemen halaman, lalu klik tambah gadget
• Pilih dasar-dasar HTML/Javascript, lalu paste script yang dicopy tadi di kolom conten
• Terakhir klik Simpan, Lihat hasilnya bos

Berikut Script Animasi Spiderman

<div style="position: fixed; top: -10px; left: 50px;"><embed src="http://www.widgipedia.com/widgets/orido/RedSpidey-5671-8192_134217728.widget" swliveconnect="true" quality="best" loop="true" menu="false" wmode="transparent" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="200" height="350"></embed> </div>

Mengganti Kursor saat Menunjuk Link

Defaultnya sebuah kursor pada satu blog hanyalah berbentuk panah. Namun, buat kamu yang bosan dengan tampilan kursor bawaannya, dapat menggunakan gambar lain sebagai kursor penunjuk untuk blog mu. Selain dapat mempercantik tampilan blog, pengunjung akan lebih mudah untuk meng-klik apapun apa yang ada didalam blog mu. Seperti meng-klik iklan, widget, teks, dll. Ide postingan kali ini muncul saat ketika saya lagi Blogwalking di Blog Tetangga :D

Oke Langsung Aja Berikut Langkah-Langkahnya :
1. Login Ke Blogger anda
2. Pilih Rancangan
3. Pilih Edit HTML >> Centang Expland Template Widget
4. Cari Kode

a:hover {
color:#FFFFFF;
text-shadow: 0 0 10px #2E2EFE;
font-family:'Waltograph UI';}

Fokuskan Pencarian anda pada kode yang berwarna merah

5. Tambahkan kode berikut

cursor: url(https://sites.google.com/site/goezdegleng/images/explode-link-select.gif), progress;

Kode berwarna biru diatas Bisa anda ganti dengan URL gambar anda
Sehingga menjadi Seperti ini

a:hover {color:#FFFFFF;text-shadow: 0 0 10px #2E2EFE;font-family:'Waltograph UI';cursor: url(https://sites.google.com/site/goezdegleng/images/explode-link-select.gif), progress;}

6. Save Template

Lihat hasilnya.. :D

PASANG ANEKA KURSOR PADA BLOG

Sebuah blog secara default hanya menampilkan kursor dua bentuk yaitu berupa anak panah dan bentuk tangan jika berada diatas link. Sebenarnya tampilan kursor itu dapat kita atur sesuai dengan keinginan kita sebagai pemilik blog. Bukan hanya itu, jika tahu cara menempatkanya, kursor bisa ditampilkan dengan bentuk berbeda pada setiap bagian dari blog

Berikut code untuk kursor animasi

<style type="text/css"> HTML,BODY{cursor: url("https://sites.google.com/site/goezdegleng/images/indonesia.gif"), auto;} </style>

1. Masuk ke dasbor
2. Pilih Rancangan (Tata Letak) bagian tab Elemen Halaman
3. Klik Tambah Gadget - Pilih HTML/Javascript.
4. Copy kode diatas tadi kemudian paste pada kolom yang tersedia

Ganti teks warna merah dengan url gambar kursor kesayangan anda.
Selamat mencoba, semoga bermafaat...!!!

Beberapa contoh URL kursor

https://sites.google.com/site/goezdegleng/images/indonesia.gif

https://sites.google.com/site/goezdegleng/images/arrowq.gif

https://sites.google.com/site/goezdegleng/images/bluglitwrkbgnd.gif

Untuk kursor yang lain silahkan anda kunjungi simbahnya kursor disini  http://www.totallyfreecursors.com/
Berbagai tampilan kursor tersedia lengkap.

Efek Zooming dan Drop Shadows Gambar

Kali ini saya ingin berbagi lagi, hanya sebuah trik sederhana cara membuat atau menambahkan efek zooming dan drop shadows pada gambar dengan CSS3.
Untuk lebih jelasnya silahkan cek live demonya dulu dengan menekan tombol berikut:

Jika anda tertarik untuk menambahkan efek ini pada blog atau postingan anda, caranya sangat mudah, silahkan ikuti langkah-langkah berikut:

Setelah login ke akun blogger anda
Pada dasbor >> klik Template >> Edit HTML >> Proceed
Cari kode  ]]></b:skin> (Gunakan Ctr + F untuk memudahkan pencarian)
Setelah dapat letakkan kode CSS berikut diatas kode ]]></b:skin>

    .TTB-CSS3 img{
    -webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
    -moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
    -o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
    -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
    -moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
    -o-transition-duration: 0.5s; /*Opera Animation duration*/
    opacity: 0.5;
    margin: 0 10px 5px 0;
    }
    .TTB-CSS3 img:hover{
    -webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
    -moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
    -o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
    box-shadow:0px 0px 30px gray;
    -webkit-box-shadow:0px 0px 30px gray;
    -moz-box-shadow:0px 0px 30px gray;
    opacity: 1;
    }

Simpan template.

Nah sekarang cara menampilkan efek zooming dan drop shadows pada gambar postingan blog anda.

Pada bagian HTM editor posts cukup tambahkan kode berikut:

    <div class="TTB-CSS3">
    <img src="Image URL Disini" />
    </div>

Ganti Image URL Disini dengan URL/ link image yang ingin anda tampilkan pada postingan anda.

Membuat Warna Beground Berubah

Jenuh dengan satu warna beground anda, silahkan anda masukkan code script dibawah ini
Masuk Daskboard - Tata Letak - Tambah Widget - HTML/JavaScrip - Compy code nya - Save

<div class="widget-content">
<center><b>Pilih Warna Beground</b></center>
<br/>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="1" width="100%" height="20">
<tbody><tr>
<td onclick="bgChange('#8B008B')" bgcolor="#8B008B">
</td>
<td onclick="bgChange('#9400D3')" bgcolor="#9400D3">
</td>
<td onclick="bgChange('#008080')" bgcolor="#008080">
</td>
<td onclick="bgChange('#808080')" bgcolor="#808080">
</td>
<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">
</td>
<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">
</td>
<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">
</td>
<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">
</td>
<td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">
</td>
</tr></tbody></table>
</div>

Silahkan edit warna merah diatas dengan code warna yang anda sukai untuk tampilan beground anda, atau tinggal copy paste saja blog anda sudah bisa berubah warna sebanyak 9 pilihan warna, untuk code warnanya silahkan cari dibawah ini

Cari code warna kesayangan anda disini :

Thanks

Cara Memasang Button Share Artikel di Blog

Membuat tombol share artikel/posting ke berbagai social bookmark saat ini sepertisudah menjadi satu kewajiban bagi seorang blogger. Karena dengan memasangtombol/button share artikel ini justru akan membuka peluang bagi kita untukmendapatkan tambahan trafik dari berbagai social bookmark seperti Facebook, Twitter, Reddit, Digg, StumbleUpon, Myspace, Google Buzz atau mungkin Google Plus One (+1).

Nah pada tipsblogging kali ini saya mau share bagaimana cara memasang button share artikel(Bagikan Artikel ini ke…) di blog sobat yang kode scriptnya saya ambil darilayanan Addthis.com. Dengan memasangscript dari Addthis ini maka sobatblogger dengan mudah dapat membagikan (share) artikel anda ke ratusan layanansocial bookmark hanya dengan sekali klik saja. Tombol/button share social bookmark ini nantinya akan berada diataspostingan atau dibawah judul artikel, mirip seperti yang ada di blog ini (tapingga sama lho..).

Dibawah ini ada 3 script untuk membuat tombol/buttonshare artikel berikut preview gambarnya :

1.      Kode script button share style-1:

<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType ==&quot;item&quot;'>
<div class="addthis_toolboxaddthis_default_style ">
<aclass="addthis_button_preferred_1"></a>
<aclass="addthis_button_preferred_2"></a>
<aclass="addthis_button_preferred_3"></a>
<aclass="addthis_button_preferred_4"></a>
<aclass="addthis_button_compact"></a>
<a class="addthis_counteraddthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript"src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71feed783c3890"></script>

<!-- AddThis Button END -->

2.      Kode script button share style-2:

<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType ==&quot;item&quot;'>
<div class="addthis_toolboxaddthis_default_style addthis_32x32_style">
<aclass="addthis_button_preferred_1"></a>
<aclass="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<aclass="addthis_button_preferred_4"></a>
<aclass="addthis_button_compact"></a>
<a class="addthis_counteraddthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript"src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71ff8750bee738"></script>
<!-- AddThis Button END -->

3.      Kode script button share style-3:

 <!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType ==&quot;item&quot;'>
<div class="addthis_toolboxaddthis_default_style ">
<aclass="addthis_button_facebook_like"fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<aclass="addthis_button_google_plusone"g:plusone:size="medium"></a>
<a class="addthis_counteraddthis_pill_style"></a>
</div></b:if>
<script type="text/javascript"src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71fdea5bff8d67"></script>
<!-- AddThis Button END -->

Nah dari 3 style buttonshare social bookmark yang ada diatas, tinggal sobat pilih aja maumenggunakan yang mana. Adapun cara pemasangannya pada template, ikutilangkah-langkah dibawah ini :

1. Login ke dashboard blogger anda.
2. Pilih Rancangan > Edit HTML, centang Expandwidget template.
3. Cari kode <data:post.body/>  atau kode <divclass='post-header-line-1'/>  pada template anda ( salahsatunya saja ! ) dan letakkan script button sharenya diatas kode tadi.
4. Save template dan lihat hasilnya.

Nah sekarang sobat blogger dan pengunjung blognyasudah bisa melakukan share artikel yang sedang dibaca ke berbagai socialbookmark. Berdo’alah semoga orang lain yang melihat link blog anda di socialbookmark tertarik untuk mengklik link tersebut dan sobat akan mendapatkantrafik-trafik baru yang datang dari layanan social bookmark tersebut.Mudah-mudahan tips blogging cara memasang tombol share artikel ke social bookmark ini berguna untuk anda. Salam Blogger.

Cara Membuat Tombol Next Page Pada Blog

Pada postingan kali ini saya akan berbagi artikel tentang cara membuat tombol next page pada blog, yang mana tombol ini berfungsi buat mengarahkan para pengunjung untuk melihat halaman demi halaman yang berada pada blog kita berdasarkan angka yang tertera dalam tombol tersebut.
Bila anda masih bingung juga seperti apakah tampilannya, silahkan anda lihat dalam blog ini, atau gambar seperti yang ada dibawah ini.

Bagaimana...sudah jelaskah gambarnya...? apabila sudah jelas, kini kita akan mulai ke cara pembuatannya. Silahkan ikuti panduannya ya...

• Masuk ke akun blogger anda. ( ingat blog anda...bukan blog orang lain...! )
• Pada  tampilan Dashboard klik Design kemudian klik Edit HTML
• Untuk menjaga hal-hal yang tidak diinginkan saya sarankan backup dulu template blog anda dengan mengklik Download Full Template.
• Centang kotak kecil yang bertuliskan Expand Template Widged.
• Silahkan anda cari kode ]]></b:skin>
• Copy kode yang ada dibawah ini kemudian paste di atas kode ]]></b:skin>

.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}

• Kemudian cari kode </body>
• Copy kode yang ada dibawah ini dan paste kan diatas kode </body>

<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord=&#39;Previous&#39;;
var downPageWord=&#39;Next&#39;;
</script>
<script src='https://sites.google.com/site/goezdegleng/javascript/scriptsnext.js' type='text/javascript'/>

• Dan terakhir silahkan Save Template anda.

Bagaimana mudah bukan...? silahkan anda mencobanya.

Cara Membuat Multi Search Box

Bismillah - Pernahkah sobat menemui sebuah kotak pencarian di blog namun bukan saja dihias dengan background agar lebih cantik tetapi juga kotak pencarian (search box) ini memiliki multi fungsi.
Kira-kira widget search box multi ini akan tampak seperti gambar dibawah ini:

Atau bentuk fisiknya sobat bisa lihat di blog ini
Langkah Membuat Kotak Pencarian Multiple Manual, cukup mudah, anda tinggal copy dan paste pada widget anda
Dashboard-Tata Letak-Rancangan-Widget/Gadget-Html/Javascript-Pastekan codenya-save
Berikut code JavaScriptnya

<script type="text/javascript">
<!--
function qsearch_onSubmit()
{
qs_enginename = document.getElementById('qsearch_select').value;
qs_keywords = document.getElementById('searchfield').value;
switch( qs_enginename )
{
case 'goezdegleng':
window.open('http://gusdegleng.blogspot.com/search?q=' + qs_keywords, '_self', '');
return false;
case 'wikipedia':
window.open('http://en.wikipedia.org/wiki/Spezial:Search?search=' + qs_keywords, '_wikipedia', '');
return false;
case 'google':
window.open('http://www.google.com/search?q=' + qs_keywords, '_google', '');
return false;
case 'yahoo':
window.open('http://search.yahoo.com/search?p=' + qs_keywords, '_yahoo', '');
return false;
case 'msnlive':
window.open('http://search.live.com/results.aspx?q=' + qs_keywords, '_msnlive', '');
return false;
case 'altavista':
window.open('http://www.altavista.com/web/results?itag=ody&q=' + qs_keywords + '&kgs=0&kls=0', '_altavista', '');
return false;
case 'lycos':
window.open('http://search.lycos.com/?query=' + qs_keywords, '_lycos', '');
return false;
case 'odp':
window.open('http://search.dmoz.org/cgi-bin/search?search=' + qs_keywords, '_odp', '');
return false;
default:
if( (i = qsearch_findEngine(qs_enginename)) >= 0 )
{
window.open(qsearch_engines[i].url + qs_keywords, '_blank', '');
return false;
}
break;
}
return true;
}
//-->
</script>
<table border="1" cellspacing="1" width="300">
<tr>
<th><span style="float: left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg18MDmQYJP5BnY2ApgJhZG05Z-mEUs6OsfMDXbVy7TZYO0sKdSt-yPRJMakKBJPs8JJU22ncZnAMzwQPUxp9noVNKxw5vLg5__o2xyKdJidepS325iu752Sxcxk2OEwsH2WOTsGdHpmBQ/s1600/Loggo-GD.png" width="16px" height="16px" alt="" />&nbsp;Search</span></th>
</tr>
<tr class="row1">
<td>
<form id="qsearch_form" method="post" action="/search" onsubmit="return qsearch_onSubmit();">
<input type="text" tabindex="6" name="keywords" id="searchfield" size="22" maxlength="40" title="Search for keywords" value="Search" onclick="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" />
<select id="qsearch_select" tabindex="8">
<optgroup label="Blog">
<option value="goezdegleng" style="background-color: #EEEEEE;">Brankas Script</option>
</optgroup>
<optgroup label="Search engines">
<option value="wikipedia" style="background-color: #FEF2D6;">Wikipedia</option>
<option value="google" style="background-color: #FEF2D6;">Google</option>
<option value="yahoo" style="background-color: #FEF2D6;">Yahoo</option>
<option value="msnlive" style="background-color: #FEF2D6;">MSNlive</option>
<option value="altavista" style="background-color: #FEF2D6;">Altavista</option>
<option value="lycos" style="background-color: #FEF2D6;">Lycos</option>
<option value="odp" style="background-color: #FEF2D6;">Open directory</option>
</optgroup>
</select>
<!-- &nbsp; -->
<input type="hidden" name="search_fields" value="all" />
<input type="submit" value="Cari" tabindex="8" />
</form>
</td>
</tr>
</table>

Ganti teks warna merah dengan ukuran widget anda
Setelah anda simpan,,, lihat hasilnya,sekarang sobat sudah memiliki kotak pencarian dengan menu dropdown sebagai multi pilihan,oh iya gan, kode yang berwarna kuning ubah aja sesuai dengan link dan nama blog sobat ya.
Moga bermanfaat :D

Buku Tamu Show Hidden

 Kali ini saya akan menuliskan bagaimana cara pasang buku tamu di blogger, namun pada artikel ini saya akan menuliskan tutorial cara pasang buku tamu Tersembunyi / Hidden.

Buku tamu merupakan salah satu hal yang tidak wajib ada di blog kita,
namun buku tamu bisa mempercantik blog kita. Selain itu pengunjung blog kita bisa dengan mudah menyapa kita sebagai admin (atau pengunjung lainnya), walau cuma sebatas kalimat (mampir gan, malam, kunjungi blog saya juga ya, dsb...)

Buku tamu tersembunyi juga baru saya pasang di sidebar blog ini. Setelah niat untuk pasang buku tamu tersembunyi di blog ini akhirnya timbullah niat untuk menuliskan bagaimana cara memasang buku tamu tersembunyi di sidebar blogger.

Cara Pasang Buku Tamu Tersembunyi Di Blogger

Ok ga perlu panjang lebar, langsung saja ke topik utama kita.
Panduan Cara Pasang Buku Tamu Tersembunyi Di Sidebar Blogger

Pertama-tama silakan buat akun di www.cbox.ws atau di situs penyedia script buku tamu gratis yang teman suka, disini saya menggunakan situs tersebut.
clik disini untuk mendaftar, tampak spt gambar dibawah :

Cbox name : isi dengan username anda
Email address: isi dengan email yang masih berlaku
Password : Beri password login CBOX
Webside : isi dengan URL blog sobat
Language : Bahasa pilihan Sobat
Style : Daftar Pilihan Tampilan (bisa di edit)
beri tanda centrang pada I have...... dan Create my Cbox
Kemudian copy script yang sudah di sediakan , klik pada publist (copy kodenya).

Sekarang mari kita ke blogger.
Jika belum login silakan login dulu.
Jika sudah login silakan klik Rancangan - Design/Tata Letak - Klik Tambah Gadget/Add Gadget.
Pilih html/javascript dan silakan paste kode di bawah ini

<br /> <br /> <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/AVvXsEhjX13CfR434RlJByjoF-64PUffsgRr0mToCOz7aGjga17qglK1CCe5ygra_HzzXRhAryhomcmVxzdnjP9czmlF-puE24Fyc6M4E5YeCWB7CkOq05GBV20mO0wQytwaCuzvPD3EGNG89fXD/s1600/bukutamu.png') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style><br /><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><br /> <div id="gb"><div class="gbtab" onclick="showHideGB()">
</div><div class="gbcontent"><b>Silakan Paste Kode Buku Tamu yang sudah di copy tadi Di Sini</b><br /> <div style="text-align:right">
<a href="http://gusdegleng.blogspot.com/2013/01/buku-tamu-show-hidden.html">[Pingin BukuTamu??clik here]</a>><a href="javascript:showHideGB()"><br /> [Tutup]<br /> </a><br /> </div></div></div><script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script></div></div><br />

Silahkan ganti teks berwarna merah dengan code script buku tamu yang sudah anda dapatkan pada cbox tadi.
Bagi teman-teman yang faham bahasa css atau html silahkan di atur sendiri tampilannya sesuai selera, jika sudah selesai silakan di Simpan dan Selesai

Tips Menghubungkan Artikel Blog Ke Facebook

Tips Menghubungkan Artikel Blog Ke Facebook Dengan Networked Blog. Cara ini bertujuan untuk menghubungkan artikel yang kita posting di blog tapi bisa juga diakes pada facebook atau bahasa lainnya, setiap artikel yang telah kita buat pada blog, akan langsung disertakan dan diinfokan lewat facebook. Cara untuk menghubungkannnya, tidak terlalu repot kok yang penting kita mau belajar dan berusaha memahaminya. Jika teman-teman berminat untuk menghubungkan artikel blog Anda dengan akun facebook Anda, silakan saja ikuti langkah-langkah berikut ini.


1.    Pertama, silakan login ke akun facebook Anda. Setelah itu, silakan kunjungi situs ini Networked Blog.
2.    Pada situs tersebut, silakan klik Get Started Now.
3.    Pada langkah selanjutnya, silakan pilih Register A Blog.

4.    Pada halaman selanjutnya, silakan masukan alamat blogmu dan pilih next.

5.    Langkah selanjutnya, silakan isi informasi-informasi yang dibutuhkan untuk blog Anda yang akan bisa dibaca oleh pengunjung blog Anda lewat situs ini. Misalnya blog anda tersebut membahas tentang topik apa saja dan penjelasan sedikit tentang blog Anda pada pengisian Tagline kemudian tentukan pula bahasa untuk tampilan blog Anda di situs Networked Blog ini. Kalau sudah, silakan pilih Next.

6.    Pada langkah selanjutnya, anda akan diminta untuk mengkonfirmasi pertanyaan apakah anda adalah pembuat blog yang didaftarkan tadi atau bukan. Silakan pilih yes..
 7.    Selesai sudah anda menghubungkan artikel blog anda dengan facebookmu. Untuk langkah-langkah selanjutnya, ada dua hal lagi yang harus kita lakukan supaya setiap postingan yang ada di blog langsung dibaca difacebook. Yang pertama (Ask Friends To Confirm You) yaitu memberikan permintaan konfirmasikan kepada teman-teman yang ada difacebook untuk mengikuti blog yang sudah didaftarkan tadi dan yang kedua Install The Widget ke blog anda.

Saya memberi contoh untuk instal the widget
Buka Blog anda
Pilih Tambah [+] widget -> HTML/JavaScript
Copy dan Paste code yang diberikan (langsung di copy atau diatur silahkan)

Setelah anda Paste Code yang diberikan pada widget blog anda, silahkan clik tombol Verify Now seperti ditunjukkan gambar diatas
Silakan dicoba semoga berhasil..

Pasang Floating Fan Page Facebook Pada Blog

Floating Fan Page Facebook merupakan widget yang kita tambahkan pada blog untuk mempercantik tampilan blog sekaligus menata dengan rapi widget-widget yang sudah terpasang pada blog,pada kesempatan kali ini, saya akan memberikan tips blog lagi yaitu Cara Memasang Floating Fan Page Facebook Pada Blog. Sebagai gambaran awal dari Floating Fan Page Facebook pada blog, teman-teman bisa melihat contohnya pada widget fan page yang saya sudah pasang pada blog ini. Pemasangan widget fan page ini tidak akan berjalan dengan lancar bilamana teman-teman blogger belum membuat halaman fan page pada facebook sebelumnya. Untuk itu, silakan buat dulu halamannya. Dan untuk membuat halaman fan page pada facebook, silakan tanyakan saja pada Om Google.

Untuk teman-teman blogger yang sudah punya halaman fan page pada facebook dan ingin memasang widget floating fan page facebook pada blog, silakan ikuti langkah-langkahnya di bawah ini :

• Silakan login ke akun blog Anda.
• Pada halaman dasbor akun blog, silakan klik nama blog Anda.
• Kemudian pada halaman overview blog Anda, silakan pilih template-edit HTML-Prossed-expand widget template.
• Selanjutnya silakan cari kode ]]></b:skin>
• Kalau sudah ketemu kodenya, silakan copy dan paste kode di bawah ini pas di bawah kode ]]></b:skin>

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

• Selanjutnya silakan simpan template blog Anda dan tutup juga halaman edit HTML-nya.
• Kemudian silakan pilih lagi layout, lalu pilih dan klik Add Gadget pada posisi mana saja.
• Setelah muncul windows Add Gadget Blogger, silakan pilih HTML/JavaScript dengan cara klik tombol plus [+] yang ada disebelah kanannya.
• Langkah selanjutnya, silakan copy kode di bawah ini dan paste pada bagian content.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .likebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQrX1HCMEL3TAXe4KjBdqpc2vbg1GnJmRUM-dcStN5XEEpFBMgxYLllrgpWMh30crTojOSMQBn7GS0XbDVqE82xufCDG2418gTJWuNe8uVWTu5mbWFX5oGs0fjoCWdG-tdMF_SmJMkbdtI/s1600/fb.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed; right:-250px;top:44%;} .likebox div{border:none;position:relative;display:block;} .likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;} .likebox span a{color: gray;text-decoration:none;} .likebox span a:hover{text-decoration:underline;} </style> <div class="likebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/BrankasBlogspot&amp;width=240&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 258px; width: 245px;background:#fff;"></iframe> </div> </div>

• Setelah dipaste kodenya pada bagian content, jangan dulu disimpan kodenya tapi silakan ganti kode yang saya kasih warna merah dengan alamat atau URL halaman fan page facebook Anda. Setelah diganti kode yang berwarna merah, barulah disimpan kodenya.

Ok sob, selamat ya, sudah berhasil Memasang Floating Fan Page Facebook Pada Blog.
Semoga bermanfaat

Membuat Tabel Pada Artikel Blog

Membuat tabel di postingan blog, tentu mempunyai cara sendiri karena dalam menu lembar kerja posting blog tidak tersedia insert tabel seperti dalam ms.word office atau exel ..he..he..he..
Nah terus bagaimana jika kita ingin membuat sebuah tabel dalam postingan blog itu sendiri??
Gampang sobat....
Didalam blog semua bisa diperintah melalui code, nah disini Kang Degleng memberi sedikit contoh bagaimana membuat tabel (tersedia berbagai bentuk) anda tinggal mengganti kompunen yang di inginkan.
Okey.. langsung ke Pembahasan :

Berikut contoh-contoh tabel beserta codenya :

1.Tabel Biasa

contoh :

isi teks anda disini

Code:
<table width="300" border="1"><tr><td>isi teks anda disini</td></tr></table>

2.Tabel Biasa dengan Huruf di Ditengah
Contoh:

Tabel Biasa dengan Huruf di Ditengah

Code:
<table width="300" border="1"><tr><td align="center">Tabel Biasa dengan Huruf di Ditengah</td></tr></table>

3.Tabel Biasa dengan Huruf di posisi center / tengah serta border tebal
Contoh:

Tabel Border Tebal

Code:
<table width="300" border="6"><tr><td align="center">Tabel Border Tebal</td></tr></table>

4.Tabel Biasa dengan 2 (dua) kolom
Contoh:

tabel kolom 1

tabel kolom 2

Code:
<table width="300" border="1"><tr><td>tabel kolom 1</td><td>tabel kolom 2</td></tr></table>

5.Tabel Biasa dengan 2 (dua) kolom serta border tebal dan Posisi huruf center / tengah
Contoh:

tabel kolom 1

tabel kolom 2

Code:
<table width="300" border="6"><tr><td align="center">tabel kolom 1</td><td align="center">tabel kolom 2</td></tr></table>

6.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris
Contoh:

kolom satu	kolom dua
baris satu	baris kedua

Code:
<table width="300" border="1"><tr><td>kolom satu</td><td>kolom dua</td></tr><tr><td>baris satu</td><td>baris kedua</td></tr></table>

7.Tabel Biasa dengan 2 (dua) kolom dan dua baris serta border tebal juga huruf posisi ceter / tengah
Contoh:

kolom satu	kolom dua
baris kedua	baris kedua

Code:
<table width="300" border="6"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr></table>

8.Tabel Biasa dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah
Contoh:

kolom satu	kolom dua
baris kedua	baris kedua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr><tr><td align="center">baris ketiga</td><td align="center">baris ketiga</td></tr><tr><td align="center">baris keempat</td><td align="center">baris keempat</td></tr></table>

9.Tabel dengan Background Warna-Warni dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah
Contoh:

kolom satu	kolom dua
baris kedua	baris kedua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

10.Tabel yang terpisah.
Contoh:

satu
kolom satu	kolom dua
baris kedua	baris kedua
dua
baris ketiga	baris ketiga
baris keempat	baris keempat

Code:
<table width="300" border="1"><th>satu</th><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><th>dua</th><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

11.Tabel Istimewa (wach.. tambah pening aja ini..., he..he..)
Contoh:

Tabel Istimewa

Daftar Gan
No.	Name:
1.	Nama Satu
2.	Nama Dua
3.	Nama Tiga

Code:
<table align="center" border="1" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel Istimewa</b></caption><tr><th colspan="2">Daftar Gan</th></tr><tr><th>No.</th><th>Name:</th></tr><tr><td>1.</td><td>Nama Satu</td></tr><tr><td>2.</td><td>Nama Dua</td></tr><tr><td>3.</td><td>Nama Tiga</td></tr></table>

Sebenarnya masih banyak lagi bentuk bentuk tabel, tinggal anda modif sendiri, atau jika anda kesulitan, silahkan kunjungi situs penyedia pembuatan tabel secara online :
silahkan clik tombol berikut :

• Siapkan Tabel dalam Ms.WordOffice
• Compy tabelnya pada tempat yang disediakan
• Copy scrip tabel tersebut
• Paste di HTML blog anda.

Semoga bermanfaat

Foto Otomatis Dalam Posting Blog

Membuat file photo yang muncul dalam setiap posting blog

Langkah langkahnya :

Upload foto dalam blog atau hosting kesukaan anda, kemudian ambil lokasi foto anda
exp: gambar dari facebook
Image Location : 

https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/545462_549255941758023_1861485754_n.jpg

Agar dapat berfungsi tambahkan code :

<img src='di isi URL LINK foto anda'></img>

sehingga menjadi :

 <img src='https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/545462_549255941758023_1861485754_n.jpg'></img>

Memasukkan dalam blog anda :

• Masuk Edit HTML
• Cari code : <a expr:href='data:post.url'><data:post.title/></a> gunakan ctrl f untuk mempermudah dalam pencarian
• Sisipkan scrip diantara  <a expr:href='data:post.url'><data:post.title/>

Hasilnya :

<a expr:href='data:post.url'><img src='https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/545462_549255941758023_1861485754_n.jpg'></img></img><data:post.title/></a>

• Pratinjau dulu sebelum save template