Kali ini kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi tampilan link di blog. Jika sebelumnya saya sudah pernah posting membuat efek pelangi link, kali ini saya akan menjelaskan cara menambahkan efek jQuery nudging link. JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse pada link, link akan bergerak kekanan atau bergoyang.
Untuk contoh dari efek jQuery nudging ini bisa anda lihat disini. Klik salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya :
Login ke blogger dengan akun anda
Kemudian pada dasbor klik Rancangan >> Edit HTML
Tambahkan Script JQuery berikut diatas kode </head>
Saya sebelumnya ucapkan terima kasih kepada temen-temen yang telah setia mengunjungi blog ini. Saya akan terus berikan apa yang saya tahu tentang tutorial membuat website kepada anda semua. Nah, kali ini saya akan memberikan satu lagi tutorial blog mengenai cara membuat multi level drop down menu dengan jQuery. Memang sebelumnya saya sudah pernah posting cara membuat menu drop down yang sederhana, kali ini saya akan berikan lagi cara membuat menu drop down lagi, bedanya kali ini lebih menarik karena terdapat beberapa sub menu yang dapat ditampilkan setelah menu utama. Jika anda penasaran silahkan lihat gambar di bawah ini atau langsung saja klik disini.
Gimana, menarik kan? Nah, jika temen-temen berminat membuatnya simak langkah-langkah pembuatannya :
Login ke Blogger dengan akun
Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
Letakkan script JQuery berikut sebelum tag </head>
/*Top level list items*/ .jqueryslidemenu ul li{ position: relative; display: inline; float: left; }
/*Top level menu link items style*/ .jqueryslidemenu ul li a{ display: block; background: #414141; /*background of tabs (default state)*/ color: white; padding: 8px 10px; border-right: 1px solid #778; color: #2d2b2b; text-decoration: none; }
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; }
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: white; }
.jqueryslidemenu ul li a:hover{ background: black; /*tab link background during hover state*/ color: white; }
/*1st sub level menu*/ .jqueryslidemenu ul li ul{ position: absolute; left: 0; display: block; visibility: hidden; }
/*Sub level menu list items (undo style from Top level List Items)*/ .jqueryslidemenu ul li ul li{ display: list-item; float: none; }
/*All subsequent sub menu levels vertical offset after 1st level sub menu */ .jqueryslidemenu ul li ul li ul{ top: 0; }
/* Sub level menu links style */ .jqueryslidemenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/ padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; }
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ background: #eff9ff; color: black; }
/* ######### CSS classes applied to down and right arrow images ######### */
Setelah itu tambahkan kode HTML berikut diatas <div id='header-wrapper'>(menu drop down diatas header), jika ingin meletakkan di bawah header cari kode penutup header seperti ini </div><!-- end header-wrapper --> kemudian letakkan dibawahnya :
Silahkan ganti kode yang saya beri warna dengan tulisan anda sendiri, itu dulu tutorial kali ini selamat mencoba dan jangan sungkan jika bingung anda bisa isi kotak komentar di bawah.
Temen-temen sudah baca artikel saya tentang Membuat Chatbox Slide Vertikal Dengan jQuery kan? Tutorial kali ini pada dasarnya sama, yaitu kita menyembunyikan panel ini dengan tombol. Hanya disini yang kita sembunyikan adalah informasi tentang blog kita atau seputar tentang penulis blog. Nah, pada tutorial blog kali ini saya akan memberikan cara dalam membuat info panel slide vertikal dengan jQuery.
Sesuai dengan namanya fungsi dari menu ini adalah memberikan informasi tentang penulis kepada pembaca dengan sedikit kemasan animasi jQuery untuk memperindahnya.Untuk contoh gambarnya anda bisa lihat di atas, atau langsung lihat disini, klik tombol info yang ada di sebelah kiri atas. Bagi anda yang tertarik untuk membuatnya berikut ini langkah-langkahnya :
Login ke blogger dengan akun anda.
Kemudian klik rancangan
Pilih Edit HTML jangan lupa centang "Expand Template Widget"
Cari kode berikut ]]></b:skin> gunakan control + f biar cepet, kemudian copy kode dibawah dan letakkan diatas kode tersebut
Langkah terakhir cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.
<div class='panel'> <h3>Selamat Datang bahasa inggrisnya welcome</h3> <p style='text-align:justify'>Selamat datang di blog maskolis, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini <a href='http://creatingwebsite-maskolis.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>
<h3>Sekilas tentang maskolis</h3> <img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgniNGVKDencKCb7hE_zAm-EU3Qj3Dc4HFCEwvw4EpG_PWd5UFYz3p1a3oxuvKC5O4TtPHZ9pIB1F4gnk92u33hnE1AwuMaHxdk1lJDKw4nQBToH_sMZQD-StLhoDt7qkF47vCTUU9zX40/s1600/maskolis.jpeg' width='73px'/> <p>Photo di samping itu bukan saya dan juga bukan pacar saya, pokoknya bukan siapa-siap saya. Nama saya maskolis saya seorang yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan Oktober 2010, dan blog ini saya buat pada bulan Desember 2010</p>
Tentu temen-temen sudah tahu kan? Tulisan yang saya beri warna bisa diganti dengan tulisan yang diinginkan. Demikian tadi penjelasan mengenai membuat panel info dengan jQuery selamat mencoba dan semoga bermanfaat.
Perlu temen-temen ketahui blog saya ini baru berusia 2 bulan, mulai dari bulan Desember kemarin saya bikin blog ini. Kalau temen-temen nanya masalah komentar yang masuk, yah tentu saja masih sedikit. Nah, tutorial kali ini ada hubungannya dengan komentar, setelah sebelumnya saya sudah membahas tentang memasang reply pada kotak komentar, kali ni saya akan berbagi ilmu dengan anda tentang cara menampilkan dan menyembunyikan komentar yang masuk kalau bahasa inggrisnya show hidden comment.
Sebenarnya fungsi dari show hidden comment ini terutama untuk blog yang sering kebanjiran komentar dari pengunjung seperti blognya Kang Rohman, Mas Doyok, O-om tiga orang pendekar blogger yang sudah mempunyai ilmu yang sangat tinggi. Dengan menyembunyikan komentar dapat menambah ruang pada blog. Cara kerjanya sepeti ini : komentar dari pengunjung akan disembunyikan dan akan muncul apabila anda atau pengunjung menge-klik tulisan seperti ini [+/-]Click to Show or Hide Old Comments. Untuk langkah-langkah pembuatannya adalah sebagai berikut :
Jika anda seorang blogger, login dulu dengan akun anda
Kemudian pilih rancangan
Terus klik Edit HTML Jangan lupa centang Expand Template Widget.
Cari kode berikut ]]></b:skin> setelah itu masukkan kode ini diatasnya.
Setelah ketemu letakkan kode script di bawah ini tepat diatas kode </head>
<script type='text/Javascript'> function togglecomments (postid) { var whichpost = document.getElementById(postid); if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } } </script>
Langkah berikutnya cari lagi kode berikut ini <dl id='comments-block'> Kemudian copy kode dibawah ini tepat sebelum kode tersebut.
<a aiotitle='click to expand' href='javascript:togglecomments("comments-block")'rel='nofollow'><b>
+/-]Click to Show or Hide Old Comments</b></a>
<dl class='commenthidden' id='comments-block'>
Klik Simpan.
Anda bisa ganti tulisan yang saya cetak tebal "+/-]Click to Show or Hide Old Comments" dengan tulisan yang bercetak tipis, eh salah.... Dengan tulisan yang anda inginkan, selamat mencoba dan happy blogging.
Written By Unknown on Minggu, 20 Oktober 2013 | Minggu, Oktober 20, 2013
Narapidana dan petugas lapas menjalankan salat Idulfitri 1434 H berjamaah di Lapas Kelas I Sukamiskin, Kota Bandung, Kamis (8/8/2013). Pelaksanaan sholat Idulfitri di tempat ini diikuti sejumlah koruptor serta sekitar seribuan orang narapidana dan berjalan tertib dan aman. (TRIBUN JABAR/GANI KURNIAWAN)Â
Laporan Wartawan Dicky Fajar Djuhud BANDUNG - Puluhan petugas yang tengah melakukan inspeksi mendadak (sidak) terkejut saat hendak menggeledah sel kamar di Blok Barat, Minggu (20/10/2013).
Kamar yang berada di pojok sebelah kanan bernomor 40 tersebut dihuni Heriyadi alias Adi. Pria yang masuk tahanan karena melanggar Pasal 340 KUH Pidana dan masuk Lembaga Pemasyarakatan Sukamiskin Klas I pada 23 Juli 2010 lalu itu ditemukan sudah tak bernyawa.
"Meninggal! Sudah meninggal yang ini," ujar seorang petugas setengah berteriak yang mengagetkan petugas lainnya.
Diberitakan sebelumnya, Lembaga Pemasyarakatan Klas I Sukamiskin melakukan sidak ke seluruh sel bersama Kepolisian, sekitar pukul 21.00 WIB, Minggu (20/10/2013).
Sidak dipimpin langsung oleh Kalapas Sukamiskin Giri Purbadi. Petugas akan menggeledah sekitar 460 sel tahanan dari sekitar 500 sel yang ada. Sebelum memulai sidak, puluhan petugas diberi arahan agar jangan sampai terjadi hal-hal yang tidak diinginkan.
Liputan6.com, Jakarta : Kemenangan kembali diamankan Timnas Indonesia U-19. Bermain menghadapi Filipina di Stadion Utama Gelora Bung Karno (SUGBK) Jakarta, Kamis (10/10/2013) malam WIB, Indonesia menang dua gol tanpa balas.
Gol tim Garuda Jaya dicetak oleh Muhamnad Hargianto (menit 27) dan Yabes Roni Malaifani (menit 83). Namun kemenangan ini belum membuat pelatih Indra Sjafri puas. Meski sangat mensyukuri hasil di laga kedua babak penyisihan grup G Piala AFC U-19, Indra tetap menilai bahwa timnya masih memiliki beberapa kelemahan.
"Kita bersyukur dengan hasil malam ini. Kita tetap bisa menang walaupun cuma mencetak dua gol. Filipina main bertahan dan kita tak menyangka mereka tampil begitu negatif," ucapnya pada konfrensi pers seusai laga.
"Tim ini belum sempurna. Masih ada beberapa kelemahan. Kita selalu terburu-buru dalam melakukan finishing dan para pemain kurang tenang di depan gawang. Tapi permainan di laga pertama dan kedua ini akan jadi evaluasi untuk laga yang ketiga," tambahnya.
Pada laga ketiga yang akan digelar Sabtu 12 Oktober 2013, Indonesia akan dipertemukan dengan tim kuat Korea Selatan. Saat ditanyai soal laga tersebut, Indra mengaku pihaknya masih mempelajari penampilan dari tim lawan.
"Belum ada kesimpulan tentang Korsel. Besok jam 11 kami kita baru akan memulai diskusi dengan tim pengamat yang sudah mengevaluasi permainan mereka," ungkapnya.
Dengan kemenangan di laga ini, Indonesia untuk sementara berada di posisi dua klasemen. Torehan poin yang diraih Evan Dimas dan kawan-kawan adalah enam angka, sama dengan yang dimiliki Korsel. Namun Korsel ada di posisi puncak lantaran unggul soal agresifitas gol.
REPUBLIKA.CO.ID, DENPASAR--Para nelayan yang ada di kawasan Kabupaten Badung bagian selatan kembali melaut setelah Konferensi Tingkat Tinggi Kerja Sama Ekonomi Asia Pasifik (KTT APEC) di Nusa Dua, Bali, berakhir Selasa (8/10).
"Nelayan di wilayah Desa Kelan, Kelurahan Tuban, Badung, kini sudah mulai bernafas lega. Aktivitas melaut sudah kembali normal setelah sempat terhambat selama penyelenggaraan KTT APEC 2013," kata Kelian Adat Desa Kelan, I Made Sugita, di Badung, Kamis (10/10).
Ia mengatakan, selama pelaksanaan KTT APEC 2013, para nelayan dilarang melakukan aktivitas laut di kawasan tertentu, seperti di dekat kawasan Bandara Ngurah Rai dan beberapa zona di seputaran Badung bagian selatan.
"Sedikitnya ada tiga kelompok nelayan setempat yaitu Kelompok Nelayan Samanjaya, Kelompok Nelayan Tanjung Sari dan Kelompok Nelayan Kerta Bali tidak bisa melaut di dekat Bandara Ngurah Rai," katanya.
Padahal, di daerah dekat Bandara Ngurah Rai tersebut justru yang banyak ikannya. "Ikan biasanya banyak berkumpul di dekat kawasan bandara. Tapi karena tidak boleh ke sana melaut, otomatis hasil tangkapan turun," katanya.
Ada imbauan dari aparat dan pemerintah selama KTT APEC di Nusa Dua, kata dia, di kawasan-kawasan tertentu terutama dekat bandara nelayan dilarang melaut. Nelayan diminta mencari jalur lain.
"Para nelayan di Kelan mendukung penyelenggaraan APEC, meski mereka secara langsung dirugikan. Mereka berharap pasca-kegiatan KTT APEC mampu membawa dampak positif bagi Bali ke depan," katanya.
Temen-temen bosan dengan tampilan huruf standar pada template yang dipakai? Nah, setelah sebelumnya saya menulis tentang cara memperbesar atau memperkecil huruf di blog, kini saya akan berikan satu lagi tutorial yang masih ada hubungannya dengan huruf, yaitu memasang change font di blog. Fungsi dari menu ini adalah untuk mengganti tampilan huruf yang ada di blog kita. Misalnya jika huruf yang kita pakai adalah Arial dengan memasang widget ini pengunjung dapat merubahnya dengan pilihan huruf yang ada di widget tersebut.
Untuk membuatnya sangat gampang, kita tidak perlu edit HTML, tinggal menambahkan kode javascript ini ke dalam widget. Oke, langsung saja pada cara-cara pembuatannya :
Pertama yang mesti dilakukan adalah login ke blogger.
Kemudian menuju Rancangan >> Tambah Gadget
Pilih HTML/Java Script
Lalu masukkan kode berikut ini ke dalam widget anda
<div class='widget-content'> <center><script> function go1(){ if (document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value != "none") { document.getElementById('main').style.fontSize =document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value } }
function go2(){ if (document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value != "none") { document.getElementById('main').style.fontFamily =document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value } } </script> <form id="forma" name="selecter2" method="POST">
<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1"> <option value="Times New Roman" />Times New Roman <option value="Arial" />Arial <option selected value="Book Antiqua" />Book Antiqua <option value="Bookman Old Style" />Bookman Old Style <option value="Century Gothic" />Century Gothic <option value="Comic Sans Ms" />Comic Sans Ms <option value="Tahoma" />Tahoma
Saya yakin temen-temen tidak ada yang kesulitan dalam membuatnya. Jika ada di antara temen-temen yang mempunyai cara yang lebih baru saya siap berbagi ilmu dengan anda. Selamat mencoba dan semoga bermanfaat.
Jika sebelumnya saya membahas tentang meningkatkan feedburner reader di blog. Tutorial kali ini saya akan membahas tentang cara memantau aktivitas feedburner dengan memasangnya pada browser yang kita pakai. Para blogger biasanya menampilkan feedburner RSS readers pada blog. Perlu temen-temen ketahui bahwa sebenarnya ada cara lain untuk memantau jumlah feed readers selain ditampilkan pada blog. Yaitu dengan FeedBurner Subscribers add-ons mozilla, kita dapat memantau jumlah RSS readers dan melihat hits yang terjadi pada blog tanpa harus mengunjungi blog. Cukup dengan instal add-ons Feedburner Subscribers ini, maka RSS readers dan hit count akan tampil di browser anda.
Gambar diatas adalah contoh tampilan feedburner RSS reader pada browser anda. Nah, jika temen-temen tertarik berikut ini saya akan jelaskan caranya :
Kemudian akan muncul halaman seperti gambar di bawah, klik tombol Add to Firefox.
Setelah itu muncul gambar seperti di bawah ini dan klik tombol Install Now.
Berikutnya, akan tampil lagi seperti gambar di bawah ini dan klik tombol restart firefox.
Selesai
Jika sudah terpasang anda harus rajin nulis artikel, biar feed readers-nya tambah banyak, Oke sampai jumpa lagi pada tutorial yang lain, selamat mencoba dan semoga bermanfaat.
Setelah pada postingan sebelumnya saya sudah jelaskan cara menghilangkan show older post di blog, kali ini saya kembali akan memberikan tutorial yang temanya menghilangkan. Temen-temen jangan heran ini bukan sulap, hanya menambahkan beberapa kode pada template kita tulisan itu hilang. Sebenarnya tampilan link ini tidak terlalu mengganggu karena letaknya di bawah kotak komentar. Anda pun bisa mengganti tampilan link ini dengan icon atau gambar sehingga kelihatan menarik.
Tapi jika temen-temen bersikeras untuk menghilangkannya, ya sabar dulu di bawah ini akan saya jelaskan caranya :
Login ke Blogger dengan akun temen-temen.
Kemudian pilih Layout/Tata Letak >> Edit HTML
Jangan lupa untuk mencentang pada kotak Expand Template Widget
Nah, gampang kan? Jangan lupa untuk meninggalkan komentar di bawah, karena komentar temen-temen semua sangat berarti bagi saya. Terima kasih dan semoga bermanfaat.
Walaupun sudah banyak diulas oleh blogger-blogger lain, tidak apalah kalau tutorial ini saya tulis lagi. Yah, daripada hari ini nggak posting, soalnya lagi banyak kerjaan. Nah, tutorial yang saya maksud diatas adalah cara menghilangkan tampilan entri lawas atau orang Inggris bilang Show Older Post. Tampilan entri lawas atau Show Older Post akan muncul apabila Anda mengklik link dari label atau kategori yang terdapat di blogger. Gambar di bawah adalah contoh dari show older post, jika kurang jelas anda klik salah satu label yang terdapat di navigasi menu blog ini.
Untuk menghilangkan agar tulisan itu tidak muncul lagi, berikut ini saya akan berikan caranya :
Hay sobat blogger !! Sebelumnya saya sudah pernah posting artikel mengenai Download ECO ( Japan ) SAGA 17 . Dan sekarang sudah update ke ECO SAGA 18 . Pastinya pada SAGA 18 ini terdapat fitur fitur terbaru yang lebih menarik . Bagi yang sudah memiliki ECO SAGA 17 yang sebelumnya anda bisa update ke versi terbarunya , bagi yang belum mempunyainya , silahkan download di artikel ini .
Nama File : Emil Chronicle Online.rar Jenis File : Aplication/rar Ukuran : 3.021.548.105 byte ( kurang lebih 3GB ) Uploader : Resya Dibuat : 27 September 2013 Deskripsi : -
Virus Scan : Google Drive can't scan this file for viruses. ( Detail : Emil Chronicle Online.rar (2,8G) melebihi ukuran maksimum yang dapat dipindai Google. )
Sekian informasi mengenai Download ECO SAGA 18 . Jika ada yang kurang paham , silahkan kontak ke uploader , Resya Sekian dan Terima kasih
Hay sobat blogger !! Kali ini saya akan berbagi cara menggunakan Virtualeco_Server yang digunakan untuk ECO SAGA 17 sesuai request sebelumnya . Berbeda dari SAGAECO yang membutuhkan aplikasi Database , pada virtualeco ini hal itu tidaklah dibutuhkan . Aplikasinya terbilang cukup simple dan masih terdapat banyak bug pada script karena virtual eco ini masih belum sempurna . Misalnya bug job , dan lainnya . Berikut cara menggunakannya : 1. Download virtualnya dari uploader
2. Setelah itu extract dan jalankan virtualeco_server.exe
3. Untuk pendaftaran akun cukup menggunakan browser dan buka link 127.0.0.1:13100
4. Jika berhasil mendaftar maka akan muncul seperti dibawah ini
5. Setelah itu buka file server.lst dan tambahkan tulisan "ecoffline,127.0.0.1:13000" (tanpa tanda petik) 6. Lalu silahkan buka eco anda dan bermain .
Sekian informasi untuk saat ini , jika ada yang dipertanyakan silahkan komentar dibawah ini . Semoga artikel Virtual ECO Server SAGA 17 bermanfaat dan dapat membantu anda . Sekian dan terima kasih .
Terkadang jika kita mengunjungi sebuah blog atau web, kita dihadapkan pada tulisan blog yang menurut kita terlalu kecil sehingga kita susah untuk membacanya. Nah, untuk menyikapi hal itu, diperlukan sebuah fasilitas untuk memperbesar ukuran huruf tersebut, benar kan? Kali ini saya akan membahas mengenai cara membuat tombol text resizer itu. Dengan adanya tombol resizer itu, otomatis tulisan teks pada blog akan membesar atau memperkecil.
Untuk contoh soalnya, temen-temen bisa lihat disini, klik tulisan berwarna biru dengan background ungu tersebut anda akan melihat huruf yang akan semakin membesar. Nah, sudah mengerti kan? Jika anda tertarik berikut ini akan saya jelaskan langkah pembuatannya :
Login ke blogger dengan akun anda
Selanjutnya klik Rancangan >> pilih Edit html
Jangan lupa centang Expand Template Widget
Saya sarankan untuk membackup template anda dengan cara klik download template lengkap
Langkah selanjutnya copy CSS di bawah ini, lalu paste persis di atas kode ]]></b:skin>
Selanjutnya cari kode <data:post.body/> lalu letakkan kode dibawah ini diatasnya
<div class='textsizersmall' onclick='if (this.className=="textsizersmall") { this.className="textsizernorm" } else if (this.className=="textsizernorm") { this.className="textsizerbig" } else if (this.className=="textsizerbig") { this.className="textsizerbigger" } else if (this.className=="textsizerbigger") { this.className="textsizersmall" } else { this.className="textsizersnall" }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>
Kemudian letakkan kode </div> setelah kode <data:post.body/> tersebut untuk lebih lengkapnya silahkan sobat lihat contoh dibawah ini.
<div class='textsizersmall' onclick='if (this.className=="textsizersmall") { this.className="textsizernorm" } else if (this.className=="textsizernorm") { this.className="textsizerbig" } else if (this.className=="textsizerbig") { this.className="textsizerbigger" } else if (this.className=="textsizerbigger") { this.className="textsizersmall" } else { this.className="textsizersnall" }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>
<data:post.body/>
</div>
Yang terakhir Save Template anda, kemudian lihat hasilnya.
Jika temen-temen ingin tampilan hurufnya lebih besar lagi, anda bisa menggantinya dengan cara mengganti font-size diatas. Sudah dulu ya penjelasannya, waktunya tidur selamat mencoba dan semoga bermanfaat.
Satu lagi fasilitas untuk berinkteraksi dengan pengunjung anda, chatbox namanya. Sebenarnya fungsinya sama dengan buku tamu dari shoutmix tapi kali ini agak dimodifikasi sedikit sehingga tempatnya tersembunyi. Jika kita ingin menampilkan menu ini, kita harus meng-klik tombol chatbox yang ada di sebelah kiri blog . Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap di bawah. Gambar di bawah adalah contoh chatbox slide vertikal yang ada di demo blog saya, jika anda belum jelas gambar itu ada disini. Klik tombol chatbox yang ada di sebelah kiri, anda akan melihat tampilannya.
Oke, tidak pakai lama, langsung saja ke langkah-langkah pembuatannya :
Login ke Blogger dengan akun anda.
Kemudian pilih Rancangan >> Edit HTML
Seperti biasa klik Download Template Lengkap biar aman
Jangan lupa centang Expand Template Widget
Selanjutnya cari kode ]]></b:skin>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:
Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya
<div class="panel">
</div> <a class="trigger" href="">ChatBox</a>
Dan yang terakhir Save Template anda.
Anda bisa ganti tulisan warna kuning berkedip dengan kode shoutmix yang sudah anda buat sebelumnya. Untuk cara membuat shoutmix di blog sudah pernah saya jelaskan sebelumnya. Nah, sampai disini dulu tutorialnya ya, selamat berkreasi dan semoga bermanfaat.
Satu hal yang mungkin teman-teman kadang lupa dalam membuat sebuah blog, yaitu mengenai RSS Reader. Apa sih sebenarnya RSS Reader itu? RSS reader adalah aplikasi yang digunakan untuk membaca RSS dari sebuah website. Cara membaca RSS suatu website adalah, anda masukkan alamat feed website tersebut, lalu RSS akan mengambil RSS dari feed website tersebut. Setiap kali web tersebut di update, versi RSSnya akan disediakan oleh feed, dan akan diambil oleh RSS reader anda.
Nah, yang menjadi permasalahan sekarang adalah kenapa jumlah pembaca pada Feedburner-Count kadang terlalu sedikit. Perlu diketahui bahwa tidak semua pembaca RSS Feed selalu menggunakan alamat Feedburner untuk berlangganan posting dan komentar pada blog. Hal ini terjadi ketika pembaca melakukan akses ke alamat blog maka secara otomaris web browser akan membaca alamat default Rss Feed pada blogger kita.
Disini nanti saya akan jelaskan bagaimana cara untuk meningkatkan RSS reader kita. Tapi yang perlu anda perhatian bahwa cara ini nantinya tidak akan meningkatkan nilai Feedburner-Count secara otomatis, semua tergantung banyaknya pembaca yang berlangganan postingan kita. Artinya kita hanya mengarahkan pembaca selalu mengakses ke alamat feedburner, jadi pembaca kita tidak terbagi dengan alamat default RSS Feed blog kita. Jika temen-temen ingin tahu caranya ikuti langkah berikut ini :
Login ke Blogger dengan akun anda
Pilih Rancangan >> Edit HTML (Jangan lupa lakukan backup template)
Kemudian cari kode dibawah ini:
<b:include data='blog' name='all-head-content'/>
Jika sudah ketemu ganti kode diatas dengan code dibawah ini.
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='true' name='MSSmartTagsPreventParsing'/> <meta content='blogger' name='generator'/> <link rel="alternate" type="application/atom+xml" title="Title Blog Anda - Atom" href="Namablog.blogspot.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Title Blog Anda - RSS" href="Namablog.blogspot.com/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="Title Blog Anda - Atom" href="http://www.blogger.com/feeds/IDBLOGANDA/posts/default" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www2.blogger.com/rsd.g?blogID=IDBLOGANDA" />
Ganti Tulisan berwarna diatas sesuai keterangannya
Cari kode dibawah ini :
.feed-links {
Kemudian tambahkan code dibawah ini, tepatnya dibawah kode diatas
display: none;
jadi hasilnya seperti ini:
.feed-links { display:none;
Masih pada Template -> Edit HTML -> beri tanda centang pada Expand Template Widget
Ganti tulisan yang berwarna kuning dengan url feed anda.
Kemudian Save Template anda, selesai.
Kode-kode diatas berfungsi untuk mengubah alamat link ke Feedburner, biasanya pada blogger ditandai dengan : Berlangganan: Posting (Atom) atau Subscribe to: Posts (Atom). Nah, gimana mau dicoba? Jika temen-temen sudah dicoba cara diatas tapi tetep masih minim pembaca. Ya, mesti rajin nulis artikel yang banyak.
Daftar isi sangat penting bagi keberadaaan sebuah blog atau web. Karena daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog. Setelah sebelumnya saya sudah membahas tentang cara membuat daftar isi manual dan otomatis, kali ini saya akan berikan satu lagi cara membuat daftar isi, tapi kali ini beda karena menggunakan jQuery dan hasilnya nanti akan lebih keren.
Selain itu daftar isi yang saya bahas disini juga menggunakan efek animasi accordion, hal ini dimaksudkan agar daftar isi blog ini terasa lebih ringkas dan tidak terlalu panjang sekaligus mudah dan rapi untuk blog serta artikel yang disusun berdasarkan Label/Kategori. Sehingga serasa seperti blog anda seperti blog profesional. Nah, untuk contoh soalnya temen-temen bisa lihat gambar di bawah atau langsung klik disini.
Baiklah, saya akan langsung saja pada langkah-langkah pembuatannya :
Langkah Pertama
Login dulu ke blogger anda
Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
Setelah itu cari kode berikut ini]]></b:skin>
Kemudian copas kode dibawah ini dan taruh diatasnya
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgz7TLpaYjaHi8TwesHddQC2zHSppQgbgIrxXnotOhOIc4d4VRrjKUurTHX2V-aOiwCVbqLK9cvg0USD6C9o7rwMyq1jekXL3nJt7BAVu7OMpYkmZBYuxVaBzv_kppn9MP1f1VX2F3eWU/d/bg5.gif) repeat-y scroll left center #E7F7FB;
Itu tadi tutorial kali ini, jika ada di antara temen-temen yang bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini. Selamat mencoba dan semoga bermanfaat.
