Minggu, 26 Agustus 2012

Petunjuk Teknis Pelaksanaan Perpres Nomor 70 Tahun 2012


 

Peraturan Presiden (Perpres) Nomor 70 Tahun 2012 benar-benar mencetak rekor dalam hal perubahan aturan. Ditandatangani tanggal 31 Juli 2012, diundangkan tanggal 1 Agustus 2012 dan langsung dinyatakan berlaku, sosialisasi pertama tanggal 9 Agustus 2012, dan hari ini (15 Agustus 2012) muncul petunjuk teknis pelaksanaannya dalam bentuk Peraturan Kepala (Perka) LKPP Nomor 6 Tahun 2012 setebal 1300-an halaman.
Seperti yang telah disebutkan pada Matriks Perbedaan antara Perpres Nomor 54 Tahun 2010 dengan Perpres Nomor 70 Tahun 2012, salah satu perbedaan utama adalah dicabutnya lampiran Perpres Nomor 54 Tahun 2010 dan selanjutnya diwujudkan dalam bentuk Perka LKPP.
Hal ini bertujuan agar apabila dikemudian hari terdapat perubahan ketentuan mengenai teknis pelaksanaan pengadaan, maka perubahannya tidak perlu sampai mengubah Peraturan Presiden yang tentu saja butuh waktu yang lebih lama, melainkan cukup dengan menerbitkan atau merevisi Perka LKPP.
Untuk mengunduh Perka LKPP Nomor 6 Tahun 2012, silakan klik pada tautan-tautan dibawah ini:
Untuk mengunduh seluruh petunjuk teknis ini sekaligus, silakan klik pada Perka LKPP Nomor 6 Tahun 2012 atau apabila link di atas ada yang bermasalah, silakan langsung klik ke sumbernya di http://www.lkpp.go.id/v2/contentlist-detail.php?mid=0029564157&id=1937385898
Read more >>
»»  READMORE...

Kamis, 16 Agustus 2012

Agar Blog Cepat Terindeks Search Engine


Bagi blog baru seperti blog saya ini mungkin terus mencari cara Agar Blog Cepat Terindeks Search Engine khususnya Google. Secara tak sengaja saya menemukan artikel cara Agar Blog Cepat Terindeks Search Engine dari teman blogger. Caranya cukup mudah karena kita tinggal memasukan url blog kita ke tool yang telah disediakan. Banyak cara Agar Blog Cepat Terindeks Search Engine, namun menurut saya tool ini salah satu yang cukup bagus dan layak untuk dicoba karena tool ini memang disediakan oleh Google sendiri yaitu Webmaster Tool.
Agar Blog Cepat Terindeks Search Engine
Agar Blog Cepat Terindeks Search Engine caranya cuup mudah, silahkan Anda masuk ke Webmaster Tool silahkan isi kotak kosong dengan URL blog kita kemudian masukan kode captcha dan tekan tombol Submit Request, selesai. Mudahkan...? Demikian postingan Agar Blog Cepat Terindeks Search Engine kali ini mudah-mudahan bermanfaat.
Read more >>
»»  READMORE...

Membuat Teks Area Keren Di Blog

Membuat Teks Area Keren Di Blog

Sesuai dengan namanya Membuat Teks Area Keren Di Blog, memang menurut saya teks area ini benar-benar keren. Dengan teks area ini, meskipun kita sebenarnya bukan profesional tapi kita seakan-akan profesional. Cara membuat atau menampilkannya di blog kita cukup mudah. Bagi yang tertarik untuk mencoba Membuat Teks Area Keren Di Blog silahkan simak postingan sederhana saya di bawah ini.
1. Login ke blog anda.
2. Masuk menu 'Layout-->Edit HTML
3. Centang kotak 'Expand Widgets Template
4. Cari kode ini </head> (gunakan CTRL + F di keyboard untuk memudahkan pencarian)
5. Letakkan script berikut ini di bawah kode </head> tadi.
6. Simpan Template Anda.
Nah untuk menampilkan teks area kerennya di postingan HTML gunakan kode-kode di bawah ini.

1. <div class="md1">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

2. <div class="md2">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

3. <div class="md3">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

4. <div class="md4">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

5. <div class="md5">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

6. <div class="md6">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

7. <div class="md7">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

8. <div class="md8">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

9. <div class="md9">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

Demikian cara dan contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode-kode di atas pada postingan HTML Anda. Bagaimana tertarik untuk mencoba Membuat Teks Area Keren Di Blog?

Atau Anda bisa mengunjungi sumbernya
Read more >>
»»  READMORE...

Cara Membuat Efek Marquee Di Blog


Pagi ini saya share salah satu trik blogger cara membuat efek marquee di blog atau lebih umumnya kita kenal efek tulisan berjalan. Sebenarnya cara membuat efek marquee di blog sudah banyak di share oleh blogger-blogger lain namun untuk melengkapi trik blogger di blog ini, kini saya kembali meng-share-nya bagi Anda yang belum paham atau belum tahu kode script untuk membuat efek marquee di blog.
Dengan membuat tulisan atau apapun dengan efek marquee, membuat blog tersebut terkesan lebih hidup. Cara membuat efek marquee di blog cukup mudah. Kita bisa mengaplikasikannya di widget atau di psotingan blog kita. Ada beberapa cara membuat efek marquee di blog, diantaranya:
1. Efek marquee yang berjalan dari kiri ke kanan.
 Kode scriptnya seperti di bawah ini:
<marquee align="center" direction="right" scrollamount="2" width="100%" height="20">
    Tulisan Anda di sini
    </marquee>

Penampakannya akan seperti di bawah ini:

Contoh untuk efek marquee yang berjalan dari kiri ke kanan.

Untuk tulisan agar berjalan dari kanan ke kiri, tinggal ganti right menjadi left.

2. Efek marquee yang berjalan ke kanan dan ke kiri.
Kode scriptnya seperti di bawah ini:

<marquee align="center" direction="left" scrollamount="3" behavior="alternate" width="100%" height="20">
    Tulisan Anda di sini
    </marquee>

Penampakannya akan seperti di bawah ini:

Contoh untuk efek marquee yang berjalan dari kiri ke kanan.

3. Efek marquee dengan background warna.
Kode scriptnya seperti di bawah ini:

    <div align="left"><span><marquee scrollamount="3" behavior="alternate" bgcolor="RED" width="100%">
    Tulisan Anda di sini
    </marquee></span></div>

Contoh efek marquee dengan background warna

4. Efek marquee yang berhenti ketika mouse berada pada teks area.
Kode scriptnya seperti di bawah ini:

    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="left" align="center" width="100%" height="20">
    Tulisan Anda di sini
    </marquee>

Penampakannya akan seperti di bawah ini:
Silahkan Anda coba arahkan mouse ke teks area di bawah ini.

Contoh efek marquee yang berhenti ketika mouse diarahkan ke teks area.

Agar berjalan ke kanan ganti left dengan right
Agar berjalan ke atas ganti left dengan up
Agar berjalan ke bawah ganti left dengan down

Demikian sharing Cara Membuat Efek Marquee Di Blog kali ini. Anda bisa berkreasi lebih banyak lagi dan lebih berpariasi lagi dengan menggunakan efek-efek marquee di atas. Jangan pernah takut untuk mencoba...karena kegagalan adalah awal dari sebuah keberhasilan.
Read more >>
»»  READMORE...

Cara Membuat Link Dengan Tombol Sederhana Di Blog


Pada kesemptan ini saya akan share Cara Membuat Link Dengan Tombol Sederhana Di Blog. Biasanya tombol ini digunakan untuk tombol download atau tombol apa saja untuk menggantikan link teks sehingga berkesan lebih rapih. Bagi yang belum mengetahui Cara Membuat Link Dengan Tombol Sederhana Di Blog simak tutorial sederhana saya di bawah ini.
Cara Membuat Link Dengan Tombol Sederhana Di Blog cukup mudah, Anda tinggal mengcopy kode di bawah ini.
<a href="LINK ANDA DI SINI" target="_blank"><button>Download</button></a>
dan penampakannya akan seperti di bawah ini.


Silahkan ganti tulisan LINK ANDA DI SINI dengan link yang ingin Anda masukan ke tombol tersebut, dan ganti tulisan Download dengan tulisan yang ingin Anda tampilkan pada tombol tersebut.

Mudah kan...? Demikian postingan sederhana tentang Cara Membuat Link Dengan Tombol Sederhana Di Blog, mudah-mudahan bermanfaat.
Read more >>
»»  READMORE...

Membuat Share Button Melayang Di Pinggir Blog

Membuat Share Button Melayang Di Pinggir Blog

Salah satu sarana untuk mempublikasikan postingan blog kita ke berbagai sosial media yaitu dengan membuat share button atau dalam bahasa Indonesianya yaitu tombol berbagi. Nah untuk itu kini saya share cara Membuat Share Button Melayang Di Pinggir Blog yang sederhana namun besar manfaatnya. Share button ini akan tetap tampil di depan halaman meskipun halaman di roll ke atas atau ke bawah.

Cara Membuat Share Button Melayang Di Pinggir Blog cukup mudah, silahkan Anda masuk ke blog Anda. Dashboard >> Layout >> Add a gadget >> pilih HTML/JavaScript, kemudian copy kode di bawah ini ke dalam gadget tersebut. Jangan dikasih title untuk gadget ini, biarkan kosong.

<div class="addthis_bar addthis_bar_vertical addthis_bar_large" style="background:#FFFFFF; border: 0px solid #000000; top:120px;left:80px;"><div class="addthis_toolbox addthis_default_style"><span><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></span><span><a class="addthis_button_tweet" tw:count="vertical"></a></span><span><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></span><span><a class="addthis_counter"></a></span><span><div style='border: 0px; padding: 0px; background-color: none; text-align: center; font-size:9px;'> <a href='http://kompiajaib.blogspot.com/2012/05/membuat-share-button-melayang-di.html' target='_blank'>Get Widget</a></div></span></div></div> <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

Mudah kan...? Demikianlah cara Membuat Share Button Melayang Di Pinggir Blog mudah-mudahan bermanfaat.
Read more >>
»»  READMORE...

Membuat Widget I Love Indonesia Di Pojok Blog

Membuat Widget I Love Indonesia Di Pojok Blog

Pagi ini saya share cara Membuat Widget I Love Indonesia Di Pojok Blog yang cukup sederhana namum besar maknanya. Kita sebagai bangsa Indonesia tentunya bangga menjadi orang Indonesia, dan tentunya bangga juga menjadi blogger Indonesia. Widget ini bisa dipasang di blog Anda yang menandakan bahwa Anda orang dan blogger Indonesia. 

Untuk demo silahkan klik tombol demo di bawah ini, kemudian lihat di pojok kanan atas blog.

Cara Membuat Widget I Love Indonesia Di Pojok Blog cukup mudah, Anda tinggal klik tombol add to blogger di bawah ini.
Setelah terbuka jendela baru, silahkan klik pada tombol Add Widget, selesai. Mudah kan...? Demikian sharing cara Membuat Widget I Love Indonesia Di Pojok Blog mudah-mudahan bermanfaat.
Read more >>
»»  READMORE...

Membuat Widget Jam Dan Kalender Di Pinggir Blog

Membuat Widget Jam Dan Kalender Di Pinggir Blog

Kenapa saya memberi judul Membuat Widget Jam Dan Kalender Di Pinggir Blog, karena memang tempat jam dan kalendernya berada di pinggir blog sebelah kiri dan tersembunyi sehingga tidak memakan tempat. Untuk melihat jam atau kalendernya kita tinggal klik pada tanda panah warna kuning dan kemudian jam atau kalendernya akan keluar.
Untuk melihat demo Membuat Widget Jam Dan Kalender Di Pinggir Blog silahkan lihat dengan klik di tombol demo di bawah ini, kemudian lihat di sebelah kiri blog.


Untuk mengaplikasikannya ke blog Anda cukup mudah, tinggal tekan tombol Add To Blogger di bawah ini, kemudian setelah terbuka jendela baru tinggal tekan tombol Add Widget.

Untuk waktu dan kalendernya sudah otomatis menyesuaikan dengan waktu internet. Bagaimana mau mencoba Membuat Widget Jam Dan Kalender Di Pinggir Blog? Silahkan...mudah-mudahan bermanfaat.
Read more >>
»»  READMORE...

Rabu, 15 Agustus 2012

Memberi Efek Marquee Pada Popular Posts Widget Blogger

Memberi Efek Marquee Pada Popular Posts Widget Blogger

Pagi ini saya akan share trik mempercantik blog yaitu Memberi Efek Marquee Pada Popular Posts Widget Blogger. Seperti telah kita ketahui, blogger menyediakan fasilitas popular posts. Kita bisa memunculkan popular posts dengan menyertakan thumbnail maupun tanpa thumbnail pada blog kita. Tentunya popular posts ini berdasarkan konten yang paling banyak diklik pengunjung blog.
Memberi Efek Marquee Pada Popular Posts Widget Blogger sangatlah mudah, namun tentunya Anda harus mengaktifkan dulu widget popular posts pada blog Anda. Dashboard >> Layout >> Add a Gadget >> Kemudian pilih Popular Posts.
Kemudian masuk ke Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates karena kita akan sedikit mengobok-obok kode HTML. Namun alangkah baiknya back up dulu template Anda untuk berjaga-jaga kemungkinan kesalahan pada edit HTML. Setelah itu silahkan cari HTML widget popular posts. Untuk memudahkan kita cari title dari widget tersebut dengan CTRL + F pada keyboard kemudian masukan titlenya ke kotak pencarian. Secara default, Anda akan menemukan kode HTML yang cukup panjang seperti di bawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
Kemudian kita akan menambahkan kode <marquee direction='up' height='350px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> di atas kode <div class='widget-content popular-posts'> dan menambahkan kode </marquee> di bawah kode </div>

Perhatikan pada height='350px', itu menuntukan tinggi widget yang akan tampil pada blog kita, silahkan Anda atur sesuai keinginan dan scrollamount='2' untuk mengatur kecepatan scroll-nya.
Sehingga penampakan kodenya akan menjadi seperti di bawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
<marquee direction='up' height='350px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
...........................
...........................

              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</marquee>
</b:includable>
</b:widget>

Setelah itu silahkan lakukan preview untuk melihat apakah perubahannya sudah betul atau tidak, kemudian simpan template Anda, selesai.

Untuk demo, silahkan lihat pada Popular Posts Widget blog ini. Demikian sharing Memberi Efek Marquee Pada Popular Posts Widget Blogger kali ini mudah-mudahan bermanfaat.
Read more >>
»»  READMORE...

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Pagi ini saya share salah satu trik untuk mempercantik tampilan blog kita yaitu Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan. Setelah saya berhasil mengaplikasikannya pada blog saya ini, akhirnya saya berkesempatan untuk mengsharingnya untuk Anda semua. Tentunya bagi Anda yang belum tahu, bagi yang sudah tahu dan paham mohon koreksinya bila menjumpai hal yang kurang pas. Maklum saja saya belajar otodidak. Saya hanya senang dengan hal-hal yang baru, try and error sudah menjadi kebiasaan akhirnya. Dengan mencoba sesuatu hal yang baru, kita mendapat ilmu yang baru juga. Related posts ini akan bergerak ke kiri dan ke kanan dan akan berhenti ketika mouse di arahkan ke atasnya.

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan sebenarnya cukup mudah. Kenapa demikian? Karena Anda hanya tinggal mengcopy kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit mengobok-obok kode HTML template blog. Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula. 

Kemudian cari kode </head>, agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode </head> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode </head> tadi.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{

font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {

background-color:#d4eaf2;
}
</style>
<script src='http://kompiajaib.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Kemudian cari kode seperti di bawah ini

<div class='post-footer-line post-footer-line-1'>


atau kalau enggak ada cari yang seperti di bawah ini


<p class='post-footer-line post-footer-line-1'>

Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang sobat temukan.
<!-- Marquee Kompiajaib Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=12;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-related-post-dengan-thumbnail.html' target='_blank'>widget</a></div>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->

Perhatikan tulisan Baca Juga Artikel Terkait Lainnya: bisa Anda ganti dengan kalimat yang Anda kehendaki.

#444
untuk warna background kotaknya.
Dan angka 12 untuk menunjukan jumlah related post yang ditampilkan.

Silahkan lakukan preview untuk memastikan widgetnya berjalan atau tidak, setelah itu silahkan simpan templatenya kemudian lihat hasilnya....menarik bukan...

Demikian sharing Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu hal yang baru. Setiap orang pasti mengalami try and error.
Read more >>
»»  READMORE...

CARA MEMBUAT MENU SENTUH PADA SIDEBAR


 

Mungkin timbul pertanyaan, "Apa menu sentuh itu..??". Menu sentuh diartikan sebagai deretan menu yang apabila disorot oleh mouse, menuyang sebelumnya tersembunyi, akan terbuka secara otomatis.
Trik ini bertujuan untuk menghemat ruang pada sidebar, terutama pada blog yang ingin memiliki menu banyak.
Menu sentuh dapat diisi apa saja sesuai dengan apa yang ingin ditampilkan, misalnya : widget, koleksi gambar, kumpulan link sahabat, buku tamu atau apa saja yang penting kode yang dimasukkan, semuanya berupa kode HTML/JavaScript.

Ada beberapa langkah untuk membuat menu sentuh.

LANGKAH PERTAMA
  • Masuk ke Blogger.
  • Pilih Rancangan pada bagian Edit HTML.
  • Copy kode dibawah ini dan paste tepat diatas kode </head>


    <script src='http://sites.google.com/site/epgstudiosite/javascript/jquery.min.js' type='text/javascript'/>

    <script src='http://sites.google.com/site/epgstudiosite/javascript/ddaccordion.js' type='text/javascript'>

    </script>
    <script type='text/javascript'>
    ddaccordion.init({
    headerclass: &quot;silverheader&quot;, //Shared CSS class name of headers group
    contentclass: &quot;submenu&quot;, //Shared CSS class name of contents group
    revealtype: &quot;mouseover&quot;, //Reveal content when user clicks or onmouseover the header? Valid value: &quot;click&quot;, &quot;clickgo&quot;, or &quot;mouseover&quot;
    mouseoverdelay: 200, //if revealtype=&quot;mouseover&quot;, set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: [&quot;&quot;, &quot;selected&quot;], //Two CSS classes to be applied to the header when it&#39;s collapsed and expanded, respectively [&quot;class1&quot;, &quot;class2&quot;]
    togglehtml: [&quot;&quot;, &quot;&quot;, &quot;&quot;], //Additional HTML added to the header when it&#39;s collapsed and expanded, respectively [&quot;position&quot;, &quot;html1&quot;, &quot;html2&quot;] (see docs)
    animatespeed: &quot;fast&quot;, //speed of animation: integer in milliseconds (ie: 200), or keywords &quot;fast&quot;, &quot;normal&quot;, or &quot;slow&quot;
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
    //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    //do nothing
    }
    })
    </script>

    <style type='text/css'>
    .applemenu{
    margin: 5px 0;
    padding: 0;
    width: 170px; /*lebar menu*/
    border: 1px solid #9A9A9A;
    }
    .applemenu div.silverheader a{
    background: black url(http://sites.google.com/site/epgstudiosite/image/silvergradient.png) repeat-x center left;
    font: normal 12px Tahoma, &quot;Lucida Grande&quot;, &quot;Trebuchet MS&quot;, Helvetica, sans-serif;
    color: white;
    display: block;
    position: relative;
    width: auto;
    padding: 5px 0;
    padding-left: 8px;
    text-decoration: none;
    }
    .applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
    color: white;
    }
    .applemenu div.selected a, .applemenu div.silverheader a:hover{
    background-image: url(http://sites.google.com/site/epgstudiosite/image/silvergradientover.png);
    color: white;
    }
    .applemenu div.submenu{
    background: white;
    padding: 5px;
    height: 300px;
    }
    </style>

  • Perhatikan huruf warna kuning :width: 170px; merupakan ukuran lebar menu, silahkan anda ganti sesuai lebar sidebar yang anda gunakan.
  • border: 1px solid #9A9A9A; merupakan ukuran dan warna garis, anda ganti dengan yang diinginkan.
  • height: 300px; merupakan ukuran tinggi dari menu yang tampil setelah disorot mouse, ubah ukurannya sesuai keperluan.
  • Huruf warna merah lainnya merupakan file JavaScript dan image pemanis simpanan EPG Studio. Anda dapat mengganti dengan kepunyaan anda sendiri.
  • Setelah selesai pengeditan, klik tombol Simpan Template.


LANGKAH KEDUA

  • Sekarang masuk ke Elemen Halaman.
  • Pilih pada sidebar yang mana anda ingin menampilkan menu sentuh.
  • Klik Tambah Gadget.
  • Pilih HTML/JavaScript.
  • Copy kode dibawah ini dan paste pada kolom yang tersedia.


    <div class="applemenu">
    <div class="silverheader"><a href="http://epg-studio.blogspot.com"target="_blank">Menu 1</a></div>
    <div class="submenu">
    isi dengan kode HTML/JavaScript yang ingin anda tampilkan <br />
    </div>
    <div class="silverheader"><a href="http://epg-studio.blogspot.com" target="_blank">Menu 2</a></div>
    <div class="submenu">
    isi dengan kode HTML/JavaScript yang ingin anda tampilkan<br />
    </div>
    <div class="silverheader"><a href="http://epg-studio.blogspot.com"target="_blank">Menu 3</a></div>
    <div class="submenu">
    isi dengan kode HTML/JavaScript yang ingin anda tampilkan<br />
    </div>
    <div class="silverheader"><a href="http://epg-studio.blogspot.com"target="_blank">Menu 4</a></div>
    <div class="submenu">
    isi dengan kode HTML/JavaScript yang ingin anda tampilkan<br />
    </div>
    <div class="silverheader"><a href="http://epg-studio.blogspot.com"target="_blank">Menu 5</a></div>
    <div class="submenu">
    isi dengan kode HTML/JavaScript yang ingin anda tampilkan<br />
    </div>
    </div>

  • Perhatikan yang berwarna merah.
    1. http://epg-studio.blogspot.com merupakan link yang akan terbuka pada tab baru, jika pengunjung mengklik link tersebut. Ganti dengan link yang anda inginkan.
    2. Menu 1, menu 2, menu 3, menu 4 dan menu 5 merupakan judul dari seetiap menu yang tampil. Ganti dengan judul menu yang ingin anda tampilkan.
    3. isi dengan kode HTML/JavaScript yang ingin anda tampilkan merupakan tempat anda memasukan kode HTML/JavaScript yang akan tampil saat judul menu disorot mouse. Silahkan anda isi dengan kode HTML?Java Script yang ingin anda tampilkan, misalnya Buku Tamu, widget alexa, kumpulan banner sahabat, dll.
    4. Jumlah menu yang ditampilkan pada kode diatas sejumlah 5 menu. Jika anda ingin menambah dengan menu lainnya, tinggal menambahkan kode seperti di bawah ini :

      <div class="silverheader"><a href="http://epg-studio.blogspot.com" target="_blank">Menu selanjutnya</a></div>
      <div class="submenu">
      isi dengan kode HTML/JavaScript yang ingin anda tampilkan<br />
      </div>

    5. Setelah selesai pengeditan tampilan menu sentuh, klik tombol Simpan.
    6. Lihat Blog anda.

Sumber : Dinamicdrive
Read more >>
»»  READMORE...

MEMBUAT TEKS BERJALAN PADA NAVBAR ATAS

Variasi yang dapat anda pasang pada blog yang anda sayangi berbagai ragam bentuknya. Salah satunya adalah teks berjalan pada navbar bagian atas.
Tidak sulit dalam membuatnya, anda hanya memerlukan penambahan beberapa kode kedalam Template.
Ikuti langkah-lanhkahnya :
  • Sign ke Blogger dengan ID anda.
  • Pilih Rancangan.
  • Pilih Edit HTML.
  • Cari kode ini : <b:skin><![CDATA[/*
  • Copy seluruh kode dibawah ini dan pate tepat diatas kode tadi.


    <script language='JavaScript'>
    var txt=&quot;. . : : Selamat Datang di EPG Studio...Tempatnya Berbagi Ilmu dan Pengalaman.... : : . .&quot;;
    var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
    txt=txt.substring(1,txt.length)+txt.charAt(0);
    segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak();
    </script>

  • Ganti teks yang berwarna merah dengan teks yang anda inginkan
  • Ganti angka pada var kecepatan=100 dengan angka yang anda inginkan. Makin besar angka yang dipasang makin lambat gerakannya.
  • Selesai...Selamat mencoba.
Read more >>
»»  READMORE...

Widget Search Box Keren untuk Blog

6 Widget Search Box Keren untuk Blog. Widget search box untuk membantu pengunjung menemukan apa yang mereka cari pada blog kita. Dan tentunya ini sangat berguna. Selain itu 99,99% para blogger memasang widget Search box pada blog mereka.
Widget Search Box Keren untuk Blog

6 Widget Search Box Keren untuk Blog

Widget search box ini bisa anda pasang untuk Blogger / blogspot dan juga wordpress. Blog Bamz akan sharing untuk blogger saja yah! maklum lagi males buka wordpress :p. Berikut ini cara memasang widget search box di blogger/blogspot.

Cara memasang widget search box di blogger

Login ke Blogger > Edit HTML > Add Element baru > HTML atau Javascript
Copy salah satu kode dari 6 widget serch box keren di bawah ini dan paste pada element baru tadi.

Widget Search box 1


$0AWidget Search box 2


Widget Search box 3


Widget Search box 4


Widget Search box 5


Widget Search box 6


width:307px >> Silahkan ganti dengan lebar widget blog anda.
Read more >>
»»  READMORE...

Tentang Feedburner dan Cara Daftar di Feedburner

Salah satu cara untuk memaksimalkan suatu blog adalah dengan mendaftarkan blog tersebut ke feedburner. Secara tidak langsung, layanan gratis yang disediakan feedburner dapat membantu meningkatkan traffic blog kita. Sebenernya ada layanan feed lain yang serupa seperti feedblitz dan rmail. Cuma kali ini saya akan bahas feedburner aja.
Apa itu Feedburner
Berikut adalah kutipan dari situs feedburner mengenai pengertian feedburner
FeedBurner is the leading provider of media distribution and audience engagement services for blogs and RSS feeds. Our Web-based tools help bloggers, podcasters and commercial publishers promote, deliver and profit from their content on the Web
Sedangkan kalo menurut saya pribadi, Feedburner merupakan penyedia jasa layanan publikasi suatu web / blog dengan cara menyebarluaskan content dan rss feeds suatu web / blog. Secara tidak langsung feedburner akan membantu mempromosikan suatu web / blog dengan layanan yang dimilikinya. Sehingga dapat meningkatkan traffic pengunjung web / blog tersebut. Untuk lebih jelasnya mengenai feedburner, langsung aja ke situsnya atau klik disini
Cara Daftar Blog ke Feedburner
Setelah membahas mengenai apa itu feedburner, sekarang bagian cara mendaftarkan blog ke feedburner.
Langkah pertama yang harus dilakukan adalah dengan mengunjungi situs feedburner di http://www.feedburner.com/. Selanjutnya, akan muncul suatu halaman web seperti ini :

Pada kotak yang ditunjukin tanda panah merah, masukan alamat feed blog anda. Contoh untuk blog ini http://kursus-blog.blogspot.com/feeds/posts/default. Silahkan ganti alamat blognya dengan alamat blog anda. Setelah itu langsung klik next (ga usah checklist kolom i am a podcaster).
Kemudian akan muncul lagi suatu halaman seperti ini:

Isi kolom tersebut sesuai data blog anda. Kalo dah beres, klik activate feed. Jika ada kesalahan pengisian, coba ulangi lagi sampai sukses. Kesalahan biasanya pada pengisian kolom feed address karena udah ada nama feed dengan address yang sama. Untuk mengatasinya gunakan nama feed yang unik (ga harus sesuai dengan judul blog), setelah itu klik activate feed lagi. Lalu akan muncul sebuah halaman seperti ini :

Setelah alamat feed blog anda jadi, anda langsung saja menuju ke blogger untuk mengubah settingan feed blogger. Caranya masuk ke menu pengaturan kemudian klik feed situs. Lalu masukan alamat feed anda yang tadi di buat ke kotak isian posting URL pengubahan arah feed lalu save.
Kembali ke laptop feedburner. Langsung klik aja skip directly to feed management (ga usah klik next). Nah...setelah itu maka feed blog anda di feedburner sudah jadi. Selanjutnya tinggal cara setting di feedburner
Untuk cara settingnya silahkan tunggu aja postingan berikutnya ya...!! Dah pegel nih tangan .
Salam ngeblog............
Read more >>
»»  READMORE...
SELAMAT DATANG......