Cara Memasang Menu dan Submenu Di Blog

Cara Memasang Menu dan Submenu Di Blog

Dalam posting [kali] ini saya akan share Cara Memasang Menu dan Submenu Di Blog. Saya akan mencoba berbagi pengalaman kepada sobat blogger.

Dan ini juga termaksud salah satu cara mempercantik/memperindah blog sobat blogger dengan modifikasi-modifikasi menggunakan Trik-Trik Blogger. Mungkin bagi sobat yang sudah lama menggunakan blogger sudah tidak asing lagi dengan apa yang akan saya share [kali] ini, tapi mungkin bagi blogger pemula seperti saya ini masih perlu mempelajari hal yang seperti ini.

Oky..., Jika sobat blogger ingin mengetahui bagaimana Cara Memasang Menu dan Submenu Di Blog, lebih tepatnya cara pasang Menu dan Submenu Di Blog (Menu Horizontal di blog kita).

Ikuti langkah-langkah berikut : 

• Pertama silahkan kunjungi website berikut : http://www.mycssmenu.com/ .
  
  
• Di halaman utama web tersebut akan kita temui berbagai macam variasi betuk menu horizontal maupun yang vertical. Kita tinggal pilih yang mana yang akan sobat gunakan. 
Perhatikan pada gambar berikut ini, saya ambil satu contoh saja. 

• Untuk mengambil kode dan mengatur tampilan Menu Horizontal silahkan [kali] customize.
  
  
• Setelah di [kali] akan muncul jendela baru.
  Maka akan terlihat tampilan seperti berikut :
  
  
  
• Double [kali] satu per satu menu atau sub menu untuk menentukan target pencaharian. 
  Seperti contoh  tampilan berikut :

• Mohon Di isi pada kotak dialog bagian "URL" misalnya http://www.blogger.com/post-title.g?blog=2564568286445614 untuk menuju ke alamat tersebut. Sedangkan untuk kotak target dan title text (Boleh tidak diisi/kosong).
  
  
• Setelah semua [link] menu dan submenu selesai dibuat (di [link] kan) dan sebaiknya semua [link] harus sudah ter [link] supaya proses peng-copyan Kode HTML atau CSS hanya dilakukan satu kali saja.
  
  
• Proses selanjutnya klik pada tab HTML . Copy kode HTMLnya .
  
  
• Log in ke Blogger anda. => Blogger.com
  
  
• Pilih Rancangan.
  
  
• Pilih Tambah Gadget.
  
  
• Paste kode yang sobat Copy tadi.
  
  
• Kemudian Save. Lihat Hasilnya dech....!!

Semoga Bermanfaat.....!!

EnaL Rhay SyahRinggan Next..>>

READ MORE - Cara Memasang Menu dan Submenu Di Blog

Memasang Emoticon Smiley Untuk Komentar Blog

Memasang Emoticon Smiley Untuk Komentar Blog

Semakin meningkatknya para komentator di blogger dan semakin meningkatnya pula keinginan sobat blogger untuk mengubah tampilan di area komentar atau menambah pernak-pernik lainya. Maka dari itu saya juga ingin membuat pernak-pernik komentar di blogger dengan Emoticon Smiley sehingga para komentator bisa mengexpresikan ucapanya dengan sebuah gambar Emoticon Smiley.

Nach.. posting saya kali ini yaitu cara memodifikasi Blogspot sobat Blogger agar tampak menarik, tapi kali ini saya akan share tentang cara Memasang Emoticon Smiley Untuk Komentar Blog.

Lihat gambar dibawah ini :

:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*
:|8-}~x(:-tb-(:-Lx(=))

Gambarnya kurang lebih seperti diatas, teks atau tulisan yang disamping kanan gambar adalah symbol yang jika ditulis di kotak komentar akan berubah menjadi gambar yang ada disamping kirinya.

Okey....capeg juga low cerita panjang lebar..!! Hufttttt....... :D

Jika sobat blogger tertarik untuk memasangnya silahkan ikuti langkah-langkah berikut :

• Seperti biasa Log in ke Blogger anda. => Blogger.com
• Pilih Tata Letak/Edit HTML.
• Jangan lupa centang pada Expand Widget Templates
• Cari Kode </body> (Gunakan saja pencarian cepat => Ctrl + F) 
• Copy paste kode Script di bawah ini. Taruh kode Script di bawah ini tepat di atas kode </body>

<script src='http://sites.google.com/site/anasceria/smiley.js' type='text/javascript'/>

• Kalau sudah, sobat cari kode seperti di bawah ini :

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:if cond='data:post.allowNewComments'>

<b:include data='post' name='comment-form'/>

<b:else/>

<data:post.noNewCommentsText/>

• Kemudian selipkan kode Skript di bawah ini diantara kode berwarna biru dan orange atau tepatnya di bawah kode <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>

• Nah...kalou sudah, Simpan hasil kerja sobat...dan lihat hasilnya.

EnaL Rhay SyahRinggan Next..>>

READ MORE - Memasang Emoticon Smiley Untuk Komentar Blog

Cara Membuat Daftar Isi Blog

Cara Membuat Daftar Isi Blog

Okey....salam jumpa lagi sobat blogger. Pembahasan kali ini adalah bagaimana Cara Membuat Daftar Isi Blog pada Blogspot. Ini juga termaksud salah satu cara memodifikasi blogspot sobat dengan Trik-Trik Blogger.

Dalam posting kali ini saya akan membagi pengetahuan dan sekaligus share Cara Membuat Daftar Isi Blog pada blogspot. Dengan demikian pengunjung blogspot dapat melihat keseluruhan dari posting-posting yang telah anda publikasikan. Cara Membuat Daftar Isi Blog kali ini gak sulit kog'...dan jika sobat tertarik untuk memasangnya di Blog sobat, silahkan sobat ikuti langkah-langkahnya.

Langka-langkah yang harus anda lakukan..:

• Log in ke Blogger Anda.
• Pilih Tata Letak/Rancangan.
• Pilih Edit HTML.
• Download Full Template, untuk membackup template sobat, jika terjadi kesalahan.
• Beri tanda centang pada Expand Template Widget. 
• Cari kode seperti di bawah ini : => sobat juga bisa gunakan pencarian cepat (Ctrl + F)

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>

• Kalau sudah dapat, kemudian sobat ganti dengan kode dibawah ini :

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<!-- on a label page, add a header saying 'Contents' -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<h2 class='date-header'>Contents</h2>
</b:if>
</b:if>
</b:if>
<!-- Start loop for displaying posts here -->
<b:loop values='data:posts' var='post'>
<!-- Date-headers are only displayed if on main, item or archive page -->
<!-- If on label-page, then no date-header -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>
</b:if>
</b:if>
<!-- Here we start displaying the posts. -->
<!-- If we are on a label page, only the posttitle is displayed -->
<!-- On other pages the entire post is displayed -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "archive"'>
<a expr:href='data:post.url'><data:post.title/></a><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!-- If on item page display comments -->
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>

• Jika proses peng-copyan sudah selesai, sobat Save hasil kerja sobat.
• Nah, blom selesai sampai disini......Langkah selanjutnya adalah sobat menentukan letaknya pada blog sobat.
• Pilih Tata Letak/Layout.
• Pada halaman Page Element/Elemen Laman.
• [Klik] Add a Gadget.
• Pilih Link List. Lalu tentukan judul link sobat.
• Pada New Site URL masukkan kode berikut ini :

http://Alamat URL Blog Sobat/search/label/?max-results=999

• Ganti tulisan yang berwarna merah "Alamat URL Blog Sobat"  dengan alamat URL Blog sobat.
• Kemudian Save dech....!! Coba sobat lihat hasilnya...

Semoga Bermanfaat....!!


EnaL Rhay SyahRinggan Next..>>

READ MORE - Cara Membuat Daftar Isi Blog

Membuat Post & Comment Counter Di Blog

Membuat Post & Comment Counter Di Blog
Hay...Jumpa lagi dengan sobat blogger, kali ini saya akan share salah satu cara memodifikasi blogspot tepatnya memasang Blog Accessories pada blog sobat.

Salah satu Blog Accessories yang saya maksud tadi adalah cara Membuat Post & Comment Counter Di Blog dengan menggunakan kode script. 

Dengan menggunakan kode script yang saya tampilkan dibawah, dengan otomatis jumlah posting yang telah dipublikasikan akan muncul pada tempat yang anda inginkan di blogspot sobat, misalnya di sidebar blog soba. Sama halnya dengan comment counter, dengan otomatis jumlah comment akan muncul di Blog sobat.

Langsung saja ikuti langkah-langkah berikut :

• Seperti biasa Log in ke Blogger anda [klik] disini.
• Pilih Tata Letak/Layout.
• Pada halaman Page Element/Elemen Laman.
• [Klik] Add a Gadget.
• Pilih HTML/Javascript.
• Copy code di bawah ini dan paste ke dalam HTML/Javascript tersebut.

Script Post Counter

<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
+ '</b><br>');}</script>
<script src="http://namablogsobat.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

Script Comment Counter

<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {
document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t +
'</b><br>');}</script>
<script src="http://namablogsobat.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

• Ganti tulisan yang berwarna merah "http://namablogsobat.blogspot.com/"  dengan URL Blog sobat.
• Kemudian Save hasil kerja sobat,,,, Coba sobat lihat hasilnya..!!

Semoga bermanfaat...

EnaL Rhay SyahRinggan Next..>>

READ MORE - Membuat Post & Comment Counter Di Blog

Menghilangkan Judul Blog Di Header

Menghilangkan Judul Blog Di Header

Judul blog memberikan informasi tentang blog kita dan sangat penting dalam search engine. Namun jika kita membuat background header yang unik, bagus dan keren tapi di blogger judul blog tampak di header menurut kita akan mengganggu pemandangan background header kita.

Nah...Dalam posting kali ini saya akan share cara Menghilangkan Judul Blog Di Header. 
Ach...mda usah panjang lebar....Langsung aja ikuti langkah-langkahnya :

• Seperti biasa Log in ke Blogger anda. => Blogger.com
• Pilih Tata Letak/Edit HTML.
• Cari Kode dibawah ini : (Gunakan saja pencarian cepat => Ctrl + F)

#header h1 {
font:$pagetitlefont;
letter-spacing:0;
margin:0;
padding:21px 20px 3px;
text-shadow:0 1px 0 #000000;
text-transform:none;
}

Nach.. tambahkan kode CSS visibility:hidden; ke dalam kode CSS di atas sehingga hasilnya akan terlihat seperti di bawah ini :

#header h1 {
font:$pagetitlefont;
letter-spacing:0;
margin:0;
padding:21px 20px 3px;
text-shadow:0 1px 0 #000000;
text-transform:none;
visibility:hidden;
}

Nach...Kamu simpan dech, dan lihat hasilnya...!!

EnaL Rhay SyahRinggan Next..>>

READ MORE - Menghilangkan Judul Blog Di Header

Cara Membuat CBox / Buku Tamu di Samping Blog

Hay sobat blogger.....kali ini saya ingin berbagi pengetahuan sekalian ingin share cara membuat CBox pada blog yang biasanya disebut dengan Buku Tamu,,,Hahayyyy....

Tapi kali ini CBox yang saya akan share yaitu CBox atau biasanya disebut dengan Buku Tamu bukan  yang  sering kali kita lihat di area widget pada blog, Namun CBox yang akan saya Share yaitu CBox yang tepatnya  berada di posisi samping blog sobat.....

Okey...Jika sobat blogger tertarik dengan Cara Membuat CBox / Buku Tamu di Samping Blog ikuti langkah-langkahnya....!!!!

• Seperti biasa Log in ke Blogger anda [klik] disini.
• Pilih Tata Letak/Layout.
• Pada halaman Page Element/Elemen Laman.
• [Klik] Add a Gadget.
• Pilih HTML/Javascript.
• Copy code di bawah ini dan paste ke dalam HTML/Javascript tersebut.

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:200px;

width:30px;

float:left;

cursor:pointer;

background:url('http://th387.photobucket.com/albums/oo318/cem_ply/th_buku-tamu_03.gif') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #F5F5F5;

background:#000000;

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="200" height="305" src="http://www3.cbox.ws/box/?boxid=3261541&amp;boxtag=f2qtm9&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3261541" style="border:#0A19F7 1px solid;" id="cboxmain3-3261541"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www3.cbox.ws/box/?boxid=3261541&amp;boxtag=f2qtm9&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3261541" style="border:#0A19F7 1px solid;border-top:0px" id="cboxform3-3261541"></iframe></div>

</div>

<!-- END CBOX -->

<br/>

<a href="http://forantum.blogspot.com">.

</a>

<div style="text-align:right">

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

[Hide]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

• Sobat juga bisa merubah warna dan posisi tempatnya sesuai keinginan sobat.
• [Klik] Save...!! 
• Selesai dech....Oya, harap tinggalkan Commennya yach...!!

EnaL Rhay SyahRinggan Next..>>

READ MORE - Cara Membuat CBox / Buku Tamu di Samping Blog

Cara Mengganti Background Pada Blog

Cara Mengganti Background Pada Blog
Dalam posting kali ini saya akan menunjukkan Cara Mengganti Background Pada Template Blog. Pada umumnya template yang kita download memiliki background yang sudah cukup bagus, tapi mungkin masih ada sebagian Blogger yang ingin menggantinya dengan background kreasi sendiri dengan menambahkan gambar animasi bergerak juga bisa kita lakukan.

Baiklah tanpa basa-basi lagi saya akan memberikan triknya..

• Seperti biasa Log in ke Blogger anda.
• Pilih Dashboard Blogger anda 
• Kemudian [klik] Layout - Edit HTML. Untuk berjaga-jaga sebaiknya backup dulu template anda.
• Kemudian carilah kode ini body { :

Lihat contoh di bawah ini :

body {

 background:#000000 url('http://i1185.photobucket.com/albums/z354/Enal_Rhay_SyahRenggan/th_EnalRhaySyahRinggan1.jpg');

 margin:0;

Ket :

1. Kode yang berwarna merah (#000000) adalah kode warna (Boleh di ubah
    sesuai selera anda).

2. Kode yang ini (http://i1185.photobucket.com/albums/z354/
    Enal_Rhay_SyahRenggan/th_EnalRhaySyahRinggan1.jpg) adalah alamat
    Url Gambar, Anda juga bisa menggantinya dengan Url gambar pilihan anda.

• Setelah diganti, anda lihat dulu [klik] Pratinjau, jika berhasil [klik] Simpan Template

Selamat mencobanya....!!!!!


EnaL Rhay SyahRinggan Next..>>

READ MORE - Cara Mengganti Background Pada Blog