Artikel Terbaru

Cari Artikel
Diberdayakan oleh Blogger.

Kamis, 04 April 2013

Cara Menambahkan Emoticon Yahoo Pada Komentar Blog

00.54 Unknown No comments

Salam Blogger, kali ini saya sedikit mengulas trik lama yaitu tentang pemasangan emoticon yahoo pada komentar blog, namun tidak semua template bisa berhasil menggunakan cara ini. Kebanyakan cara ini berhasil pada template standar, karena saya coba di template saya tidak berhasil, untuk demonya silakan sobat klik link berikut DEMO.
Trik ini berhasil saya terapkan pada template standar, pada demo tadi terlihat emoticon di bawah kotak komentar dan pada komentar. Kalau untuk template saya mungkin masih butuh banyak belajar lagi untuk otak-atik scriptnya, [ sok pinter,, heheheeeee,,].
Baiklah, bagi sobat blogger yang ingin mencoba ataupun berminat untuk memasang emoticon yahoo pada komentar Silakan ikuti langkah-langkah berikut ini:

Ada tiga langkah, untuk menambahkan emoticon yahoo pada komentar blog :
  1. Penambahan kode CSS
  2. Penambahan kode HTML
  3. Penambahan JavaScript

Menambahkan kode CSS:

1. Masuk ke Dasbor ---> Rancangan ---> Edit HTML
2. Backup template (menjaga kegagalan proses)
3. Tandai Expand Template Widget
4. Cari kode ]]></b:skin> dan tambahkan kode berikut tepat di atasnya.


<!-- Yahoo Smileys by denzuaz Code Start-->
.ysmileydenzuaz {
    background: none repeat scroll 0 0 #EFF5FB !important;
    font-size: medium !important;
    padding: 10px !important;
    text-align: left !important;
    font-weight:bold !important;
    font-size:11px !important;
    margin-top:-35px;
}
img.bhacksmly {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}
<!-- Yahoo Smileys Code End-->


Menambahkan kode HTML:

1. Cari kode ini :


<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>

2. Tambahkan kode di bawah ini, diantara kedua kode tadi.



<!-- Yahoo Smileys by denzuaz Star-->
<div class='ysmileydenzuaz'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>  :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>  :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>  :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
<img alt='' class='bhacksmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!
</div>
<!-- Yahoo Smileys by denzuaz End-->

Menambahkan JavaScript:

1. Cari kode </body> dan tambahkan kode ini di atas </body>
  

 <!-- Yahoo Smileys Script by denzuaz -->
<script src='http://zuazz.googlecode.com/files/ysmiley_fixed.js' type='text/javascript'/>
<!--Yahoo Smileys Script Ends -->

2. Save / simpan template.


Selesai. Demikianlah Cara Menambahkan Emoticon Yahoo Pada Komentar Blog, semoga bermanfaat ya sobat.

Sumber: http://blog.kangismet.net
Read more »

Posted in:

Cara Membuat Label Berputar-putar Di Blog

00.52 Unknown No comments

Salam blogging sobat-sobat ku semua, kali ini saya sedikit share tentang cara membuat label berputar-putar di blog, cara ini sudah banyak di bahas oleh master-master blog terdahulu.
Disini saya hanya mengulas ulang, siapa tahu ada sobat blogger yang belum mengerti, ataupun sudah pernah melihat dan ingin mempraktikkan di blog sobat. Dengan menggunakan cara ini tampilan widget label akan lebih ringkas, dan tidak terlihat terlalu panjang ataupun terlalu lebar, karena lebar dan panjangnya bisa sobat sesuaikan sendiri.
Saya kira cukup sekian saja penjelasan saya, mari kita menuju ke pokok pembahasan yaitu cara membuat label berputar-putar di blog.
Berikut ini langkah-langkah cara membuat label berputar-putar di blog:
1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode berikut:
  • Untuk template lama cari kode ini: <b:section class='sidebar' id='sidebar' preferred='yes'>
  • Untuk template baru cari kode ini: <b:section-contents id='sidebar-right-1'>
5. Setelah ketemu sobat copy paste code berikut ini tepat di bawah kode yang sobat cari tadi
Klik show untuk melihat


Keterangan: 
  • Kode berwarna kuning adalah lebar widget, bisa sobat sesuaikan sediri.
  • Kode berwarna hijau adalah tinggi widget, bisa sobat sesuaikan sendiri.

6. Klik save / simpan template

Catatan:
Apabila label belum muncul sobat setting secara manual dahulu seperti gambar di bawah ini.
Demikianlah Cara Membuat Label Berputar-putar Di Blog. Silakan mencoba dan semoga bermanfaat sobat..

Sumber script: http://coretan-siperantau.blogspot.com
Read more »

Posted in:

Cara Membuat Chat YM Pingbox Pada Blog

00.51 Unknown No comments

Salam Blogger, Kali ini saya akan berbagi tentang bagaimana Cara Membuat Chat YM Pingbox Pada Blog yang telah direquest salah satu sobat Blogger saat chat dengan saya.

Untuk melengkapi cara berkomunikasi langsung pada pengunjung blog kita haruslah menyediakan sebuah media misalnya seperti chatbox ataupun chat YM Pingbox agar pengunjung lebih leluasa untuk bertanya pada kita.
Sebab tidak semua pengunjung mau bertanya lewat komentar pada blog, mungkin disebabkan malu ataupun lainya, dan tidak semua pemilik blog pun mau menjawab pertanyaan si pengunjung tersebut, hal ini saya alami sendiri dulu sewaktu pertama merambah dunia blogger, pengalaman pahit [heheheeee,,, ].
Baiklah cukup sekian kita basa-basinya, bagi sobat bloger yang berminat untuk memasang YM Pingbox Silakan ikuti langkah-langkah berikut ini:


1. Sobat Klik link berikut ini  Pingbox
2. Klik buat pingbox seperti gambar di bawah ini


3. Sobat atur tampilan pingbox seperti gambar di bawah:


Keterangan nomor pada Gambar:
  1. Untuk mengatur tampilan tema pingbox
  2. Untuk mengatur ukuran text dan warna text pada saat chat
  3. Untuk mengatur nama tampilan admin pada pingbox
  4. Text yg tampil saat admin online
  5. Text yang tampil saat admin ofline
  6. Nama chat pingbox
Dari keterangan di atas sobat sesuaikan sendiri tampilannya sesuai selera sobat.


4. Mengatur pingbox akan dipasang dimana, lihat keterangan gambar berikut:


Keterangan nomor pada gambar:
  1. Pilih apa jenis blog sobat Blogger atau Wordpres
  2. Atur panjang dan lebar pingbox
  3. Copy script yang tampil pada kolom tersebut untuk dipasang pada blog sobat.
Dari keterangan di atas sobat sesuaikan sendiri tampilannya sesuai selera sobat dan download aplikasi yahoo! Messengernya.

5. Cara pemasangan.
  • Login pada akun blogger sobat
  • Klik Tata Letak
  • Klik Add Widget / Tambah Gatget
  • Pilih HTML/JavaScript
  • Paste code yang tampil pada kolom 3 pada gambar di atas ke dalam HTML/JavaScript
  • Klik Save / Simpan dan lihat hasilnya.

Demikianlah Cara Membuat Chat YM Pingbox Pada Blog. Semoga bermanfaat ya sobat dan selamat mencoba.
 
Read more »

Posted in:

Cara Membuat Fans Page Facebook Di Blog

00.50 Unknown No comments

Salam blogger, Melengkapi permintaan dari salah satu sahabat Zuaz'Z Creator on Facebook yang meminta saya untuk memposting cara untuk menghubungkan blog dan halaman facebook yang lebih kita kenal sebagai Facebook page/Like Box. Facebook page sudah sangat lazim digunakan di blog/website, mengingat besarnya manfaat untuk perkembangan blog/website maupun product yang ditawarkan. 
Jaringan sosial beserta pluginnya, khususnya Facebook, terbukti telah memperluas dan meningkatkan popularitas, daya jangkau, traffic, serta penjualan produk jenis apapun. Oleh karena itu, membuat Fans Page Facebook di blog/website merupakan hal yang sangat dianjurkan untuk blog/website Sobat.
Cara Membuat Fans Page Facebook di Blog/Website
1. Langkah pertama Sobat login terlebih dahulu di account Facebook Sobat.
2. Kemudian buka halaman ini:  Facebook Page
3. Pilih/klik opsi Merek atau Produk

4. Pilih opsi no.1"website" dan isikan no.2"nama Page" sesuai dengan yang diinginkan. centang "Persetujuan" dan klik "Mulai", seperti contoh gambar berikut:


5. Selanjutnya Sobat akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya, atau langsung membuat Facebook Like Box yang nantinya dapat dipasang di blog/website.
Penting: Sebelum menuju langkah berikutnya copy terlebih dahulu url Facebook Fan Page yang telah dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.
Contoh url-nya: http://www.facebook.com/pages/K-T-B/300432780037612


6. Berikutnya sobat pilih menu nomer 5 dan klik "add like box" atau bisa juga buka halaman berikut: Like Box
7. Selanjutnya, isikan spesifikasi seperti gambar berikut:
Setting Facebook Like Box:
1. Facebook Page url: paste url Facebook Page yang di copy tadi

2. Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget pada blog sobat.

3. Height: adalah tinggi like box, sesuaikan juga dengan widget pada blog sobat.

4. Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.

5. Show Faces: Centang untuk menampilkan foto profil likers.

6. Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.

7. Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.

8. Show header: Centang jika ingin menampilkan tulisan header "Temukan kami di Facebook".
Lihat preview tampilan di sebelah kanan form tersebut.

8. Jika settingan yang dibuat sudah beres, klik Get Code. Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, XFBML dan IFRAME pilih salah satu dan copy kodenya. (Untuk Blogger, disarankan pilih HTML 5).

Copy kedua kode tersebut untuk pemasangan Like Box di blog Sobat.
Cara pemasangan like Box pada Blog:
  1. Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget.
  2. Pilih HTML/JavaScript.
  3. Masukkan kode yang telah dicopy ke dalam kotak kode HTML/JavaScript.
  4. Save/Simpan
.
Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website Sobat dapat dengan mudah meng-klik like pada like box yag telah disediakan.
Demikianlah Cara Membuat Fans Page Facebook Di Blog semoga bermanfaat Sobat.
Read more »

Posted in:

Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template

00.48 Unknown No comments

Salam Blogger, Melengkapi permintaan salah satu sahabat Zuaz'Z Creator yang meminta saya menjelaskan tentang cara memasang komentar facebook dan blogger berdampingan.

Mungkin tutorial ini sudah usang dan tidak asing lagi bagi Sobat semua, akan tetapi tutorial yang sudah ada saya coba tidak berhasil pada semua template, dan kemungkinan banyak berhasil pada template premium saja.

Disini saya sedikit mengulas lagi agar tutorial ini berhasil di semua template, karena pada saat saya coba pada blog uji coba saya yang bertemplate standar, tuorial yang lama tidak berhasil, hanya berhasil pada template premium saja, berikut cara yang saya dapatkan dari salah satu blog yang sudah lama bergelut di dunia blogger.

Cara Membuat Komentar Facebook dan blogger Berdampingan Pada semua template: DEMO
  1. Login ke account blogger Sobat
  2. Klik rancangan lalu klik Edit HTML
  3. Download template Sobat dulu untuk berjaga-jaga jika nanti terjadi kesalahan
  4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
  5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)
  6. Kalau sudah ketemu maka masukkan kode berikut ini di atas kode ]]></b:skin>

    7. Klik buka untuk melihat kode:
        .comments-page { background-color: #f2f2f2;}
        #blogger-comments-page { padding: 0px 5px; display: none;}
        .comments-tab { float: left; padding: 5px; margin-right: 3px;
        cursor: pointer; background-color: #f2f2f2;}
        .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
        .comments-tab:hover { background-color: #eeeeee;}
        .inactive-select-tab { background-color: #d1d1d1;}

    Hilangkan kode berwarna hijau bila ingin background kedua komentar transparan.

    Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau #comments, Sebenarnya sama saja, mungkin para master terdahulu menyarankan begitu agar tampak lebih rapi.

  7. Kemudian Sobat cari kode </head>
    Jika sudah ketemu, masukkan kode berikut ini tepat di atas kode </head>


    8. Klik buka untuk melihat kode:
        <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
        <script src='http://code.jquery.com/jquery-latest.js'/>
        <meta content='ID FB Sobat disini' property='fb:admins'/>
        <script type='text/javascript'>
        function commentToggle(selectTab) {
        $(".comments-tab").addClass("inactive-select-tab");
        $(selectTab).removeClass("inactive-select-tab");
        $(".comments-page").hide();
        $(selectTab + "-page").show();
        }
        </script>

    Perhatikan tulisan yang berwarna hijau di atas, ganti dengan ID facebook Sobat, misalkan https://www.facebook.com/nama Sobat maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika Sobat belum merubah ID Sobat maka yang tertera adalah berupa angka. contohnya seperti ini: https://www.facebook.com/1234567890

  8. Kemudian cari kode  <div class='comments' id='comments'>


    9. Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawah kedua kode <div class='comments' id='comments'>.


    Klik buka untuk melihat kode:
        <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
        <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
        <fb:comments-count expr:href='data:post.url'/> Comments
        </div>
        <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
        <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
        </div><div class='clear'/>
        </div>
        <div class='comments-page' id='fb-comments-page'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div id='fb-root'/>
        <fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
        </b:if>
        </div>
        <div class='comments comments-page' id='blogger-comments-page'>

    NB: Pada penempatan kode yang ke dua Sobat hapus kode yang berwarna ungu ya: <div class='comments comments-page' id='blogger-comments-page'> apabila kode di bawahnya sama.

    Perhatikan angka yang berwarna biru dan hijau di atas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Sobat dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Sobat agar kelihatan rapi.

    Pada cara di atas yang biasanya menyarankan hanya menempatkan pada kode <div class='comments' id='comments'> yang kedua saja, saat saya coba pada template blog uji coba saya tidak berhasil, jadi harus menempatkan di bawah kedua kode tersebut.

  9. Kemudian klik save, dan lihat hasilnya.

Selamat mencoba ya Sobat dan jangan lupa nih Komentarnya, hehehe,,,  bila ada kata-kata yang salah saya mohon maaf,,

Sumber
Read more »

Posted in:

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

00.48 Unknown No comments

Salam blogger, Kali ini saya sedikit berbagi tentang Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header yang telah di request oleh sahaba-sahabat Zuaz'Z Creator pada halaman Facebook.
Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita. 
Untuk demonya silakan sobat blogger klik link berikut ini DEMO. Bagi sobat blogger yang berminat memasang menu semacam ini silakan ikutu langkah-langkah berikut ini:



Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>


Klik show untuk melihat
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9serPGFqTpZR__bn89P5kX3WP-1nBwB3MxT42LM55NUXrTCExABIy9afTqj6J16NaYC06oFv_8pj8GlDPTEMcPBRN2Ote0gFvpPyXWTNhojxoBWIJMHHAGsdqSqQdw0hSA5KygPO_XL8/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY6aJcaDzgoCEFrS56012JyiXqGgpU39KOdfnF8_DLY807mn0g50ohuXCPGznCLZ5R5PHmEgdMf-Ifg0VKxONBBu1MSIhAoL10wrr7NJDdaJrDjCq13GwGIY87K17JhbrFroLqyapZ-AA/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}


Selanjutnya sobat blogger cari kode berikut:
  • <header>  : untuk menempatkan menu di atas nama blog
  • </header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

Klik show untuk melihat
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf_2ujPX7XVsR0E-WrN6SuidNvszQvgB11_WCsO_Kwgcm8L_UjH2Oy3A5eTE_dmsOv9e4za1YtgUUcR0bNyuf_wg89Ju89SqNLYy3gIDpvpi_7I3XTTf13-zhTx7Q9OSLtuvKSe9ND7jA/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij-2fsDdhM-Hl1s6ih4uCYwgk_AU_STh8tafWYBoFJVc-vETAGzaunVg7j9F2-arr4eIbhk4fFyaaGywFHbk5oOLs2zHko_dnEBPy3Dgd55cLLhqDoTzHKfcvvCqbgG9NX2602Dxnsimw/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGqWbBem4uoVHvVFkcWT611ruI37FgAanpFVnZVi5gpMQdUsfAeHoulDWeuCWNDdaBUkEqBd0FalnXcgV1BavWxn1xEqq8iiWJus3WMrxQF1k8turw3oX41akI_vInv_4yWifyDSOhh9o/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan:
  1. Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
  2. Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.
Demikianlah Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat bagi sobat blogger.

Selamat mencoba sobat...

Sumber
Read more »

Posted in:

 
Design by http://farhanshare.blogspot.com | Bloggerized by Farhan Share | Tutorial Blogspot, dan Informasi Internet