25 Feb 2013

Cara Membuat Recent Post Berjalan di Blogger Blogspot

Cara Membuat Recent Post Berjalan di Blogger Blogspot Terbaru  - Recent post atau posting terakhir atau artikel terkini adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini. Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut.
1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.
<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
  
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
  
</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;
  
</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small><a href="http://griyasavingnet.blogspot.com/2012/10/cara-membuat-recent-post-berjalan-di.html" target="_blank">get this widget here</a></small>
readmore

23 Feb 2013

Cara Membuat Fans Page Facebook Di Blog

Salam blogger, Melengkapi permintaan dari salah satu sahabat Zuaz'Z Creator on Facebook yang meminta saya untuk memposting cara untuk menghubungkan blog dan halaman facebook yang lebih kita kenal sebagai Facebook page/Like Box. Facebook page sudah sangat lazim digunakan di blog/website, mengingat besarnya manfaat untuk perkembangan blog/website maupun product yang ditawarkan. 
Jaringan sosial beserta pluginnya, khususnya Facebook, terbukti telah memperluas dan meningkatkan popularitas, daya jangkau, traffic, serta penjualan produk jenis apapun. Oleh karena itu, membuat Fans Page Facebook di blog/website merupakan hal yang sangat dianjurkan untuk blog/website Sobat.
Cara Membuat Fans Page Facebook di Blog/Website
1. Langkah pertama Sobat login terlebih dahulu di account Facebook Sobat.
2. Kemudian buka halaman ini:  Facebook Page
3. Pilih/klik opsi Merek atau Produk

4. Pilih opsi no.1"website" dan isikan no.2"nama Page" sesuai dengan yang diinginkan. centang "Persetujuan" dan klik "Mulai", seperti contoh gambar berikut:


5. Selanjutnya Sobat akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya, atau langsung membuat Facebook Like Box yang nantinya dapat dipasang di blog/website.
Penting: Sebelum menuju langkah berikutnya copy terlebih dahulu url Facebook Fan Page yang telah dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.
Contoh url-nya: http://www.facebook.com/pages/K-T-B/300432780037612


6. Berikutnya sobat pilih menu nomer 5 dan klik "add like box" atau bisa juga buka halaman berikut: Like Box
7. Selanjutnya, isikan spesifikasi seperti gambar berikut:
Setting Facebook Like Box:
1. Facebook Page url: paste url Facebook Page yang di copy tadi

2. Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget pada blog sobat.

3. Height: adalah tinggi like box, sesuaikan juga dengan widget pada blog sobat.

4. Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.

5. Show Faces: Centang untuk menampilkan foto profil likers.

6. Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.

7. Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.

8. Show header: Centang jika ingin menampilkan tulisan header "Temukan kami di Facebook".
Lihat preview tampilan di sebelah kanan form tersebut.

8. Jika settingan yang dibuat sudah beres, klik Get Code. Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, XFBML dan IFRAME pilih salah satu dan copy kodenya. (Untuk Blogger, disarankan pilih HTML 5).

Copy kedua kode tersebut untuk pemasangan Like Box di blog Sobat.
Cara pemasangan like Box pada Blog:
  1. Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget.
  2. Pilih HTML/JavaScript.
  3. Masukkan kode yang telah dicopy ke dalam kotak kode HTML/JavaScript.
  4. Save/Simpan
.
Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website Sobat dapat dengan mudah meng-klik like pada like box yag telah disediakan.
Demikianlah Cara Membuat Fans Page Facebook Di Blog semoga bermanfaat Sobat.
readmore

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header

Salam blogger, Kali ini saya sedikit berbagi tentang Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header yang telah di request oleh sahaba-sahabat Zuaz'Z Creator pada halaman Facebook.
Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita. 
Untuk demonya silakan sobat blogger klik link berikut ini DEMO. Bagi sobat blogger yang berminat memasang menu semacam ini silakan ikutu langkah-langkah berikut ini:



Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:

1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>


Klik show untuk melihat
/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU66joIs4NAsopkygbGNBE4vobdqXYiiT9OBWYnOxcR8d9K2F8jZNXloYZlQHBnYhyphenhyphenRRMI9QpAOjvpT_Htc1W56l4vSRiGDcRfhbZjCKd-6zqRbsTgX9m1IGTo7eiyR7DKFEEdsEHNna4/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}


Selanjutnya sobat blogger cari kode berikut:
  • <header>  : untuk menempatkan menu di atas nama blog
  • </header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

Klik show untuk melihat
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M741nXOv7dfSdX7Sy1ZPZlu53bA3xlphHXj6uS1kWeHZa1qKVqLHMTujSdUl2fh1RsprflQmMGwV_YGAlg_WzSggwJyYgxiNRlAsknoASiOZktzI8eLDyGy9qIS842E1RZjuty5CVh8/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/den_zuaz' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/denzuaz' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/zuazTama' target='new'>Zuaz&#39;Z on Facebook</a></li>
</ul>
</li>
<li><a href='http://zuazz.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://zuazz.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://zuazz.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg16tvHWmxiwO1F7K-pab5UY45bU2aaKE3gFEq3jX9by9qmXNl2dxmTRpQNlU5gvMF6qsGkNxDkVsmCKEYEhZcEUjO1peGSztph2zWEzJXLLQfeJDUhTO7WBl0VMQczpV6fXcAjGcYLDp0/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx6d8mfbkcEbj5FulT49U2yS7AIMrG-zAsctAx88v9a2fqgwXI1tj5-aQWm-jGWmZbBzHPNdBHcb6a7mxK0wEFI5uSWjGsCysqHBceumIfwFSGrx7XG0SA3PoF5ermOznJbHEArxWG0_g/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan:
  1. Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
  2. Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.
Demikianlah Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat bagi sobat blogger readmore

22 Feb 2013

Cara Pasang TV Online Lengkap

Cara Pasang TV Online Lengkap

Lansung saja copy script dibawah ini lalu paste di edit HTML

<center><div style=" font: 11px Arial,Serif; height: 720px; overflow: auto; padding: 0px; width: 530px;">
<iframe frameborder="0" height="720" id="Player" marginheight="0" marginwidth="0" name="Player" scrolling="no" src="http://LUTFITV.blogspot.com/" width="530"></iframe></div></center>


Maaf terlalu singkat,tapi walaupun singkat,mudah-mudahan bermanfaat.

readmore

cara membuat slide show

Cara Membuat Slideshow Pada Blogger?
Kali ini kita akan membuat Slideshow yang menarik dan sangat mudah untuk diterapkan di blogspot.berikut langkah dan cara pemasangannya.
  • Masuk ke akun blog sobat.
  • Dari dasbor klik Rancangan
  • Tambag Gadget => Html/ JvaScript
  • Simpan kode di bawah ini. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
   $('#BUS-slider').s3Slider({ 
      timeOut: 3000 
   }); 
}); 
</script>
<style>
#BUS-slider { 
   width: 550px; /* Keep it 20px-40PX greater than ACTUAL Image size */ 
   height: 335px
   position: relative; 
   overflow: hidden; 
   margin-left: 0; 
}
#BUS-sliderContent { 
   width: 550px
   position: absolute; 
   top: 0; 
   margin-left: 0; 
}
.BUS-sliderImage { 
   float: left; 
   position: relative; 
   display: none;  top: 0; 
   border:1px solid #ddd;
}
.BUS-sliderImage span { 
position: absolute; 
    font: 10px/15px sans-serif,Arial, Helvetica; 
    padding: 10px 10px; 
    background-color: #000; 
    color: #fff; 
    filter:'alpha(opacity=70)'; 
    -moz-opacity: .5; 
    -khtml-opacity: .5; 
    opacity: .5; 
    text-align:justify; 
}
.BUS-sliderImage span a {
text-decoration:underline; 
color:#FE6602; 
}
.clear { 
   clear: both; 
}
.top { 
    top: 0; 
    left: 0; 
    width: 550px !important; 
    height: 70px
.bottom { 
    bottom: 0; 
    left: 0; 
    width: 550px !important; 
    height:90px
.left { 
    left: 0; 
    top: 0; 
    width: 110px !important; 
    height: 335px
.right { 
    right: 0; 
    bottom: 0; 
    width: 110px !important; 
    height: 315px
}
</style> 
<div id="BUS-slider"> 
<ul id="BUS-sliderContent">
<li class="BUS-sliderImage"> 
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVBd5wQEMEMr5wKUGAzXQTPMQ8AUlHAxbVlCmPEWVNNnSDA2BkAXCtgBgcQBC3g5OufcJtWu3bIKzcGElB-O3VpV1PKg5SY2SD4NlxVYAL-pFFqZNNgpvQktPg2z4GJQkDt-2cjwgQ5yk/s144-p/froggy-01.jpg"width="550"height="335"/> 
<span class="right"><h3>HEADING-1 GOES HERE</h3>DESCRIPTION GOES HERE</span> 
</li>
<li class="BUS-sliderImage"> 
<a href="#"><img src="https://lh6.googleusercontent.com/-tMlCuLM8W9U/T1ePb8zPZ8I/AAAAAAAAWYA/Ts4L8-EKRLw/s144-p/liquidmoon.jpg"width="550"height="335"/> 
<span class="left"><h3>HEADING-2 GOES HERE</h3>DESCRIPTION GOES HERE</span> 
</li>
<li class="BUS-sliderImage"> 
<a href="#"><img src="https://lh5.googleusercontent.com/-Jj2icsmjKU0/TRZIEbg1DrI/AAAAAAAAPII/W3qlBQN8EEY/s144-p/DSC_6188.jpg"width="550"height="335"/> 
<span class="top"><h3>HEADING-3 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li> 
<li class="BUS-sliderImage"> 
<a href="#"><img src="https://lh5.googleusercontent.com/-qaIEtFbC4Ww/TRo3lpIItlI/AAAAAAAAAbY/PrrDCpaGpUM/s144-p/DSC_9636.jpg"width="550"height="335"/> 
<span class="bottom"><h3>HEADING-4 GOES HERE</h3>DESCRIPTION GOES HERE</span> 
</li>
<li class="BUS-sliderImage"> 
<a href="#"><img src="https://lh3.googleusercontent.com/-3N2mUk21gII/TQvDoVM-W9I/AAAAAAABNp8/YJKXUVO6Sw0/s144-p/Lovas%25252010%25252004%252520136-2.jpg"width="550"height="335"/> 
<span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li> 
<div class="clear BUS-sliderImage"></div> 
</ul> 
</div>
<br/> 

  • Nah sobat lihat kode yang saya cetak tebal seperti ini width="550"height="335" itu yang harus sobat ganti sesuai dengan ukuran Widget dimana sobat letakan kode ini, sobat bisa bermain-main mengganti kodenya
  • Untuk mengatur cepat dan lambatnya slide sobat ganti kode berikut timeOut: 3000 Semakin tinggi nilainya semakin lambat slide-nya dan sebaliknya.
  • untuk kode yang berwarna ungu (#) sobat ganti dengan link tujuan.
  • Nah untuk kode yang berwarna biru sobat ganti sesuai dengan judul gambar dan deskripsi gambar.
  • Jika sobat ingi menambahkan gambar slideshownya sobat tinggal tambahkan kode di bawah ini.
  • Warna merah adalah url gambar. silahkan ganti dengan gambar anda.
<li class="BUS-sliderImage"> <img src="https://lh3.googleusercontent.com/-3N2mUk21gII/TQvDoVM-W9I/AAAAAAABNp8/YJKXUVO6Sw0/s144-p/Lovas%25252010%25252004%252520136-2.jpg"width="550"height="335"/> <span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span></li> 

  • Simpan kode di atas sebelum kode paling bawah dari kode di atas yaitu kode.

<div class="clear BUS-sliderImage"></div> </ul> </div><br/> 

Selesai sundah tutorial kali ini cara membuat slideshow pada blogger,semoga bermanfaat..
readmore

CARA MENARUH SCROLLBAR DI BLOG

1. Copy kode berikut dan letakkan di sidebar blog Anda (Desain -> Elemen -> Javascript/HTML).

  1. <div style="overflow:auto;width:90%;height:150px;padding:20px;margin-bottom:10px">  
  2. <ol><li><a href="http://www.alkhoirot.net/2011/05/mengapa-santri-harus-menulis.html">Mengapa Santri Harus Menulis?</a></li>  
  3. <li><a href="http://www.alkhoirot.net/2011/05/menulis-itu-tradisi-intelektual.html">Menulis adalah Tradisi Intelektual</a></li>  
  4. </ol></div>  

2. Ganti link tersebut dengan link Anda. Atau dapat juga di isi dengan teks info dan pengumuman atau kutipan, dll.

Catatan:

Height adalah ukuran tinggi. Angkanya bisa dirubah sesuai dengan kebutuhan Anda. readmore

CARA MEMBUAT SPOILER TOMBOL HIDE SHOW DI KOMENTAR BLOG BLOGGER


Panduan ini khusus membuat spoiler di blog Blogger Blogspot bukan di blog Wordpress atau Joomla. Tujuannya agar artikel yang banyak komentarnya tampak lebih rapi seperti di blog ini.

1. Login/masuk ke Blogger.com -> Template -> Edit HTML -> Lanjutkan -> kasih tanda tik/centang "Expand Template Widget"
2. Cari kode berikut (gunakan Ctrl + F untuk mempermudah pencarian):


  1. <div class='comments-content'>  
  2. <b:if cond='data:post.embedCommentForm'>  
  3. <b:include data='post' name='threaded_comment_js'/>  
  4. </b:if>  
  5. <div id='comment-holder'>  
  6. <data:post.commentHtml/>  
  7. </div>  
  8. </div>  

3. Masukkan kode berikut di atas kode no.2
  1. <!-- spoiler komentar part1 alkhoirot.net -->  
  2. <div><div style='margin-bottom: 2px;'><i><b><small/></b></i><input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Lihat Komentar&apos;; }' style='margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;' type='button' value='Lihat Komentar'/></div>  
  3. <div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'>  
  4. <!-- spoiler komentar part1 end alkhoirot.net-->  

4. Masukkan kode beerikut di bawah kode no.2
  1. <!-- spoiler komentar part2 alkhoirot.net -->  
  2. </div></div></div>  
  3. <!-- spoiler komentar part2 end alkhoirot.net -->  

5. Klik Simpan. Selesai. readmore

Membuat Tombol Hide Show (Spoiler) dan Scrollbar

Tombol Hide Show Spoiler

Cara membuat tombol teks spoiler seperti di Kaskus dengan Hide and Show di mana artikel yang kita sembunyikan (HIDE) tidak akan tampak sampai pengunjung mengklik tombol SHOW. Trik ini dapat dipakai untuk Blogger BLogspot atau Wordpress

DAFTAR ISI
  1. Apa itu Spoiler Tombol Hide & Show
  2. Cara Membuat Spoler Tombol Hide & Show di Artikel Posting
  3. Cara Membuat Spoler Tombol Hide & Show di Komentar Blogger
  4. Cara Membuat Scrollbar
    1. Apa itu Scrollbar?
    2. Fungsi Scroll-bar
    3. Cara Menaruh Scrollbar di Blog
    4. Cara Buat Scrollbar

APA ITU SPOILER HIDE & SHOW
Supaya mudah dimengerti, berikut contoh spoiler:

Kata-kata sebelum di HIDE and SHOW

Bagi seorang PNS (Pegawai Negeri Sipil) atau pejabat tinggi, hidup sederhana adalah keharusan untuk menghilangkan nafsu korupsi dan godaan tamak.

Bagi seorang jutawan, hidup sederhana membuat hidup lebih real, tanpa topeng dan lebih berbahagia karena terasa mudah untuk berbagi harta dengan yang lemah.

Bagi seorang ulama, ustadz, dan kyai yang hartawan, hidup sederhana adalah fardhu ‘ain karena mereka adalah simbol nilai ideal tertinggi dan penuntun umat yang mayoritas miskin. Miskin harta atau miskin jiwa. [Sumber link]

Setelah di HIDE AND SHOW (klik Show)


CARA MEMBUAT SPOILER TOMBOL HIDE SHOW DI ARTIKEL BLOG
Cara ini dapat dipakai untuk blog Blogger atau Wordpress. Caranya mudah, ikuti panduan berikut:

1. Buka halaman untuk menulis artikel -> pastikan dalam mode Edit HTML (untuk Blogger) atau HTML (untuk Wordpress)
2. Copy dan paste kode di bawah ke halaman posting. Klik View pl`in untuk mengcopy.

  1. <div id="spoiler">  
  2. <div style="margin: 5px 20px 20px;">  
  3. <div class="smallfont" style="margin-bottom: 2px;">  
  4. <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div>  
  5. <div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(225, 228, 242) none repeat scroll 0% 0%; border: 1px inset; margin: 0px; padding: 6px;">  
  6. <div style="display: none;">  
  7. Tulis artikel di sini!   
  8. </div>  
  9. </div>  
  10. </div>   

3. Taruh tulisan yang akan di HIDE AND SHOW di Tulis artikel di sini! readmore

21 Feb 2013

Cara memasang widget twitter blogspot

Pernakah anda melihat burung tweeter terbang pada halaman blogger? menclok ke-sana-kemari menyesuaikan pergerakan halaman blog? tampak unik dan blog pun terlihat cantik. Bagaimana caranya ya? nah pada pembahasan kali ini saya akan menjelaskan cara memasang widget twitter blogspot baik yang sifatnya diam dengan menampilkan status twitter, maupun widget burung twitter yang terbang.
Fungsi widget ini sama halnya dengan widget facebook yang sudah saya tulis sebelumnya seperti "Cara Membuat Widget Melayang Facebook Like Box". widget ini juga berguna untuk:
1. Menampilkan Status twitter anda di blog
2. Mempromosikan blog anda melalui twitter
3. Sebagai cara mempercantik blog anda.

Singkat cerita :) cara memasang widget twitter adalah sebagai berikut:

  1. Masuk ke situs twitter, atau cepatnya masuk ke link berikut: https://twitter.com/about/resources/widgets. 
  2. Kemudian pilih "situs web saya".
  3. Pilih "widget profile" > pada kolom nama pengguna, isikan ID twitter anda.
  4. Anda bisa mengatur tampilan widget twitter anda melalui tab Preferensi, Tampilan dan ukuran.
  5. Setelah dirasa cukup Klik tombol "selesai & ambil kode".
  6. Ada dua pilihan yang diberikan yaitu mengambil atau copy kode scriptnya dan nantinya dipasang/paste sendiri pada gadget blog anda, atau dengan meng-klik tombol "add to blogger" yang secara otomatis nanti dituntun masuk ke gadget blog anda secara otomatis.
  7. Dari langkah 6 di atas misalkan anda memilih copy code scrpitnya cara pasang nya adalah pada langkah 8 berikut:
  8. Masuk dan log in ke akun blogspot anda.
  9. Klik tombol rancangan > tata letak
  10. Tambah gadget > HTML/JavaScript
  11. Kemudian copy kode script pada langkah 6 tadi.
  12. Simpan pekerjaan anda dan lihat hasilnya..
Sekarang bagaimana cara memasang widget burung twitter melayang di blog? caranya adalah:
  1. Ikuti langkah 8 sampai 10 pada penjelasan di atas. 
  2. Copy kode di bawah ini dan ikuti seperti langkah 11 dan 12 di atas.

Widget Twitter Terbang Di Blog burung twitter warna biru

        <script src="http://imemovaz.googlecode.com/files/tripleflap.js" type="text/javascript">
</script>
        <script type="text/javascript">
        var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU6HYAxtmY3Jr4tbckhH57EIaB20bKGpd9p-4hyphenhyphenXU75KhPlOLCIeBtmvmz2I20AKM9kNVcby6mmZ6Y8214pFjDvlG-S-ePQRQyVt6U4Oi77sMqeacdJzY6GGGc5x65ZVAm_P2xsBM4rZg/"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
      
</script>


Widget Twitter Terbang Di Blog burung twitter warna merah

        <script src="http://imemovaz.googlecode.com/files/tripleflap.js" type="text/javascript">
</script>
        <script type="text/javascript">
        var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI3p2erZWZZJO-1B8lLXNbOuMfuoGTu1Xni7GvlfcRpZQLLb735RDUPMoq_Ek2Vv8haV9cFWRPZPPG8DSd_CAsf145O8bTP9qRoSox_rFU3zjxfBn3Vc1me5VVLlw9OyF9PQ0N8xfdARI/"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/NamaTwitterAnda";var tweetThisText = "Twitter - NamaTwitterAnda http://UrlSitusAnda/";tripleflapInit();
      
</script>

Keterangan: tulisan yang berwarna merah, silahkan ganti dan sesuaikan dengan alamat akun twitter dan alamat situs blog anda.

Demikian kupas tuntas cara memasang widget twitter blogspot - blogger, baik yang sifatnya diam (status twitter) atau dengan animasi burung twitter yang terbang di blog. Bagaimana dengan blog anda, apakah sudah dipasang twitternya? readmore

20 Feb 2013

membuat scrol

AB | Tutorial Blog | Cara Membuat Scroll Pada Blog - kali ini AB akan memaparkan bagaimana Cara Membuat Scroll Pada Blog. Walau sebelumnya AB sudah menjelaskan bagaimana Cara Membuat Kolom Scroll Pada Blog Archive. Semua caranya hampir sama.



Bagi blogger pemula seperti AB ini, ingin rasanya memasang banyak widget yang AB Suka. Tapi kadang-kadang banyaknya widget bisa memakan tempat pada blog sehingga tidak rapi. Oleh karena itu AB memberanikan diri memberikan tips bagaimana Cara Membuat Scroll Pada  Blog untuk Widget tertentu biar rapi.

Yang harus anda lakukan
1. Anda harus buka blog anda dengan account anda sendiri
2. Masuklah pada Rancangan template.
3. Pilih Add Widget -->> pilih HTML/JavaScript.
4. Copy lah scrip ini

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:150px; height:180px; background-color: rgb(255, 255, 255); border:1px solid #ddd;">

LETAKKAN SCRIPT WIDGET YANG ANDA PUNYA

</div>

5. Lalu tekan Simpan/Save. -->>> Lalu simpan template anda.
6. Lihat hasilnya

Catatan:
- Untuk yang berwarna merah sesuaikan ukuran yang anda suka
- Untuk Yang berwarna biru copy kode script widget yang anda ingin pasang

Itulah Cara Membuat Scroll Pada Blog. Selamat mencoba. Salam Blogger. AB | Tutorial Blog | Cara Membuat Scroll Pada Blog - kali ini AB akan memaparkan bagaimana Cara Membuat Scroll Pada Blog. Walau sebelumnya AB sudah menjelaskan bagaimana Cara Membuat Kolom Scroll Pada Blog Archive. Semua caranya hampir sama.


Bagi blogger pemula seperti AB ini, ingin rasanya memasang banyak widget yang AB Suka. Tapi kadang-kadang banyaknya widget bisa memakan tempat pada blog sehingga tidak rapi. Oleh karena itu AB memberanikan diri memberikan tips bagaimana Cara Membuat Scroll Pada  Blog untuk Widget tertentu biar rapi.

Yang harus anda lakukan
1. Anda harus buka blog anda dengan account anda sendiri
2. Masuklah pada Rancangan template.
3. Pilih Add Widget -->> pilih HTML/JavaScript.
4. Copy lah scrip ini

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:150px; height:180px; background-color: rgb(255, 255, 255); border:1px solid #ddd;">

LETAKKAN SCRIPT WIDGET YANG ANDA PUNYA

</div>

5. Lalu tekan Simpan/Save. -->>> Lalu simpan template anda.
6. Lihat hasilnya

Catatan:
- Untuk yang berwarna merah sesuaikan ukuran yang anda suka
- Untuk Yang berwarna biru copy kode script widget yang anda ingin pasang

Itulah Cara Membuat Scroll Pada Blog. Selamat mencoba. Salam Blogger. readmore

Cara Membuat Iklan Melayang dengan 2 Kali Klik Close

AB | Cara Membuat Iklan Melayang dengan 2 Kali Klik Close - Kawan-kawan pernah membaca tentang Floating Ads - Buat Adsense Anda Melayang dengan Tombol Close atau Cara Membuat Iklan Melayang dengan Klik Close, postingan kali ini hampir sama saja dengan kedua postingan itu (bagi yang belum baca silahkan baca yah, hehehe). Namun Cara Membuat Iklan Melayang dengan 2 Kali Klik Close, penutupan floating iklannya yang berbeda. Kalau postingan kali ini dianjurkan kepada pengunjung blog kita untuk mengklik sampai 2 kali klik close sementara postingan sebelumnya adalah 1 kali close saja.


Cara Membuat Iklan Melayang dengan 2 Kali Klik Close, bisa membuat empunya blog akan kebanjiran klik iklan. Karena untuk melihat artikel utama di dalam blog harus menutup atau mengklik iklan yang melayang, biasanya cara seperti ini dilakukan oleh blog-blog yang behubungan / berisikan tentang postingan "KHUSUS DEWASA". Kelemahannya adalah pengunjung malas berkunjung ke blog karena menambah waktunya untuk mengklik iklan melayang tadi. So... semua tergantung anda kawan, mau mencoba-coba Cara Membuat Iklan Melayang dengan 2 Kali Klik Close ini silahkan. Jujur saja, AB sendiri tidak suka menggunakan ini hehehehe.

Inilah Cara Membuat Iklan Melayang dengan 2 Kali Klik Close:
1. Seperti biasa, buka Akun blog kawan.
2. Masuk ke Tata Letak / Rancangan
3. Pilih Tambah Gadget / Add Widget
4. Pilih elemen HTML/Javascript
5. Copylah Scrip di bawah ini, lalu paste ke Gadget / widget yang ingin anda tambahkan tadi.
<style type="text/css">

#gb{ position:fixed; top:10px; z-index:+1000; } * html
#gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:2px solid #bb0000; background:#eeeeee; padding:10px; }
</style>
<script type="text/javascript">

function showHideGB(){ var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ?
moveGB(0, 30-w) :
moveGB(20-w, 0);
gb.opened =
!gb.opened; }
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} }
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<div style="text-align: right;">
<a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div>
<center>
silahkan tempatkan kode iklan atau banner atau teks atau apalah terserah kamu disini yah
</center>
<script type="text/javascript">
var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div>
</div>
6. Simpat Gadget / Widget yang barusan anda buat.
7. Simpan Template anda. Lalu publikasikan. Lihat Hasilnya.

Catatan:
  • Silahkan ganti huruf yang berwarna merah dengan angka sesuai posisi yang anda inginkan.
  • Silahkan ganti huruf yang berwarna biru dengan kode iklan, kode banner yang anda inginkan.
  • Tidak semua penyedia Iklan (adsense) menganjurkan untuk menggunakan trik Cara Membuat Iklan Melayang, hati-hati memilihnya, biasanya kumpulblogger tidak mempermasalahkannya.
  • Baca disini Cara Mendapatkan Adsense Bersama KumpulBlogger  
  • Cara membuat iklan melayang bisa anda gunakan pada penempatan widget-widget lainnya seperti Fan Page Facebook atau Sosial Media lainnya..
readmore

18 Feb 2013

Membuat menu drop down blogspot –Bagian2

Membuat menu drop down blogspot –Bagian2

Alhamdulillah, akhirnya artikel cara membuat menu dropdown di blogspot bagian 2 sudah selesai dan saya bisa berbagi dengan anda. Pada beberapa waktu yang lalu saya telah menulis artikel dropdown bagian ke-1. Menu dropdown Horizontal kali ini adalah dengan menggunakan kode CSS dan HTML yang simple sehingga mudah dalam pembuatan-nya tentunya dengan hasil yang memuaskan. Menu dropdown ini berfungsi ketika anda sudah mempunyai konten yang banyak dan ingin mempermudah pengunjung mengakses artikel atau page/halaman yang anda pilih sehingga lebih konten blog anda lebih terorganisir.

Langkah yang saya terangkan di-bawah hasilnya seperti pada demo:


Cara membuat menu drop down di blogspot adalah sebagai berikut:
  • Sign ke Blogger > Design > Page Elements 
  • Pilih dan tambahkan Gadget HTML/JavaScript yang berada di bawah Header blog anda dan tambahkan kode dibawah ini:
<div id='mbtnavbar'>
          <ul id='mbtnav'>
            <li>
              <a href='#'>Beranda</a>
            </li>
            <li>
              <a href='#'>Tentang saya</a>
           </li>
            <li>
              <a href='#'>Produk</a>
            </li>
      <li>
               <a href='#'>Kontak</a>

                <ul>
                    <li><a href='#'>Facebook</a></li>
                    <li><a href='#'>Twitter</a></li>
                    <li><a href='#'>Yahoo</a></li>
                  </ul>
            </li>

          </ul>
        </div>
Keterangan:
  1. Ganti tanda # dengan lamat url yang diinginkan
  2. Apabila ingin menambah menu anda tinggal menambahkan kode di-bawah sebelum kode </ul>
<li>
          <a href='#'>Tab Name</a>
        </li> 
  • Sekarang masuk ke Design > Edit HTML 
  • Untuk jaga-jaga apabila ada kesalahan, silahkan anda download dulu template anda sebagai back up. 
  • Cari kode ]]></b:skin> 
  • Tambahkan kode di-bawah tepat sebelum kode ]]></b:skin>

/*----- MBT Drop Down Menu ----*/


    #mbtnavbar {
        background: #000000;
        width: 880px;
        color: #FFF;
            margin: 0px;
            padding: 0;
            position: relative;
            border-top:0px solid #000000;
            height:35px;

    }


    #mbtnav {
        margin: 0;
        padding: 0;
    }
    #mbtnav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #mbtnav li {
        list-style: none;
        margin: 0;
        padding: 0;
            border-left:1px solid #DDD;
            border-right:1px solid #DDD;
            height:35px;
    }
    #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
        color: #000;
        display: block;
       font:normal 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
          

    }
    #mbtnav li a:hover, #mbtnav li a:active {
        background: #809FFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 10px 12px;
          
      
          
    }

    #mbtnav li {
        float: left;
        padding: 0;
    }
    #mbtnav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;
    }
    #mbtnav li ul a {
        width: 140px;
    }
    #mbtnav li ul ul {
        margin: -25px 0 0 161px;
    }
    #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
        left: -999em;
    }
    #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
        left: auto;
    }
    #mbtnav li:hover, #mbtnav li.sfhover {
        position: static;
    }

    #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
        background: #809FFE;
        width: 120px;
        color: #000;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;

      
    }
    #mbtnav li li a:hover, #mbtnavli li a:active {
        background: #2646A6;
        color: #FFF;
        display: block;
        margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    }
Keterangan:
Silahkan Ganti kode yang saya tandai merah di-atas sesuai dengan keinginan anda.
  • Jangan Lupa Simpan pekerjaan anda
Demikaian Langkah-langkah dalam cara membuat menu drop down blogspot –Bagian2 kali ini. semoga  bermanfaat.
readmore