CARA MENAMPILKAN SOURCE CODE DI BLOG/POSTINGAN BLOGGER

CARA MENAMPILKAN SOURCE CODE DI BLOG/POSTINGAN BLOGGER Sobat Tahu tentang Source code? sobat pasti bingung nyari yang mana ya ?hehehe sobat pasti nyari di google.com sobat gak bisa bukan?? Fungsi syntax highlighter sebenarnya tidak jauh beda dengan Blockquote, hanya saja syntax highlighter ini tampilannya membedakan dari tulisan yang lainnya, namun syntax highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh JQuery. Fasilitas dari Syntax highlighter ini, antara lain: Adanya fasilitas print untuk kode. Adanya fasilitas view source yaitu membuka barisan kode dalam popup windows. Dan ada 8 jenis theme yang bisa kamu gunakan. Langkah-Langkan membuat Source code di Blog: login Ke blogger Pilih tab Template / Design > Edit HTML Kemudian cari kode untuk mempermudah tekan di keyboard sobat Ctrl+F Copy kode di bawah ini dan pastekan di atas kode:

  <![CDATA[/* 

5. Setelah itu Save Template 6. cara menggunakannya, copy kode dibawah ini

7.bikin postingan > klik tab HTML > pastekan kode tersebut > dan klik tab Compose yang ada disebelah HTML > Sumber :http://gawsoti.blogspot.com/2013/01/cara-menampilkan-source-code-di.html

Read More »

22.54 | 0 komentar

Membuat Slideshow Berita Foto Seperti Detik.com M

Cara membuat slide bergambar dari artikel terbaru muncul di atas blog. Cara memasang animasi slider dari posting blog with thumbnail. Script auto content slider Jquery . Membuat efek effect slide otomatis di atas blog dari artikel terbaru. Membuat slideshow headline news seperti situs website. Membuat model slide artikel bergambar di atas blog. Membuat artikel bergambar tampil berjalan satu-persatu seperti slideshow situs website. Membuat Auto Feature Slider diBlog. Memasang Jquery Slideshow diBlog. Cara Membuat Feature Content Slider diBlog. Membuat Slideshow Dari 5 Artikel Bergambar. Membuat Slideshow Otomatis Dari Artikel Bergambar. Auto Content Slider Horizontal Blog. Membuat Slideshow Headline News Horizontal. Membuat Effect Slideshow Thumbnail Horizontal-Vertical. Membuat Auto Slider Per Label with Thumbnail. Membuat Animasi Slide Bergambar diBlog. Menambahkan slideshow thumbnail berjalan otomatis.Auto Content Slider Effect Jquery. Membuat Slider Posting Bergambar Di widget. Membuat Artikel Bergambar Slideshow Otomatis. Membuat Feature Slideshow Tampil Di Postingan. Memasang Slideshow Gambar Di Posting. Membuat Slide Foto Toko Online Tampil Di Posting. Membuat slide gambar satu-persatu seperti Toko Online tampil di Posting. Membuat auto feature slider Vertical. Membuat recent post slideshow Horizontal. Membuat Auto Slider Recentpost Horizontal. Tutorial 20+ Model Feature Slideshow Headline News. Script Code Jquery Auto Slider Vertical-Horizontal. 1. LogIn ke akun blogger. 2. Setelah masuk dasbor, Pilih Rancangan/Design. 3. Pada menu bagian atas, Klik Edit HMTL, tepatnya berada di sebelah menu ‘edit elemen’. 4. Beri centang pada kotak ‘Expand Widget Templates’. 5. Tekan CTRL + F di keyboard, masukkan kata kunci ]]> ke dalam kotak find. 6. Setelah ketemu, copy script kode berikut dan letakkan tepat di atas kode ]]>. #slideshow { margin:0 auto; width:640px; height:263px; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-bg_slideshow.jpg) no-repeat 0 0; position:relative; } #slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* allow scrollbar */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ height:263px; } /** * Slideshow controls style rules. */ .control { display:block; width:39px; height:263px; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top:0; left:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_left.jpg) no-repeat 0 0; } #rightControl { top:0; right:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_right.jpg) no-repeat 0 0; } .slide h2, .slide p { margin:15px; font:normal 11px Verdana, Geneva, sans-serif; color:#ccc; } .slide h2 { font:italic 24px Georgia, "Times New Roman", Times, serif; color:#ccc; letter-spacing:-1px; } .slide img { float:right; margin:0 15px; } Kalau sudah klik simpan template dan tunggu beberapa saat sampai penyimpanan selesai. Berikutnya klik kembali menu ‘Rancangan’, atau dalam blog versi English “Design”. Tambahkan gadget/widget baru, gulir ke bawah dan klik tanda “+” pada HTML/JavaScript. Sekarang masukkan script kode dibawah ini ke dalam widget.

script> Keterangan: Gantilah kode yang dicetak Biru dengan alamat url blog Anda. Simpan, dan lihat hasilnya.

Copyright voa-junior.com Under Common Share Alike Atribution   1. LogIn ke akun blogger. 2. Setelah masuk dasbor, Pilih Rancangan/Design. 3. Pada menu bagian atas, Klik Edit HMTL, tepatnya berada di sebelah menu ‘edit elemen’. 4. Beri centang pada kotak ‘Expand Widget Templates’. 5. Tekan CTRL + F di keyboard, masukkan kata kunci ]]> ke dalam kotak find. 6. Setelah ketemu, copy script kode berikut dan letakkan tepat di atas kode ]]>. #slideshow { margin:0 auto; width:640px; height:263px; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-bg_slideshow.jpg) no-repeat 0 0; position:relative; } #slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* allow scrollbar */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ height:263px; } /** * Slideshow controls style rules. */ .control { display:block; width:39px; height:263px; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top:0; left:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_left.jpg) no-repeat 0 0; } #rightControl { top:0; right:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_right.jpg) no-repeat 0 0; } .slide h2, .slide p { margin:15px; font:normal 11px Verdana, Geneva, sans-serif; color:#ccc; } .slide h2 { font:italic 24px Georgia, "Times New Roman", Times, serif; color:#ccc; letter-spacing:-1px; } .slide img { float:right; margin:0 15px; } Kalau sudah klik simpan template dan tunggu beberapa saat sampai penyimpanan selesai. Berikutnya klik kembali menu ‘Rancangan’, atau dalam blog versi English “Design”. Tambahkan gadget/widget baru, gulir ke bawah dan klik tanda “+” pada HTML/JavaScript. Sekarang masukkan script kode dibawah ini ke dalam widget.

script> Keterangan: Gantilah kode yang dicetak Biru dengan alamat url blog Anda. Simpan, dan lihat hasilnya.

Copyright voa-junior.com Under Common Share Alike Atribution   1. LogIn ke akun blogger. 2. Setelah masuk dasbor, Pilih Rancangan/Design. 3. Pada menu bagian atas, Klik Edit HMTL, tepatnya berada di sebelah menu ‘edit elemen’. 4. Beri centang pada kotak ‘Expand Widget Templates’. 5. Tekan CTRL + F di keyboard, masukkan kata kunci ]]> ke dalam kotak find. 6. Setelah ketemu, copy script kode berikut dan letakkan tepat di atas kode ]]>. #slideshow { margin:0 auto; width:640px; height:263px; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-bg_slideshow.jpg) no-repeat 0 0; position:relative; } #slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* allow scrollbar */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ height:263px; } /** * Slideshow controls style rules. */ .control { display:block; width:39px; height:263px; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top:0; left:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_left.jpg) no-repeat 0 0; } #rightControl { top:0; right:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_right.jpg) no-repeat 0 0; } .slide h2, .slide p { margin:15px; font:normal 11px Verdana, Geneva, sans-serif; color:#ccc; } .slide h2 { font:italic 24px Georgia, "Times New Roman", Times, serif; color:#ccc; letter-spacing:-1px; } .slide img { float:right; margin:0 15px; } Kalau sudah klik simpan template dan tunggu beberapa saat sampai penyimpanan selesai. Berikutnya klik kembali menu ‘Rancangan’, atau dalam blog versi English “Design”. Tambahkan gadget/widget baru, gulir ke bawah dan klik tanda “+” pada HTML/JavaScript. Sekarang masukkan script kode dibawah ini ke dalam widget.

script> Keterangan: Gantilah kode yang dicetak Biru dengan alamat url blog Anda. Simpan, dan lihat hasilnya.

Copyright voa-junior.com Under Common Share Alike Atribution   1. LogIn ke akun blogger. 2. Setelah masuk dasbor, Pilih Rancangan/Design. 3. Pada menu bagian atas, Klik Edit HMTL, tepatnya berada di sebelah menu ‘edit elemen’. 4. Beri centang pada kotak ‘Expand Widget Templates’. 5. Tekan CTRL + F di keyboard, masukkan kata kunci ]]> ke dalam kotak find. 6. Setelah ketemu, copy script kode berikut dan letakkan tepat di atas kode ]]>. #slideshow { margin:0 auto; width:640px; height:263px; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-bg_slideshow.jpg) no-repeat 0 0; position:relative; } #slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* allow scrollbar */ position:relative; } #slideshow #slidesContainer .slide { margin:0 auto; width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ height:263px; } /** * Slideshow controls style rules. */ .control { display:block; width:39px; height:263px; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top:0; left:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_left.jpg) no-repeat 0 0; } #rightControl { top:0; right:0; background:transparent url(http://i1133.photobucket.com/albums/m596/abu-farhan/slick-control_right.jpg) no-repeat 0 0; } .slide h2, .slide p { margin:15px; font:normal 11px Verdana, Geneva, sans-serif; color:#ccc; } .slide h2 { font:italic 24px Georgia, "Times New Roman", Times, serif; color:#ccc; letter-spacing:-1px; } .slide img { float:right; margin:0 15px; } Kalau sudah klik simpan template dan tunggu beberapa saat sampai penyimpanan selesai. Berikutnya klik kembali menu ‘Rancangan’, atau dalam blog versi English “Design”. Tambahkan gadget/widget baru, gulir ke bawah dan klik tanda “+” pada HTML/JavaScript. Sekarang masukkan script kode dibawah ini ke dalam widget.

script> Keterangan: Gantilah kode yang dicetak Biru dengan alamat url blog Anda. Simpan, dan lihat hasilnya.

Read More »

07.26 | 1 komentar

Efek Image Zoom Dengan Jquery

Free

Cara membuat efek zoom pada gambar dengan jQuery Image Magnify v1.1 mungkin merupakan suatu alternatif yang perlu anda coba. Cara ini sesungguhnya simple gan, namun sekali lagi kalau ingin scripnya berfungsi dengan baik maka anda harus melakukan penyimpanan script di google code atau free file hosting lainnya. Gak papa khan gan cape dikit....tapi hasilnya bisa bikin om puas...!!! Mengenai cara penyimpanannya bisa anda baca di sini.

Efek zoomer ini dikembangkan oleh dynamicdrive.com dengan menggunkan jquery sehingga pembesan gambar akan terpisah dengan gambar asal. Anda bisa mengatur sendiri pembesar gambar sesuai keinginan anda. Sebelum kita melanjutkan silahkan lihat dulu demonya di sini. mari kita lanjutkan...Sebaiknya sediakan kopi dan pisang goreng dulu biar santai gan....Sudah...??? wwuuuudddss langsung kita ikuti jejaknya.
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Maukkan cript dibawah ini setelah kode ]]> dan Simpan Template

Langkah selanjutnya tinggal meletakkan javascript pada gambar yang ingin anda beri efek zoom. Caranya ketika anda ingin memposting artikel masuk ke Edit HTML lalu letakkan kode berikut ke dalamnya.

ocean.gif" class="magnify" style="width:200px; height:150px" />

Ganti  tulisan berwarna biru dengan alamat gambar anda: contohnya http://1.bp.blogspot.com/_9trGHDygXF0/R2DT7SmFahI/AAAAAAAAADQ/-BxtKUQNemo/s320/3.jpg"class="magnify" ....." />, lalu ganti kode berwarna hijau dengan ukuran yang anda inginkan....yang warna merah biarkan saja, karena itu script penghubung dengan javascript yang telah anda tanam dalam template anda...(emang pohon pake tanam segala...heee :)
Catatan Penting
Jika script ini gak jalan alias ngadat, seperti yang saya bilang di atas, anda harus melakukan penyimpanan script sendiri....dan itu ane yakin akan lancar kembali....

• jquerymagnifier
• magnifycur (untuk Internet Explorer browser)

Setelah meng-klik jquerymagnifier pilih file dan pilih save page as, lalu beri nama dan tambahkan kode .js setelah nama kode yang akan anda simpan, selanjutnya simpan file (di komputer anda).
Setelah mengklik magnifycur pilih notepad dan simpan dengan nama di akhiri dengan kode .js
Download kode yang anda simpan tadi di file hosting anda...kalau belum tahu caranya silahkan baca di sini
Perhatikan kode yang di tanam dalam template anda tadi, seperti di bawah ini.

Silahkan ganti kode warna merah dengan kode yang terdapat di file hosting anda sendiri. Kode merah pertama untukjquerymagnifier dan kode merah ke dua untuk magnifycur. Selnajutnya simpan template...untuk cara memberi efek zoom pada gambar, teknik sama dengan yang telah di terangkan sebelumnya. ok gan....selamat mencoba dan sukses selalu.

Read More »

08.33 | 0 komentar