Selasa, 26 Juni 2012

Tutorial Membuat Page Peel Effect Di Blog

5 komentar

  • Tutorane - Hoamm, di malam yang sunyi ini :D, ane akan coba berbagi ilmu yang dirunkan oleh master-master blogger terdahulu :D. Apa itu page peel effect? yaitu semacam effect lekukan kertas yang terdapat di pojok kanan atas Blog. Untuk kamu yang ingin memperindah tampilan blognya, kamu bisa mencoba ini, karna tidak bayar kok alias gratis :D.

Berikut Tutorial Membuat Page Peel Effect Di Blog :
  • Klik blogger.com, kemudian login ke akun blogger kamu.
  • Setelah itu klik template>edit html>lanjutkan.
  • Lalu cari kode <head>, tekan Ctrl+F untuk memudahkan pencarian.
  • Copy kode di bawah ini lalu Paste di bawah  <head>
<script type='text/javascript'>var tujuan =&#39;http://www.facebook.com/pages/Ivennuary/201709529863459&#39;</script>
<script src='https://sites.google.com/site/ivennuary/script-ivennuary/page-peel-effect/page_peel_effect.js/' type='text/javascript'/> 

NB : ganti tulisan yang berwarna biru dengan alamat fanspage blog sobat.
  • Kemudian pilih simpan template.
Nah, itulah Tutorial Membuat Page Peel Effect Di Blog dari ane , singkat kan? dari pada bengong mendingan tutorial ini langsung di praktekkan aja sendiri sobat :). Jika ada pertanyaan/kritik/saran jangan malu untuk berkomentar.
Continue reading →

Cara Menambah Dan Merubah Lebar Postingan Blog

22 komentar
Tutorane - Cara Menambah Dan Merubah Lebar Postingan Blog, Postingan ane kali ini tentang menambah/mengurang lebar posting, ukuran header, Outer dan lain-lain. Ane sudah mencobakan tutorial ini pada blog berita dan informasi ane dan tutorial ini 100% berhasil, jadi untuk sobat yang ingin mencoba atau sekedar menambah ilmu mari langsung saja akan ane share Cara Menambah Dan Merubah Lebar Postingan Blog :


 

Berikut penjelasan dari gambar diatas :

  • Outer-wrapper   - Maksudnya  adalah lebar/ukuran template secara keseluruhan dimana didalam outer-wrapper ini terdapat bagian header, posting, sidebar dan footer. Pada template kamu ditandai dengan kode CSS #outer-wrapper,#outer-wrap atau juga bisa #outer.
  • Header-wrapper - Pada template kamu ditandai dengan kode CSS #header-wrapper, #header-wrap atau #header. Untuk yang templatenya memiliki 2 header atau lebih maka kode CSS nya akan ada 2 atau sesuai header yang ada pada template kamu. Misalnya terdapat 2 header dalam template kamu, maka kode CSS nya juga ada 2 yaitu #header dan #header2. Yang membedakannya hanya float right dan float left. Ukuran lebar menu navigasi yang ada dibawah atau diatas header biasanya jsama
  • Content-wrapper - Ditandai dengan kode CSS #content-wrapper, #content-wrap atau #content pada template kamu, jika tidak terdapat kode CSS ini, berarti berarti untuk area posting dan sidebar pengaturan CSS nya ada pada bagian /* -----   MAIN   -----  */.
  • Main-wrapper - Ditandai dengan kode CSS #main-wrapper, #main-wrap atau #main. Area posting berada pada main-wrapper ini.
  • Sidebar-wrapper - Ditandai dengan kode CSS #sidebar-wrapper, #sidebar-wrap atau #sidebar.  Terkadang di beberapa template tertentu, terdapat kode yang seperti ini lebih dari 1, jadi sah-sah saja jika didalam template kamu  ada beberapa kode sidebar yang ditulis secara urut seperti #sidebar-wrapper, #sidebar1-wrapper atau #sidebar1 dan #sidebar2.
  • Footer-wrapper - Ditandai dengan kode CSS #footer-wrapper atau biasanya juga terdapat dibawah kode /* -----Footer Content----- */ atau /* -----Footer Wrapper----- */. 
 Ok, nah itulah penjelasan singkat nya dari ane, sekarang kita masuk ke bagian mengubah Menambah Lebar Header, Posting, Sidebar dan Footer. 
 
Untuk mengubah Menambah Lebar Header, Posting, Sidebar dan Footer caranya tidaklah sulit, kamu tinggal pengaturan stylish CSS atau declaration yang ada didalam elemen wrapper yaitu pada bagian width atau height. Contohnya untuk bagian header, posting dan sidebar

/* Header
----------------------------------------------- */
.idheadpic{width:100%;margin:0 auto;padding:0px 0px 0px 0px;}
#idhead {
  background:#fff;filter:alpha(opacity=90);opacity:0.9;
  width:990px;padding:5px 0 5px 0;
  margin:0 auto;
  border:0px solid $bordercolor;
  }
#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}
#header {background:transparant;
  float:left;
  width: 179px;
  margin-left: 10px; text-align: left;
  color:#f2f2f2;
}
#header2 {float:right;
  margin-right:9px;margin-top:4px;padding-bottom:4;
  width:730px;text-align: right;
  background:transparant; height:90px;
}
Untuk kode diatas, terdapat 2 header, Lebar total bagian header ini adalah 990px, dimana terdiri dari header-left (posisinya di  heder: float-left) dengan lebar 179px dan header-right dengan lebar 730px. Jika kita jumlahkan lebar header1 + header2 + margin + padding = lebar total header. Kemudian cara membaca margin dan padding prinsipnya sama yaitu dari atas dan berputar searah jarum jam. Misalkan padding: 6px 8px 6px 6px;  maka yang dimaksud adalah padding-top 6px, padding-right 8px, padding-bottom 6px dan padding-left 6px. Padding adalah jarak antara teks atau image ke tepi batas elemen wrapper. Sedangkan Margin biasanya jarak antara 2 wrapper misalnya antara area posting dan sidebar dipisahkan oleh margin

/* Main containers */
#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 630px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;    
}
#sidebar-wrapper {
width: 300px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
/* Post */
.post{
width: 600px;
padding: 15px;
border: 1px solid #E0E0DE;
background: #FFF;
font-family: Helvetica, sans-serif;
margin-bottom: 20px;
}

Perhatikan susunan CSS diatas karena sudah merangkum bagian outer-wrapper, main-wrapper (posting) dan sidebar-wrapper. Pada outer-wrapper disebutkan lebarnya 950px, sedangkan pada main-wrapper dan sidebar-wrapper lebarnya masing-masing adalah 630px dan 300px. Kalau dijumlahkan jumlah keduanya adalah 930px. Sisa 20px dapat disimpulkan adalah margin kiri main-wrapper+margin antara main-wrapper dan sidebar-wrapper+margin kanan sidebar wrapper, sehingga jumlahnya 20px dan total menjadi 950px. Pada susunan CSS diatas disetting auto sehingga kita tidak mengetahui persis berapa nilai tiap margin namun yang pasti ada 3 jarak margin yang diperhitungkan. Sambil membaca penjelasan ini lihat lagi gambar ilustrasi elemen wrapper diatas ya biar tidak bingung. Kemudian perhatikan lagi bagian posting (post). Pada kode CSS nilai lebarnya 600px, ini sudah merupakan lebar teks atau artikel yang kita tulis. Padding 15px berlaku untuk top, right, bottom dan left. Sehingga jumlah post width 600px + padding left 15px + padding right 15px = lebar main-wrapper 630px.
 Itulah penjelasan singkat dan padat dari ane tentang Cara Menambah Dan Merubah Lebar Postingan Blog. Sekian dulu ya, udah malam nih, ane juga mau tidur :D wkwk.
Continue reading →
Sabtu, 09 Juni 2012

Cara Mendapatkan Uang Dengan Menulis Artikel

8 komentar

Tutorane - postingan kali ini ane tujukan bagi kamu yang gemar menulis artikel, kenapa? ya sesuai judulnya, maka kita akan mendapatkan uang dengan menulis artikel. Intinya semakin banyak kamu menulis artikel semakin banyak pula uang yang dapat kamu hasilkan dan shvoong bukanlah SCAM. Untuk mengikuti program ini kamu harus mempunyai akun paypal unutk wadah pengiriman uangnya, karena Shvoong tidak melayani pengiriman melalui bank.
  Ok, berikut cara mendaftar di svhongg :
  • Sebelum mendaftar di shvoong, pastikan kamu telah mempunyai akun paypal, jika belum kamu dapat mendaftar dengan klik DISINI
  • Setelah itu, daftarkan diri kamu di shvoong, dengan mengklik DISINI
  • Isi datanya dengan benar
  • Setelah selesai buka email kamu, dan klik verifikasi linbk yang telah diberikan ke email kamu.
  • Setelah langkah-langkah diatas sudah kamu lakukan dengan benar, maka secara otomatis kamu telah resmi menjadi penulis di Shvoong.
  •  lengkapi biodata di profil akun shvoong kamu.
  • Ok, setelah itu terserah kamu, apakah kamu mau menulis artikel sekarang atau bagaimana :D
Yap, itulah postingan pendek dari ane kali ini. jika ada pertanyaan/saran dan kritik jangan malu untuk berkomentar.
Continue reading →