Cara Membuat Dropdown Menu Pada Blog

Hai sobat blogger,, setelah beberapa hari ngga posting di blog ini karena mencari ide untuk membuat postingan baru, akhirnya saat ini sudah mendapatkan ide. Dan lagi-lagi kali ini adalah postingan tentang blogging. Setelah sebelumnya saya membuat postingan tentang Cara Membuat Spoiler Pada Blog, kali ini saya akan berbagi tips blogging yang hampir sejenis, yaitu Cara Membuat Dropdown Menu Pada Blogger (List Menu). Dropdown menu ini (list menu) adalah sebuah menu yang berisikan kumpulan link-link teks yang ditampilkan menurun kebawah jika menu tersebut di klik.
Dropdown menu ini biasanya digunakan untuk mengelompokkan kumpulan link menjadi sebuah menu agar link-link tersebut tidak memakan tempat pada sebuah blog. Dropdown menu ini juga dapat digunakan sebagai alat navigasi pada blog.
Berikut ini contoh Dropdown menu :


>> Anda dapat menempatkan dropdown list menu pada postingan blog atau pada widget. <<

Berikut ini cara membuat Dropdown list menu :

1. Masuk ke akun blogger anda

2. Untuk meletakkan menu dropdown pada widget, klik Design >> Page Element >> Add Gadget, kemudian masukkan kode script dengan format seperti dibawah ini. Sedangkan jika anda ingin meletakkannya didalam postingan blog, pilih Posting >> New Post, kemudian pilih HTML mode dan masukkan kode seperti dibawah ini :
 <form><select name="menu"  onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option>Apa yang ingin anda cari..?</option>
<option value="http://unik-google.blogspot.com/">unik-google</option>
<option value="http://unik-google.blogspot.com/2011/11/cara-membuat-spoiler-pada-blog.html">Membuat Spoiler</option>
<option value="http://unik-google.blogspot.com/2011/11/membuat-read-more-pada-blogger.html">Membuat Read More</option>
<option value="http://unik-google.blogspot.com/2011/11/cara-membuat-related-post-pada-bloger.html">Membuat Related Post</option>
</select></form>
    >> Catatan :
  • Tulisan "Apa yang ingin anda cari..?" adalah kata yang muncul pada dropdown menu pertama kali, contohnya dapat dilihat pada contoh dropdown menu diatas. Anda dapat menggantinya sesuai keinginan...
  • Ganti URL diatas dengan URL anda.
  • Ganti Tulisan berwarna merah dengan teks yang ingin anda munculkan

3. Terakhir, klik Save atau Publish.

Sekian tulisan saya mengenai Cara Membuat Menu Dropdown Pada Blog,, semoga artikel ini bermanfaat bagi anda... Terima kasih telah berkunjung dan membaca di blog ini...
readmore »»   http://3.bp.blogspot.com/-FKB-bxL3OqE/UIhFrTOWvJI/AAAAAAAAAMs/hAm141vpVbw/s640/Petua+Isteri+Tewaskan+Suami+Di+Bilik+Tidur.jpg
video ml di hotel
Label: , ,

Cara Membuat Spoiler Pada Blog

Cara Membuat Spoiler Pada Blog - Sebelumnya, apa itu spoiler ? Menurut pengertian saya, spoiler adalah tombol yang dapat digunakan untuk mempersingkat postingan blog, karena spoiler akan menyembunyikan sebagian dari postingan dan bagian itu hanya dapat ditampilkan jika tombol spoiler diklik, dan dapat disembunyikan kembali jika tombol spoiler diklik lagi. Dengan begini, postingan kita tidak terlalu memakan tempat pada blog. Dalam spoiler ini, dapat digunakan untuk menyembunyikan teks, gambar, maupun video (untuk gambar dan video diubah ke bentuk script text terlebih dahulu).
Kali ini saya akan berbagi cara membuat spoiler pada postingan blog. Untuk lebih jelasnya tentang spoiler bisa dilihat pada contoh berikut :

Contoh Spoiler:


Contoh Spoiler 2:
Anda dapat meletakkan teks, gambar, maupun video disini

Berikut ini cara membuatnya :

1. Login ke akun Blogger anda

2. Pilih New Post atau Entri Baru seperti membuat postingan biasa

3. Pilihlah pada mode HTML saat membuat postingan

4. Gunakan script berikut ini untuk membuat spoiler:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Contoh Spoiler</b>: <input value="View" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'View'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau script anda disini
 <br>
</div>
</div>
</div>
Catatan :
  1. Kata Contoh Spoiler adalah judul dari spoiler itu (yang terletak di sebelah kiri tombol View / Hidden). Anda dapat menggantinya sesuai keinginan anda.
  2. Kata View dan Hidden adalah kata yang terdapat pada tombol. Anda dapat menggantinya sesuai keinginan

5. Klik Publish jika sudah selesai

Sekian artikel saya tentang cara membuat spoiler pada blog. Semoga artikel ini bermanfaat dan terima kasih telah berkunjung dan membaca di blog ini... ;)
readmore »»   http://3.bp.blogspot.com/-FKB-bxL3OqE/UIhFrTOWvJI/AAAAAAAAAMs/hAm141vpVbw/s640/Petua+Isteri+Tewaskan+Suami+Di+Bilik+Tidur.jpg
video ml di hotel
Label: , ,

Cara Membuat Read More Pada Blogger

Cara Membuat Read More Pada Blogger - Pada kesempatan ini saya akan berbagi lagi Tips Blogging, yaitu cara membuat read more pada blogger. Tentunya sobat blogger sudah mengetahui apa itu read more bukan, ? Lalu sebenarnya apa fungsi dari read more itu sendiri? Menurut saya, fungsi dari read more adalah mempersingkat tampilan postingan-postingan yang ada pada halaman suatu blog, karena setiap postingan hanya ditampilkan judulnya dengan beberapa penjelasan (penjelasan ini biasanya adalah paragraf awal postingan tersebut).
Dengan begini, halaman blog akan terlihat lebih singkat dan tidak terlalu memanjang kebawah. Pada postingan saya kali ini akan membahas cara membuat read more tanpa menggunakan script tambahan, karena blogger sudah mendukung read more ini. Caranya cukup simple, anda tidak perlu repot-repot memasang script, akan tetapi anda harus melakukannya setiap membuat postingan baru. Tapi jangan khawatir, karena anda hanya perlu melakukan 'klik' lalu sudah jadi..

Berikut ini cara membuat read more pada blogger :

1. Masuk ke akun blogger anda

2. Pilih New Post seperti membuat postingan biasa

3. Ketiklah teks anda, jika sudah gunakan tombol Insert Jump Break (seperti gambar dibawah) untuk memisahkan bagian yang ingin ditampilkan dan bagian yang disembunyikan
(klik untuk memperbesar)
4. Jika sudah selesai, klik Publish.
Maka hasilnya seperti berikut :

Bagian ini adalah bagian yang terlihat pada halaman Home / Beranda
Read More >>


Setelah melakukan langkah-langkah diatas, maka postingan anda sudah menjadi Read More. Anda dapat mengubah tulisan "Read More" dengan kata-kata sesuai keinginan anda dengan cara berikut :

1. Masuk pada halaman Design => Page Element

2. Lalu pada bagian Posting blog atau Post, klik Edit (Gambar 3)

3. Ganti tulisan pada Post page link text menjadi kata-kata sesuai keinginan anda (Gambar 4)


(klik untuk memperbesar)
Sekian postingan saya mengenai Cara Membuat Read More Pada Blogger. Semoga artikel ini bermanfaaat dan terima kasih telah berkunjung dan membaca artikel ini. Salam Blogging...
readmore »»   http://3.bp.blogspot.com/-FKB-bxL3OqE/UIhFrTOWvJI/AAAAAAAAAMs/hAm141vpVbw/s640/Petua+Isteri+Tewaskan+Suami+Di+Bilik+Tidur.jpg
video ml di hotel
Label: , ,

Cara Mengetahui Feed URL Blog

Feed Icon
Cara Mengetahui Feed URL Blog - Yup sobat blogger, kali ini saya akan berbagi Tips blogging Pemula yaitu cara mengetahui Feed URL Suatu blog. Sebelumnya apa sebenarnya Feed itu..? Mungkin sebagian besar dari para blogger sudah mengetahunya, akan tetapi bagi blogger newbie mungkin ada yang belum mengetahuinya...

Feed (atau disebut juga Feed News) adalah format data yang digunakan seseorang penggunanya untuk mendapatkan update konten dari suatu blog atau web.



Sedangkan Feed tersebut ada 2, yaitu Atom dan RSS. Menurut Kamus Istilah Blogger oleh Mas Medhy Aginta (www.blogguebo.com) pengertian Atom dan RSS adalah sebagai beriku
Atom adalah sebuah format sindikasi feed yang dikembangkan sebagai alternatif RSS. Atom memungkinkan seseorang mendapatkan updates artikel dari sebuah situsatau blog manakala ada posting baru.
RSS (kependekan dari Really Simple Syndication) adalah suatu format yang digunakan untuk mengirimkan informasi dari sebuah situs dan halaman situs yang di-update secara berkala. Sebuah dokumen RSS (yang disebut Feed) berisi ringkasan atau keseluruhan konten dari sebuah situs. Keuntungan menggunakan RSS adalah memungkinkan pengunjung sebuah situs untuk tetap berhubungan dengan situs-situs favorit mereka tanpa harus mengunjunginya secara online. Manakala anda berlanggan sebuah RSS Feed, secara otomatis anda akan menerima updates konten dari situs bersangkutan apabila situs tersebut mempublikasikan konten baru.
Kita biasanya akan membutuhkan Feed URL ini ketika kita melakukan submit blog atau artikel kedalam sebuah Blog directory. Lalu bagaimana caranya? Sebenarnya caranya cukup simple, anda tidak membutuhkan software atau plugin tambahan, berikut cara mengetahui Feed URL :


1. Buka halaman blog anda
2. Klik kanan pada area kosong di halaman blog anda
3. Klik View Page Info
4. Akan muncul popup window baru, klik pada Feeds 
5. Disana akan muncul URL Feed Atom dan RSS


Mudah banget kan..?
Sekian dulu artikel saya mengenai Cara Mengetahui Feed URL Pada Blog. Semoga artikel ini bermanfaat bagi anda... Terima kasih telah membaca
readmore »»   http://3.bp.blogspot.com/-FKB-bxL3OqE/UIhFrTOWvJI/AAAAAAAAAMs/hAm141vpVbw/s640/Petua+Isteri+Tewaskan+Suami+Di+Bilik+Tidur.jpg
video ml di hotel
Label: , ,

Link Sahabat

Tukar Link dan Banner unik-google
Bagi sobat blogger yang berminat bertukar link atau banner dengan unik-google silakan pasang link atau banner berikut di blog anda lalu harap segera menghubungi saya melalui halaman Kontak blog ini atau melalui kotak komentar.

Catatan : Tukar link maupun tukar banner hanya berlaku bagi blog DOFOLLOW. Blog anda juga harus terindex oleh search engine...





>>  Bagi yang ingin bertukar link text :
Nama : unik-google
URL   : http://unik-google.blogspot.com
       Atau scriptnya sebagai berikut :

>>  Sedangkan jika anda ingin bertukar banner, letakkan script berikut ini pada blog anda :

Berbagi Tips dan Trik Seputar Komputer dan Internet
***


Berbagi Info dan Tips Blogging
Ryanuars Blog : Membahas Semua Yang Berkaitan Dengan Komputer.
Artikel internet, Info, dan Humor ala mahasiswa
mahir blogging
Photobucket
BLOG
KENIMAZAY-
Selanjutnya...
readmore »»   http://3.bp.blogspot.com/-FKB-bxL3OqE/UIhFrTOWvJI/AAAAAAAAAMs/hAm141vpVbw/s640/Petua+Isteri+Tewaskan+Suami+Di+Bilik+Tidur.jpg
video ml di hotel
Label:

Cara Membuat Related Post Pada Bloger

Cara Membuat Related Post
Hai sobat blogger, pada kesempatan kali ini saya akan berbagi info mengenai Cara Membuat Related Post atau Postingan Terkait ato apalah namanya yang penting ini merupakan kumpulan link artikel-artikel atau postingan yang pernah kita buat yang memiliki keterkaitan dengan artikel yang sedang dibaca tersebut. Misalnya jika kita membuka halaman blog kita yang berisi suatu artikel, maka pada bagian bawah halaman tersebut akan muncul beberapa link postingan dengan kategori yang sama yang pernah kita buat sebelumnya. Nah, lalu bagaimana cara membuat related post atau artikel terkait pada blog ..?

Yup,, berikut langkah langkah membuat related post pada blog:

1. Login ke akun blogger anda

2. Bagi anda yang menggunakan blogger interface lama pilih Design (Rancangan)=>Edit HTML. Sedangkan jika menggunakan blogger interface yang baru, pilih Template=>Edit HTML, kemudian beri tanda centang pada Expand Widget Templates

3. Setelah itu, cari kode ]]></b:skin> . Jika sudah ketemu masukan kode script berikut diatas kode tersebut

#related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; }
#related-posts a{ color:#4b4b4b; }
#related-posts a:hover{ color:#ca1717; }
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }
#related-posts a { text-decoration : none; }
#related-posts a:hover { text-decoration : none; }
#related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }
Catatan : Untuk color dan lainnya bisa diedit sesuai selera anda...

4. Langkah selanjutnya, cari kode </head>. Lalu masukkan script berikut diatasnya

<script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'/>
5. Eitts.. belum selesai, tinggal satu langkah lagi. Cari kode <data:post.body/>  , jika kesulitan dalam mencari kode tersebut, tekan CTRL+F lalu ketiklah kode <data:post.body/> lalu klik tombol "Highlight all" (terletak dibagian bawah jika anda menggunakan Mozilla Firefox). Geser scroll untuk mencari apabila ada 2 kode <data:post.body/>. Jika anda menemukann 2 kode <data:post.body/>, pilih yang pertama

6. Letakkan kode script berikut dibawah kode <data:post.body/> yang pertama
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts:</b></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
Catatan : untuk kata "Related Post" dapat diganti dengan kata lain seperti Artikel Terkait atau sesuai selera anda

7. Terakhir, klik Save Template dan lihat hasilnya
 
Sekian Tips Blogging tentang Cara Membuat Related Post atau Postingan Terkait dari saya. Semoga artikel ini bermanfaat.
readmore »»   http://3.bp.blogspot.com/-FKB-bxL3OqE/UIhFrTOWvJI/AAAAAAAAAMs/hAm141vpVbw/s640/Petua+Isteri+Tewaskan+Suami+Di+Bilik+Tidur.jpg
video ml di hotel
Label: , ,

Memasang Yahoo Emoticons Pada Komentar Blog

Hai sobat blogger, bagaimana kabarnya? I hope you're well. Pada kesempatan kali ini saya akan berbagi salah satu Tips Blogging, yaitu Cara Memasang Yahoo Emoticons Pada Kotak Komentar Blog. Mungkin sebagian besar dari anda sudah mengetahui apa itu emoticons. Akan tetapi mungkin ada juga sebagian yang belum mengetahui apa itu emoticons (hare gene masih belum tau emoticons!?. hehe, cuma bercanda kok. Jangan tersungging ya, eh maksud saya tersinggung. Karena orang yang mengatakan dirinya pintar belum tentu lebih pintar dari kita).
Yah, sesuai namanya 'Emoticons' atau Emotion Icon yang berarti icon-icon yang digunakan untuk menunjukkan emosi/ekspresi seseorang. Sesuai dengan fungsi emoticons seperti diatas, tujuan kita memasang emoticons pada kotak komentar blog antara lain agar pengunjung yang berkomentar dapat lebih ekspresif dalam memberikan komentarnya. Selain itu, pemberian emoticons juga dapat mempercantik tampilan blog kita.

OK, langsung saja ke TKP. Berikut Cara Memasang Yahoo Emoticons Pada Kotak Komentar Blog :

1. Masuk ke akun Blogger anda
2. Pilih Tab Design => Edit HTML
3. Carilah kode </body>. Jika kesulitan mencari kode tersebut, tekan saja tombol CTRL+F lalu ketiklah </body>
4. Masukkan script berikut diatas kode tersebut

<script src='http://hbhost.googlecode.com/files/yemoticon.js' type='text/javascript'/>
 5. Letakkan kode dibawah ini dibawah ini dibawah 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>
6. Jika sudah selesai, klik save lalu lihat di halaman bawah blog anda. Jika berhasil makaakan muncul icon-icon smile yang imut-imut. Untuk contohnya bisa dilihat pada blog saya ini dibawah.

Sekian Tutorial Blogging tentang Cara memasang Yahoo Emoticons pada kotak komentar blog. Semoga artikel ini bermanfaat bagi anda. Mohon maaf, kritik dan saran apabila ada kesalahan. Bagi yang belum jelas, silakan berkomentar dibawah.
readmore »»   http://3.bp.blogspot.com/-FKB-bxL3OqE/UIhFrTOWvJI/AAAAAAAAAMs/hAm141vpVbw/s640/Petua+Isteri+Tewaskan+Suami+Di+Bilik+Tidur.jpg
video ml di hotel
Label: , ,

Memasang Kode HTML Pada Postingan Blog

Apa kabar semua sobat blogger, setelah lama tidak update blog kali ini saya akan memposting artikel tutorial blogging bagi bagi pemula. Oh iya,, hampir lupa, terimakasih bagi anda yang telah mengunjungi blog saya ini. Semoga tulisan2 yang ada di blog ini bermanfaat bagi anda. Pada kesempatan kali ini saya akan berbagi tutorial mengenai Cara memasang kode HTML pada postingan blog. Catatan : Tips ini hanya berlaku pada blog sobat yang dibuat keluaran lama, untuk blog buatan baru dapat langsung bisa tanpa menggunakan cara ini. Ini merupakan tips yang saya temukan ketika browsing beberapa waktu yang lalu. Untuk memposting kode HTML(untuk blog keluaran beberapa tahun yang lalu), kita tidak bisa langsung mempostingnya pada artikel/postingan, melainkan ada caranya.
Bagi sobat blogger yang ingin memasang tutorial blogging yang terdapat kode HTML didalamnya, jangan bingung, kali ini saya akan berikan cara memasang kode HTML -nya.

Yup,, langsung saja kita praktekkan caranya. Berikut ini caranya:

1.  Bukalah situs http://centricle.com/tools/html-entities/
2. Letakkkan kode anda pada kotak yang tersedia












3. Klik Encode, lalu copy kode baru yang muncul
4. Gunakan kode tadi ketika memposting artikel
5. Lihat hasilnya..

Sekian tutorial saya mengenai Cara memasang kode HTML pada postingan blog semoga bermanfaat bagi anda. Jangan lupa berkomentar ya,, Mohon maaf bila ada kesalahan dalam penulisan. Mohon kritik dan sarannya..
readmore »»   http://3.bp.blogspot.com/-FKB-bxL3OqE/UIhFrTOWvJI/AAAAAAAAAMs/hAm141vpVbw/s640/Petua+Isteri+Tewaskan+Suami+Di+Bilik+Tidur.jpg
video ml di hotel
Label: ,
Langganan: Postingan (Atom)