Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Cara Mengatur Jarak Antar Halaman Posting di Blog


Jarak antar halaman posting blog yang terlalu jauh kadang membuat tampilan blog sobat tidak menarik. Nah.... kali ini saya akan berbagi cara untuk mengatur jarak antar posting blog tersebut.

Cara mengatur jarak anatara halaman blog cukup mudah. Berikut langkah-langkahnya :

  • Masuk/login ke bloger
  • Pilih Rancangan -> Edit/HTML
  • Cari Kode <Variable name="date.space" description="Date Space" type="length"
contoh :

<Variable name="date.space" description="Date Space" type="length" default="30px"  value="65px"/>
   <Variable name="date.position" description="Date Float" type="string" default="static"  value="absolute"/>
  • Silahkan ganti tulisan yang berwarna merah sesuai dengan jarak widget yang sobat inginkan.
  • Klik simpan template untuk menyimpan perubahan.

Selamat Mencoba...

Cara Mengatur Jarak Gadget di Blog


Pada kesempatan kali ini saya akan share cara mengubah jarak antar widget, yang mungkin sebagian dari sobat ForeXeason ada yang belum tau caranya. Pengaturan jarak widget yang dimaksud di sini adalah pengaturan posisi widget yang berada di sidebar (samping) halaman posting blog. Ok gak usah panjang lebar lagi penjelasannya, kita langsung ke TKP he.....he....he...

Cara mengatur jarak widget secara default dalam blog dapat dilakukan dengan langkah-langkah sebagai berikut :

  • Sign in di blog
  • Klik Rancangan
  • Klik Edit HTML
  • Klik Download template lengkap yang berada bagian kanan atas template blog anda untuk mengantisipasi kesalahan yang tidak diinginkan
  • Cari kode .main-inner .widget {
contoh :

.main-inner .widget {
background-color: $(widget.background.color);
border: 1px solid $(widget.border.color);
padding: 0 $(widget.padding.side) 15px;
margin: 20px -16px;
  • Silahkan ganti tulisan yang berwarna merah sesuai dengan jarak widget yang sobat inginkan.
  • Klik simpan template untuk menyimpan perubahan.
Semoga berhasil...

Cara Pasang Link Sumber Secara Otomatis Saat di Copas

Maraknya tindak copy paste akhir-akhir ini sering kali membuat para pembuat artikel yang asli merasa frustasi karena artikel yang mereka buat tidak dihargai, memang benar di negara ini tidak ada undang-undang yang melarang copy paste suatu artikel. Banyak cara untuk meminimalisis aksi para copaser, diantaranya adalah memasang script anti copy paste. Kekurangan dari script ini adalah jika user pengunjung blog menonaktifkan fungsi java script maka script ini tidak berguna lagi. Selain itu cara ini juga tidak efisien untuk seseorang yang ingin copas artikel kita karena alasan pendidikan. Nah untuk itu kali ini Sata akan bagikan tips buat sobat, cara memasang otomatis link sumber. Dengan cara ini setiap ada orang yang copas artikel sobat maka secara otomatis artikel tersebut akan mencantumkan link sumber yang langsung menuju ke blog sobat. Berikut caranya:


  1. Pastikan anda sudah masuk pada halaman blogspot anda pilih menu "Template"
  2. Akan muncul halaman berikut dan klik pada tombol Edit HTML
  3. Centang Expand Template Widget.
  4. Sekarang Cari kode </body> (gunakan tombol CTRL + F untuk memudahkan pencarian kode).
  5. Setelah ketemu Copas dan letakan kode berikut diatas kode </body> 


<script type="text/javascript"> if(document.location.protocol=='http:'){ var Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Sumber :"}; (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='https://sites.google.com/site/bondethblogspotcom/achmadheadline/sumber-otomatis.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); } </script>

Cara Membuat Widget Facebook Fan Page Melayang


Tutorial kali ini Saya bahas tentang cara memasang widget facebook fan page (like box), Tentunya tidak akan membuat pengunjung blog sobat merasa tidak nyaman, karena script dibawah ini sudah di lengkapi dengan tombol close, jadi bila pengunjung ingin menghilangkan box tersebut, tinggal klik tombol close saja.



Ok langsung saja langkah-langkahnya.


1. Langkah awal, login ke account blogger sobat.
2. Pada bagian Dasboard pilih tab Rancangan.
3. Tambah Widget atau Add Gadget, kemudian pilih HTML/Javascript
4. Setelah itu, Copy Paste script dibawah ini.


<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
      position:fixed !important;
      position:absolute; /* IE6 */
      bottom:-1000px;
      right:60%;
      margin:0px 0px 0px -182px;
      width:310px;
      height:auto;
      padding:16px;
       -webkit-box-shadow: 0px 0px 7px #222;
      -moz-box-shadow: 0px 0px 7px #222;
      box-shadow: 0px 0px 7px #222;  background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
      color:#111;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;}
    #kotak-facebook a.close {
      position:absolute;
      top:-10px;
      right:-10px;
      background:#333;
      font:bold 16px Arial,Sans-Serif;
      text-decoration:none;
      line-height:22px;
      width:22px;
      text-align:center;
      color:#fff;
      border:2px solid #fff;
      -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      box-shadow:0px 1px 2px rgba(0,0,0,0.4);
      -webkit-border-radius:10px;
      -moz-border-radius:10px;
      border-radius:10px;
      cursor:pointer;
    }
</style>
    <script type='text/javascript'>
    $(window).bind("load", function() {
         // animasikan nilai top saat halaman telah selesai dimuat
         $('#kotak-facebook').animate({bottom:"50px"}, 1000);
        // hilangkan kotak pesan saat tombol (x) di klik
         $('a.close').click(function() {
             $(this).parent().fadeOut();
         return false;
         });
    });
    </script>
    <div id='kotak-facebook'>
<!-- Mulai --!>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fforexeason&amp;send=false&amp;layout=box_count&amp;width=300&amp;show_faces=true&amp;font=lucida+grande&amp;colorscheme=light&amp;action=like&amp;height=200" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:190px;" allowtransparency="true"></iframe>
<!-- Selesai --!>
<a class='close' href='#'>&times;</a>
<p style=" float:right;  margin-right:35px;  font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://forexeason.blogspot.com">ForeXeasoN</a> </p>
    </div>

5. Ganti tulisan yang berwarna merah dengan alamat facebook fan page sobat
6. save dan lihat hasilnya

Membuat Ads Popup


Langkah 1
Login ke Blogger

Langkah 2
Masuk ke "Tata Letak - Elemen Laman"

Langkah 3
Klik "Tambah Gadget Baru" dengan tipe "HTML/JavaScript"

Langkah 4
Masukan kode dibawah ini pada bagian konten (tanpa judul gadget):
Kode CSS (cascading style sheet)

<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;
}
</style>
<script src="http://henscripts.googlecode.com/svn/trunk/popup/jspopupv1.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><button>Tutup</button></a></div>
<!-- Kode Iklan -->

<font face="arial,sans-serif" color="#83878c" style="line-height: 8px; font-size: 9px; text-decoration:underline;"><a href="http://forexeason.blogspot.com" target="_blank">Widget by ForeXeasoN</a>
</div>


Perhatikan kode CSS

  • Ubah nilai 350 untuk mengatur lebar wadah
  • ubah nilai FFFFFF untuk mengubah warna latar dari wadah ads popup;
  • ubah nilai 1px solid #333333 untuk mengatur garis pinggir, jika tidak tidak memerlukan garis pinggir ubah 1px menjadi 0px atau ubah "solid" menjadi "none" (tanpa tanda petik)
  • Untuk mengetahui kode-kode warna HTML silahkan klik disini.
  • var persistclose=0, nilai 0 berarti ads popup akan selalu muncul walau diklik tombol "Tutup" pada saat pengunjung membuka halaman lain, nilai 1 berarti ads popup hanya akan muncul satu kali sampai pengunjung meng-klik tombol "Tutup" dan ads popup tidak akan muncul lagi walaupun pengunjung membuka halaman lain sampai browser ditutup
  • var startX = 20 dan var startY = 20, nilai 20 adalah jarak x dan y antara ads popup dengan sisi browser dengan satuan pixel, ubahlah nilai 20 untuk mengatur jaraknya;
  • var verticalpos="fromtop" untuk mengatur dari mana ads popup muncul, jika "fromtop" berarti ads popup akan muncul dari atas dan selalu diposisi atas browser, jika di set "frombottom" berarti ads popup akan muncul dari bawah dan akan selalu diposisi bawah browser.
  • Gantilah kode <!-- Kode Iklan -->  dengan kode iklan milik anda.

Daftar Kode Warna HTML


Daftar Kode warna html yang kami punya memang gak terlalu komplit, tapi lumayan untuk uji coba mengubah warna blog, Khususnya buat saya sendiri. Memasukannya juga cukup gampang sobat tinggal lihat warna apa dan nanti masukan kode tersebut. Biar gampang tinggal kopas sajah kodenya.
Berikut Daftar kode warna html yang bisa di terapkan, kita hanya tinggal pilih sajah warna apa yang sekiranya cocok sama hati lalu ambil kodenya dan percantiklah blog anda.


Daftar Kode Warna HTML




#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF6699
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3366
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000
#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000
#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#9900FF
#9900CC
#990099
#990066
#990033
#990000
#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#6666FF
#6666CC
#666699
#666666
#666633
#666600
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#6600FF
#6600CC
#660099
#660066
#660033
#660000
#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#3300FF
#3300CC
#330099
#330066
#330033
#330000
#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#00CCFF
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999
#009966
#009933
#009900
#0066FF
#0066CC
#006699
#006666
#006633
#006600
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF
#0000CC
#000099
#000066
#000033
#000000

Color Hex Codes


Buat yang bingung mencari Color Hex Code, di sini solusinya, silahkan pilih warna yang anda suka.


Hex CodeColor
0xFFFFFF
0xFFFFCC
0xFFFF99
0xFFFF66
0xFFFF33
0xFFFF00
0xFFCCFF
0xFFCCCC
0xFFCC99
0xFFCC66
0xFFCC33
0xFFCC00
0xFF99FF
0xFF99CC
0xFF9999
0xFF9966
0xFF9933
0xFF9900
0xFF66FF
0xFF66CC
0xFF6699
0xFF6666
0xFF6633
0xFF6600
0xFF33FF
0xFF33CC
0xFF3399
0xFF3366
0xFF3333
0xFF3300
0xFF00FF
0xFF00CC
0xFF0099
0xFF0066
0xFF0033
0xFF0000

Hex CodeColor
0x66FFFF
0x66FFCC
0x66FF99
0x66FF66
0x66FF33
0x66FF00
0x66CCFF
0x66CCCC
0x66CC99
0x66CC66
0x66CC33
0x66CC00
0x6699FF
0x6699CC
0x669999
0x669966
0x669933
0x669900
0x6666FF
0x6666CC
0x666699
0x666666
0x666633
0x666600
0x6633FF
0x6633CC
0x663399
0x663366
0x663333
0x663300
0x6600FF
0x6600CC
0x660099
0x660066
0x660033
0x660000
Hex CodeColor
0xCCFFFF
0xCCFFCC
0xCCFF99
0xCCFF66
0xCCFF33
0xCCFF00
0xCCCCFF
0xCCCCCC
0xCCCC99
0xCCCC66
0xCCCC33
0xCCCC00
0xCC99FF
0xCC99CC
0xCC9999
0xCC9966
0xCC9933
0xCC9900
0xCC66FF
0xCC66CC
0xCC6699
0xCC6666
0xCC6633
0xCC6600
0xCC33FF
0xCC33CC
0xCC3399
0xCC3366
0xCC3333
0xCC3300
0xCC00FF
0xCC00CC
0xCC0099
0xCC0066
0xCC0033
0xCC0000

Hex CodeColor
0x33FFFF
0x33FFCC
0x33FF99
0x33FF66
0x33FF33
0x33FF00
0x33CCFF
0x33CCCC
0x33CC99
0x33CC66
0x33CC33
0x33CC00
0x3399FF
0x3399CC
0x339999
0x339966
0x339933
0x339900
0x3366FF
0x3366CC
0x336699
0x336666
0x336633
0x336600
0x3333FF
0x3333CC
0x333399
0x333366
0x333333
0x333300
0x3300FF
0x3300CC
0x330099
0x330066
0x330033
0x330000
Hex CodeColor
0x99FFFF
0x99FFCC
0x99FF99
0x99FF66
0x99FF33
0x99FF00
0x99CCFF
0x99CCCC
0x99CC99
0x99CC66
0x99CC33
0x99CC00
0x9999FF
0x9999CC
0x999999
0x999966
0x999933
0x999900
0x9966FF
0x9966CC
0x996699
0x996666
0x996633
0x996600
0x9933FF
0x9933CC
0x993399
0x993366
0x993333
0x993300
0x9900FF
0x9900CC
0x990099
0x990066
0x990033
0x990000

Hex CodeColor
0x00FFFF
0x00FFCC
0x00FF99
0x00FF66
0x00FF33
0x00FF00
0x00CCFF
0x00CCCC
0x00CC99
0x00CC66
0x00CC33
0x00CC00
0x0099FF
0x0099CC
0x009999
0x009966
0x009933
0x009900
0x0066FF
0x0066CC
0x006699
0x006666
0x006633
0x006600
0x0033FF
0x0033CC
0x003399
0x003366
0x003333
0x003300
0x0000FF
0x0000CC
0x000099
0x000066
0x000033
0x000000