Showing posts with label Tips Blog. Show all posts
Showing posts with label Tips Blog. Show all posts

Membuat gambar dipop-upkan di Blog

Pernahkah Anda mendownload file dari situs Ziddu.com? Jika Anda membuka pertama kali, maka ketika nge-klik yang pertama, maka akan keluar jendela baru (inilah pop up) yang menampilkan iklan secara otomatis. Nah, sekarang yang saya maksud disini bukan pop up yang seperti itu. Pop up ini adalah untuk membuka halaman baru, tapi bukan untuk membuka iklan, dsb. Pop up ini bertujuan untuk membuka web tanpa meninggalkan halaman yang kita baca aja. Misal aja gambar: Gambar di blog terlalu kecil, maka kita bisa membuat pop-up di gambar tersebut. Dengan meng-klik maka akan muncul layar baru (pop up) yang memunculkan gambar itu dalam ukuran yang sebenarnya.

contoh:

Mantapkan hati Anda untuk melihat gambar ini
Jangan di-klik jika memang tidak kuat!!! I'm Serious!

Nah, perhatikan gambar ini.
Ada 3 gambar dengan penyetingan berbeda.
1. Setingan pertama (default)
Jika kita menambah atau upload gambar, maka secara default (otomatis) jika gambar diklik akan berganti halaman yang memunculkan hanya gambar tersebut.
Coba aja gambar dibawah ini:


Kodenya:


Ini kadang membuat saya kurang nyaman, karena mau tidak mau harus meng-load lagi halaman sebelumnya.

2. Setingan kedua: Saya membuat gambar saat diklik muncul pada halaman baru. sehingga kita tidak perlu meniggalkan halaman yang kita baca. Kita cukup menambahkan tag "_blank" pada url gambarnya. Contohnya:


Kodenya:


3. Setingan kedua: saya memodif menjadi pop-up yang muncul di layar baru dengan ukuran sesuai dengan gambarnya, atau sesuai dengan ukuran tertentu.
Coba di klik gambar berikut.


Kodenya:


Nah, saya lebih suka setingan yang kedua dan ketiga.

Dan biasanya saya menggunakan kode ke-4 berikut:




dengan kode sbb:


Cara penggunaan, tinggal mengganti url/alamat gambar yang ingin ditampilkan aja.
Mungkin perlu ditambahkan kode unik (untuk kode ke-4).
<span id="kode_unik">Text pada gambar/keterangan</span>
Sehingga kode #  yang tersisip pada kode <a href="#" dst... bisa diisi dengan #kode_unik
sehingga menjadi:
<a href="#kode_unik" dst...
| | No comments:

Kode warna

Dalam catatan saya kali ini, saya akan menulis tentang "Kode Warna"
Untuk memasukkan value colour,cukup memasukkan nama latinnya atau nilai,atau nama warna(red), good luck.


Darkorchid #9932cc
Slateblue #6454cd
Aqua #00ffff
Red #ff0000
Darkred #860000
Indianred #cd5c5c
Firebrick #622222
Lightsalmon #ffa07a
Lightcoral #f08080
Maroon #800000
Crimson #dc143c
Tomato #ff6347
Salmon #fa8072
Coral #ff7f50
Pink #ffc0cb
Hotpink #ff69ba
Deeppink #ff1493
Lightpink #ffb6c1
Mistyrose #ffe4e1
Moccasin #ffe4b5
Peachpuff #ffdab9
Mintcream #f5fffa
Floralwhite #fffaf0
Oldlace #fdf5e6
Thistle #d8bfd8
White #ffffff
Linen #faf0e6
Navy #000080
Snow #fffafa
Orange #ffd000
Orangered #ff4500
Burlywood #deb887
Darkorange #ff8c00
Palevioletred #db7093
Sandybrown #f4a460
Rosybrown #bc8f8e
Brown #a52a2a
Peru #cd853f
Gold #ffd700
Yellow #ffff00
Lightyellow #ffffe0
Yellowgreen #9acd32
Palegoldenrod #eee8aa
Goldenrod #daa520
Lime #00ff00
Green #008000
Seagreen #f4a460
Palegreen #98f698
Lightseagreen #20b2aa
Forestgreen #228622
Lightgreen #90ee90
Olive #808000
Tan #d2b48c
Teal #008080
Olivedrab #6b8e23
Greenyellow #adff2f
Darkslategray #2f4f45
Darkolivegreen #55662f
Mediumspringgreen #00fa9a
Darkgoldenrod #688606
Darkkhaki #606766
Orchid #da70d6
Fuchsia #ff00ff
Darkmagenta #860086
Darkviolet #940003
Mediumpurple #9370db
Violet #ee82ee
Purple #800080
Plum #dda0dd
Gray #808080
Dimgray #696969
Gainsboro #dcdcdc
Lightslategray #778899
Lightgray #d3d3d3
Slategray #708090
Darkgray #a9a9a9
Silver #c0c0c0
Springgreen #00ff7f
Lightpink #ffb6c1
Navojowhite #ffdead
Darksalmon
Khaki #f0e68c
Aquamarine
Chocolate #d2691e
Chartreuse
Limegreen
Slateblue
Saddlebrow
Aliceblue
Wheat
Bisque
Sienna
| | No comments:

Membuat Bullet icon gambar di Blog

Apakah itu bullet? Perhatikan teks berikut:

ada 2 macam perubahan materi, yaitu:
  • perubahan kimia
  • perubahan fisika
Nah, didepan kata "perubahan kimia" dan "perubahan fisika" terdapat "bullet" atau bola kecil padat seperti "peluru", terserah Anda mau bilang apa.he3x. Pokoknya seperti itu. Dan masih banyak bentuk bullet yang lainnya, bisa gambar, icon, garis panah, dll.

Hal tersebut disebabkan karena Anda memberi simbol seperti berikut:
<ul>
<li>perubahan kimia</li>
<li>perubahan fisika</li>
</ul>

Untuk mengganti bullet tersebut dengan gambar cukup mudah.
1. Edit HTML Anda.
2. Temukan kode

#lateral1 li {
margin: 0px; padding: 2px 0px 3px 20px; list-style-type: none; font-size: 12px; background: url("alamat url gambar") no-repeat left top; border-bottom: none;
}

Keterangan:
  1. Ubah warna biru untuk jarak spasi dari kiri, usahakan jarak ke kiri minimal selebar (width) gambarnya, karena tulisannya bisa gabung dengan gambarnya jika terlalu mefet.
  2. Ubah warna merah untuk url gambar Anda.

Kadang-kadang kode di atas tidak ketemu, karena template tiap blog berbeda-beda, maka Anda bisa menambahkan kode sendiri di bagian "main", "sidebar", "footer",  atau di bagian lainnya. Kalau saya menambahkan kode tersebut di sidebar saja, karena sidebar di blog ini banyak menggunakan kode <ul><li>. Caranya, Anda tinggal menambahkan kode.... li atau ul li
Sebagai berikut contohnya:

.sidebar ul li {
margin: 0px; padding: 2px 0px 3px 15px; list-style-type: none; font-size: 12px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA1o5I2TXURWS545zyhjMuXowGvowzZWhQ34GmsUL6juzYpKwh6cAFQ4uECdYSpCt-106xdgWVQzqgs1vOmHBCstaP2mxbj_28syYiR94tWBODtt_niRzPozED2tm8hn23rc_7AxLSXDAB/s320/Symbol+-+Check+50x50.png") no-repeat left top; border-bottom: none;
}

dan saya menambahkan gambar-gambar berikut:
ukuran 128x128

ukuran 64*64

ukuran 50*50

Yang perlu diperhatikan: ukuran gambarnya... he3x.

[
| | No comments:

Membuat buku tamu ala facebook

Dalam catatan saya kali ini, saya akan menulis tentang Membuat buku tamu ala facebook. Sebagai seorang blogger pemula, saya bingung untuk membuat box komentar seperti shoutmix atau cbox. Akhirnya saya memilih untuk memasang buku tamu ala facebook yang sebenarnya adalah plugin comment di facebook developers, seperti yang saya pasang di sidebar>buku tamu.
Langsung saja, langkah yang ditempuh untuk membuatnya sebagai berikut.
1. Anda harus punya blog dulu.
2. Registerkan blog anda di Register Your WEB on facebook.
3. isikan nama blog dan alamat blog Anda seperti pada kolom berikut:
Site name:
Site URL:
Locale:

4. Setelah selesai, klik Create app, dan masukkan nomor security-nya.
5. maka Anda akan mendapat APP ID, seperti berikut:
App Name: Catatanku dan Koleksiku
App URL: http://logku.blogspot.com/
App ID: 194746910536959
App Secret: (rahasia)


6. Simpan app ID Anda, karena sangat penting untuk mendapatkan plugin facebook yang lain. Lalu, masuk ke sesi SOCIAL PLUGIN. Banyak fitu yang bisa Anda pilih. Saya memilih Fitur Comment, karena sudah dilengkapi dengan LIKE BUTTON.
7. Pilih Plugin comment. Masukkan APP ID Anda.
Anda juga bisa men-setting jumlah comentar yang akan dumunculkan. Misal, 10 komen. Tapi menurutku 5 comment sudah banyak, karena bisa membuat blog loading lemot.
8. Setelah itu, klik GET CODE button. Catat atau Copy kode ke notepad. Lalu, login ke blog anda, Tambahkan elemen widget dengan kode yang disimpan dinotepad tadi.
maka hasilnya akan nampak seperti di blog ini, sebagai buku tamu. he3x.
----------------------------------------------------------------------------------------------
misal kode punya saya:
----------------------------------------------------------------------------------------------

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=194746910536959&amp;amp;xfbml=1"></script><fb:comments xid="id-spesial" numposts="10" width="255" publish_feed="true"></fb:comments>
----------------------------------------------------------------------------------------------
perhatikan xid="id-spesial"
id-spesial ini maksudnya adalah kata khusus yang tidak ada duanya. Anda bisa membuat id-unik spesial ini bermacam-macam contoh.

untuk buku tamu---> xid='bukutamu'
untuk masang link aja ---> xid='kumpul-link'
dst....

Anda juga bisa mengkostumize plugin komentar ini untuk digunakan sebagai komentar sederhan di setiap postingan, hanya dengan sedikit trik id-unik ini. Untuk lengkapnya bisa dibaca disini.

9. langkah terakhir yang paling penting adalah kode script facebook agar widget koment tadi bisa muncul dan berjalan di blog kita:
-------------------------------------------------

<div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({appId: '194746910536959', status: true, cookie: true,
                 xfbml: true});
      };
      (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
          '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>
-----------------------------------------------------
Ganti APP ID yang saya beri stabilo hijau dengan APP ANDA. Lalu letakkan script itu tepat diatas </body> di setingan HTML Anda.
kenapa harus diatas </body>, Agar bisa di-load terlebih dahulu, sehingga loading widget-koment tadi bisa dilakukan dengan cepat juga.

Sebenarnya Anda juga bisa menaruhnya di widget, koment tadi. Tapi, pasti akan lemot loadingnya. letakkan widjet komen ini di halaman baru aja, agar tidak lemot koneksi Anda.

Keuntungan dari penggunaan plugin koment ini:
1. Sebagai buku tamu blog. User dapat menggunakan akun facebook, atau alamat blog/ID untuk berkomentar. Jika Anda mau berkomentar sebagai pengguna BLOG ANDA, maka anda harus logout dulu dari facebook. Nah, setelah itu, akan muncul kotak berisi nama, alamat web/blog, dan isi komentar.
Untuk mempermudah logout atau login ke facebook, maka Anda bisa menambahkan LOGIN BUTTON FACEBOOK ke dalam kode script di atas.
Tambahkan kode berikut tepat di atas kode tadi:

<p><fb:login-button autologoutlink="true"></fb:login-button></p>

Kemudian simpan Setinggan Anda, dan lihat blog Anda.
2.keuntungan kedua, Anda BISA UPDATE STATUS FACEBOOK dengan plugin ini dari blog secara langsung, tanpa masuk ke situs facebooknya. Enakkan... He3x.
Misal saja saya koment: "saya lagi baca di artikel di logku.blogspot.com"
Lalu, centang box "Post comment to my Facebook profile", maka koment tersebut akan mengupdate status Anda di FB.
Selamat Mencoba..................
| | 1 comment:

Mengatasi masalah auto read more yang ada pada template BLOGGER yang kita pilih

Dalam catatan saya kali ini, saya akan menulis tentang "Mengatasi masalah auto read more yang ada pada template yang kita pilih". Saya pernah memakai template yang ada auto readmore. Jadi, setiap postingan, akan langsung ada tulisan readmore pada halaman awal blog.
Begini ceritanya, saya lagi browsing cari template untuk blog baru saya (blog yang sedang Anda kunjungi ini) di blogtemplate4u.com. Pertama-tama, saya hanya memperhatikan style-nya. Iseng-iseng, saya mencari di daftar kategori template. Saya menemukan ada fasilitas Auto Readmore. Saya klik disitu. Muncul banyak pilihan template. Setelah kesana-kemari capek ngeklak-ngeklik, he3x, akhirnya saya memilih template Auto readmore yang lumayan bagus style-nya (menurut saya he3x).
kemudian saya install di blog saya, kemudian mencoba posting lirik lagu. Nah apakah yang terjadi?

Perhatikan kutipan teks lirik berikut;
Song Lyric - Have You Ever Been in Love
Artist: Celine Dion

Have you ever been in love
You could touch the moonlight
When your heart’s shooting stars
You’re holding heaven in your arms
Have you ever been so in love


Setelah saya mengganti template blogger default saya dengan template yang baru, susunan lirik lagu menjadi kacau, tidak sesuai dengan aslinya.
Berikut hasil postingan lirik tersebut pada halaman awal blog:

Song Lyric - Have You Ever Been in LoveArtist: Celine DionHave you ever been in loveYou could touch the moonlightWhen your heart’s shooting stars....
READMORE>>>


Saya berpikir, "loh kok kenapa begini..../???terkejut
Perhatikan kutipan teks lirik berikut;
Karena saya kesal dengan template tersebut, maka saya putus asa kayaknya.putus asa
Saya adalah pemula dalam soal mengutak-atik html, saya bingung...
Akhirnya, saya membuka template default blogger dengan template baru itu. dan saya bandingkan. Saya menemukan suatu pencerahan.berguling di lantai
Saya menemukan perbedaan konfigurasi di kode <div class='post-body entry-content'> .
--------------------------------------------------------------------------
Pada bagian template baru terdapat kode berikut:
--------------------------------------------------------------------------
<div class='post-body entry-content'>
<p>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div class='readmore-wrap'>
<a class='readmore' expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if></p>
<div style='clear:both;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='postmeta-secondary'>
<span class='meta_categories'>Posted in:  <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if></span>
</div>
</b:if> 
<div style='clear: both;'/> <!-- clear for photos floats --></div> 
--------------------------------------------------------------------------
Sedangkan pada template default bloggerr, seperti berikut:
--------------------------------------------------------------------------
<div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
-------------------------------------------------------------------------

Setelah melihat perbedaan begitu jelas tersebut, maka saya mengganti kode di atas dengan kode kedua. Akhirnya, saya dapat mengembalikan setingan posting ke default. he3x.
 Akhirnya postingan liriknya jadi begini:


Song Lyric - Have You Ever Been in Love
Artist: Celine Dion

Have you ever been in love
You could touch the moonlight
When your heart’s shooting stars
You’re holding heaven in your arms
Have you ever been so in love

senang dan puas rasanya berhasil memodif  html untuk pertama kali. he3x.tersenyum lebar
Maka dapat disimpulkan kalu kode pertama adalah kode untuk membuat fitur AUTO READMORE. Walapun bagus, tapi hasil postingan jadi mawut. Setelah itu, saya baru membuat auto readmore manual aja, lebih aman, dan postingan di awal blog gak mawut lagi
nah, itulah sedikit catatan dari pengalaman saya.melamuntidurtersenyum lebar
| | No comments:

Ngomongin masalah ngompress blog

Dalam catatan saya kali ini, saya akan menulis tentang "Ngomongin masalah ngompress blog" karena blog saya ini terlalu berat. Seperti yang dianalisis dengan Yslow, saya dianjurkan untuk mengkompress. Akhirnya saya baca di blognya Miss Monalia. Ternyata saya baru mengerti kalau blog bisa dikompress. he3. kunjungi BLOGnya, atau bisa baca disini. he3x.

1. Test kecepatan loading blog
Hal pertama yang perlu dilakukan oleh teman-teman yaitu mengecek kecepatan loading blog dalam beberapa website penyedia tool tersebut. Kita bisa menggunakan jasa ini dengan mencarinya di search engine Google atau bisa dengan mengunjungi iwebtool speed test.
2. Menggunakan kompresor GZIP dan Ob_gzhandler
Setelah mengetahui kecepatan loading blog, langkah selanjutnya untuk menambah kecepatan blog yaitu dengan mengkompress HTML size dengan menggunakan kode GZIP dan ob_gzhandler. Cara ini bisa mengurangi ukuran blog hingga 80% dari ukuran sebenarnya ketika blog diakses, karena sistem kerjanya adalah dengan mengkompress data yang masuk ke server provider blog baru kemudian di arahkan ke browser. Teman-teman hanya perlu mengcopy kode dibawah ini ke dalam kode template:
-------------------------
<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
------------------------
Atau kode dibawah ini
------------------------
<?php
ob_start("ob_gzhandler");
?>
--------------------------
Kemudian paste/letakkan kode tersebut di atas kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1

kemudian simpan template Anda.

3. Convert/kompress ukuran gambar
Gambar yang di upload dalam blog juga bisa mempengaruhi lama tidaknya loading suatu blog, karena gambar apalagi yang ukurannya besar akan memakan bandwith yang cukup besar, sehingga untuk menampilkannya dibutuhkan beberapa waktu. Untuk itu sebelum upload gambar ( atau jika sudah diupload juga tidak masalah) ke dalam blog, kita bisa mengkompress atau convert ukuran file tersebut ke ukuran yang lebih kecil. Teman-teman bisa menggunakan jasa image optimizer secara gratis untuk merubah ukuran file tanpa mengurangi kualitas gambar tersebut. Setelah mengupload gambar ke dalam situs ini, kita bisa memilih jenis kompresi dalam bentuk JPEG, GIF dan PNG. Setelah itu tool image optimizer ini akan menampilkan hasil gambar dari kualitas gambar 90% sampai kualitas gambar paling rendah yaitu 10%.

4. Gunakan CSS compressor
Untuk lebih memaksimalkannya kita juga bisa mengkompress kode CSS dalam template blog dengan cara manual atau dengan bantuan online tool. Cara ini bertujuan untuk merampingkan ukuran kode CSS dalam blog dengan menghilangkan kode yang tidak perlu dan memadatkannya (contohnya: menghilangkan jarak spasi yang tidak diperlukan dan menghapus komentar). Untuk melakukannya teman-teman dapat mengcopy kode CSS dalam template blog kemudian kunjungi situs CSS drive compressor. Ada 3 pilihan jenis kompresi yaitu:

* light
* normal
* super compact.

Sebaiknya pilih yang normal saja untuk hasil yang relevan. Sedangkan untuk komentar juga ada 3 pilihan:

* don’t strip any comment
* strip all comment
* strip comment at least (...) characters long (not counting line breaks within comment)

Teman-teman dapat memilih apakah komentar tidak perlu dihapus, dihapus semua atau dihapus sebagian (menghapus komentar yang memiliki panjang beberapa karakter sesuai keinginan masing-masing). Jika ingin menggunakan custom setting sobat juga bisa memilih sendiri jenis kompresi yang diinginkan dengan merubahnya ke “advanced mode”. Layanan ini dapat mengkompress ukuran CSS antara 10%-20%.

Tambahan: Anda juga bisa menggunakan aplikasi NOTEPAD ++ untuk menghilangkan space kosong yang tidak diperlukan. PIlih TEXTFX/TEXTFX Edit/Delete BLANK LINE dan DELETE SURPLUS BLANK LINE.

5. Javascript compressor
Jika blog masih terasa berat, maka langkah selanjutnya adalah dengan mengkompress kode widget (javascript) dalam blog. Caranya mirip dengan CSS compressor, yaitu dengan memadatkan kode javascript yang panjang sehingga lebih ramping tanpa mengurangi atau merubah fungsi widget tersebut. Untuk menggunakannya bisa mengunjungi situs JS minifier dan memilih 3 tingkatan kompresi yaitu, minimal, conservative dan aggressive. Andy sendiri bisa mengkompress 5%-10% untuk masing-masing widget yang ada dalam blog. Tapi kalau untuk kode iklan sebaiknya jangan dikompress karena nanti bisa-bisa menimbulkan masalah.

6. Software HTML Compressor
Untuk alternatif lain, sobat bisa menggunakan software freeware “absolute html compressor” untuk mengkompress kode HTML baik secara default setting atau custom setting tanpa memerlukan koneksi internet. Software ini memiliki kemampuan yang sama dengan online tool CSS compressor dan javascript compressor. HTML compressor dapat didownload secara gratis di alentum.com
| | No comments:

menambah komentar facebook di blog

Dalam catatan saya kali ini, saya akan menulis tentang "Membuat komentar Facebook di setiap postingan blog". Inilah yang saya sejak lama ingin ungkap. Akhirnya, ketemu juga caranya.
 Masalahnya dulu mencoba, malah setiap postingan punya komentar sama. Halaman posting ini saya revisi dan saya update. Masalahnya, postingan yang sebelumnya kurang memuaskan.
Carilah kode berikut:
Cari kode berikut:
<data:post.body/>

atau kode dibawah ini (jika sudah pakai read more):

<style>.fullpost{display:inline;}</style> <p><span style="background-color: white; color: magenta;"><data:post.body/</span><span style="color: magenta;"></span></p> <b:else/> <style>.fullpost{display:none;}</style><br /> <p><span style="color: magenta;"><data:post.body/></span> ...<a expr:href='data:post.url'>READ MORE</a></p>
kode letakkan disini!!!

Hanya ada perubahan script sedikit, hanya menambahkan tag expr xid.
Ganti huruf merah di atas dengan kode berikut.

<div id='fb-root'/>
    <script>
      window.fbAsyncInit = function() {
        FB.init({appId: &#39;19474xxx0536959&#39;, status: true, cookie: true,
                 xfbml: true});
      };
      (function() {
        var e = document.createElement(&#39;script&#39;);
        e.type = &#39;text/javascript&#39;;
        e.src = document.location.protocol +
          &#39;//connect.facebook.net/en_US/all.js&#39;;
        e.async = true;
        document.getElementById(&#39;fb-root&#39;).appendChild(e);
      }());
    </script>
            <fb:comments expr:xid='data:post.id' numposts="10" width="255"/></fb:comments>

Jika Anda menginginkan jumlah komentar (numpost) dan ukuran lebar (width)yang berbeda, maka gantilah warna biru dengan nilai yang diinginkan.
Ganti angka warna merah dengan APP ID Anda. Banyak cara menempatkan komentar ini, sesuaikan dengan selera Anda. Anda bisa juga memajang komentar posting di sidebar, di atas postingan, dll. Untuk membuat App id silakan pelajari disini.
Hasilnya seperti di bawah postingan ini. 


<div id='fb-root'/>
    <script>
      window.fbAsyncInit = function() {
        FB.init({appId: &#39;194746910536959&#39;, status: true, cookie: true,
                 xfbml: true});
      };
      (function() {
        var e = document.createElement(&#39;script&#39;);
        e.type = &#39;text/javascript&#39;;
        e.src = document.location.protocol +
          &#39;//connect.facebook.net/en_US/all.js&#39;;
        e.async = true;
        document.getElementById(&#39;fb-root&#39;).appendChild(e);
      }());
    </script>
            <fb:comments expr:xid='koment’ numposts="10" width="255"/></fb:comments>
| | No comments:

Mengatur text di postingan

beberapa pengaturan telah diposting terpisah. Ini cuma sisa yang belum. Sebenarnya fitur di blogger, sudah lengkap jika kita memilih editor "compose", tapi adakalanya kita mau mengotak-atik sendiri postingan itu.

a. untuk mengatur bentuk text.
Contoh untuk text bergaris bawah kodenya:

kode di atas akan menghasilkan seperti ini:
di sini Textnya

untuk text strong kodenya:

kode di atas akan menghasilkan seperti ini:
di sini Textnya

untuk text big kodenya:

kode di atas akan menghasilkan seperti ini:
di sini Textnya

untuk text small kodenya:

kode di atas akan menghasilkan seperti ini:
di sini Textnya

untuk text bold kodenya:

kode di atas akan menghasilkan seperti ini:
di sini Textnya

untuk text italic kodenya:

kode di atas akan menghasilkan seperti ini:
di sini Textnya

b. mengatur warna text
untuk mewarnai text kodenya:

kode di atas akan menghasilkan seperti ini:
di sini Textnya


untuk mewarnai text anda bisa kreasi sendiri, di atas cuma contoh mewarnai text dengan warna blue/biru, anda bisa mengganti warnanya sesuai keinginan anda dengan kode kode warna yang lain.

Untuk mewarnai text berwarna warni kodenya:

Kode di atas akan menghasilkan seperti ini:
disiniTextnya Jadi script untuk mewarnai text kodenya memakai: <font color="DI SINI KODE WARNANYA">DI SINI ISI TEXTNYA</font>

c. agar text bergerak berjalan.
Untuk membuat text bisa berjalan kodenya memakai script marque html.. tapi script ini hanya bisa terbaca oleh browser biasa, atau bola dunia kalau dalam ponsel SonyEricsson,,kalau lewat browser opera mini tidak akan bisa membacanya,, jadi harus lewat browser biasa untuk melihat text berjalan ini.

Contoh text berjalan ke kiri kodenya:

Kode di atas akan menghasilkan seperti ini:
di sini Textnya
di sini Textnya

Text berjalan ke kanan kodenya:

Kode di atas akan menghasilkan seperti ini:
di sini Textnya

Text berjalan ke atas kodenya:

Kode di atas akan menghasilkan seperti ini:
di sini Textnya


Text berjalan ke bawah kodenya:

Kode di atas akan menghasilkan seperti ini:

di sini Textnya

Text berjalan bolak balik ke kanan ke kiri kodenya:

Kode di atas akan menghasilkan seperti ini:
di sini Textnya

[source:]
| | No comments:

Membuat tulisan dengan efek Coretan

Dalam memposting adakalanya ada tulisan yang mungkin perlu mendapatkan tanda coretan, karena mungkin salah, atau sesuatu yang dianggap perlu disingkirkan tapi juga perlu untuk ditampilkan. Betul gak?
Nih, contohnya:

Rek,iki salah. Ini yang betul.

kodenya pake tag: "<strike>kata yang diinginkan</strike>"
atau disingkat dengan <s>kata yang diinginkan</s>
Sehingga seperti ini: Rek,iki <s>salah</s>. Ini yang betul.

Anda juga bisa memakai tag: "<del>kata yang diinginkan</del>"
Hany saja tag "strike" dengan "del" agak berbeda dikit.
Jika pemakai blogspot, maka timbul seperti ini jika pake tag "del":
Rek,iki salah. Ini yang betul.

Akan terlihat bahwa kata yang dicoret terlihat terpenggal.he3x.
Good Luck.
[source:]
| | No comments:

Membuat Tulisan Berkedip-kedips

Membuat tulisan berkedip akan menarik perhatian audience, seperti lirikan mata, he3x. Saya lagi mencoba nih. Nih, contohnya:

SELAMAT DATANG

caranya:
tinggal ngasih tag BLINK diantara kata yang akan dikedipkan. Hasilnya seperti ini:
<blink><b>SELAMAT DATANG</b></blink>

Jika pengen ngasih link, tinggal dikasih tag <a href></a>
sehingga hasilnya seperti ini:
<blink><a href="http://logku.blogspot.com/"><b>SELAMAT DATANG</b></a></blink>

Goodluck Guys :D
| | No comments:

Membuat Daftar Isi di blogger

Agar pengunjung blog lebih mudah mengakses blog Anda. Maka, salah satu cara adalah dengan memberi daftar isi postingan Anda.

LANGKAH PERTAMA
1. Log in ke blogger
2. Klik Layout di dashboard menu
3. Klik Edit HTML
4. Beri Centang pada Expand Widget Templates
5. Cari kode dibawah ini.

Read more »
| | No comments:

2 hal penting yang wajib diketahui dalam peletakan widget di blogger

Dalam catatan saya kali ini, saya akan menulis tentang "2 hal penting yang wajib diketahui dalam peletakan widget di blogger" Ada sedikit kode yang harus sobat ketahui untuk meletakkan widget, ingin di letakkan pada halaman depan blog saja atau hanya ingin meletakkan widget pada halaman postingan. 2 kode ini saya rasa mutlak wajib sobat mengerti fungsinya, buat yang belum mengerti berikut HTML-nya.[]
  1. Meletakkan widget hanya pada halaman depan (home page)
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    LETAK WIDGET
    </b:if>

  2. Meletakkan widget hanya pada halaman postingan (post page)
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    LETAK WIDGET
    </b:if>
 []
| | No comments:

membuat dan menampilkan artikel terkait di sidebar blogger

Dalam catatan saya kali ini, saya akan menulis tentang "membuat dan menampilkan artikel terkait di sidebar blogger". Jalan-jalan ke blog temen, saya temukan artikel ini. Link artikel terkait yang biasa di bawah postingan mungkin sudah umum, sekarang ditaruh di sidebar. Agar saya tidak lupa, saya tulis disini.
Baiklah, sekarang ikuti langkah-langkahnya dibawah ini :[]

Langkah I
  1. Seperti biasa login dulu ke blogger.
  2. Masuk ke Elemen Halaman.
  3. Kemudian Tuju Edit HTML.
  4. Klik Expand Template Widget.
  5. Letakkan kode berikut ini sebelum kode </head>
    <script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
       relatedUrls[relatedTitlesNum] = entry.link[k].href;
       relatedTitlesNum++;
       break;
      }
    }
    }
    }
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
      if(!contains(tmp, relatedUrls[i])) {
       tmp.length += 1;
       tmp[tmp.length - 1] = relatedUrls[i];
       tmp2.length += 1;
       tmp2[tmp2.length - 1] = relatedTitles[i];
      }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
    }
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;
    }
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
      document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
      if (r < relatedTitles.length - 1) {
       r++;
      } else {
       r = 0;
      }
      i++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>

  6. Kemudian cari kode seperti dibawah ini :
    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
    </b:if>

  7. Lalu sisipkan kode yang berwarna hijau, sehingga hasilnya menjadi seperti berikut :
    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
    </b:if>     </b:loop>
    </b:if>

  8. Simpan Template, sampai disini proses Edit HTML sudah selesai.
  9. Sekarang sobat tuju Tata Letak, kemudian klik Tambah Gadget pada sidebar milik sobat.
  10. Pilih yang HTML/Javascript, kemudian masukkan kode berikut :
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>

  11. Jangan lupa beri judul, lalu klik Simpan.

Sampai disitu sudah selesai pembuatan artikel terkait di sidebar. Namun artikel terkait akan selalu muncul di halaman depan blog, untuk membuat artikel terkait hanya muncul pada halaman postingan saja, maka sobat harus mengubah beberapa kode lagi.


Langkah II
  1. Klik Edit HTML.
  2. Klik Expand Template Widget.
  3. Cari kode yang seperti ini, dan sisipkan kode yang berwarna merah :
    <b:widget id='HTML11' locked='false' title='Artikel Terkait Lainnya' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    <b:include name='quickedit'/>
    </b:if>
    </b:includable>
    </b:widget>

  4. Kemudian klik Simpan Template.

Sumber: misca blog.[]
| | No comments:
Subscribe to: Posts (Atom)