Jumat, 25 Mei 2012

Cara Membuat Buku Tamu Tersembunyi di Blog

Cara Membuat Buku Tamu Tersembunyi di Blog - Cara memasang buku tamu/guest book tersembunyi di blog atau cara agar buku tamu/guest book bisa tersembunyi di blog.
Buku tamu merupakan tempat untuk menaruh pesan singkat di blog anda ketika sedang ada yang berkunjung.  Membuat buku tamu harus menggunakan jasa web yang menyediakan layanan buku tamu. Maksud dari judul tersembunyi disini bukan lah buku tamu yang tidak bisa dilihat oleh pengujung, tetapi buku tamu ini akan berada di sebelah artikel blog yang akan terbuka jika ada yang klik gambar buku tamu tersebut. Langkah ini merupakan salah satu langkah dalam menghemat tempat di blog kita. Selain itu, untuk menghemat tempat, anda juga menambahkan tab view di blog Anda. Baca: cara membuat tab view di blog. Jika anda tertarik untuk membuat buku tamu tersembunyi ini, silahkan ikuti langkah berikut:
Sebelum anda membuat buku tamu di blog anda, anda harus memiliki kode buku tamu, anda bisa mendapatkannya di Shoutbox, Cbox, atau Shoutmix. Setelah anda memiliki kode buku tamu tersebut, lanjut ke langkah berikut:
1. Login di blogger dengan ID anda
2. Klik menu Layout
3. Klik Page Elements
4. Klik Add a Page Element
5. Klik ADD TO BLOG pada menu HTML
6.Lalu 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/AVvXsEi0qIR8SjDzrYLZ16ItCCmLrvcyZ-Xg5LIlxC3cfBIvbYVw0DbdUB2ogarDkd0I1Hvd0v2U_biYsOZN3y_ugWHaxXS41hh4wCTGQzXWKFmZcr7qJN6f7M5q4XmNrvL7cntkkTMFQnNOk0uL/') 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">

< Letakkan disini kode Shoutbox Anda>

<div style="text-align:right">
<a href="http://amronbadriza.blogspot.com/2012/05/cara-membuat-buku-tamu-tersembunyi-di.html">
[Blogaul]
</a>|<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>
Ganti tulisan < Letakkan disini kode Shoutbox Anda> dengan kode script buku tamu sobat.
7.Save Widget tersebut.
Jika langkah tersebut sudah anda lakukan, anda dapat melihat hasilnya pada blog anda masing-masing. Demikianlah cara memasang buku tamu tersembunyi ini, semoga bermanfaat.

Sumber: http://blog.caraku.net/2011/02/membuat-buku-tamu-tersembunyi.html

Cara Membuat Tab View di Blog

Cara Membuat Tab View di Blog - Cara menambah atau memasang menu tab view di blog .
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 cara 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 di blog:
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>
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>
<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
<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 menambah menu tab view di blog, hanya membutuhkan kesabaran sedikit saja :D. Pengen blog sobat lebih cantik? Beri juga navigasi nomor halaman di blog. Berikut cara membuat navigasi nomor halaman di blog.
Silahkan di coba semoga berhasil.

Sumber: http://www.antigaptek.com/2011/07/cara-membuat-menu-tab-view.html

Cara Membuat Navigasi Nomor Halaman di Blog

Cara Membuat Navigasi Nomor Halaman di Blog - Cara memberi atau memasang navigasi nomor halaman di blog - Ada yang sudah tau apa itu navigasi nomor halaman? Itu lho navigasi yang berupa nomor-nomor di bawah sebuah page/halaman blog atau orang-orang sering menyebutnya sebagai navigasi page number atau pages number navigation. Tujuan dari pembuatan menu ini adalah untuk memudahkan pengunjung menjelajahi blog kita sehingga kemungkinan mereka akan betah, hehe.. Tapi itu jika sudah pengunjung, jika belum punya atau pengunjung masih sedikit, sebagai seorang blogger, sobat juga bisa mengedit template blog sobat menjadi lebih SEO Friendly. Baca: Cara Mengubah Template Blogspot Menjadi SEO Friendly. Oke, lanjut ke masalah awal, jika masih bingung mengenai navigasi nomor halaman, berikut contoh cuplikan gambar dari blog teman saya (antigaptek.com) yang mungkin bisa membantu sobat.

navigasi nomor halaman

Mungkin ada yang bertanya, mengapa di Blog ini sendiri tidak terpasang menu semacam ini? Jawabannya sangat simple, sebenarnya saya juga sangat ingin memasangnya, tapi template yang saya gunakan tidak mendukung. Hadeh.. Lantas, bagaimana cara memasang navigasi page number di blog kita? Itu mudah sekali. Silakan ikuti uraian berikut ini:
1. Login ke akun blog sobat
2. Rancangan >> Edit HTML (jangan lupa centang expand template widget)
3. Cari kode ]]></b:skin>
4. Letakkan script berikut di bawah tepat di atas kode nomor 3 tadi

.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;

5. Cari kode </body> dan letakkan script di bawah tepat di atas kode berikut.

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
6. Simpan template sobat dan lihat hasilnya.
Oke, sekian tutorial dari saya mengenai cara membuat pages number navigation di blog. Semoga bermanfaat..

Senin, 21 Mei 2012

Cara Membuat dan Memasang Contact Us di Blog



 Cara Membuat dan Memasang Contact Us di Blog - Kali ini saya akan menerangkan secara detail tentang cara membuat dan memasang contact us di blog, termasuk blogspot dan wordpress. kita akan menggunakan bantuan dari situs pembuat kode html contact form.

Silahkan sobat ikuti langkah-langkahnya Cara Membuat Contact Us:
1. Siapkan email sobat untuk proses Registrasi atau pendaftaran.
2. Kunjungi situs pembuat kode Html Contact Us di http://123contactform.com dan ingat sobat pilihlah yang free atau gartis, klik >> "SIGN UP FOR FREE", pilih >> "Basic" lalu klik >> "Sign Up". Kalau ada $$ lebih bagus lagi pilih yang berbayar, karena fiturnya akan lebih lengkap.


3. Kemudian Create Account (membuat akun) atau Registrasi (pendaftaran):
  • Username = Masukkan dan buat Username Sobat.
  • Password = Masukkan dan buat Password sobat.
  • Confrim password = Masukkan Password yang sama.
  • Email = Masukkan Email sobat, Email ini yang akan menerima verifikasi dan Pesan dalam Form Contact Us sobat.

4. Setelah sobat melakukan Registrasi atau pendaftaran, silahkan sobat cek email untuk verifikasi Registrasi atau pendaftaran.
5. Login atau masuk akun menggunakan Username dan Password yang sobat buat tadi saat pendaftaran atau Registrasi. Lalu sobat pilih >> "creat new form" kemudian sobat pilih >> "contact form" setelah itu silahkan sobat kasih judul Formnya, seperti gambar Form Name (Contact Us) diatas.
6. Saat sobat sudah sampai langkah disini, silahkan sobat keluarkan kemampuan sobat untuk mendesain dan mengatur form Contact Us tersebut, bebas dan silahkan sobat mendesainya seperti yang sobat inginkan.
7. Langkah selanjutnya adalah apabila sobat sudah selesai mendesain form Contact Us tersebut, silahkan sobat klik >> "continue".
Lihat gambar berikut di bawah ini:


Keterangan:

  • No 1 adalah alamat Email yang akan menerima pesan apabila ada yang menghubungi sobat lewat form Contact Us tersebut, jadi silahkan sobat centang kotak kecil di sebelah email yang sobat daftarkan.
  • No 2 adalah pesan dari form Contact us sobat, yang akan tampil setelah pesan terkirim. (Your message has been sent. Thank you for filling out our form!) Sobat bisa menggantinya sesuai dengan keinginan sobat, contoh "Terima kasih ya Sobat, sudah menghubungi kami" atau yang lainya. kemudian klik >> "save".
  • Kalau sudah, langkah selanjutnya sobat bisa klik >> "continue" atau menuju no 3 >> "Publish Form" di bagian kanan atas.


Cara Memasang Form Contact Us di Blog:

  • Sekarang sobat tinggal pilih form tersebut ingin di pasang di blog di bagian yang mana. Silahkan di pilih sesuai yang sobat inginkan.
  • Karena banyaknya pilihan kode yang di suguhkan, Maka saya sarankan sobat pilih kode untuk Blogger atau Wordpress pada pilihan menu di samping kiri.




  • Langkah yang selanjutnya silahkan sobat copy semua kodenya dan paste di halaman contact us sobat. Bisa di pasang di Postingan atau juga di pasang pada Sidebar Blog.
  • Ingat sobat.!!! Tempel (taruh) atau paste kodenya pada mode HTML/java script, lalu simpan.
  • Selesai dan lihat hasilnya. Semoga sangat bermanfaat untuk sobat KUCOPAS semua.



KODE WARNA HTML

 Kode Warna Html - Cara membuat dan mengetahui warna atau kode warna Html caranya sangat mudah, Kali ini kita akan menggunakan Generator kode warna Html, karena generator ini bisa mempermudah kita untuk mengetahui berbagai macam kode warna Html dan cara menggunakanya juga sangat mudah, silahkan sobat ikuti terus cara-cara untuk menggunakan generator kode warna Html ini.

 Sedikit penjelasan untuk sobat semua, Code Color Html Generator ini sangat di perlukan banget saat kita akan mendesain suatu halaman website atau blog. Dalam mendesain website atau blog, yang pasti kita tidak akan terlepas dari gradiasi atau pemilihan warna yang tepat untuk blog atau website kita. Maka untuk itu kita perlu mengetahui berbagai macam jenis warna tersebut dalam HTML atau lebih tepatnya sering di sebut dengan kode warna HTML.


 Oke sobat, karena kebutuhan untuk mengetahui berbagai macam kode warna Html tersebut, saya sediakan untuk sobat semuanya, Generator kode warna HTML di bawah berikut ini:





keterangan:

  1. Kotak Brightness/Saturation adalah pengaturan warna yang bisa sobat geser sesuai yang sobat inginkan.
  2. Hue adalah mirip seperti Volume warna.
  3. Swatch adalah warna yang terpilih.
  4. Hex adalah Kode warna Html.
sobat bisa coba ganti dengan kode warna html yang lain, dan hasilnya bisa sobat lihat pada kotak Swatch untuk kode yang sobat ganti tadi.

 Selamat berkreasi untuk menghasilkan warna yang sobat inginkan dan jadikan semua jadi berwarna, Semoga bermanfaat untuk sobat KUCOPAS semua.



Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More