Tampilkan postingan dengan label blogging tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label blogging tutorial. Tampilkan semua postingan

Jumat, 15 Agustus 2008

Membuat Warna Link Berkedip Warna Warni

Ada yang nanya ke kang rohman :

assalam mualaikum ww. kang ! bagaimana ya caranya bila tulisan tersebut berwarna dan bergerak pergantian warnanya...kayaknya kalau blog saya nantinya jadi lebih bagus deh.

Mungkin maksudnya ketika sebuah link di sorot, link tersebut akan berganti warna secara bergantian. Emang bisa? bisa saja sih, namun harus memakai script. Salah satu script gratis yang bisa di pakai adalah dari http://www.dynamicdrive.com yaitu script rainbow. Ingin tahu caranya? silahkan ikuti langkah-langkah berikut ini :

 

Langkah Pertama :

 

  1. Silahkan download dahulu script rainbow, klik pada link di bawah ini :

     

    Download | mirror 1

    atau

    Download | mirror 2

     

  2. Ekstraklah file yang sudah di download tadi ( file zip) menjadi file java ( js file ) dengan memakai software ekstraktor seperti winzip ataupun winrar :

     

    ektrak

  3. Uploadlah file tersebut ke server yang biasa anda gunakan, contoh ke google page creator.

     

  4. Jika sudah di upload, ambillah alamat URL file tersebut, contoh ( ini contoh saja, jangan di pakai) :

     

    http://kangrohman.googlepages.com/rainbow.js

     

  5. Ubahlah alamat URL tersebut menjadi seperti ini (contoh saja) :

     

    <script src='http://kangrohman.googlepages.com/rainbow.js'/>

     

 

Langkah Kedua :

 

  1. Silahkan login ke blogger dengan ID .
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Cari kode seperti ini </head>.
  5. Simpan kode scriptnya di bawah kode </head> (contoh saja).

     

    kode

     

  6. Klik tombol Simpan Template.

  7. Selesai.

 

 

Sekarang coba lihat blog anda dan sorot link nya, jika berhasil maka linknya akan berkedip berganti warna.

 

Selamat mencoba.

Jumat, 25 Juli 2008

Cara membuat Elemen Persis Di bawah Header

Seperti kang rohman tulis pada artikel " ", bahwa tidak hanya cara tersebut saja yang bisa anda lakukan namun masih ada teknik yang lain untuk dapat meyimpan widget atau elemen persis di bawah header. Teknik yang kang rohman maksud adalah dengan membuat kolom baru langsung di bawah header, penasaran bagaimana caranya? yuk di lanjut mang!!!

 

Untuk membuat kolom baru tidaklah sesulit yang anda bayangkan, anda hanya cukup menambahkan sedikit kode css serta HTML kedalam kode template anda. Belum tahu caranya? silahkan ikuti langkah berikut :

 

  1. Login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Elemen Halaman. Perhatikan struktur layout template anda. Biasanya bagian header akan seperti ini :

     

     

    elemenheader

     

  4. Sekarang kita akan membuatkan sebuah kolom baru persis di bawah header. Siap? yuk mulai.
  5. Klik tab Edit HTML.
  6. Klik Tulisan Download Template Lengkap, silahkan di backup dulu (penting).
  7. Copy kode berikut, lalu paste di atas kode ]]></b:skin>

     

    #under_header{
    margin:10px 0;
    padding:1%;
    width:98%;
    }

     

  8. Cari kode yang mirip dengan kode di bawah ini :

     

    <div id='header-wrapper'> 
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
        </div>

  9. Copy kode berikut lalu paste persis di bawah kode tadi :

     

    <div id="under_header">
    <b:section class='header' id='underheader' preferred='yes'/>
    </div>

     

  10. Klik tombol SIMPAN TEMPLATE. Tunggu beberapa saat sampai template anda tersimpan.

  11. Klik tab Elemen Halaman. dan struktur layout anda akan menjadi seperti ini.

     

    kolom-header

     

  12. Yihaa! sekarang anda sudah mempunyai elemen yang langsung persis di bawah header, silahkan tambahkan elemen yang  inginkan. Mau pasang iklan google adsense, klik saya.com atau apa saja atau mungkin mau pasang photo anda yang ganteng serta cantik di sana? silahkan wong blog anda.
  13. Selesai.

 

 

Kode-kode yang saya tuliskan di atas tentunya tidaklah mutlak, itu hanya kode paling sederhana yang saya buat untuk membuat tutorial “Cara membuat Elemen Persis Di bawah Header ” menjelang mau kerja, jadi babay dulu ah, mo kerja dulu mo cari duit biar dapet dobel, dari internet OK dari kantor juga OK.

Sabtu, 12 Juli 2008

Cara Membuat Efek Photo Samar (blur)

Duh tak terasa ya sudah dua minggu ya saya tidak ngeblog, tapi tenang saja saya masih ada di sini bersama blog ini, hihihi... so jadi artis saja ya,  absen ngeblog pake acara pengumumam segala rupa.  Walaupun sedikit agak kaku untuk membuat tulisan, tapi biar di paksain saja deh soalnya kalau tidak ngeblog saku juga jadi kempes nih, hehehe.

Banyak sekali yang bertanya, dan yang paling dominan di tanyakan oleh banyak orang yaitu bagaimana cara mengembalikan kotak komentar dari haloscan ke kotak komentar blogger? duh gimana ya, agak sedikit ribet memang, walaupun begitu saya pernah di minta bantuan oleh seorang teman melalui chatting untuk mengerjakan hal yang tadi dan hasilnya sukses. Akan tetapi saya lupa untuk mencatat apa saja yang saya ganti, jadi untuk yang punya masalah seperti ini di tunggu saja ya soalnya saya harus melihat lagi kode apa yang harus di ganti.

Beralih ke pertanyaan lain yaitu bagaimana cara membuat efek photo samar (blur) pada blog/web? wah sepertinya ini tidak terlalu sulit untuk di terangkan, soalnya masih sedikit kaku nih jadi mending yang gampang-gampang saja dulu. Setelah melihat contoh yang di berikan oleh sahabat yang betanya, ternyata memang menarik juga untuk di pasang. Efek photo yang di maksud adalah photo (gambar) akan terlihat samar ketika pertama kali dilihat, namun apabila photo atau gambar tersebut di sorot oleh mouse komputer anda maka photo atau gambar tersebut menjadi terlihat jelas, bingung? sok di sorot dahulu photo di bawah ini agar jelas apa yang sedang saya bicarakan :

 

kang rohman

 

 

 

Tertarik juga untuk membuat efek yang seperti di atas, begini nih caranya :

 

Langkah #1

 

  1. Silahkan login ke blogger dengan ID anda.
  2. Klik Tata letak.
  3. Klik tab Edit HTML.
  4. Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).
  5. Silahkan cari kode berikut : ]]></b:skin>
  6. Copy paste kode berikut di atas kode ]]></b:skin>

     

    .linkopacity img {
    filter:alpha(opacity=30);
    -moz-opacity: 0.30;
    opacity: 0.30;
    border:0;
    }
    .linkopacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    border:0;
    }
    .linkopacityxtra:hover img {
    filter:alpha(opacity=1.1);
    -moz-opacity: 1.1;
    opacity: 1.1;
    border:0;
    }

      

  7. Klik tombol Simpan Template.
  8. Langkah #1 selesai.

 

 

Langkah #2

 

Setiap anda memasang photo atau gambar, sisipkan kode seperti ini :

 

<a href="url tujuan" class="linkopacity"><img src="url sumber gambar"></a>

 

Misalkan kang rohman mempunyai alamat gambar seperti ini :



http://24rohman.googlepages.com/Water-06.jpg



Semisal gambar ini ingin nge link ke http://www.blogspottutorial.com, maka kode yang di pasang adalah seperti di bawah ini :

<a href="http://www.blogspottutorial.com" class="linkopacity"><img src="http://24rohman.googlepages.com/Water-06.jpg"></a>

Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik saja jika mau :


blogspot tutorial


Jika gambar anda tidak ingin nge link ke mana-mana, maka cukup gantikan saja alamat url tujuan dengan dengan kode #nogo, contoh :


<a href="#nogo" class="linkopacity"><img src="http://24rohman.googlepages.com/Water-06.jpg"></a>


Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik dan pasti tidak akan terjadi apa-apa :


klik saja soalnya ga akan ke mana-mana


Sudah paham? pastinya sudah, soalnya tentang cara nampilin gambar pernah saya tulis panjang lebar pada postingan tentang Google page creator, di baca lagi jika masih belum paham betul.


Sedikit clue tentang kode CSS yang di atas, anda bisa mengubah tingkat pengkaburan gambar (blur) dengan cara menambah atau mengurangi nilai opacity, contoh :

 

.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}



Jika nilai opacity=30 di kurangi, misal menjadi opacity=10, maka gambar akan terlihat lebih samar, contoh :

 

.linkopacity img {
filter:alpha(opacity=10);
-moz-opacity: 0.10;
opacity: 0.10;
border:0;
}



Silahkan bereksperimen sendiri untuk mendapatkan hasil yang lebih baik. Sampai jumpa pada posting berikutnya. Don't miss it dude.

Senin, 30 Juni 2008

Kotak Komentar Di bawah Posting

Duh rupanya banyak yang salah paham nih tentang postingan kang rohman yang kemaren, saya tegaskan bahwa postingan itu khusus bagi anda yang sudah me modifikasi kotak komentar dengan kotak komentar yang di buat oleh jackbook. Bagi anda yang belum pernah memodifikasi kotak komentar sebelumnya alias masih perawan, silah baca postingan oom yang di sini atau mungkin ingin kang rohman yang nulis :D ya udah kalau gitu kang rohman tulis aja deh sekalian.


Sekali lagi saya tegaskan bahwa tutorial pasang kotak komentar di bawah posting ini khusus bagi anda yang belum pernah memodifikasi kotak komentar anda sebelumnya atau dengan kata lain masih asli dari sononya. Yukkk...kita mulai saja biar cepat kelar.

  1. Silahkan Login ke http://draft.blogger.com dengan ID blogger anda. Ingat! bukan login ke blogger.com tapi ke draft.blogger.com karena fasilitas ini masih dalam tahap uji coba.


  2. Tuju pada blog yang akan anda pasang kotak komentarnya. Klik pada Pengaturan


  3. Klik tab Komentar, tuju ke tulisan Penempatan Formulis Komentar, kemudian beri tanda pada radio button untuk Disemat di bawah entri. Biar lebih jelas, sok dilihat gambarnya :


  4. pilihan komentar bawah posting

  5. Klik tombol Simpan Pengaturan yang ada di bagian bawah layar monitor anda.


  6. Selesai. Silahkan lihat hasilnya, mudah-mudahan langsung sukses.



Duhhh... saya belum berhasil nih!!! gimanaaaa??????

Jika belum berhasil, bisa mencoba langkah-langkah di bawah ini (biasanya jarang ada yang gagal kalau yang ini).

Langkah #1
  1. Masih dalam posisi yang tadi, klik Tata Letak.


  2. Klik Edit HTMl.


  3. Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).


  4. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.






  5. Tunggu beberapa saat sampai proses selesai.


  6. Cari kode yang seperti di bawah ini( karena kadang kode template berbeda-beda, silahkan fokus ke kode yang warna hijau, dan biasanya kode ini ada dua, pilih kode yang posisinya di bagian bawah ya!)
  7.  


    <p class='comment-footer'>

            <b:if cond='data:post.allowComments'>

            <a expr:href='data:post.addCommentUrl'            
    expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

        </b:if>


    </p>



     


  8. Hapus / delete kode diatas, lalu ganti dengan kode di bawah ini :




  9.  



    <p class='comment-footer'>

    <b:if cond='data:post.embedCommentForm'>

    <b:include data='post' name='comment-form'/>

    <b:else/>

    <b:if cond='data:post.allowComments'>


    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

    </b:if>

    </b:if>

    </p>



     


  10. Klik tombol Simpan Template.




  11. Langkah #1 selesai, yuk dulu biar lebih santai gitu lhohhh..





Sudah belum minum nya? kalau sudah, kita mulai lagi dech. nyok encang encing enya babeh kita mulai lagi main bajidor nya ya.



Langkah #2


  1. Klik pada Pengaturan




  2. Klik tab Komentar, tuju ke tulisan Penempatan Formulis Komentar, kemudian beri tanda pada radio button untuk Disemat di bawah entri. Biar lebih jelas, sok dilihat gambarnya :




  3. pilihan komentar bawah posting




  4. Klik tombol Simpan Pengaturan yang ada di bagian bawah layar monitor anda.




  5. Selesai. Silahkan lihat hasilnya.





Biasanya kalau dengan cara yang kedua ini jarang gagal, jika masih gagal juga, ya udah kang rohman ucapkan "kaciaaaaaaaaan dech loe"

Sabtu, 28 Juni 2008

Setting Kotak Komentar Dibawah Posting

Akhirnya sekarang pengguna blogspot boleh untuk sedikit berbangga hati karena pihak blogger.com sudah meluncurkan fitur-fitur barunya walaupun masih dalam tahap uji coba seperti yang telah kang rohman tulis di sini. Kini anda tidak perlu lagi minder karena sering mendapat cemoohan di sebabkan urusan kotak komentar Blogspot yang konon katanya sangat ribet, kini anda bisa membuat backup blog hanya dengan satu kali klik saja, tidak perlu lagi khawatir tidak akan terindeks di google karena Webmaster Tools sudah terintegrasi dengan blogger. Duh... semakin hari saya makin Love aza nih ama blogspot...iiiiiihhhh.. gregetan deh jadinya


Seperti janji kang rohman kemarin bahwa akan membuat tutorial cara mengembalikan template yang sudah di modifikasi seperti yang kang rohman tulis di sini. Yuk... kita mulai aja biar cepat-cepat merasakan kotak komentar langsung di bawah posting.

Langkah #1
  1. Silahkan Login ke http://draft.blogger.com dengan ID blogger anda, ini di maksudkan agar nanti memasang kotak komentarnya langsung bisa di lakukan.


  2. Tuju pada blog yang akan anda ubah kodenya. Klik pada Tata Letak


  3. Klik tab Edit HTML.


  4. Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).


  5. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.






  6. Tunggu beberapa saat sampai proses selesai.


  7. Cari kode yang seperti di bawah ini :


  8. <span class='post-comment-link'>

    <b:if cond='data:blog.pageType != "item"'>

    <b:if cond='data:post.allowComments'>

    <a class='comment-link' expr:href='data:post.url + "#comments"' >

    <b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>

    <b:else/><data:post.numComments/>

    <data:top.commentLabelPlural/>

    </b:if></a>

    </b:if>

    </b:if>

    </span>


  9. Gantilah kode di atas dengan kode di bawah ini :




  10. <span class='post-comment-link'>

    <b:if cond='data:blog.pageType != "item"'>

    <b:if cond='data:post.allowComments'>

    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

    <b:if cond='data:post.numComments == 1'>1

    <data:top.commentLabel/>

    <b:else/>

    <data:post.numComments/>

    <data:top.commentLabelPlural/>

    </b:if></a>

    </b:if>

    </b:if>

    </span>

     



  11. Cari kode seperti di bawah ini, lalu hapus / delete saja :



  12. <!-- www.jackbook.com --><!-- this to hide and show el -->

    <script languange='javascript'>
    function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = 'none';jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = 'block';}

    </script><!-- www.jackbook.com -->




  13. Cari kode yang seperti di bawah ini :



  14. <b:includable id='comments' var='post'>
    <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>

    <!-- jackbook.com part 1 start -->
    <!--
    <h4>
    <b:if cond='data:post.numComments == 1'>
    1 <data:commentLabel/>:
    <b:else/>
    <data:post.numComments/> <data:commentLabelPlural/>:
    </b:if>
    </h4>
    -->
    <div class='onepx'>
    <dl id='comments-block' style='height: 1px;overflow:hidden;'>
    <b:loop values='data:post.comments' var='comment'>
    <dt class='comment-author' expr:id='"comment-" + data:comment.id'>
    <a expr:name='"comment-" + data:comment.id'/>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>
    <dd class='comment-footer'>
    <span class='comment-timestamp'>
    <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
    <data:comment.timestamp/>
    </a>

     

    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
    </dd>
    </b:loop>
    </dl>
    </div>
    <!--
    <p class='comment-footer'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </p>
    -->
    <!-- jackbook.com part 1 ends -->
    <!-- actually i almost do nothing with your template, just add that comment, you did it :) -->

    <div id='comment-parent' onmouseover='showcomment("hoverme", "comment-child");' style='margin-bottom: 50px;'>
    <h3 id='hoverme' style='display:block;'>
    <img alt='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.' src='http://img229.imageshack.us/img229/5559/htmlcodeleavecommentfi5.gif' title='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.'/>
    </h3>

    <!-- this iframe below is your comment form. you can change the height, or add more style property into it -->
    <div id='comment-child' style='border:none; display: none; height:750px; width: 440px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'>
    <iframe expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' style='border:none;' width='100%'/>
    <br/>
    <a href='http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html' title='Want to have this on your blogger/blogspot?'>Comment Form under post in blogger/blogspot</a>
    </div>
    <!-- end of iframe -->

    </div>


    </b:if>

    <div id='backlinks-container'>

    <div expr:id='data:widget.instanceId + "_backlinks-container"'>

    <b:if cond='data:post.showBacklinks'>

    <b:include data='post' name='backlinks'/>

    </b:if>

    </div>

    </div>

    </div>

    </b:includable>

     


  15. Ganti kode di atas dengan kode di bawah ini :



  16. <b:includable id='comments' var='post'>

    <div class='comments' id='comments'>

    <a name='comments'/>

    <b:if cond='data:post.allowComments'>

    <h4><b:if cond='data:post.numComments == 1'>1

    <data:commentLabel/>:<b:else/><data:post.numComments/>

    <data:commentLabelPlural/>:

    </b:if>

    </h4>

    <dl id='comments-block'>

    <b:loop values='data:post.comments' var='comment'>

    <dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/>

    <b:if cond='data:comment.authorUrl'><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/>

    </a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/>

    </dt>

    <dd class='comment-body'>

    <b:if cond='data:comment.isDeleted'>

    <span class='deleted-comment'>

    <data:comment.body/>

    </span><b:else/>

    <p><data:comment.body/></p>

    </b:if></dd><dd class='comment-footer'>

    <span class='comment-timestamp'>

    <a expr:href='"#comment-" + data:comment.id' title='comment permalink'>

    <data:comment.timestamp/>

    </a>

    <b:include data='comment' name='commentDeleteIcon'/>

    </span>

    </dd>

    </b:loop>

    </dl>

    <p class='comment-footer'>

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p>

    </b:if>

    <div id='backlinks-container'>

    <div expr:id='data:widget.instanceId + "_backlinks-container"'>

    <b:if cond='data:post.showBacklinks'>

    <b:include data='post' name='backlinks'/>

    </b:if>

    </div>

    </div>

    </div>

    </b:includable>



  17. Langkah #1 Selesai, silahkan sejenak beristirahat dulu agar suasana menjadi tambah rileks.



Sudah istirahatnya? siap untuk melanjutkan? yuuukkkk.... mulai lagi jika sudah siap.

Langkah #2

  1. Masih dalam posisi Edit HTML dan pastikan kotak kecil di samping tulisan Expand Template Widget masih dalam keadaan tercentang.


  2. Cari kode yang seperti di bawah ini( karena kadang kode template berbeda-beda, kalau kata oom "focus saja ke kode yang warna hijau.


  3.  

    <p class='comment-footer'>
            <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl'             expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
        </b:if>
    </p>



  4. Hapus / delete semua kode di atas lalu ganti dengan kode di bawah ini :


  5.  

    <p class='comment-footer'>
    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>
    </p>



  6. Klik tombol Simpan Template.


  7. Akhirnya langkah #2 pun selesai juga, silahkan santai sejenak kembali untuk menghapai ujian yang terakhir.



Sudah habis nya? siap menghadapi ujian yang terakhir :D yukkkk....


Langkah #3

  1. Klik tab Pengaturan.


  2. Klik sub tab Komentar. Tuju Penempatan Formulis Komentar, pilih untuk pilihan Disemat di bawah entri.

    pilihan komentar bawah posting



  3. Klik tombol Simpan Pengaturan yang ada di bagian bawah layar monitor anda.


  4. Selesai. Silahkan lihat hasilnya, mudah-mudahan langsung sukses.



hore berhasil...berhasil hore berhasil...berhasil hore berhasil...berhasil LUV U Blogger

Kamis, 15 Mei 2008

Pasang Iklan Kliksaya.com di Bawah Read More

Apabila pada postingan terdahulu kang rohman mencoba untuk membahas bagaimana cara memasang iklan Google Adsense di bawah postingan, maka pada posting yang ini kang rohman akan membahas pertanyaan bagaimana cara memasang iklan di bawah Read more atau Selengkapnya. Agar tidak tidak terlalu melebar, maka iklan yang akan di jadikan contoh adalah iklan dari situs Kliksaya.com.

Karena topik yang di usung adalah memasang iklan di bawah Read more atau Selengkapnya, maka sudah barang tentu template anda harus memakai sistem ini, masih belum tahu cara membuat read more? silahkan di baca dulu atu di sini. Berbeda dengan kode iklan dari google adsense yang apabila di pasang pada template blogger harus di parse terlebih dahulu, maka kode iklan dari kliksaya.com tidak perlu di parse dahulu atau dengan kata lain langsung di pasang saja. Sudah tidak sabar, yuk kita mulai saja dech.

Sebagai contoh, kode iklan yang akan di pasang adalah seperti ini :


<!-- Begin: KlikSaya.com -->
<script src='http://scr.kliksaya.com/js-ad.php?zid=221' type='text/javascript'>
</script>
<!-- End: KlikSaya.com -->



Langkah-langkahnya adalah sebagai berikut :

  1. Silahkan login ke blogger dengan ID anda.


  2. Klik Layout.


  3. Klik tab Edit HTML.


  4. Klik tulisan Download Template Selengkapnya


  5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula


  6. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :

     

    expand widget template

     

  7. Tunggu beberapa saat ketika proses sedang berlangsung


  8. Silahkan anda cari kode berikut pada kode template milik anda (dengan asumsi template anda sudah terpasang sistem readmore) :



  9. <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/>
    <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
    </b:if>



  10. Tambahkan kode iklan kliksaya.com milik anda seperti ini :



  11. <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/>
    <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a>

    <br /> <br />
    <!-- Begin: KlikSaya.com -->
    <script src='http://scr.kliksaya.com/js-ad.php?zid=221' type='text/javascript'>
    </script>
    <!-- End: KlikSaya.com -->
    </p>

    </b:if>



  12. Klik tombol Simpan Template.


  13. Selesai. Silahkan lihat hasilnya.


Tambahan saja, kode iklannya bisa di ganti apa saja bisa iklan google adsense atau iklan yang lainnya, atau bisa juga di ganti dengan kode banner affialiasi atau kode social bookmarking.

Selamat mencoba!

Senin, 14 April 2008

Install Asteeg Emoticon To Post Editor


Hi guys! till remember about install Yahoo Emoticons to
post editor likely at this post, How do you feel after do that? feel happy coz you can add this to your post very easy. Or might be you feel boring with them. How if i give you different emoticon like this :ahaha: or :scream: also like this :ayokona:



Feel interesting to install this emoticon to your post editor?
Please read till end. However, please remember this tutorial only
work at Fire fox not for Internet Explorer and only at Compose not for Edit HTML.
Here is the steps :




If you have had doing my previous tutorial at this post, please only click here and then click
install and done. Now see your post editor, and you will see
your post editor like this :

 


yahoo and asteeg emoticon

 



Or this is the full tutorial :




  1. Download firefox here.




  2. Open your firefox.




  3. Install grease monkey here.




  4. Click this script, and than click install.




  5. Go to your template editor, and find this code ]]></b:skin>




  6. Copy and paste following codes and place above of ]]></b:skin>







  7. img.emoticon {

    padding: 0;

    margin: 0;

    border: 0;

    }





  8. Click Save Template button.





  9. Done.

 



Remember, this is work at Firefox, not for internet explorer.



Beside at my blog, you can read this tutorial at this blog.




See you at my next post. Don't miss it.