Home » Semua post berkategori tips ngeblog
Showing posts with label tips ngeblog. Show all posts
Showing posts with label tips ngeblog. Show all posts

CARA MEMPERLEBAR HALAMAN TEMPLATE

Template yang di sediakan oleh blogger terlalu sempit atau kurang lebar. Sobat ingin merubah template sobat hingga menjadi lebih lebar? Bagaimana caranya..? Mungkin ada beberapa cara untuk merubah halaman template. Dan saya biasa menggunakan cara sebagai berikut,yang saya anggap paling sederhana.

Dan tidak perlu panjang lebar lagi kita mulai saja caranya.
Yang perlu kita ketahui beberapa bagian dari template yang nantinya kita
bisa ubah ukurannya:


CARA MEMPERLEBAR HALAMAN TEMPLATE

Outer-wreper : Lebar template secara keseluruhan
Main-wrapper: Bagian dimana kita biasa posting artikel
Sedebar-wrapper : biasanya terletak di kanan atau kiri dari main wraper
Header- wrapper: Bagian paling atas dari template
Footer-wrapper : Dasar atau berada paling bawah

Sekarang masuk ke blog sobat, klik tata letak kemudian edit html.Pada edit
html sobat tidak perlu kasih centang pada Expand template widget.
Kemudian cari code sebagai berikut:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Sobat bisa ganti ukuran pada teks yang berwarna merah. Sobat bisa ganti dengan ukuran berapa saja,biar keliatan rapi sesuaikan ukurannya. Misal :

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 500px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 400px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Jika lebar outer-wrapper: 950px maka jarak main-wraper dan sedebar-wraper harus di sesuai:

Main-wrapper:500px
Sedebar-wrapper: 400px
Sedang sisanya yang 50px merupakan jarak agar sedebar dan postingan blog tidak berhimpitan.
Setelah itu jangan lupa sesuaikan juga lebar header-wraper dan footer-wraper sama dengan outer-wraper

#header-wraper{
width: 950px
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

Yang perlu di rubah teks yang berwana merah. Jika sudah klik pratinjau atau preview,kalau dirasa sudah cocok baru di save.
Selamat mencoba...!!!
Ian Kelana blogging, tips ngeblog, trik blogging

Cara Mengganti "Older Posts" Dengan Angka

Navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" Mengganti "Older Posts" Dengan Angka seperti gambar di bawah ini




1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->


Kalau sudah silahkan dilihat hasilnya.
Ian Kelana blogging, tips ngeblog, trik blogging

Cara Sederhana Membuat menu DropDown

Salah satu cara untuk meringkas dan menghemat tempat pada halaman template terutama pada bagian sidebar, yang biasa digunakan untuk meletakkan berbagai link atau sejenisnya. Kadang kita perlu meringkas agar tidak memenuhi halaman pada sidebar, bisa menggunakan sebuah menu,yang di sini kita bisa memanfaatkan menu Drop Down. Meskipun pembuatannya cukup sederhana namun bagi para blogger ini sangat bermanfaat.

Cara Sederhana Membuat menu DropDown

  • Untuk membuatnya login dulu ke blog sobat.
  • Pilih tata letak.
  • Tambahkan Gadget
  • Pilih HTML/JAVAScrip
  • Masukkan kode di bawah ini pada bagian konten

    <select name="menu"oncange="window.open(this.option[this.selectedIndex].value;">
    <option value=0 selected>JUDUL MENU</option>
    <option value="http://URL/" >Judul artikel 1</option>
    <option value="http://URL/" >Judul artikel 2</option>
    <option value="http://URL/" >Judul artikel 3</option>
    </select>
  • Ganti yang warna merah dengan alamat link sobat.
  • Klik simpan

Lihat perubahan pada blog sobat,jika benar hasilnya akan terlihat seperti di bawah ini:

Ian Kelana blogging, tips ngeblog, trik blogging

Cara Membuat Teks dan Gambar Bergerak di Blog

Sobat yang berminat memasang text berjalan atau marquee pada blognya. Saya ingin berbagi sama sobat yg belum tahu saja.Bagi yang sudah tahu silahkan bernostalgia. Text berjalan ini dalam bahasa HTML biasa disebut dengan marquee atau bahasa jawanya Markun. He..he..! "maaf pak markun bercanda." Bahasa apaan tu..? yang jelas Ingrislah.


Cara Membuat Teks dan Gambar Bergerak di Blog

Tag yang kita gunakan adalah:

<marquee>text yang kita inginkan</marquee>

text yang kita inginkanIni standart marquee agar berjalan dari kanan ke kiri.Kemudian kita bisa mengembangkannya dengan menambah beberapa astribut:

BGCOLOR=warna
DIRECTION=Mengatur arah gerakan (left,right,up.down)
BEHAVIOR=karakter gerakan (scrol,slide,alternate)
scrol(teks bergerak berputar)
slide(teks bergerak sekali lalu berhenti)
alternate(teks bergerak dari kiri ke kanan lalu balik)
TETLE=pesan muncul saat mouse berada di atas teks
SCROLLAMOUNT=mengatur kecepatan gerakan
SCROLLDELAY=mengatur tenggang waktu
LOOP=mengatur jumlah

Sekarang langsung saja kita pratekkan:

Dari arah kiri ke kanan
<marquee direction="right" >dari kiri ke kanan</marquee>
dari kiri kekanan

Arah bolak-balik
<marquee behavior="alternate" >arah bolak balik</marquee>
arah bolak-balik

Dari kanan ke kiri dengan kecepatan "15"
<marquee direction="right" scrollamount="15" >dari kanan ke kiri dengan kecepatan 15</marquee>
dari kanan kekiri

Arahkan mouse text berhenti
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">arahkan mouse teks berhenti</marquee>
arahkan mouse text berhenti

Jika ingin turun atau naik tinggal ganti direction="down" atau "up"

<marquee direction="down" width="100%" height="100">dari atas ke bawah</marquee>

dari atas ke bawah

Dengan latar belakang warna
<marquee width="50%" bgcolor="orange">dari kanan ke kiri</marquee>


dari kanan ke kiri


<div align="left"> <span style="font- family:georgia;"<>marquee scrollamount="3" behavior="alternate" width="70%" bgcolor="red">dengan warna</marquee></span></div>


dengan warna


Dengan gambar atau foto
<marquee scrollamount="3" scrolldelay="10" width="50%" height="10%"><img src="http://lh4.googleusercontent.com/-pCWm83PZ9pY/AAAAAAAAAAI/AAAAAAAAAAA/DympfVww6xs/s96-c/photo.jpg" /></div></marquee>




Silahkan dicoba
Ian Kelana blogging, tips ngeblog, trik blogging, widget blog

Tips dan Trik Meningkatkan Traffic Blog Lewat Situs Social Bookmarking

Sobat pasti pernah bookmarks situs kesayangan di browser milik sobat, ini agar supaya mudah sewaktu-waktu kembali ke situs atau website tersebut. Hampir semua browser mempunyai fasilitas boookmarks tersebut, tapi sayangnya kita tidak dapat membuka bookmark tersebut di lain komputer. Inilah gunanya situs social bookmarking, kita bisa menandai atau menyimpan situs yang kita suka dan membukanya kembali melalui komputer lain, yang tentunya telah terhubung dengan internet.


Tips dan Trik Meningkatkan Traffic Blog Lewat Situs Social Bookmarking


Biasanya situs social bookmarking ini digunakan untuk meningkatkan traffic bagi pemilik blog dengan cara submit artikel yang mereka anggap penting, kemudian menambah tag yang berupa link atau tautan. Karena situs bookmarking ini tidak ada bedanya seperti situs jejaring sosial yang lain, maka Kita bisa share atau berbagi dengan pengguna yang lainnya.

Sebenarnya banyak situs social bookmarking yang dapat kita temukan di internet. Di sini saya ingin share pada sobat, situs social bookmarking apa saja yang sering digunakan untuk menyimpan situs kesayangan dan submit blog.
1. http://www.twitter.com/
2. http://digg.com/
3. http://stumbleupon.com/
4. http://reddit.com/
5. http://buzzfeed.com/
6. Http://delicious.com/
7. http://tweetmeme.com/
8. http://fark.com/
9. http://slashdot.org/
10. http://friendfeed.com/
11. http://clipmarks.com/
12. http://nesvine.com/
13. http://diigo.com/
14. http://dzone.com/
15. http://chime.in/

Semoga bermanfaat !
Ian Kelana blogging, meningkatkan traffik, tips ngeblog, trik blogging

Cara Membuat Menu Vertikal di Blog

Ian Kelana blogging, tips ngeblog, trik blogging

Cara Menyembunyikan Navbar (Navigation Bar)

Fsilitas yang dimiliki oleh Blogger/blogspot salah satunyu adalah Navbar, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.




 
Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena itu, kadang para blogger Menyembunyikan Navbar tersebut. Pertanyaannya adalah: Apa tidak melanggar Term of Service (TOS) dari Blogger.com?

Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga mendapat teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga tidak ada aturan yang cukup detail tentang hal ini.

Nah, bagaimana menghilangkan Navigation Bar?
Ada beberapa penyedia template yang memang sudah tidak ada NavBar-nya. Namun bagi kamu yang memakai template yang masih ada NavBarnya dan ingin menghilangkannya maka inilah caranya.

1. Kamu harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut ke dalam tag head

#navbar-iframe {
display: none !important;
}


contohnya sebagai berikut :
-----------------------------------------------
Blogger Template Style
Name: Slenea obok-obok
Designer: no name
URL: View blog
Date: 23 Feb 2013
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Kemudian simpan.

Selamat Mencoba.....!!
Ian Kelana blogging, tips ngeblog, trik blogging, widget blog

Cara Menambah Efek Salju Pada Blog

Membuat efek salju merupakan salah satu langkah yang bisa kita lakukan untuk menghias dan mempercantik blog kita. Kita juga bisa mempercantik blog kita dengan mengubah kursor penunjuk di blog dengan penunjuk yang unik dan beda dengan yang lain.. Oke, langsung saja berikut Cara Membuat Efek Salju di Blog kita:
  • Login pada blog sobat.
  • Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
  • Copy code script dibawah dan paste di kotak tadi , untuk judulnya kosongkan saja.
<script src="http://ayriyzone.googlecode.com/files/salju.js"></script>
  • Simpan dan lihat hasilnya.
Nah, itulah psotingan mengenai cara membuat efek salju di blog. Semoga bermanfaat.

Referensi: http://drakehtc.blogspot.com/2012/06/tips-trik-cara-membuat-efek-salju-pada.html
Ian Kelana blogging, tips ngeblog, trik blogging, widget blog
Subscribe to: Posts (Atom)