Berbisnis Online ala Google

Jumat, 08 April 2011

Cara Sederhana Mengubah Ukuran Template Dan Elemen Blog

Saya tebak kalian yang membaca artikel ini adalah orang yang memiliki sebuah Blog dan sedang mencari sebuah artikel yang membahas tentang cara mengatur ukuran konten yang terdapat pada blog kalian mungkin itu meliputi Mengubah Ukuran Halaman Blog, Mengubah Halaman Posting, Mengubah Ukuran Header, Mengubah Ukuran Sidebar, atau Mengubah Ukuran Footer. Tenang saya akan membahas semuanya sekaligus (all in one gitu lohhh) hehehe. Mungkin kalian sulit menemukan Template Blog yang cocok dengan selera kalian dan utamanya bahwa Template Blog di ibaratkan seperti sebuah tampilan rumah yang indah, bagus, dan mempesona agar banyak orang yang ingin berkunjung di Blog kalian. tapi bukan hanya tampilan saja yang digunakan melainkan tata letak dan ukuran setiap konten haruslah sesuai dengan isi dari blog itu sendiri, mungkin juga kalian ingin mengedit ukuran inilah itulah agar semua terlihat seperti keigninan kalian. tidak usah berlama-lama langsung saja saya akan memberikan caranya walau ini hanya ilmu yang sangat mudah tapi cukup membantu dikala kalian sedang membutuhkannya.

Langkah awal :
- Login ke Blog Kalian
- Klik Tata Letak
- Klik Edit HTML

- Saya sarankan sebelum Mengedit HTML di Blog kalian, silahkan kalian BackUp Template kalian terlebih dahulu agar nantinya jika terjadi sesuatu yang tidak di inginkan kalian bisa memasang template semula yang belum kalian Edit HTML nya. (dan setelah di Edit jangan langsung di save, cukup di Pratinjau lebih dahulu, bila sudah sesuai dengan keinginan kalian barulah kalian save hasil Editan kalian tadi).

Untuk mengubah ukuran Halaman Blog
Cari kode di bawah ini:

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

Keterangan:
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + FUntuk mengubah ukuran lebar Halaman Blog, kalian cukup mengubah angka pada width sesuai dengan keinginan kalian.

Untuk mengubah ukuran Halaman Posting
Cari kode di bawah ini:
#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 */
}

Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F

Untuk mengubah ukuran lebar Halaman Posting, kalian cukup mengubah angka pada width sesuai dengan keinginan kalian.

Untuk mengubah ukuran Sidebar Blog
Cari kode di bawah ini:

#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 */
}

Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Sidebar Blog, kalian cukup mengubah angka pada width sesuai dengan keinginan kalian.

Untuk mengubah ukuran Header Blog
Cari kode di bawah ini:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Header Blog, kalian cukup mengubah angka pada width sesuai dengan keinginan kalian.

Untuk mengubah ukuran Footer Blog
Cari Code di bawah ini:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


Keterangan :
Untuk memudahkan mencari Kode di Atas gunakan bantuan dengan menekan Ctrl + F
Untuk mengubah ukuran lebar Footer Blog, kalian cukup mengubah angka pada width sesuai dengan keinginan kalian.

Perhatian:
Jika lebar salah satu dari kelima elemen di atas (Halaman Blog, Halaman Posting, Side Bar Blog, Header Blog, dan Footer Blog) diubah, maka akan mempengaruhi keserasian elemen yang lain. Oleh karena itu, jika kalian ingin mengubah lebar salah satu elemen, maka kalian juga harus menyesuaikan dengan lebar elemen yang lain, karena jika antara satu elemen yang satu dengan yang lain tidak serasi, maka tampilan blog kalian akan menjadi kacau, kalian tidak mau kan kalau tujuan kalian yang mulanya ingin menyesuaikan tampilan blog kalian sesuai keinginan dan selera kalian malah justru merusak blog kalian sendiri. Seperti yang sudah saya bilang diatas, jangan langsung di save melainkan di pratinjau terlebih dahulu, jika sudah sesuai dengan keinginan kalian barulah kalian save.
Semoga bermanfaat dan kreasikanlah blog kalian sesuai keinginan kalian..



Cara membuat icon twitter flying bird

Cara Memasang Burung Twitter Terbang

twitter,Memasang burung Twitter terbang,Twitter Flying Bird,Widget Burung Twitter


Memasang burung Twitter terbang di blog sangat mudah. Sobat blogger hanya membutuhkan waktu kurang dari satu menit untuk melakukannya, karena sobat blogger tidak perlu edit template. Kode Twitter Flying Bird atau burung Twitter terbang hanya ditambahkan di area atau di kolom tempat sobat blogger biasa meletakkan kode untuk membuat widget. Dengan menambahkan burung Twitter terbang di blog, tampilan blog sobat pasti akan terlihat tambah indah dan cantik. Talk less do more, kita langsung saja ke prakteknya.


Cara Membuat atau Memasang Widget Burung Twitter di Blog :

  • Pertama, Klik Design lalu sobat klik Page Element

  • Klik Add Gadget dan HTML Javascript

  • Copy dan paste kode di bawah ini pada kolom yang tersedia :

<!-- floating twitter Bird -->

<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>

<script type="text/javascript">

var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRS4wRA2ijxtcpOUuIZt1ADNeCqDfteKJtxw7zRJga2knS8CDgj5e9O6wLYpXbdeVfustnce20e0qXn2O-wm64M_UN9MMDF-YOsUPMUvnQt5Slfewi_svnpLEWZMbX7XXo8smkV5d-YTs/s1600/burung+twitter+terbang.png";

var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");

var twitterAccount = "http://twitter.com/Akun Twitter sobat";

var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";

tripleflapInit();

</script>
  • Klik Simpan



Tambahan :

Ganti http://twitter.com/Akun Twitter sobat dengan Akun URL Twitter sobat



Apakah sobat blogger mau mengganti warna Burung Twitter tersebut? Gampang, sobat blogger tinggal ganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRS4wRA2ijxtcpOUuIZt1ADNeCqDfteKJtxw7zRJga2knS8CDgj5e9O6wLYpXbdeVfustnce20e0qXn2O-wm64M_UN9MMDF-YOsUPMUvnQt5Slfewi_svnpLEWZMbX7XXo8smkV5d-YTs/s1600/burung+twitter+terbang.png dengan salah satu kode di bawah ini :



Burung Twitter Warna Kuning
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij661k3ru3bm8UgR0tWdbX_z9UbQtMoIuEBvBXU-VhLeXwjadhUYJP5R7OKff7fZ0hFi-N-dSi676R9z8TldPcWlr14QbTobOrzTRvoIXas6OW6kQXq2_2cLxV0swm58rPdL6wzA1ivNE/s1600/yellow+bird.png


Burung Twitter Warna Hitam
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic0wlNb7WRfHs0axAUDzYr3NdQMZ2DWHeL_147kZE5rMavIyRvCiQABxNg8rqVFiZQFUTZfHCoo8ziiEyH5ss1JJl1detmh2Oa2QDLmJkxACrOFORoaNw0txhFLiFKHxZmpGuojZ395Zs/s1600/black+bird.png


Burung Twitter Warna Biru
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iJ3gjmJYZ3zUuRZvVDSRxIagrMZgRborQXKWDJDiIuePtbXdQj_WjuQErjLcQCWaoCurStCu3fu9SN4f1DpSageEryLhNnyl66EZxNOcLKqkqyNQvVdYx3ZP2L8d0MFLQSvA8HPbNWs/s1600/Blue+bird.png


Burung Twitter Warna Coklat
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibvDTTlAp1N3e8JdFcjLgikHiNl_YRpmzRYt6h3b2RN4dQ5xGfWosFQTsYcbxfpxsjeH3tuUtNEu8UgtvOCbDmDb8aAWdHIl3Bow7OjgXPHMLEqOKYIt8JFpdgIJxIke125PJHdL6JY5s/s1600/brown+bird.png


Burung Twitter Warna Hijau
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxAp6g43WuL9AaCEb6kjlwyXzWSMbWP-5QeagAMc_9ixGJV19PrFPS5HVmRdYZVCbQQ2FkM8P_Gm3pxSu07y0cbKee2IiDWp-jeRM8je1aIRsYK8ZqM8DGb4den-MXQhyzzIFeHSWLkSg/s1600/Green+bird.png


Burung Twitter Warna Ungu
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn9UwS5T2TZ18AYM0LETN-NtcDd5Go4TPPcLQg3WhMEGEQKvGoo7EA1kOg9RV66htvdj7C0mF8rGGFIlMtkGXyEbwbSCWRb0gwk8LvhTKebK3Wz731JG7uvP745DYiShrchZYX2a4AbcI/s1600/purple+bird.png


Burung Twitter Warna Putih
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH0teosq5VKIV9O7NsVOhXef_C6Vn_ObHnHszCXfMhTerhuhSpK59Hx3m3DJqAmyhMYGoL6GxJ39qvtmxJJHAYgqVXqMkWEnek60BzgGkwW-3hMlgJnTOeyJ-Dz-mZY6hCltn6TONWBuc/s1600/white+bird.png


Burung Twitter Warna Merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9uGlsLWCowQikmRiaqLYVPWqjmXZm9GjHPt-wFbORpO6N-iTBtvOtfySbYGaPwHpEKxVVMWbkNlc6hOHZhnJtoP3zHrOM2L3ug5LwXw8SzzJ_1giYGJwfQ7Rh3oaIXhaapT0LgYedPS4/s1600/red+bird.png




Cara membuat alert untuk pesan penutup

Postinggan sebelumnya, saya sudah pernah membahas tentang cara membuat alert untuk menyambut pengunjung. Nah, sekarang untuk kali ini saya akan mencoba membuat alert di blog tapi
sebagai pesan penutup, efek ini akan muncul apabila pengunjung atau kita
sendiri menutup jendela blog kita, dan itu caranya otomatis akan muncul kotak alertnya sendiri. Nah, sekarang langsung saja membuatnya kawan, tidak usah pakai berlama-lamaan.

Cara membuat alert untuk pesan penutup

1. Login ke blogger
2. Pilih Rancangan
3. Klik Edit HTML
4. Centang Expand Template Widget
5. Taruh kode berikut dibawah kode </head>


<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('Penutup pesan yang ingin kita tampilkan
');
}
parent.window.onunload=goodbye;

</script>
6. Simpan jika sudah selesai

Catatan :
Ganti tulisan tebal berwarna merah, bisa anda ganti dengan kalimat penutup pesan yang ingin anda kasih sendiri sebagai penutup pesan di blog anda.

Cara Membuat Random Post Berjalan

Sekarang kita akan belajar membuat random post yang bisa berjalan kawan di blog kalian, random post berjalan berguna untuk blog kita karena postingan kita yang telah berlalu atau udah lama banget bisa muncul di blog kita dengan tulisan yang bisa berjalan kawan. Nah, caranya cukup mudah kok kawan langsung saja kita belajar membuatnya kawan ngak usah terlalu lama di sini.

Cara membuat random post berjalan
1. Login ke blogger
2. Pilih Rancangan
3. Klik Tambah Gadget

4. Pilih HTML/JavaScript

5. Masukan kode HTML berikut ini


<!-- Alphabetical/chronological Post Title Listing with comment count Start -->
<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="1">');
var i;
for (i = 1; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title + "</a> | ";
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
var pList = "</a>" + "<a href="+ href + '">' + pTitle;
document.write(pList);
document.write(pComment);
document.write('</a></li>');
}
document.write('</marquee>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://www.rh-tronik.com
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json"
type="text/javascript"></script>
<!-- Alphabetical Post Title Listing End -->

6. Simpan jika sudah selesai

Catatan :
Ganti http://www.rh-tronik.com dengan URL blog kamu sendiri dan 1 adalah kecepatan berjalannya tulisan

Menambahkan button back to top

Cara menambahkan "button back to top". Saat kita menulis blog kadang tulisan yang kita buat itu panjang, atau juga tulisan yang kita posting itu banyak komentar, sehingga halamannya ke bawahnya juga panjang. Kadang saya sendiri juga melihat dari atas, mulai dari judul, isi, dan juga komentar-komentar
yang masuk. Saat sampai di paling bawah atau juga tidak terlalu di
bawah kita ingin ke atas, jadi kita harus memutar grid mouse itu. Ini di
manfaat kita menambahkan "button back to top", kita dapat dengan mudah kembali ke atas. Tinggal mengklik button itu kita akan langsung ke atas.
Cara menambahkan button back to top
1. Login ke Blogger

2. Pilih Rancangan.

3. Klik Edit HTML

4. Cetang Expand Tamplate Widget

5. Copy kode di bawah ini
sebelum kode ]]></b:skin>




#csstop {
overflow: hidden;
float:right;


width:33px;
height:50px;
clear:both;
}


6. Tambahkan kode dibawah ini sebelum kode </body>


<a id="csstop" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg54kcCnp6mhve7QVduOwL0_rue2U9YXm7tjBttxeqwPZacub4FpV_1_V_4_4BkIhFS2dTRORfl6ChAGNkefY35W9sodIwft8grGEHukJ5nrebYbvr8PaTvgKdihVE55q-SnTzyQamOjJfg/s1600/up_button.jpg" title="back to top"/></a>

7. Simpan jika sudah selesai.

Membuat buku tamu yang buka tutup

Kali ini saya akan "Membuat buku tamu yang buka tutup" shoutbox namanya juga buku ya bisa dibuka dan ditutup . Yang sudah berkunjung mengisi buku tamu menuliskan namanya, alamatnya dan pesannya. Buku tamu ini dipasang di blog kita. Yang banyak diguanakan untuk buku tamu yang kita buat ini akan bisa di buka dan ditutup, jadi terus tampil di halaman blog secara tidak utuh, jika ingin buka tinggal ngeklik dan jika ingin tutup buku tamunya juga diklik aja. Ada tulisan "Buku tamu" yang nempel dipinggir halaman dan tinggal klik untuk membuka tutupnya. Untuk membuat buku tamu yang bisa buka tutup ini, silahkan Anda buat widget shoutbox yang bisa didapatkan di shoutmix atau cbox. Di sana kita registrasi dan buat widgetnya lalu ambil kodenya.

Cara membuat buku tamu yang buka tutup
1. Login ke blogger
2. Pilih Rancangan
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode script berikut ini :

<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjP4igpNgfTMnV0rkzEOy2n24QhySGISexvQwN6AwQC6VNptFIfpHC475PMFsrreVAHcTH79YlBlP7Mbb9kwtzCVEDokvgfnUf__GLfEXVBYPl1eAdpWVfCwO9xqj08Exh9U5D2Z7BUgGq/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:2px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent"> 






Taruh Kode Widget Shoutmix Kamu Disini


</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>




Kita taruh kode yang sudah peroleh dari shoutmix atau cbox ditempatnya 



( Taruh Kode Widget Shoutmix Kamu Disini )



6. Simpan jika sudah selesai

Cara mengganti kursor blog dengan gambar

Kali ini kita akan belajar bagaimana mengubah cursor yang ada di blog kita dengan gambar, ini baik juga untuk blog kita, sehingga akan membuat blog kita menjadi
berbeda dengan blog-blog yang lain. Kalau yang lain standart maka blog
kita berbeda dan jadi unik.
Cursor yang ada di blog kita dapat kamu rubah dengan foto atau gambat
yang kita suka atau kamu yang narsis habis bisa menggantinya dengan
foto kamu sendiri. Yang jelas, buat saja blog kita menjadi lebih cantik dan menarik. Caranya cukup mudah kok kawan tinggal ikuti saja cara berikut ini kawan.

Cara mengganti kursor blog dengan gambar
1. Login ke blogger
2. Pilih Tata Letak

3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode HTML berikut ini

<style type="text/css">body {cursor:url("http://www.freediskspace.com/images/cursor.gif"),default}</style>

6. Simpan jika sudah selesai

Catatan :
Kode yang berwarna merah adalah URL gambar yang ingi kita jadikan
pengganti cursor, dan kamu dapat mengganti dengan URL gambar yang kamu
inginkan