English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
You are here: Home » » Pasang Buku Tamu Tersembunyi Di Blogger

Pasang Buku Tamu Tersembunyi Di Blogger

By. Dedi Yahya S


Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara untuk membuat buku tamu tersembunyi pada blogspot.

Contohnya bisa dilihat dibuku tamu saya.
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.

Kemudian ambil script yang sudah di sediakan (kopi kodenya).

Sekarang mari kita ke blogger.
Cara  Cara Pasang Buku Tamu Tersembunyi pada Blogspot :
  • Login pada Blogger
  • Masuk mode Rancangan kemudian Tambah Gadget
  • Pilih HTML/Javascript 
  • Copy-paste kode di bawah ini

<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/AVvXsEjr7hKL9dMvpMRBq4O_H1EA1hDR-8PnDTgNmkxahE8X3NKg5sTcugHNVtCaqJI0KX65SNsVqsLC1aQAQAphI0LsZHLu1wmCzOsTpM-MfbkhnIhiwP28GQEXK_Uos4bqRLg93Ao00mNYSBE/s1600/bukutamu.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">
Silakan Paste Kode Buku Tamu yang sudah di kopi tadi Di Sini

<div style="text-align:right">
<a href="http://blogtutorials-01.blogspot.com/2012/03/pasang-buku-tamu-tersembunyi-di-blogger.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
Bagi teman-teman yang faham bahasa css atau html silahkan di atur sendiri tampilannya sesuai selera
  • jika sudah selesai silakan di Simpan

Demikian blogger tutorial mengenai Cara Membuat buku tamu tersembunyi pada Blogspot.

Semoga bermanfaat dan semoga berhasil.
Terima Kasih ^_^

Baca Selengkapnya...
You are here: Home » » Memasukkan Gambar Ke Postingan Blog Blogger

Memasukkan Gambar Ke Postingan Blog Blogger

By. Dedi Yahya S

Terkadang kita perlu menambahkan gambar kedalam postingan blog kita, baik tujuannya untuk memperjelas artikel yang kita tulis tersebut maupun untuk keperluan lainnya.

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang cara memasukan gambar kedalam postingan pada blogspot.

Memasukkan gambar kedalam postingan blog blogger bukanlah hal yang susah, yang kita lakukan hanyalah mengklik icon yang berfungsi untuk mengupload gambar yang kita masukkan tersebut, kemudian menguploadnya.


Berikut Cara Memasukkan Gambar Ke Postingan Blog Blogger Kita : 
  • Silahkan siapkan gambar yang ingin di masukkan. 
  • Disaat anda menulis artikel yang ingin di sisipi gambar tersebut silahkan klik icon yang saya bulati di bawah ini.
 
  • Maka akan keluar jendela baru seperti ini.
Silahkan pilih posisi gambar, anda bisa meletakkan gambar di tengan, kanan, atau kiri. Kemudian klik telusur dan cari gambar yang ingin anda masukkan ke postingan blog setelah itu klik Upload Image.

Setelah proses upload selesai maka seharusnya gambar yang di upload tadi sudah terlihat di kolom isian postingan blogger.


Jika letaknya tidak sesuai dengan letak yang anda inginkan silahkan pidahkan ketempat yang anda inginkan, bisa dengan cara menariknya atau memindahkan kode html nya yaitu dengan cara mengklik Edit Html.

Biasanya kode html gambar yang kita upload tadi akan terlihat seperti ini :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcpQjETm5mWycrp04DZngocXGmSCq8fw1_b2zKZj3xNATOiWmyILfRUVisP6AB9bsDHTO7MTB1PWMbysfooKyhVuDNcDBSpJbCJv_2XBYKGUI4hYNnOe4R53rChZ7ehdwHobLAArNKl9Y/s1600/memasukkan+gambar+ke+postingan+blog.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcpQjETm5mWycrp04DZngocXGmSCq8fw1_b2zKZj3xNATOiWmyILfRUVisP6AB9bsDHTO7MTB1PWMbysfooKyhVuDNcDBSpJbCJv_2XBYKGUI4hYNnOe4R53rChZ7ehdwHobLAArNKl9Y/s400/memasukkan+gambar+ke+postingan+blog.JPG" id="BLOGGER_PHOTO_ID_5489720834105500946" border="0" /></a>
Jika anda sudah menemukan kode html gambar tersebut silahkan pindahkan semua kode tersebut ke tempat yang anda inginkan. 
Okey saya anggap ini selesai...

Lalu bagaimana jika gambar yang ingin kita masukkan ke postingan tersebut bukan dari komputer kita, dari situs lain masilnya.


Jika gambar tersebut dari situs lain maka yang harus anda lakukan hanyalah menuliskan
kode html berikut ke dalam postingan.
<a href="Masukkan Url Gambar Disini"><img src="Masukkan Url Gambar Disini" /></a>

atau kode ini saja :
<img src="Masukkan Url Gambar Disini" />

Anda juga bisa mengatur lebar dan tinggi gambar tersebut dengan menambahkan kode ini :


width: 400px; height: 250px;

Sehingga jika kodenya di gabungkan akan terlihat seperti ini :


<img src="Masukkan Url Gambar Disini" width: 400px; height: 250px;/>

Pada tulisan Masukkan Url Gambar Disini silahkan ganti tulisan tersebut dengan url gambar yang ingin anda masukkan tersebut.
Nah itulah 2 Cara Memasukkan gambar ke postingan blog blogger. Mudah-mudahan bisa di pahami.

Demikian blogger tutorial mengenai Cara Memasukan gambar kedalam postingan pada Blogspot.

Semoga bermanfaat dan semoga berhasil.
Terima Kasih ^_^


Baca Selengkapnya...
You are here: Home » » Cara Membuat Tabel Dalam Postingan Di Blogger

Cara Membuat Tabel Dalam Postingan Di Blogger

By. Dedi Yahya S

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara untuk membuat tabel dalam postingan pada blogspot.

Cara Membuat Tabel Di Blog Blogger

Untuk membuat tabel di blogger kita hanya perlu beberapa kode html saja, yang nantinya akan kita gunakan dalam pembuatan tabel, berikut kode-kode html tersebut:

<table> dan </table>
<tr> dan </tr>
<td> dan </td> 


Beneran cuma itu saja kode yang di perlukan untuk membuat tabel?...

YA... cukup dengan 3 atau 6 kode tersebut saja kita bisa membuat tabel. tapi ada sedikit kode tambahan sih...

Mari kita mulai praktek. Silahkan sambil di fahami ya, soalnya kalau terlalu detail nanti artikelnya kepanjangan.

  • Membuat Tabel 2 Kolom kesamping dan 1 kolom kebawah, maka kita cukup menuliskan kode html berikut:
<table width="500" border="1">
<tr>
<td>Kolom 1 </td>
<td>Kolom 2 </td>
</tr>
</table> 


Dan Hasilnya akan terlihat seperti ini:
Kolom 1 Kolom 2

Jika ingin merubahnya menjadi 3 kolom kesamping dan 1 kolom kebawah anda cukup menambahkan kode <td>Kolom Tambahan atau Kolom 3</td> saja sebelum kode </table> dan hasilnya akan terlihat seperti ini :

Kolom 1 Kolom 2 Kolom 3

  • Membuat Tabel 2 Kolom kesamping dan 2 kolom kebawah, maka kita cukup menuliskan kode html berikut:
<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
</tr>
</table> 

Hasilnya Seperti ini:
Kolom 1 A Kolom 1 B
Kolom 2 A Kolom 2 B

Jika ingin merubahnya menjadi 3 kolom kesamping dan 2 kolom kebawah anda cukup menambahkan kode <td>Kolom Tambahan 1 atau 2 </td> di antara <tr> dan </tr> pertama dan kedua
Contoh:
<table width="500" border="1">
<tr>
<td>Kolom 1 A</td>
<td>Kolom 2 A</td>
<td>Kolom Tambahan 1</td>
</tr>
<tr>
<td>Kolom 1 B</td>
<td>Kolom 2 B</td>
<td>Kolom Tambahan 2 </td>
</tr>
</table>

Maka hasilya seperti ini :
Kolom 1 A Kolom 2 A Kolom Tambahan 1
Kolom 1 B Kolom 2 B Kolom Tambahan 2

  • Membuat Tabel 3 Kolom kesamping dan 3 kolom kebawah. jika ingin membuat tabel 3 kolom kesamping dan kebawah maka anda cukup menambahkan kode ini sebelum kode </table>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>

Hasil kode htmlnya akan seperti ini :
<table width="500" border="1">
<tr>
<td>Kolom 1 A </td>
<td>Kolom 1 B </td>
<td>Kolom 1 C </td>
</tr>
<tr>
<td>Kolom 2 A </td>
<td>Kolom 2 B </td>
<td>Kolom 2 C </td>
</tr>
<tr>
<td>Kolom 3 A </td>
<td>Kolom 3 B </td>
<td>Kolom 3 C </td>
</tr>
</table>

Dan hasil tabelnya akan terlihat seperti ini :
Kolom 1 A Kolom 1 B Kolom 1 C
Kolom 2 A Kolom 2 B Kolom 2 C
Kolom 3 A Kolom 3 B Kolom 3 C

Keterangan :
  • Pada tulisan yang saya tulis kolom 1, kolom 1A, kolom 2, dst adalah tempat untuk memasukkan tulisan, link, atau gambar anda. Silahkan ganti sesuai keperluan. 
  • Sedangkan kode ini.
<table width="500" border="1">
  • Kode yang saya beri warna biru "500" adalah lebar tabel tersebut, anda bisa merubahnya menjadi 700px, 400px, dsb. Jika anda ingin membuat tabel selebar 700px maka anda cukup menulisnya 700 saja.
Mau Coba Praktek?...

Jika ingin mencoba bikin tabel di blog anda silahkan kopi paste saja kode yang sudah saya tuliskan di atas, terserah mau pakai yang mana.

Namun jika setelah kode tersebut anda pasang dan hasilnya tidak sama dengan contoh tabel di blog ini anda jangan heran, itu permasalahannya cuma di CSS nya saja, karena setiap template beda dan tidak semua template blogger ada CSS untuk tabel.

Solusinya yaitu dengan menambahkan kode CSS sendiri di template blog anda, anda bisa memakai kode CSS ini :
th, td {margin:0;padding: 5px; border:1px solid #ccc; text-align:center;}

Jika anda sudah faham CSS silahkan bikin kode CSS tabel sesuai selera anda.

Wah saya ga tau gimana dan di mana meletakkan CSSnya.

Untuk menambahkan CSS yang saya tuliskan di atas silahkan ke Design terus ke Edit Html, disana lah tempat persemayaman CSS blog blogger anda (Untuk bagian Edit Html ini nanti akan saya bahas secara tersendiri)

Demikian blogger tutorial mengenai Cara Membuat Tabel Ke Dalam Postingan pada Blogspot.


Semoga bermanfaat dan semoga berhasil.
Terima Kasih ^_^
Baca Selengkapnya...
You are here: Home » » Cara Membuat Menu Dropdown / Sub Menu

Cara Membuat Menu Dropdown / Sub Menu

By. Dedi Yahya S

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara membuat menu dropdown / sub menu di blogspot.
Demo Menu Horizontal




Cara Membuat Menu Dropdown / Sub Menu pada Blogspot 
  • Login pada Blogger
  • Masuk mode Rancangan kemudian Edit HTML
  • Beri centang pada Expand Template Widget
  • Cari kode <div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'>
  • Jika sudah ketemu, letakan kode berikut diatas kode tadi

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='http://blogtutorials-01.blogspot.com'><b><blink>Blogger Tutorial</blink></b></a></li>
</ul>
</div>
Catatan:
Silakan ganti tanda PAGAR (#) dengan link/url yang kamu mau, boleh link posting atau link Label (Kategori)
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.
Hal-hal yang mungkin akan ditanyakan :
1. Kode yang harus dicari tidak ada di blog saya
Solusinya, silakan pasang kode menu horizontak tersebut di tempat yang kira-kira pas dengan yang kamu mau, kemudian klik Preview (Pratinjau). Jika masih belum pas silakan pindahkan  kode tersebut kemudian Pratinjau lagi. Lakukan sampai menunya sudah berada ditempat yang kamu mau.
2. Bagaimana cara memasukkan beberapa artikel dalam 1 menu?
Agar bisa menampilakan beberapa artikel dalam 1 menu maka kamu harus pasang Link Label pada menu tersebut, caranya sama, yaitu dengan cara mengganti tanda pagar (#) dengan link label yang ada di blog teman. 
Demikian Blogger Tutorial tentang Cara Membuat Menu Dropdown / Sub Menu.


Semoga bermanfaat dan semoga berhasil
Terima Kasih ^_^

Baca Selengkapnya...
You are here: Home » » Cara Mengganti Template Blogspot - Blogger Setelah Template di Download

Cara Mengganti Template Blogspot - Blogger Setelah Template di Download

By. Dedi Yahya S


Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara mengganti template blogger / blogspot.


Untuk mengganti template blog blogger teman-teman harus mendownload template blogger gratis dulu, jika belum memilikinya silakan klik di Menu Free Template.

Setelah template blogger gratis sudah didownload, silakan lihat dulu
blogger template yang baru didownload tadi, apakah berkasnya berbentuk file zip/rar atau berbentuk xml (jika file blogger template sudah dalam bentuk xml silakan langsung diupload ke blogger/blogspot)
Jika template masih berbentuk Zip/Rar sialakan di Extract dulu. Caranya : klik kanan, kemudian pilih Extract Here.
Jika Template Blogger sudah di extract silakan upload file xml nya. 

Langkah – Langkah Mengganti Template Blogspot/Blogger
  • Login pada Blogger
  • Masuk mode Rancangan kemudian Edit HTML 
  • Sebelum template diupload sebaiknya download dulu template yang sudah terpasang dengan cara mengklik tulisan Unduh Template Lengkap. Dan jika template sudah selesai di unduh/download silakan upload template yang baru.
Tunggu proses upload sampai selesai, jika sudah selesai silakan lihat perubahan blog teman.

Oh ia ... biasanya setelah template baru terpasang ada tambahan widget yang mungkin tidak kita inginkan, silakan hapus widget yang tidak di inginkan dan susun kembali penempatannya di tab Tata Letak.



Demikian blogger tutorial mengenai Cara Mengganti Template Blogspot / Blogger.


Semoga bermanfaat dan semoga berhasil
Terima Kasih ^_^
Baca Selengkapnya...
You are here: Home » » Mengenal Fungsi Label Di Blogger & Cara Penggunaannya

Mengenal Fungsi Label Di Blogger & Cara Penggunaannya

By. Dedi Yahya S


Kabanyakan blogger pemula tidak menggunakan label pada artikel yang di tulisnya, mungkin ini di sebabkan karena mereka tidak tau apa sih fungsinya label tersebut.

Selain belum tau fungsi label, sebagian dari mereka tidak menyadari keberadaan label tersebut, jadi wajar lah kalau artikelnya ga ada labelnya.


Apa sih label itu, apa fungsinya, dan bagaimana cara menggunakannya?...


Menurut saya label yang ada di blogger tersebut sama halnya dengan kategori sebuah tulisan atau artikel yang kita tulis tersebut, atau bisa juga di sebut topik pembahasan.


Fungsi Label yang ada di blogger adalah agar kita bisa mengelompokkan artikel berdasarkan label/kategori yang sama, dan mempermudah pengunjung blog untuk melihat artikel lainnya berdasarkan Label/Kategory.


Selain itu label juga berfungsi untuk menampikan Related Post atau Artikel Terkait lainnya berdasarkan label artikel.


Tentu teman pernah atau bahkan sering melihat kalimat Related Post, Artikel Terkait, Baca Juga Ini, dan sejenisnya kemudian di bawahnya ada daftar artikel lainnya di setia akhir tulisan/artikel blog lain.
 

Related Post atau Artikel Terkait tersebut tidak akan terlihat jika artikel kita tidak ada label/kategorinya, walaupun sudah di pasangi script related post (Untuk Cara Membuat Reladet Post akan saya bahas lain waktu).

Untuk Menggunakan fitur label yang sudah di sediakan blogger itu sangat mudah.


Anda tinggal isi atau tulis label/kategori pada setiap artikel yang anda buat pada bagian labels, letaknya di sebelah kanan bawah.


Kalau masih bingung di mana menulis labelnya silahkan lihat gambar di bawah ini.
Pada kolom isian labels silahkan tulis label yang anda inginkan, misalnya: blog tutorial, musik, hiburan, dsb.

Anda bisa menulis lebih dari satu label di sana, tapi jangan lupa pisahkan label 1, 2, dst dengan koma (,) misalnya : musik, lirik lagu. 


Itu hanya penjelasan sedikit dari saya tentang Label untuk postingan di Blogspot.

Semoga bermanfaat.
Terima Kasih ^_^
Baca Selengkapnya...

Berlangganan Artikel Blogger Tutorial Melalui EMail. GRATIS!!
Masukkan Alamat Email Anda di Sini

...::: http://blogtutorials-01.blogspot.com :::...