@FreeDomain @Review @Facebook
Gratis artikel Bang Del, daftar sekarang!
Posted by Bang Del

Blog yang Bagus Gimana Sih?

Apakah blog yang bagus menurut saya sudah bagus menurut orang lain. Apakah blog yang bagus menurut orang lain sudah bagus menurut saya. Jawaban untuk kedua pertanyaan di atas adalah belum tentu. Terkadang bagus menurut saya ternyata jelek di mata pembaca dan terkadang bagus menurut pembaca ternyata tidak bagus menurut saya. Menurut kamu blog yang bagus gimana sih?

blog yang bagus
Posted by Bang Del

Cara Promosi Blog yang Baik

Ingin blog anda terkenal? Temukan jawabannya di sini "Cara Promosi Blog yang Baik". Hampir semua pemilik blog ingin blognya menjadi terkenal dan ramai dikunjungi dengan trafik yang tinggi pula. Saya pun begitu, sama seperti anda :) Posting tentang cara promosi blog ini adalah berdasarkan pengalaman pribadi. Silahkan dibaca-baca dulu dan ambil poin-poin yang cocok buat blog anda. Semoga bermanfaat.

promosi blog
Posted by Bang Del

Jenis-Jenis Bisnis Online

Sudah sering mendengar tentang Bisnis Online ya. Saya akan memberikan sedikit ulasan tentang bisnis online dan jenis-jenis bisnis online. Barangkali anda tertarik untuk memonetisasi blog. Hitung-hitung bisa dapat dollar dari internet. Artikel ini mengulas beberapa jenis bisnis online yang sedang marak dan digandrungi para blogger.

bisnis online

Pasang Slider Zinmag Primus Di Blogger

Zimag Primus template menerapkan slider di blognya. Banyak saya temui blog yang sudah memakai animasi image slider ini. Blog akan semakin cantik dan lebih hidup dengan tampilan silih berganti dari text dan image yang disetting pada slider. Penempatan animasi slider zinmag primus ini biasanya diletakkan tepat di bawah header. Namun, sobat pun bisa menyesuaikannya pada desain template blog masing-masing. Saat ini saya telah memakainya di blog Bang Del dan memilih menampilkan beberapa artikel yang saya anggap layak untuk dibaca pengunjung.

Gambarnya kira-kira seperti ini :

Slider Zinmag Primus
Jika sobat tertarik untuk memasang Slider Zinmag Primus di blog masing-masing, maka bersiaplah dipusingkan dengan begitu banyaknya kode CSS dan setting gambar, link serta setting teks yang lumayan membingungkan . Kalau sudah terbisa sih, ya ga papa. Namun patut dan layak untuk dicoba. Buat o-om.com, terimakasih atas tutorialnya di memasang slider ala Zinmag Primus Template. Oke, langsung saja ke prakteknya.

Langkah Pertama :

Login ke blogger dengan id sobat >> Klik Tata Letak >> Pilih Edit HTML >> Backup dulu template sobat dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>
/* Slider Code
-------------------- */
#slider {
background:url(http://i33.tinypic.com/2l8hgi.jpg);
height: 229px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 900px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 18px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #DF0101;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #fff;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
text-align: justify;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 600px;
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: trebuchet;
top: 100px;
right: 50px;
color: #0B610B;
padding: 3px 12px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}


Langkah Kedua

Jangan kemana-mana dulu ya, karena kita masih dalam posisi Edit HTML. Sekarang letakkan kode berikut di bawah kode ]]></b:skin>.
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>


Langkah Ketiga

Kita akan meletakkan id untuk slider zinmag primus tepat di bawah header blog sobat. Nah, sobat pun bisa menyesuaikan penempatan id ini. Jadi cocokkan saja dengan template sobat. Apalagi template blogger yang sudah banyak dimodifikasi. Oke langsung saja. Silahkan cari kode :

<div id='header-wrapper'>
..........
.........
</b:section>


Letakkan kode berikut tepat di bawah kode tadi :
<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> Posted by Bang Del </span>
<h2><a href='http://bangdel.blogspot.com/2009/07/cara-membuat-blog-yang-bagus.html'>Blog yang Bagus Gimana Sih?</a></h2>
<p>Apakah blog yang bagus menurut saya sudah bagus menurut orang lain. Apakah blog yang bagus menurut orang lain sudah bagus menurut saya. Jawaban untuk kedua pertanyaan di atas adalah belum tentu. Terkadang bagus menurut saya ternyata jelek di mata pembaca dan terkadang bagus menurut pembaca ternyata tidak bagus menurut saya. Menurut kamu blog yang bagus gimana sih?</p>
<img alt='blog yang bagus' src='http://i34.tinypic.com/v83g3d.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Bang Del </span>
<h2><a href='http://bangdel.blogspot.com/2009/07/cara-promosi-blog-yang-baik.html'>Cara Promosi Blog yang Baik</a></h2>
<p>Ingin blog anda terkenal? Temukan jawabannya di sini &quot;Cara Promosi Blog yang Baik&quot;. Hampir semua pemilik blog ingin blognya menjadi terkenal dan ramai dikunjungi dengan trafik yang tinggi pula. Saya pun begitu, sama seperti anda :) Posting tentang cara promosi blog ini adalah berdasarkan pengalaman pribadi. Silahkan dibaca-baca dulu dan ambil poin-poin yang cocok buat blog anda. Semoga bermanfaat.</p>
<img alt='promosi blog' src='http://i34.tinypic.com/33kx84w.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Bang Del </span>
<h2><a href='http://bangdel.blogspot.com/2009/06/jenis-jenis-bisnis-online.html'>Jenis-Jenis Bisnis Online</a></h2>
<p>Sudah sering mendengar tentang Bisnis Online ya. Saya akan memberikan sedikit ulasan tentang bisnis online dan jenis-jenis bisnis online. Barangkali anda tertarik untuk memonetisasi blog. Hitung-hitung bisa dapat dollar dari internet. Artikel ini mengulas beberapa jenis bisnis online yang sedang marak dan digandrungi para blogger.</p>
<img alt='bisnis online' src='http://i33.tinypic.com/2whm22w.jpg'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

Sekarang klik tombol Simpan Template dan akhirnya Selesai.

Coba sobat perhatikan hasilnya. Apakah memuaskan atau tidak atau masih banyakkah yang tidak sesuai dengan desain template blog sobat? Jika ya, berarti ada yang harus diedit lagi.


Hal-hal yang perlu diedit.
  1. Pemanggilan kode JavaScript di atas, masih berasal dari situs bloggerstyles.com dan sobat bisa meng-hosting javascript tersebut di tempat hosting yang biasa sobat pakai. Silahkan download semua kode javascript di sini, dan hosting di tempat hosting javascript yang bisa sobat gunakan.
  2. Background image pada slider di atas mungkin tidak sesuai dengan template sobat. Sebaiknya diperkecil saja atau mungkin sobat harus membuat background baru dan sesuaikan dengan ukuran dan lebar template sobat. Bagian tersebut adalah ini :
    #slider {
    background:url(http://i33.tinypic.com/2l8hgi.jpg);
    height: 229px;
    overflow: hidden;
    position: relative;
    margin: 5px 0;
    }
  3. Nah, pada contoh slider di atas, saya menyertakan link dan teks dari blog ini. Jadi, silahkan mengganti link, teks dan gambar (image) buatan sendiri, sesuaikan dengan kebutuhan. Bagian tersebut adalah seperti ini :
    <div class='slide'>
    <span class='slmet'> Posted by Bang Del </span>
    <h2><a href='http://bangdel.blogspot.com/2009/07/cara-promosi-blog-yang-baik.html'>Cara Promosi Blog yang Baik</a></h2>
    <p>Ingin blog anda terkenal? Temukan jawabannya di sini &quot;Cara Promosi Blog yang Baik&quot;. Hampir semua pemilik blog ingin blognya menjadi terkenal dan ramai dikunjungi dengan trafik yang tinggi pula. Saya pun begitu, sama seperti anda :) Posting tentang cara promosi blog ini adalah berdasarkan pengalaman pribadi. Silahkan dibaca-baca dulu dan ambil poin-poin yang cocok buat blog anda. Semoga bermanfaat.</p>
    <img alt='promosi blog' src='http://i34.tinypic.com/33kx84w.jpg'/>
    </div>
  4. Untuk mengatur letak text, gambar dan link, sobat bisa mengutak-atik sendiri pada kode CSS. Yang pasti, setiap template punya ukuran lebar yang mungkin berbeda. Terus terang saya juga bingung untuk menjelaskannya, karena penerapan slider di blog ini pun butuh percobaan yang berulang-ulang agar benar-benar pas. So, trial and error aja dulu.
  5. Untuk mengatur delay pada slider, silahkan buka file slider.js kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, misalnya 5000 atau 9000 (catatan: 1 detik = 1000).

Udah itu aja koq, dijamin pasti sobat pusing sendiri . Kalau sobat pusing, jangan bilang-bilang ke daku ya . Selamat mencoba dan semoga berhasil dengan slider Zinmag Primus-nya.

Related Post:


Top Blogs or My Zimbio or Bookmark and Share

9 comment:

dedi iswanto said...

makasih sahabat tapi lumayan ~x( hehehe apalali newbie seperti saya...akan saya coba..

indra said...

tutorialnya OK & ada buktinya jg. mantap

LPTP Visual Media said...

halo salam kenal aku Mur_C
artikelnya keren banget asik, blog bisa lebih menarik dengan image slider. CUman ada yang ingin saya tanyakan, apakah cara yang ketiga harus dipaste di bawah karena di template saya da sedikit masalah. mohon bantuannya.
oh ya main ke blogku boz....join di blogku dong buat berteman...jadi anggota di blog ku...
http://tutorial-27.blogspot.com
http://portal-review.blogspot.com

junkelse said...

ini lah yang aku tunggu tunggu selama ni
makasi ya.. :))

opang said...

Mas, say mo nanya..saat ini saya sedang mencoba Memasang Slider ala Zinmag Primus Template di blog, untuk mengedit lebar tulisan dan warna font nya gmn ya??tks
sekalian main di http://celotehopang.blogspot.com
tks...

Bisnis Fantastis said...

Bang Del thanks ya tutorialnya untuk nambah ilmu...
salam dari sobat lama

movie2satu said...

ijin bookmark!hehe thanks kang

Unknown said...

Mo tanya bang cara biar gambar di slide itu,, agak dinaiki aku harus ngubah html yang mana, tolong bantuannya di sunjacow@hotmail.com

Pakar Bisnis said...

ini baru keren.... ;)

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Post a Comment

Terima kasih, komentar anda sangat berarti bagi Bang Del. Isi pendapat anda tentang blog ini di Testimoni. Tinggalkan pesan di Blogroll untuk tukaran link.

Link Exchange | Blog Directory

Link Exchange Directory of Top Sites Dmegs.com
SEO friendly web directory of top sites & blogs organized by topic into categories and presented according to relevance ofwebsite. Submit your website free.

Tukar Link dan Promosi Website
Webkios Direktori Indonesia, katalog website untuk tukar link dan promosi gratis. Tambahkan website anda sekarang juga di direktori kami.

Increase your PageRank
The Search Engine Optimization Experiment - Increase your PageRank.

Blogarama - The Blog Directory
Get Listed At One Of The Largest FREE Blog Directories Online. Let People Find And Rate Your Blog In The Blog Directory!

2RSS.com :: RSS directory
2RSS.com :: RSS feeds, RSS directory, RSS software, RSS scripts, RSS articles, RSS syndication, XML, RDF, news.
 

Followers

Recent Comments