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