i-beitrag: Blogger

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Cara Memasang Banner di Blog

Ini ni postingan pertama setelah beberapa dekade absen.. hahahah
Bagi para blogger yang baru gabung pasti penting ni.. sapa tau bisa dapat uang tambahan buat beli permen + supaya tampilan blog kita tambah rame pastinya. :D

Langsung aja bray........

Dalam pembuatan blog, blogger telah menyedikan beberapa widget secara default, tapi tidak semua widget bawaan dari blogger sendiri, kita perlu mencari dan memasang widget2 yang kita sukai, banyak koq website2 yang menyediakan beberapa widget yang menarik,…

Kali ini saya akan membahas bagaimana cara memasang banner di blog kamu,,caranya gampang,,, ikuti aja langkah"nya dengan benar.. cekidot^^

1.upload gambar banner kamu ex : http://tinypic.com dan copy htmlnya

2.buka blog kamu

3.login di blogger

4.pilih layout + edit html

5.pilih html /java source

6.copy kode berikut ini :

<center><a href="http://rhienayups.blogspot.com" target="_blank"><img border="0" alt="Image and video hosting by TinyPic" src="http://xxx.tinypic.com/xxx.jpg"/></a></center>

<br/> tukeran banner>>

keterangan :

a hreff= merupakan alamat blog kamu

src = merupakan alamat banner yang telah kamu upload tadi

^__^ selamat mencoba....

Penyebab Seorang Bloggers Bisa Gagal

Mungkin anda pernah depresi dalam menjalani aktivitas blogging, entah anda karena tidak ada trafik maupun sesuatu yang dihasilkan. Hampir setiap blogger pasti pernah mengalaminya, beberapa diantaranya ada sukses, dan kebanyakan tidak mencapai apa yang mereka inginkan. Berikut ini akan dibahas beberapa sebab yang paling umum dari beberapa kemungkinan yang menyebabkan anda gagal dalam mencapai target anda.

1. Tidak konsisten Anda sudah membuat jadwal kapan anda harus membuat postingan, memberi komentar, membangun backlink, submit ke RSS ataupun hal-hal lainnya. Namun anda bertahan hanya beberapa hari saja, setelah seminggu anda mulai merasa bosan dan sudah tidak mengikuti jadwal lagi. Jika anda ingin sukses, konsistensi adalah salah satu kuncinya.

2. Terlalu sering mengotak-atik blog Anda penasaran dengan tutorial yang ditawarkan blog ini, kemudian blog yang itu menawarkan tutorial yang baru, anda tertarik dan mencobanya satu-satu. Memang tidak ada salahnya, namun hal ini menghabiskan waktu anda. Saran saya, gunakan widget yang memang perlu dan simpan saja widget-widget yang keren yang lainnya. Toh, postingan blog tersebut tidak akan hilang kok

3. Terlalu banyak ide Saya sering mengalami hal ini, punya banyak ide yang lumayan bagus. Namun sayang, karena terlalu banyak ide, saya jadi sulit menentukan mana yang ingin direalisasikan terlebih dahulu. Hidup ini penuh pengorbanan, jadi pasti harus ada yang dikorbankan. Catat saja ide anda, dan mulai pilih mana yang harus diprioritaskan. Jika memang ada ide yang tidak bisa kita realisasikan, kenapa kita tidak memberikan kesempatan pada orang lain untuk mewujudkannya?

4. Terlalu banyak belajar Jangan diartikan yang lain dahulu. Belajar itu baik, tapi kalau kita terlalu sering belajar, kapan kita bisa mempraktikkannya? Faktanya, semua ebook yang beredar di internet hanya membahas hal yang sama, entah itu tentang SEO, Adsense, Backlink, ataupun Make Money Online. Semua hanyalah ebook yang disusun dengan cara yang berbeda namun dengan inti yang sama. Jika anda sudah mengerti basic dari semuanya, anda hanya perlu praktik dan praktik.

Di atas adalah beberapa contoh penyebab kemungkinan anda gagal, dan banyak diantara blogger yang pernah mengalaminya, ini sangat wajar, mengingat banyak diantara kita yang ingin hasil yang lebih cepat dan maunya instan. Postingan ini bisa anda jadikan sebagai renungan, silahkan pahami kembali makna dari point penting diatas.

Membuat vertical scrolling Artikel blogger dengan Jquery

Apa itu vertical scrolling artikel? Yaitu salah satu bentuk penerapan jquery pada artikel blog. Yaitu dengan gerakan scrolling artikel secara vertical. Anda bisa manampilkan potongan artikel blog Anda melalui widget vertical scrolling artikel atau news ticker ini sehingga akan mempercantik tampilan blog sekaligus menarik minat para pengunjung blog untuk membaca artikel artikel Anda yang lain. Kira kira septi ini tampilanya :

Dalam tips blogger kali ini kita akan belajar membuatnya. Cara membuatnya cukup mudah.

1. Log In ke Blogger http://blogger.com/

2. Pada beranda/Dasbor pilih Rancangan >> Edit HTML

PENTING : Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki backup untuk mengembalikannya seperti semula.

3. Kemudian centan pilihan Expand Widget Template.

4. Cari kode <head> kemudian ganti kode tersebut dengan kde di bawah ini :

<head>
<script src='http://sites.google.com/site/bloggermint/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermint/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
vertical: true,
visible: 3,
auto:500,
speed:2000
});
});
</script>

Anda bisa merubah kecepatan sesuai keinginan dengan mengganti kode speed:2000 (2 detik) dan jumlah artikel yang akan ditampilkan visible: 3

5. Langkah selanjutnya cari kode ]]></b:skin> dan letakkan kode di bawah ini diatasnya :

* { margin:0; padding:0; }

#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}

#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }

#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}

.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:110px; }
.newsticker-jcarousellite .info { float:right; width:190px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }
.clear { clear: both; }

Anda bisa mengubah ukuran font dan warna dengan memodifikasi kode di atas.

6. Jika sudah kemudian cari kode <div id='sidebar-wrapper'> lalu letakkan kode dibawh ini setelah kode <div id='sidebar-wrapper'> atau Anda bisa meletakkanya melalui gadget/widget HTML/Javascript pada blogger.

<div id='newsticker-demo'>
<div class='newsticker-jcarousellite'>
<ul>
<li>
<div class='thumbnail'>
<a href='URL ARTIKEL ANDA'><img src='URL LOKASI GAMBAR THUMBNAIL'/></a>
</div>
<div class='info'>
<a href='URL ARTIKEL ANDA'>JUDUL ARTIKEL</a>
<span class='cat'>DESKRIPSI SINGKAT ARTIKEL</span>
</div>
<div class='clear'/>
</li>

<li>
<div class='thumbnail'>
<a href='URL ARTIKEL ANDA'><img src='URL LOKASI GAMBAR THUMBNAIL'/></a>
</div>
<div class='info'>
<a href='URL ARTIKEL ANDA'>JUDUL ARTIKEL</a>
<span class='cat'>DESKRIPSI SINGKAT ARTIKEL</span>
</div>
<div class='clear'/>
</li>

<li>
<div class='thumbnail'>
<a href='URL ARTIKEL ANDA'><img src='URL LOKASI GAMBAR THUMBNAIL'/></a>
</div>
<div class='info'>
<a href='URL ARTIKEL ANDA'>JUDUL ARTIKEL</a>
<span class='cat'>DESKRIPSI SINGKAT ARTIKEL</span>
</div>
<div class='clear'/>
</li>

<li>
<div class='thumbnail'>
<a href='URL ARTIKEL ANDA'><img src='URL LOKASI GAMBAR THUMBNAIL'/></a>
</div>
<div class='info'>
<a href='URL ARTIKEL ANDA'>JUDUL ARTIKEL</a>
<span class='cat'>DESKRIPSI SINGKAT ARTIKEL</span>
</div>
<div class='clear'/>
</li>

</ul>
</div></div>

Ganti kode diatas sesuai url artikel,url gambar, dan deskripsi artikel yang ingin Anda tampilkan. Demikian tips blogger kali ini semoga bermanfaat.

Cara membuat galeri foto(Image Gallery) di blog dengan CSS

Langsung saja pada tips blogger kali ini saya membahas Cara Membuat Galeri Foto(Image Gallery) di Blog Dengan CSS. Bagi Anda yang membuat blog dengan tujuan berbagi foto atau gambar dengan orang lain pasti ingin sekali galeri foto atau gambar di blognya tampil rapi dan indah.

Tips Cara Membuat Galeri Foto(Image Gallery) di Blog Dengan CSS akan sangat membantu Anda dalam membuat dan menempatkan galeri foto Anda di blog. Dimana foto atau gambar Anda akan tampil secara thumbnail dan ketika anda meletakkan kursor di atas thumbnail tersebut gambar Anda akan tampil muncul secara penuh. Seperti contoh di bawah ini :

Menarik sekali bukan? Anda bisa membuat galeri foto ini pada posting blog atau sebagai widget di blog Anda. Langsung saja kita mulai :

1. Berikut script css image gallery yang Anda butuhkan :

2. Berikut kode html untuk membuat galeri foto Anda :

<div class="gallerycontainer">

<a class="thumbnail" href="http://www.radiohead.com/"><img
src="nature/1.jpg" width="100px" height="66px" border="0"
/><span><img src="nature/1 t.jpg" /><br />Simply
beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img
src="nature/2 t.jpg" width="100px" height="66px" border="0"
/><span><img src="nature/2.jpg" /><br />So real,
it's unreal. Or is it?</span></a>

<a class="thumbnail" href="#thumb"><img
src="nature/3 t.jpg" width="100px" height="75px" border="0"
/><span><img src="nature/3.jpg" /><br />Beautiful island</span></a>

<br />

<a class="thumbnail" href="#thumb"><img
src="nature/4 t.jpg" width="100px" height="70px" border="0"
/><span><img src="nature/4.jpg" /><br />Why's so green</span></a>

<a class="thumbnail" href="#thumb"><img
src="nature/5 t.jpg" width="100px" height="75px" border="0"
/><span><img src="nature/5.jpg" /><br />Lovely pink</span></a>

<a class="thumbnail" href="#thumb"><img
src="nature/6 t.jpg" width="100px" height="70px" border="0"
/><span><img src="nature/6.jpg" /><br />Beautiful sunset</span></a>

<br />

</div>

3. Berikut penempatan kedua script di atas secara lengkap :

<html>
<head>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent
overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally
*/
z-index: 50;
}

</style>

</head>

<body>
<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>

<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>

<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>

<br />

<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>

<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>

<a class="thumbnail" href="#thumb"><img
src="URL ALAMAT GAMBAR THUMBNAIL" width="100px" height="66px" border="0"
/><span><img src="URL ALAMAT GAMBAR" /><br />JUDUL GAMBAR</span></a>

<br />

</div>
</body>
</html>

Total Items:
SubTotal:
Tax Cost:
Shipping Cost:
Final Total:

Cara Memasang Banner di Blog

Penyebab Seorang Bloggers Bisa Gagal

Membuat vertical scrolling Artikel blogger dengan Jquery

Cara membuat galeri foto(Image Gallery) di blog dengan CSS

Shopping Cart

Contact online

Labels

Most View Product

Blog Archive

Unordered List

Labels

Template Information

Sample Text