This is default featured slide 1 title

This picture is a picture of SMA PESAT let's join now! and do not forget to see the other article the article only in "http://saifulpesat.blogspot.com", thanks: D in waiting his arrival, and do not forget to follow me :)

This is default featured slide 2 title

This picture is a picture of SMA PESAT let's join now! and do not forget to see the other article the article only in "http://saifulpesat.blogspot.com", thanks: D in waiting his arrival, and do not forget to follow me :)

This is default featured slide 3 title

"TAHAJUD" .This picture is a picture of SMA PESAT let's join now! and do not forget to see the other article the article only in "http://saifulpesat.blogspot.com", thanks: D in waiting his arrival, and do not forget to follow me :)

This is default featured slide 4 title

This picture is a picture of SMA PESAT let's join now! and do not forget to see the other article the article only in "http://saifulpesat.blogspot.com", thanks: D in waiting his arrival, and do not forget to follow me :)

This is default featured slide 5 title

"Dengan Akhlak Mulia dan ilmu Pengetahuan Menuju ALLAH S.W.T" .This picture is a picture of SMA PESAT let's join now! and do not forget to see the other article the article only in "http://saifulpesat.blogspot.com", thanks: D in waiting his arrival, and do not forget to follow me :)

Kamis, 31 Mei 2012

Cara Membuat Kotak Email Subscribtion Feedburner (Berlangganan Artikel)


Cara Membuat Kotak Email Subscribtion Feedburner (Berlangganan Artikel)


Cara Membuat Kotak Email Subscribtion Feedburner (Berlangganan Artikel) - Sobat mungkin sering melihat di blog-blog orang lain sebuah kotak yang di atasnya ada tulisan untuk memasukkan alamat email jika ingin berlangganan artikel terbaru, Nah, itulah yang dinamakan Kotak Email Subscribtion Feedburner (Berlangganan Artikel). Lalu, bagaimanakah cara membuatnya ?? Mudah Sobat. Pertama, Sobat harus memiliki akun feedburner terlebih dahulu
Baca : Cara Membuat Akun Feedburner
Setelah mengikuti langkah-langkah pada artikel di atas  (Cara Membuat Akun Feedburner), lanjutkanlah ke tutorial berikut,
  • Klik Next lagi, akan muncul
  • Lalu pilih menu "Publicize", maka akan keluar halaman publcize
  • Di bagian sidebar ada beberapa menu, nah, untuk membuat kotak Kotak Email Subscribtion Feedburner (Berlangganan Artikel), klik pada "Email Subscription"
  • Aktifkan dulu dengan klik pada tombil "Active". Lalu Sobat akan diberikan kode scriptnya untuk dipasang di blog Sobat
  • Untuk memasangkan pada blog Sobat, kita pakai cara cepat saja. Pada kotak kode script di atas, tepat di bawahnya ada tombol otomatis untuk memasang kode tersebut. Caranya, pilih platform Blogger, dan klik tombol "Go"
  • Lalu akan meuncul tab baru, pilih blog yang akan dipasang kotak Kotak Email Subscribtion Feedburner (Berlangganan Artikel) tersebut. Tentukan judul widgetnya (kosong juga tidak papa), dan klik tombol "Add Widget"
  • Selesai.

Membuat Menu Navigasi Horizontal dengan CSSPORTAL




Membuat Menu Navigasi Horizontal dengan CSSPORTAL - Percaya atau tidak percaya, kini lebih mudah membuat menu navigasi horizontal dengan CSSPORTAL . Sebenarnya apa sih CSSPORTAL? CSSPORTAL dalah sebuah situs yang memberikan banyak kemudahaan dalam dunia CSS, antara lain ,memudahkan kita membuar menu navigazi horizontal, menu navigasi vertikal, CSS Validator, sampai CSS untuk template, pokoknya super komplit.
Nah, kita sekarang bicara soal "Membuat Menu Navigasi Horizontal dengan CSSPORTAL". Banyak sekali Sobat yang mengeluh karena sulitnya Membuat Menu Navigasi Horizontal secara manual, kadang banyak kode-kode di template blog mereka yang tidak cocok. Oleh karena itu, mari kita tinggalkan "Cara manual" tersebut, kita coba cara cepat,mudah, dan cantik.

Baca : Membuat Menu Navigasi horizontal 2 baris
Membuat Menu Navigasi Horizontal dengan CSSPORTAL. Note : Perhatikan baik-baik, banyak Sobat yang gagal karena sulit menentukan kode mana yang harus diedit.
  • Pertama, masuklah ke situs asli CSSPORTAL (http://cssportal.com ) atau langsung menuju halaman pembuatan navigasi horizontalnya di sini
  • Kita akan diberikan beberapa pilihan menu navigasi horizontal, pilihlah salah satu
  • Setelah memilih, maka Sobat akan diberikan 2 script kode, yaitu kode CSS dan kode HTML.
  • Sekarang tutorial cara memasangnya di template blog 

    • Masuk ke blogger
    • Buka menu Design/Rancangan
    • Pilih Edit HTML
    • Cari kode ]]></b:skin> (gunakan Ctrl+f), lalu masukkan kode CSS yang telah diberikan, letakkan di atas kode ]]></b:skin> tersebut

      • Contohnya :

    • Lalu simpan/save.
    • Yang kedua,centang pada expand widget template



    • Cari kode <div id='header (gunakan Ctrl+f) (Note : Pada bagian ini Sobat sering salah, banyak dari Sobat yang tidak menemukan kode yang dimaksud)
    • Solusi : Pusatkan pencarian pada kode header, <div id='header lalu, jika sudah ketemu, lihat ke bawah, sampai ada kode </div> ,lihat gambar berikut dengan saksama


    • Letakkan kode HTML yang diberikan di bawah kode </div> tadi
    • Simpan Template, dan lihat hasilnya
    • Jika mmasih gagal, bisa pakai cara ini, 

      • Cari kode ini

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
      • Lalu masukkan KODE HTML yang dari CSSPORTAL di bawah kode di atas
      • Save/Simpan

      • Contoh punya saya,
Bagi Sobat yang masih gagal pada tutorial di atas, silahkan bertanya pada kotak komentar di bawah, semoga saya bisa membantu ^^

Prediksi Skor Prancis vs Islandia

Prancis vs Islandia 28 Mei 2012 - Prediksi Skor Prancis vs Islandia. Prediksi Skor Pertandingan Prancis vs Islandia 28 Mei 2012. Islandia hanya mampu meraih satu kemenangan dari 13 laga terakhirnya di semua kompetisi, menelan 10 kekalahan dan dua imbang. Sementara Itu Sejak dilatih Laurent Blanc, performa Prancis sangat konsisten. Hingga saat ini Prancis belum terkalahkan lagi di semua kompetisi sejak kalah 0-1 dari Belarus di laga perdana kualifikasi Euro 2012 Grup D bulan September 2010. Pada laga persahabatan terakhirnya, Prancis berhasil menundukkan Jerman 2-1. Terakhir kali kedua tim bertemu pada bulan Oktober 1999 di Kualifikasi Euro 2000, dimana saat itu Prancis berhasil mengalahkan Islandia 3-2.

Prediksi Skor Prancis vs Islandia 28 Mei 2012
Uji coba france vs iceland merupakan ajang seleksi terakhir Blanc untuk memastikan 23 pemain yang akan dibawa ke Euro nanti. Karena skuad saat ini terdiri atas 25 pemain, itu berarti bakal ada dua nama yang harus dicoret. Lini tengah menjadi sasaran karena memiliki kuota paling gemuk atau terdiri atas sebelas pemain.

Cara membuat Facebook Fans Page Tersembunyi di Blog


menurut saya blog kurang lengkap jika tidak ada facebook Fans Page Mungkin Bisa Dilihat Di Blog Juragan Atau Remo-xp.com Apakah dia Punya Facebook Fans Page...? Pasti Punya Karena itu adalah blog pilihan saya tetapi kali ini tidak Facebook Fans pagenya Tidak memakan Tempat karena dia tersembunyi...? , Buat sobat Mau Tahu Caranya Mari Dilihat Caranya :

langkah 1

Pertama, Masuk Blogger > Rancangan > Edit HTML

Kedua,Cari Kode </head> (gunakan Ctrl + F Untuk mempermudah Mencarinya)

Ketiga,Copy Dan paste Kode Di bawah Ini Tepat sebelum kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Keempat,Simpan Template

Langkah 2

Pertama , Login Blogger > Rancangan > Elemen Lama > Tambah gadget > Html/JavaScript

Kedua, Copy Kode Di Bawah Ini dan Paste di Html/JavaScript Yang Taadi sobat Buka :

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://i1013.photobucket.com/albums/af256/iroelst/logofb-1.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 100px;padding: 0 5px 0 30px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:50%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=URL PAGE Facebook Sobat&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="ahmadanakindonesia.blogspot.com/2012/03/cara-membuat-facebook-fans-page.html">Mau Widget Ini Click Disini</a></span></div></div>

Dan terakhir , Simpan

Membuat Efek Berjatuhan di Blog

1. Sign in di Blogger
2. Kemudian pilih "Rancangan"
3. Klik "Tambah Gadget"
4. Pilih "HTML/Javascript"
5. Copy kode scipt dibawah ini (Pilih Salah Satu Script Yang Kamu Suka):

Salju Berjatuhan

Code:
<script language="javascript" src="http://zianxfly.250free.com/js/saljucursorblack.js"></script>


Daun Berjatuhan
Code:
<script src="http://arti.master.irhamna.googlepages.com/daun.js"/></script>


Love Berjatuhan
Code:
<script src='http://anas.ku93.googlepages.com/lovingheart.js'>
</script>


Kupu Kupu Berterbangan
Code:
<script src="http://h1.badwaresite.www/pendi05/kupu.js" type="text/javascript">


Kelelawar Berterbangan
Code:
<script src="http://h1.badwaresite.www/pendi05/kelelawar.js" type="text/javascript">


Bintang Berjatuhan
Code:
<script src="http://h1.badwaresite.www/pinginbelajar/bintangberjatuhan/30.js" type="text/javascript"></script>


Burung Beterbangan
Code:
<script language="JavaScript1.2"
src="http://www.geocities.com/yono_pati/burung.js">
/***********************************************
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/
</script>

Cara Membuat Efek Kembang Api Pada Blog


بِسْÙ…ِ اللّÙ‡ِ الرَّØ­ْÙ…َÙ†ِ الرَّØ­ِÙŠْÙ…ِ

assalamu'alaikum sobat" semua...... weeeehhhhh..sebenernya masih UAN nih,

Tapi ni tadi ane buka chat box ane ternyata ada yang pengen tau Cara Membuat Efek Kembang Api Pada Blog.

ok deh, langsung aja ane share sekarang...

Cara Membuat Efek Kembang Api Pada Blog

1. login blog
2. rancangan --> edit HMTL
3. lalu cari kode </body>
4. lalu masukkan kode script dibwah ini diatas kode </body>

<script language="javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/kembangapi.js"></script>


5. simpan...


Kok belum keluar??????
jangan takut dulu sob... masih ada cara yang lain kok... langsung aja ya..

1. login blog
2. rancangan --> elemen halaman --> tambah gadget --> HTML/JavaScript
3. lalu masukkan kode

<script language="javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/kembangapi.js"></script>


4. simpan

Dan selesei deh dan jangan lupa coba lihat hasilnya....

klo belum kluar brarti kodenya masih di disabled tuh
jadi sobat bisa pakai yang kode dibawah ini aja (versi flash)

<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="grab this widget @ widgetindex.blogspot" src="http://5433001315082274311-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex/fireworks.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>

Simpan.
Good Luck sob.... ^_^

Cara Membuat Buku Tamu Tersembunyi Di Blogger

Cara Membuat Buku Tamu Tersembunyi Di Blogger- Kali ini saya akan menuliskan bagaimana cara membuat buku tamu di blogger, namun pada artikel ini saya akan menuliskan tutorial cara pasang buku tamu Tersembunyi / Hidden.

Buku tamu merupakan salah satu hal yang tidak wajib ada di blog kita, namun buku tamu bisa mempercantik blog kita. Selain itu pengunjung blog kita bisa dengan mudah menyapa kita sebagai admin (atau pengunjung lainnya), walau cuma sebatas kalimat (mampir gan, malam, kunjungi blog saya juga ya, dsb...)

Buku tamu tersembunyi juga baru saya pasang di sidebar blog ini. Setelah niat untuk pasang buku tamu tersembunyi di blog ini akhirnya timbullah niat untuk menuliskan bagaimana cara memasang buku tamu tersembunyi di sidebar blogger.
 Ok ga perlu panjang lebar, langsung saja ke topik utama kita.

 Cara Membuat Buku Tamu Tersembunyi Di Blogger
Pertama-tama silakan buat akun di www.cbox.ws atau di situs penyedia script buku tamu gratis yang teman suka
Klik Sign up dan isi data nya
kalau sudah klik create my cbox
klik publik dan ambil script yang sudah di sediakan (kopi kodenya).
lihat gambar

Sekarang mari kita ke blogger.
Jika belum login silakan login dulu. Jika sudah login silakan klik Rancangan/Design/Tata Letak dan Klik Tambah Gadget/Add Gadget
lalu Pilih html/javascript dan silakan copy dan paste kode di bawah ini

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmXwsVT43jRHNjX26MAUSLZuHMJEB-t6ADwKYJbPnRd-s6QN-LJ_XnYUybgvOXtEUvwRlvv2CVcUThT1QjfVTSBG7sV-Nxa3O0E9cRvGd5RyLsbwK3Lm6ywLXjBDELtvv_7inLoUfc3gA/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

Silakan Paste Kode Buku Tamu yang sudah di kopi tadi Di Sini

<div style="text-align:right">
<a href="http://blog.ahmadrifai.net/2011/06/pasang-buku-tamu-tersembunyi-di-blogger.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Semoga Berhasil :D

Rabu, 30 Mei 2012

Cara Membuat Button/Tombol dengan Link/Url Tujuan

Cara Membuat Button/Tombol dengan Link/Url Tujuan - Cara mudah untuk membuat button/tombol yang berisikan link atau Url tujuan. Jadi jika tombol tersebut diklik, maka akan ngelink ke url lain.




Tutorial membuat Button/tombol berisikan link :
  • Contoh teks berisi link : Klik Di sini
  • Kodenya : <a href="http://wc-sekolah.blogspot.com">Klik Di Sini</a>
Cara merubahnya menjadi tombol yang berisikan link :
  • Contoh tombol yang berisikan link :   
  • Kodenya : <a href="http://wc-sekolah.blogspot.com"target=_blank"><button>Klik Di Sini</button></a>
Keterangan : Warna merah adalah link / url tujuan, warna biru adalah kode untuk membuat button, dan hitam tebal adalah teksnya

Membuat Menu Drop Down dengan Rapi

Membuat Menu Drop Down dengan Rapi - Tau menu drop down? menu yang jika diklik maka akan turun ke bawah. Biasanya dropdown dengan kode biasa hasilnya tidak rapi. Mari kita rapikan. Terus baca Bagaimana Cara Membuat Menu Drop Dow menjadi Rapi.


Kodenya :

<form>
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 300px;" name="menu" size="1">
<option /> Judul Menu Dropdown </option>  
<option value="Alamat Blog Sobat1">Judul dari Link Sobat1</option>  
<option value="Alamat Blog Sobat2">Judul dari Link Sobat2</option> 
<option value="Alamat Blog Sobat3">Judul dari Link Sobat3</option> 
</select></form>

Cara Membuat Sesuatu Menempel Terus di Window Blog

Cara Membuat Sesuatu Menempel Terus di Window Blog - Sesuatu seperti apakah yang saya maksudkan? Sesuatu itu bisa berupa teks, gambar, banner, widget, dan lain-lain. Menempel di bagian mana tepatnya? terserah, bisa di pojok bawah, atas, bahkan tengah-tengah juga bisa ^^ Ceritakan lebih rinci mengenai Cara Membuat Sesuatu itu dong ! Uke ! Coba liat


Cara Membuat Sesuatu Menempel Terus di Window Blog

Sesuatu bisa widget dan sebagainya. Bisa juga dipasangi iklan. Pasti keren kalau menempel terus seperti itu
Cara Membuat Sesuatu agar Menempel Terus di Window Blog :
  • Masuk ke akun blogger
  • Buka Design/Rancangan
  • Di Page Elemen/Elemen Laman, klik add a gadget (tempat terserah, dimana saja bisa)
  • Pilih HTML Javascript, dan masukkan kode ini,
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" >MASUKKAN SESUATU</a>
  • Keterangan : Masukkan Sesuatu bisa = Kode Iklan, Kode Widget, Kode link, tulisan, semuanya boleh 
  • Keterangan : Botton:5px adalah posisi sesuatu dari bawah, sedangkan right:5px artinya, sesuatu itu diletakkan 5px dari kanan. Sesuaikan sesuai hati ^^ mudah kok
WAJIB BACA

Widget Change Font This Blog

Widget Change Font This Blog - adalah widget yang memungkinkan pengunjung untuk mengganti jenis font pada blog tersebut. Jadi hanya butuh beberapa detik saja, font ,atau jenis huruf blog tersebut dengan sekejap berubah. Selain itu, dengan Widget Change Font This Blog, pengunjung selain bisa mengubah jenis font juga bisa mengubah ukuran font atau huruf sesuka hati. Dengan demikian penggunjung akan lebih senang, karena bisa mengganti jenis font sesuak hati. Jenif font memang sangat memengaruhi tulisan, pengunjung yang satu dengan pengunjung yang lain tentunya berbeda selera. Nah, pada postingan kali ini, kita akan belajar membuat, memasang Widget Change Font This Blog, atau Widget untuk mengubah Jenis Font Otomatis pada Blog. Bagaimana caranya ? TKP Gan . . . . .

Cara membuat dan memasang widget Change Font This Blog

  • Masuk ke blogger
  • Buka design / rancangan
  • Pilih Page Elemen /Elemen Laman
  • Add a Gadget / Tambahkan Gadget
  • Pilih HTML /  Javascript ,dan masukkan kode berikut
   <script>
    function go1(){
    if (document.selecter2.select2.options
    [document.selecter2.select2.selectedIndex].value != "none") {
    document.getElementById('main').style.fontSize
    =document.selecter2.select2.options
    [document.selecter2.select2.selectedIndex].value
    }
    }


    function go2(){
    if (document.selecter2.select3.options
    [document.selecter2.select3.selectedIndex].value != "none") {
    document.getElementById('main').style.fontFamily
    =document.selecter2.select3.options
    [document.selecter2.select3.selectedIndex].value
    }
    }
    </script>
    <form id="forma" name="selecter2" method="POST">


    <select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
    <option value="Times New Roman" />Times New Roman
    <option value="Arial" />Arial
    <option selected value="Book Antiqua" />Book Antiqua
    <option value="Bookman Old Style" />Bookman Old Style
    <option value="Century Gothic" />Century Gothic
    <option value="Comic Sans Ms" />Comic Sans Ms
    <option value="Tahoma" />Tahoma


    <option selected value="Trebuchet Ms"//>Trebuchet Ms
    <option value="Verdana" />Verdana
    </select>
    <select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
    <option value="8px" />8
    <option value="9px" />9
    <option value="10px" />10
    <option value="11px" />11
    <option selected value="12px" />12
    <option value="14px" />14
    <option value="16px" />16
    <option value="18px" />18
    </select></form>
    </div>
  •  Simpan
  • Hasilnya seperti ini
          
Baca juga :
  1. Widget Stats dan Widget Popular Post Baru dari Draft Blogger
  2. Widget "Harga Blog Saya"
  3. Widget Toolbar Multifungsi : Wibiya
  4. Widget Kamus
  5. Macam-Macam Widget Dasar Blog

Cara Membuat Musik Autoplay Takbiran

Cara Membuat Musik Autoplay Takbiran - Singkat saja tutorial khusus lebaran dan takbiran kali ini. Cara membuat dan memasang musik autoplay takbiran di blog.

  • Masuk ke blogger
  • Pilih design / rancangan
  • Pilih page elemen / elemen laman
  • Add a gadget / tambahkan gadget
  • Pilih html javascript lalu masukkan kode berikut
<embed allowfullscreen="false" flashvars="file=http://www5.indowebster.com/0158f09dee61cbd37c3cced6d2d2ac49.mp3&amp;frontcolor=0xffffff&amp;backcolor=0x0066ff&amp;lightcolor=0xffffff&amp;logo=http://www.indowebster.com/images/idws.png&amp;autostart=true&amp;usefullscreen=false&amp;showeq=false&amp;volume=150" height="0" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" scale="noborder" src="http://fc02.deviantart.com/fs46/f/2009/223/c/f/takbiran_by_blogclocks.swf?nama=Saya" type="application/x-shockwave-flash" width="0" wmode="\'transparent\'"></embed>

  • Simpan
  • Hasilnya ,jika blog Anda dibuka, secara otomatis musik takbiran akan play ( Autoplay ) gimana Gan ? (^^)

Cara Membuat Back to top dengan Gambar

Dari judulnya mungkin ada yang bingung atau ada yang sudah tau " Cara Membuat Link Menuju ke Komentar ". Contohnya : misal kita klik link tersebut, maka secara otomatis akan scroll ke para komentar dari pengunnjung. Sama seperti halnya " Back to top ". Baca juga : Membuat Back to top simple, tanpa edit kode dan Cara Membuat Back to top dengan Gambar


Contonya : KLIK DI SINI

Nah gimana? Cara membuat Link menuju  komentar seperti ini

<a href="#comments"> GO TO COMMENTS</a>

Ganti tulisan GO TO COMMENTS dengan tulisanmu sendiri juga bisa. Silahkan bisa dicoba

Membuat Link Menuju Komentar dengan Gambar.

Membuat Link Menuju Komentar dengan Gambar. Baca yang kemarin tentang Membuat Link Menuju Komentar. Sekarang tinggal membubuhinya dengan gambar saja. Begini Caran Membuat Link Menuju Komentar dengan Gambar


<a href="#comments"><img src="URL GAMBAR"></a>

Tinggal ganti URL GAMBAR dengan alamat / url ikon atau gambar untuk link menuju komentar tersebut
- Penulis : Damar Saloka Anggoro - Judul : Cara Membuat Link Menuju Komentar dengan Gambar

Buat Avatar Profil Blog Sendiri dengan SP Studio

Ada yang sudah tau apa itu Gravatar ? Gravatar adalah ikon atau avatar yang biasanya digunakan untuk berkomentar pada website ( Wordpress, dll ). Sama halnya seperti blogspot, jika kita berkomentar di website misalnya wordpress, kemudian kita memasukkan email khusus gravatar ,maka komentar kita akan muncul avatarnya. Hmmm . . .  keren kan? Selain itu, gravatar juga menyediakan banyak fasilitas, misalnya bisa satu akun dengan banyak Email, bisa gonta-ganti gambar untuk avatarnya.

Baca juga : Buat Avatar Profil Blog Sendiri dengan SP Studio
Sip, langsung ke tutorial Cara Membuat Gravatar ( Avatar untuk Komentar ) saja


Cara Membuat Gravatar
Masukkan Email, lalu Sign Up
Cara Membuat Gravatar
Pilih username ( untuk login) dan password
Cara Membuat Gravatar
"add a new email" jika ingin menambahkan
email dalam akun gravatar
Cara Membuat Gravatar
klik "add a new image" untuk mulai upload

Cara Membuat Gravatar
Pilih lokasi gambar
Cara Membuat Gravatar
Mulai upload
Cara Membuat Gravatar
Hasil
Cara Membuat Gravatar
pilih "rated G " agar avatar bisa muncul di semua website
Cara Membuat Gravatar
Saat berkomentar, masukkan Email Gravatar tadi
Cara Membuat Gravatar
Hasilnya lumayan kerenlah :D
Demikian tutorial singkat mengenai Cara Membuat Gravatar ( Avatar untuk Komentar ). Selamat mencoba - Penulis : Damar Saloka Anggoro - Judul : Cara Membuat Gravatar ( Avatar untuk Komentar )

Kode warna

KODE WARNA HTML Contoh:Putih =>#ffffff;
#FOF8FF
Aliceblue
#FAEBD7
Antiquewhite
#00FFFF
Aqua
#7FFFD4
Aquamarine
#F0FFFF
Azure
#F5F5DC
Beige
#FFE4C4
Bisque
#000000
Black
#FFEBCD
Blanchedalmond
#0000FF
Blue
#8A2BE2
Blueviolet
#A52A2A
Brown
#DEB887
Burlywood
#5F9EAD
Cadetblue
#7FFF00
Chartreuse
#D2691E
Chocolate
#FF7F50
Coral
#64950
Cornflowerblue
#FFF8DC
Cornsilk
#DC143C
Crimson
#00FFFF
Cyan
#00008B
Darkblue
#008B8B
Darkcyan
#B8860B
Darkgoldenrod
#A9A9A9
Darkgray
#006400
Darkgreen
#8B008B
Darkmagenta
#BDB76B
Darkkhaki
#556B2F
Darkolivegreen
#FF8C00
Darkorange
#9932CC
Darkorchid
#8B0000
Darkred
#E9967A
Darksalmon
#8FBC8B
Darkseagreen
#483D8B
Darkslateblue
#2F4F4F
Darkslategray
#00CED1
Darkturquoise
#9400D3
Darkviolet
#FF1493
Deeppink
#00BFFF
Deepskyblue
#696969
Dimgray
#1E90FF
Dodgerblue
#B22222
Firebrick
#FFFAF0
Floralwhite
#228B22
Forestgreen
#FF00FF
Fuchsia
#DCDCDC
Gainsboro
#F8F8FF
Ghostwhite
#FFD700
Gold
#DAA520
Goldenrod
#808080
Gray
#008000
Green
#ADFF2F
Greenyellow
#F0FFF0
Honeydew
#FF69B4
Hotpink
#CD5C5C
Indianred
#4B0082
Indigo
#FFFFF0
Ivory
#F0E68C
Khaki
#E6E6FA
Lavender
#FFF0F5
Lavenderblush
#7CFC00
Lawngreen
#FFFACD
Lemonchiffon
#ADE8E6
Lightblue
#F08080
Lightcoral
#E0FFFF
Lightcyan
#FAFAD2
Lightgoldenrodyellow
#90EE90
Lightgreen
#D3D3D3
Lightgray
#FFB6C1
Lightpink
#FFA072
Lightsalmon
#20B2AA
Lightseagreen
#87CEFA
Lightskyblue
#778899
Lightslategray
#B0C4DE
Lightsteelblue
#FFFFE0
Lightyellow
#00FF00
Lime
#32CD32
Limegreen
#FAF0E6
Linen
#FF00FF
Magenta
#800000
Maroon
#66CDAA
Mediumaquamarine
#0000CD
Mediumblue
#BA55D3
Mediumorchid
#9370DB
Mediumpurple
#3CB371
Mediumseagreen
#7B68EE
Mediumslateblue
#00FA9A
Mediumspringgreen
#48D1CC
Mediumturquoise
#C71585
Mediumvioletred
#191970
Midnightblue
#F5FFFA
Mintcream
#FFE4E1
Mistyrose
#FFE4E1
Moccasin
#FFDEAD
Navajowhite
#000080
Navy
#FDF5E6
Oldlace
#808000
Olive
#6B8E23
Olivedrab
#FFA500
Orange
#FF100%0
Orangered
#DA70D6
Orchid
#EEE8AA
Palegoldenrod
#98FB98
Palgreen
#AFEEEE
Paleturquoise
#DB7093
Palevioletred
#FFEFD5
Papayawhip
#FFDAB9
Peachpuff
#CD853F
Peru
#FFC0CB
Pink
#DDA0DD
Plum
#B0E0E6
Powderblue
#800080
Purple
#FF0000
Red
#BC8F8F
Rosybrown
#4169E1
Royalblue
#8B4513
Saddlebrown
#FA8072
Salmon
#F4A460
Sandybrown
#2E8B57
Seagreen
#FFF5EE
Seashell
#A0522D
Sienna
#C0C0C0
Silver
#87CEEB
Skyblue
#708090
Slategray
#FFFAFA
Snow
#00FF7F
Springgreen
#4682B4
Steelblue
#D2B48C
Tan
#008080
Teal
#D8BFD8
Thistle
#FF6347
Tomato
#40E0D0
Turquoise
#EE82EE
Violet
#F5DEB3
Wheat
#FFFFFF
White
#F5F5F5
Whitesmoke
#FFFF00
Yellow
#9ACD32
Yellowgreen

Cara Membuat Widget Twitter Conversation

Cara Membuat Widget Twitter Conversation - Anda termasuk blogger yang suka main twitter. Berikut tutorial Membuat Widget Twitter Conversatio



Masuk ke akun twitter Anda
lalu, pilih My Website
Kemudian pilih profil widget
Nah, sekarang sesuaikan kostumisasinya
Jika sudah, klik pada Finish & Grab Code
pada bagian bawah
Terakhir, copy kodenya

Demikian tutorial singkat tentang Cara Membuat Widget Twitter Conversation. Semoga bermanfaat

Senin, 28 Mei 2012

Membuat DropCap/Huruf Besar di Awal Paragraf

Membuat DropCap/Huruf Besar di Awal Paragraf - Taukan apa itu DropCap. Biasa kita pakai di Microsoft Word, atau sering kita lihat di koran. Benar, DropCap adalah huruf besar yang ada pada setiap awal paragraf.


Cara membuatnya :
  • Masuk ke blogger
  • Buka Design/Rancangan
  • Pilih Edit HTML
  • Cari kode ]]></b:skin> (gunakan Ctrl+f)
  • Setelah ketemu, masukkan kode berikut di atas kode ]]></b:skin> tadi,
.awal {
float:left;
color: #000000;
background:white;
line-height:60px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}
Bisa disesuaikan sendiri, warna merah adalah kode warna, bisa diganti, Baca : Kode Warna HTML
  • Simpan template 
Cara menggunakannya :
  • Pada kotak posting, pilih Edit HTML bukan Compose
  • Lalu masukkan kode <span class="awal">huruf awal</span> di awal paragraf
  • Note: Ganti "huruf awal" dengan huruf awal paragraf

Trik Mudah Membuat Subtitle pada blogspot

Trik Mudah Membuat Subtitle pada blogspot - Subtitle adalah title/judul pengawal dari judul utama. Seperti pada postingan ini, terdapat subtitle bukan ?


Baca artikel yang berkaitan dengan judul/title/postingan :
Yuk kita simak tutorialnya, ada 2 cara,
Cara Pertama (Langsung ke halaman posting)
  • Masuk ke blogger
  • Buka New Post/Post Baru
  • Mulai menulis seperti biasa, tapi begini cara membuat subtitle nya,


    • Masukkan kode <subtitle>title pengawal</subtitle>title utama atau title utama<subtitle>title pengawal</subtitle> pada kotak judul


    • Lalu masukkan kode .post h3 subtitle {  display: block!important;  font-size: 18px!important;  font-weight: normal!important;color:#ff3c00;} pada halaman posting EDIT HTML
    • Note: Warna merah bisa disesuaikan. Warna ungu, tulisan h3 adalah kode untuk title post, setiap blog berbeda-beda. Untuk mengetahuinya, buka design>>edit html>>cari kode "title-post" >>di sana akan ada embel-embel apakah h3 atau h2.



    • Lalu, setelah kode tersebut, baru kita tuliskan postinganya
Cara Kedua (Dengan Edit HTML )
  • Masuk ke blogger
  • Buka Design/Rancangan
  • Pilih Edit HTML
  • Cari kode ]]></b:skin> (gunakan Ctrl+F)
  • Lalu masukkan kode .post h3 subtitle {  display: block!important;  font-size: 18px!important;  font-weight: normal!important;color:#ff3c00;} di atas kode ]]></b:skin>
  • Simpan
  • Cara membuatnya tinggal masukkan kode pada kotak judul post, tidak lagi pada kotak postingan
Masukkan kode <subtitle>title pengawal</subtitle>title utama atau title utama<subtitle>title pengawal</subtitle> pada kotak judul

PullQuote : Kutipan untuk Tulisan

PullQuote : Kutipan untuk Tulisan - Pullquote adalah kutipan yang ada pada postingan.. Sama seperti halnya "BlackQuote", hanya saja Pullquote lebih telihat menonjol. Seperti inilah pullquote,


Tutorialnya,
VersiPertama
  • Masuk ke blogger
  • Buka Design/Rancangan
  • PIlih Edit HTML
  • Cari kode ]]></b:skin>
  • Lalu letakkan kode berikut ini di atas kode ]]></b:skin>
.pullquote{padding:10px; float:right; width:200px; margin-top:10px; margin-bottom:10px; margin-left:20px; border-top-width:2px; border-bottom-width:2px; border-top-style:solid; border-bottom-style:solid; border-top-color:#694e1c; border-bottom-color:#694e1c; font-size:16px; text-align:center; line-height:36px; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:normal}
  • Cara memasangnya : kode pada halaman post  <h4 class="pullquote">...Teks Anda Disini...</h4>
  • Save 
  • Hasilnya :
Versi Kedua
  • Masuk ke blogger
  • Buka Design/Rancangan
  • PIlih Edit HTML
  • Cari kode ]]></b:skin>
  • Lalu letakkan kode berikut ini di atas kode ]]></b:skin>
.pullquote_right{ 
width: 190px;
font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0 0 0.4em 15px !important;
padding: 0.6em 5px !important;
background: none !important;
border: 2px solid #ddd;
border-width: 3px 0;
text-align: center;
float: right;
}


.pullquote_left { 
width: 190px;
font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif; 
margin: 0 15px 0.4em 0 !important; 
padding: 0.6em 5px !important; 
background: none !important; 
border: 2px solid #ddd; 
border-width: 3px 0; 
text-align: center; 
float: left; }
  • Cara menuliskan pada halaman posting: Tinggal masukkan seperti ini
<div class="pullquote_right">teks yang ingin dibuat pullquote kanan</div>
atau
 <div class="pullquote_left">teks yang ingin dibuat pullquote kiri</div>
  • Hasilnya : 
 View Demo
Sobat bisa ubah sendiri kodenya, sesuaikan dengan selera Sobat


Baca juga :

Menampilkan Judul Postingan Saja di Homepage

Cara Menampilkan Judul Postingan Saja di Homepage dengan Auto Read More - Wah, banyakya judul yang saya tuliskan. Tapi tak apalah, dari pada judul sedikit tapi pembaca tidak tau maksud dan tujuannya. Setelah berjalan ke sana ke mari, blogwalking ke sana ke mari, saya menemukan hampir semua blog yang saya kunjungi menggunakan Auto Read more, alias fungsi Read more otomatis. Sempat terlintas di pikiran saja, bagaimana men-digg ide posting dari Auto Read More, bukan tutorial "Cara Membuat Read More Otomatis Auto Read More" lagi yang akan saya buat melainkan bagaimana memodifikasinya . . . .
Akhirnya, terlintas ide kecil tapi mungkin bermanfaat bagi Sobat-Sobat sekalian. Yaitu ,


Cara Menampilkan Judul Postingan Saja 
di homepage dengan Auto Read More

Judul panjang tak masalah lah ^_^) . . . masih ingat cara membuat Auto Readmore ?

Baca dulu Gan : Cara Membuat Auto Read More

yuk mari ke ide postingan saya ( tutorial bagi yang sudah pasang AUTO READMORE )
  • Masuk ke blogger
  • Pilih Design/Rancangan
  • Pilih Edit HTML
  • Cari kode noimg , misalnya ketemunya seperti ini
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height =120;
img_thumb_width =120;
</script>
  • Nah, ketemu noimg , terus jadikan nol semua, seperti ini,
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 0;
summary_img = 0;
img_thumb_height =0;
img_thumb_width =0;
</script>
  • Simpan, dan selesai. 
Nah, untuk menghilangkan tulisan "READMORE" :
  • Centang expand Widget template
  • Cari kode <data:post.body/>
  • Nanti akan ada 2 kode tersebut, misalnya kodenya seperti ini
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  • Hapuslah kode biru nya. Sehingga tulisan "READMORE" akan hilang
Untuk menghilangkan ( . . . )
  • Cari saja ... (tiga titik), misal kodenya seperti ini nanti,
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
  • Titil-titik yang warna kuning dihapus
  • Selesai 
Untuk Judul Rata Tengah
  • Cari Kode h3 ,misal 
h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
  • Tambahkan kode text-align:center; dalam kode di atas, seperti ini, 

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color); text-align:center; 
}
  • Simpan 
Untuk menghilangkan tulisan "Diposkan Oleh" , "label", dan "tanggal" silahkan baca

HASILNYA :