Efek Roaming Window

Posted by Unknown on Tuesday, March 31, 2009

Tips Membuat Efek Roaming Window : Sebenarnya, sudah lama Tips Trik Blog ingin memposting tentang efek roaming window ini. Karena kesibukan akhirnya menjadi lupa dan sekarang baru ingat. Oh, iya script untuk menciptakan efek tersebut saya dapatkan ketika jalan-jalan di blog Bizmax. Pada kesempatan ini, perkenankanlah saya untuk memposting ulangnya, siapa tahu ada blogger lain membutuhkannya.

Efek roaming window yang dimaksud di sini adalah efek seperti window yang menggulung dan bergerak memutar dengan durasi sekitar satu hingga dua detik. Untuk lebih jelasnya, mungkin pengunjung harus mencoba sendiri.

Untuk mendapatkan efek roaming window ini tidak diperlukan langkah-langkah yang rumit, yang diperlukan hanya copy paste terhadap script yang akan saya sampaikan berikut ini pada gadget/widget blog kita. Jika suatu saat sudah tidak menginginkan lagi, kita tinggal menghapus gadget/widget tersebut. Mudah dan praktis, bukan!!

Tertarik, silakan ikuti tipsnya berikut ini.

Langkah-langkahnya adalah sebagai berikut.

Pertama, login ke http://blogger.com hingga masuk Dasbor >> Tata Letak (layout) >> Tambah Gadget >>

Kedua, tambahkan HTML/Javascript

Ketiga copy kode berikut ini

<script language="JavaScript1.2" src="http://www.geocities.com/yono_pati/roamingwindow.js">
</script>

Keempat, Simpan Perubahan.

Kelima, selesai

Sekarang, refresh blog Anda dan pastikan Anda mendapati efek roaming window tersebut.

Bagi yang tertarik, selamat mencoba, ya!!!

Baca juga yang ini.

Membuat Blog Menjadi Do Follow
Mengetahui Blog Do Follow atau No Follow
Mengganti Image Pada Background
Kumpulan script menarik
Description: Efek Roaming Window Rating: 4.5 Reviewer: Unknown - ItemReviewed: Efek Roaming Window
More aboutEfek Roaming Window

Mengganti Image Pada Background

Posted by Unknown on Tuesday, March 24, 2009

Mengganti Atau Menambahkan Image Pada Background : Jika pada kesempatan yang lalu, telah dijelaskan cara mengganti warna pada background maka kali ini, Tips dan Trik Blog akan menjelaskan cara mengganti image pada background. Pada prinsipnya, tips ini tidak berbeda jauh dengan tips sebelumnya, hanya mengganti kode warna dengan image (alamat URL image). Jika tertarik, silakan ikuti tipsnya berikut ini.

Sebelum melanjutkan, sebaiknya kita baca postingan tentang cara mengganti warna background terlebih dahulu karena tips kali ini masih berhubungan dengan tips tersebut. Jika sudah, mari kita lanjutkan kepada tips mengganti image pada backround berikut ini.

Yang perlu saya tekankan lagi adalah jangan lupa untuk melakukan pem-backup-an terlebih dahulu untuk mengatisipasi hal-hal yang tidak kita inginkan.

Langkah-langkah mengganti image pada background adalah sebagai berikut.

Pertama, seperti biasanya, lakukan login ke http://blogger.com hingga masuk Dasbor >> Edit HTML
Kedua, cari kode css body, dengan format seperti di bawah ini.

body {
……………..
……………..
}


Untuk mengganti atau menambahkan image pada background, kita harus menambahkan atau mengganti kode dengan format berikut pada tag body tersebut.

background-image: url(alamat_URL_image)


Catatan :
alamat_URL_image adalah alamat image yang sudah kita upload pada photo hosting. Sebagai contoh seperti di bawah ini.

body {
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
…………..
………….
}


Jika menginginkan, kita dapat mengganti atau menambahkan image background pada sidebar yang berbeda dan formatnya seperti di bawah ini.

#sidebar-wrapper {
background-image:url(alamat_URL_image);
........
........
}



Jika menginginkan image background pada bodi postingan yang berbeda, kita dapat menuliskannya dengan format seperti di bawah ini.


#main-wrapper {
background-image:url(alamat_URL_image);
…………
…………
}


Ketiga, simpan template
Keempat, selesai

Sebagai contoh, kita akan mengganti image background pada template Minima, milik Blogspot. Pada template tersebut, kita dapat menemukan kode css body-nya adalah seperti di bawah ini.


body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


Untuk menambahkan image background (misalkan dengan alamat_URL “http://www.geocities.com/yono_pati/blue.jpg”) adalah menjadi seperti di bawah ini.

body {
background:$bgcolor;
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


Untuk menambahkan image pada background sidebar, cari kode css sidebar, seperti 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 */
}


Misalkan, kita ingin menambahkan image (dgn alamat_URL "http://www.freebackgrounds.com/back-283.gif") tambahkan kode yang berwarna merah, sehingga menjadi seperti di bawah ini.

#sidebar-wrapper {
background-image:url(http://www.freebackgrounds.com/back-283.gif);
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 */
}


Untuk mengganti/menambah image background pada bodi postingan, cari kode css main-wrapper, seperti 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 */
}

Misalkan kita ingin menambahkan image background (dgn alamat_URL "http://www.geocities.com/yono_pati/batahijau.gif) maka tambahkan kode yang berwarna merah sehingga menjadi seperti di bawah ini.

#main-wrapper {
backgroung-image:url(http://www.geocities.com/yono_pati/batahijau.gif);
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 */
}

Begitu juga jika kita ingin menambahkan image pada header dan footer maka kita harus menambahkan kode "background-image:url(alamat_URL_image)" pada kedua kode css tersebut.

Hasilnya, seperti screenshot di bawah ini.



PERINTAH PERULANGAN IMAGE (REPEAT BACKGROUND IMAGE)

Secara default, image akan ditampilkan secara berulang-ulang untuk memenuhi seluruh halaman blog. Misalkan kita mempunyai image berupa gambar buku kecil maka seluruh halaman akan diisi penuh dengan gambar-gambar buku kecil tersebut hingga memenuhi seluruh halaman blog. Jika menginginkan, kita dapat melakukan kustomasi terhadap perulangan image tersebut dengan pilihan perintah sebagai berikut.

background-repeat:no-repeat;


Dengan perintah tersebut maka tidak ada pengulangan image yang ada.

background-repeat:repeat-x;


Dengan perintah tersebut, image akan ditampilkan berulang-ulang secara horizontal.

background-repeat:repeat-y;


Dengan perintah tersebut, image akan ditampilkan berulang-ulang secara vertical.


MENENTUKAN POSISI IMAGE BACKGROUND (POSITION BACKGROUND IMAGE)

Jika menginginkan, kita dapat menentukan posisi image pada posisi tertentu di dalam suatu halaman blog. Kombinasi posisi dapat dipilih adalah di antara berikut ini.

top left;
top center;
top right;
center left;
center center;
center right;
bottom left;
bottom center;
bottom right;


Contoh formatnya adalah seperti di bawah ini.

background-position:center center;


Dengan perintah tersebut, image akan berada pada posisi tengah baik secara horizontal maupun vertikal.

Selain itu, kita juga dapat menentukan posisi dengan prosentase atau dalam pixel tertentu, seperti di bawah ini di mana x adalah mewakili nilai horizontal sedangkan y mewakili nilai vertical.

x% y%
xpx ypx


Sebagai contoh, jika kita menginginkan image berada pada posisi 20% secara horizontal dan 10% vertical maka formatnya adalah sebagai berikut.

background-position:20% 10%;




MEMBUAT IMAGE BACKGROUND STATIS

Secara default, image background akan bergerak mengikuti pergerakan scroll baik ke atas maupun ke bawah. Jika menginginkan, kita dapat membuat image tersebut menjadi statis atau tidak bergerak ketika kita melakukan scroll terhadap halaman blog. Perintahnya adalah sebagai berikut.

background-attachment:fixed;



APLIKASI SEMUA PERINTAH

Jika kita memasukkan semua unsur perintah seperti yang telah kita bahas di atas maka kita akan mendapati kode khusus untuk image pada tag body adalah sebagai berikut.

body {
background-image:url(http://www.geocities.com/yono_pati/blue.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}


Jika menginginkan, kita dapat meringkas perintah-perintah tersebut menjadi seperti di bawah ini tentunya dengan hasil yang sama.

body {
background: url(http://www.geocities.com/yono_pati/blue.jpg) no-repeat center center fixed;
}

Dengan deklarasi seperti itu, image blue.jpg akan ditampilkan satu kali (tidak berulang), dengan posisi ditengah-tengah baik secara horisontal maupun vertikal dengan status statis (walaupun discroll, image tidak akan bergerak).

Selamat Mencoba namun jangan lupa untuk melakukan backup terlebih dahulu!!

(Daftar Bacaan : Tips For New Bloggers)

Baca juga yang ini.

Mengganti Warna Pada Background
Kustomasi Warna dan Efek Pada Link Teks
Tips Trik Laptop
Tips For New Bloggers
Blogging Tips Tricks
Description: Mengganti Image Pada Background Rating: 4.5 Reviewer: Unknown - ItemReviewed: Mengganti Image Pada Background
More aboutMengganti Image Pada Background

Cara Mengetahui Do Follow atau No Follow

Posted by Unknown

Cara Mengetahui Blog Do Follow atau No Follow : Pada postingan yang lalu, telah dijelaskan cara membuat blog menjadi do follow beserta keuntungan dan kerugian masing-masing. Nah, sekarang, pertanyaannya adalah bagaimana cara mengetahui apakah suatu blog menganut do follow atau no follow. Masalahnya adalah tidak semua blog yang menganut do follow memasang tulisan/banner yang intinya memberitahukan kepada pengunjung bahwa blog mereka adalah do follow. Nah, untuk mengetahuinya, silakan ikuti tipsnya bersama Tips dan Trik Blog berikut ini.

Setelah, melakukan “perjalanan” ke sana ke mari, akhirnya saya menemukan setidaknya tiga cara untuk mengetahui status blog apakah menganut paham do follow atau pun no follow.

Cara Pertama

Setelah membuka blog yang ingin kita ketahui statusnya (do follow atau no follow), langsung saja kita buka salah satu postingan (artikel) yang sudah mempunyai komentar. Kemudian langkah selanjutnya, kita lihat “source code”nya dengan cara sebagai berikut. Bagi yang menggunakan browser Firefox, klik menu Tampilan >> Kode Sumber Halaman. Sedangkan bagi pengguna Internet Explorer klik menu View >> Source.

Setelah itu akan muncul halaman baru yang berisi source code berupa kode HTML. Kemudian silakan menuju ke bagian komentar, kemudian cari salah satu dari pemberi komentar yang ada. Untuk mempermudah pencarian, kita dapat menggunakan Ctrl + F (Firefox).

Jika blog tersebut menganut “nofollow” maka kita akan mendapati kode komentar dengan format sebagai berikut.

<a href=’URL pemberi komentar/' rel='nofollow’>Nama Pemberi Komentar</a>

Contohnya dapat kita lihat pada screenshot di bawah ini.

Sebaliknya, jika blog tersebut menganut paham do follow, kita akan mendapati kode komentar dengan format sebagai berikut tanpa diikuti oleh rel=’nofollow’.

<a href=’URL pemberi komentar’> NamaPemberiKomentar </a>

Contohnya dapat kita lihat pada screenshot di bawah ini (yang bergaris bawah).

Cara Kedua

Cara yang kedua ini menurut saya merupakan cara yang paling mudah dan praktis. Kita hanya perlu membuka salah satu postingan (artikel) yang telah mempunyai komentar dari suatu blog. Gulung hingga ke bagian komentar, klik kanan pada salah satu nama pemberi komentar, kemudian pilih properties sehingga akan muncul jendela properti elemen (element properties). Jika blog tersebut menganut paham no follow, maka kita akan mendapati nilai relation “external nofollow” atau “nofollow” saja dan sedangkan pada blog do follow, kita akan mendapati relation “external” atau kosong.

Ini contoh screenshot jika blog tersebut “beraliran” nofollow.

Cara Ketiga

Cara yang ketiga adalah dengan menggunakan eksternal plugin Search Status yang dapat diinstall pada browser Firefox. Untuk mendownloadnya & menginstallnya, silakan klik Search Status ini. Setelah penginstallan selesai, biasanya kita diminta untuk melakukan restart Firefox. Jika penginstallan ini sukses maka kita akan mendapati icon Quirk Search Status yang berada di sebelah kanan bawah.

Untuk mengaktifkan fasilitas pendektesian blog no follow, lakukan klik kanan pada icon tersebut kemudian pilih “Highlight Nofollow Links”, seperti di bawah ini.

Dengan pengaktifan tersebut maka setiap kali kita membuka blog atau situs yang menganut “paham” no follow maka fasilitas Quirk Search Status ini akan memberi tanda dengan warna merah bergaris putus-putus.

Akhirnya, saya mengucapkan selamat berburu blog do follow!!

(Daftar bacaan : Zalukhu.com, hardono.melesat.com)

Baca juga yang ini.

Membuat Blog Menjadi Do Follow
Membuat Readmore Versi Kedua
Tips Trik Windows XP
Tips Trik Bisnis Internet
Description: Cara Mengetahui Do Follow atau No Follow Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Mengetahui Do Follow atau No Follow
More aboutCara Mengetahui Do Follow atau No Follow

Buy email marketing at icontact.com

Posted by Unknown on Monday, March 16, 2009

When we run a business, one of the most important things is that maintaining the relatioship with our loyal customers. Maintaining the relationship with the customers is very important and hard because if we don’t do it well and keep the relationship with them, our customers will go away. In order to do that, we can use many ways and one of them is by using email marketing. E-mail marketing can be used by us to send them the company’s recent news or produtcs. Besides for maintaining the relatioship with the customers, company can use to inform their new products to other clients.


For buying email marketing software, they can buy it in many e-mail marketing providers. However, you should be careful because not all e-mail marketing providers give the best software for the company. That’s why before buying one; you should check their facilities and service. One of the providers that give the best facilities and services is incontact.com. icontact will become a perfect place for especially business, company or online businessman who need email newsletters.


If you buying email software in icontact, you will get many facilities for your email newsletter, such as inbox deliberality, many templates, reasonable prices and many more. icontact also suits for those never do email marketing because icontact offers an easy steps to use email marketing, surveying, auto responder and blogging tool. For those who still hesitate or want to try free, they can get their free 15 days free trial. Although, it is free trial, you will get good service and facilities. So, what are you waiting for, visit the site and try it.


Description: Buy email marketing at icontact.com Rating: 4.5 Reviewer: Unknown - ItemReviewed: Buy email marketing at icontact.com
More aboutBuy email marketing at icontact.com

Membuat Readmore Versi Kedua

Posted by Unknown on Thursday, March 12, 2009

Membuat Readmore Versi Kedua : Antara satu blogger dengan blogger lainnya menyebut readmore versi ini dengan sebutan yang berbeda-beda, ada yang menyebut dengan readmore versi baru dan tidak sedikit pula yang menyebutnya dengan readmore versi Kedua. Tips Trik Blog sendiri lebih suka menyebutnya dengan readmore versi kedua. Saya sebut demikian karena memang sebelumnya pernah diulas mengenai pembuatan readmore ini dan selain itu, tidak tertutup kemungkinan ada tips readmore yang lain lagi sehingga lebih tepat disebut versi kedua dari pada versi baru.

Apapun namanya, yang jelas tips readmore kali ini berbeda dengan tips readmore terdahulu. Jika pada tips readmore yang terdahulu, ketika kita mengklik “link readmore” untuk membuka postingan secara utuh maka diperlukan waktu beberapa lama karena harus me-loading ulang postingan tersebut. Dan akan menjadi parah lagi apabila blognya termasuk blog yang berat di mana hal ini dapat membuat pengunjung tidak nyaman & akan menjadi lebih fatal jika kemudian pengunjung menjadi malas untuk melanjutkannya. Sedangkan pada versi yang kedua ini, jika kita mengklik “link readmore” maka postingan secara keseluruhan akan terpampang di bawahnya dengan seketika. Selain “link readmore”, tersedia juga “link summary” di mana jika kita mengkliknya maka postingan akan menjadi pendek (berupa ringkasan) lagi.

Oh iya, postingan tentang readmore ini telah disajikan oleh banyak blog yang ada di seantero dunia. Walaupun sudah tergolong “basi” namun Tips Trik Blog akan tetap mempostingnya kembali, siapa tahu masih ada blogger yang membutuhkannya terutama new blogger. Bagi yang sudah mengetahui tips ini, silakan baca yang lain, ya!!!

Langsung saja, kita menuju kepada langkah-langkah membuat readmore versi kedua tersebut.

Pertama, login ke http://blogger.com hingga masuk Dasbor >> Tata Letak (layout) >> Edit HTML
Kedua, centangi Expand Template Widget
Ketiga, pasang kode berikut ini di atas kode </head>

<script src='http://www.geocities.com/yono_pati/readmore.js'
type='text/javascript'/>


Keempat, temukan kode di bawah ini.

<div class='post-body entry-content'>


Kelima, sisipkan kode berikut ini

expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'


pada kode di atas sehingga menjadi seperti di bawah ini.

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>


Keenam, temukan kode berikut ini yang letaknya di bawah kode tadi.

<p><data:post.body/></p>


Ketujuh, tambahkan kode berikut ini di bawah kode tersebut.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'> Readmore...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'> Summary...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>


Catatan
Teks “readmore” dan “summary” dapat kita ganti sesuai keinginan/selera masing-masing, misalnya menjadi “selengkapnya” dan “ringkasan”.

Kedelapan, secara keseluruhan akan menjadi seperti di bawah ini, di mana kode yang berwarna merah adalah kode yang baru saja kita tambahkan.

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>


Kesembilan, simpan template
Kesepuluh, ketika melakukan pempostingan, letakkan teks/tulisan yang akan disembunyikan di antara kode <span id="fullpost"> dan </span>

Sebagai contoh adalah sebagai berikut.

Antara satu blogger dengan blogger lainnya menyebut readmore versi ini dengan sebutan yang berbeda-beda, ada yang menyebut dengan readmore versi baru dan tidak sedikit pula yang menyebutnya dengan readmore versi Kedua. <span id="fullpost"> Tips Trik Blog sendiri lebih suka menyebutnya dengan readmore versi kedua.</span>

Dengan contoh di atas, ketika kita melakukan publish maka teks/tulisan “Tips Trik Blog sendiri lebih suka menyebutnya dengan readmore versi kedua.” akan disembunyikan dan jika diklik “link readmore”nya maka akan terpampang seluruh tulisan di atas.

Untuk melihat hasilnya, silakan kunjungi Blogging Triks & Tips.

(sumber : Trik Tips Blogging, Blog K.Rohman, Beautiful Beta)

baca juga yang ini

  1. Tips Membuat Readmore Bag. Pertama
  2. Deklarasi Link Teks
  3. Kustomasi Efek dan Warna pada Link Teks
  4. Kustomasi warna background
  5. Tips Trik Windows XP
  6. Tips Trik Komputer
  7. Trik Tips Blogging

Description: Membuat Readmore Versi Kedua Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Readmore Versi Kedua
More aboutMembuat Readmore Versi Kedua

WD Screen Shot

Posted by Unknown on Monday, March 9, 2009


Ingin Kerja dari rumah dan mendapat penghasilan jutaan klik

Atau ingin Ingin mendapatkan penghasiilan, hanya dengan mengalihkan belanja bulanan silahkan klik banner berikut
Buat teman teman yang menemukan broken link alias link rusak tolong kasih tahu ya,admin mengucapkan terimakasih atas laporannya.Mohon laporannya tulis di kolom komentar. Aku usahakan untuk segera diperbaiki. Description: WD Screen Shot Rating: 4.5 Reviewer: Unknown - ItemReviewed: WD Screen Shot
More aboutWD Screen Shot

Mengganti Warna Background

Posted by Unknown on Thursday, March 5, 2009

Mengganti Warna Background Pada Template Blog : Tampilan Background merupakan salah satu elemen blog yang akan memberikan “warna” tersendiri baik oleh pemiliknya maupun para pengunjungnya atau bahkan dapat menjadikan motivasi/inspirasi tertentu bagi yang melihatnya. Mengingat peran pentingnya background tersebut mungkin saatnya mulai sekarang kita perlu untuk lebih “memperhatikan” background ini. Bagi blogger (pemilik blog) yang mungkin merasa bosan atau sekedar ingin mencari “suasana” baru untuk blognya, silakan melakukan kustomasi background bersama Tips Trik Blog berikut ini.

Kustomasi yang akan kita lakukan sehubungan dengan background ini meliputi, mengganti warna background, mengganti dan menentukan posisi image background. Namun untuk postingan kali ini, saya akan membahas kustomasi warna background terlebih dahulu.


Pada kesempatan ini, untuk simulasi dan percobaan, kita akan menggunakan template default blogspot, Son of Moto. Sedangkan untuk template yang lain, tidak akan berbeda jauh untuk melakukan pengeditan kode css-nya.


MENGGANTI WARNA BACKGROUND

Untuk mengganti warna background, kita harus melakukan pengeditan pada kode css yang biasanya dengan format seperti di bawah ini.


body {
background-color:#kode_html_warna;
…………
…………
}


atau bisa seperti di bawah ini


body {
background-color:#kode_html_warna;
…………
…………
}


Catatan
  • Untuk mendapatkan background dengan warna yang kita inginkan, kita dapat mengganti kode kode_html_warna dengan kode html warna yang lain. Untuk mengetahui kode html warna, silakan lihat di sini.
  • Pada contoh kasus ini (template Son of Moto) kita akan menemukan kode css untuk background, seperti di bawah ini.


body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
font-size: small;
}


Nah, untuk mengganti warna background sesuai yang kita inginkan, misalkan warna hitam (#00000), kita dapat mengganti variable “background” di atas dengan kode “background:#00000” sehingga menjadi seperti di bawah ini.


body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
color: $mainTextColor;
background: #00000;
font-size: small;
}



MENGGANTI WARNA BACKGROUND PADA SIDEBAR

Jika menginginkan warna background yang berbeda pada sidebar, kita harus melakukan pengeditan pada kode css seperti di bawah ini.


#sidebar {
background-color:#kode_html_warna;
………...
………...
}


Catatan
  • Untuk mendapatkan warna background sidebar yang kita inginkan, kita dapat mengganti kode_html_warna tersebut dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #sidebar mungkin berbeda antara satu template dengan template yang lainnya, ada yang menamakan #sidebar-wrapper, #side-wrap, #side-wrap1, side-wrap2.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan kode css-dengan format seperti ini.


#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
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 */
}


Nah, untuk mengganti warna background sidebar sesuai yang kita inginkan, misalkan warna hijau muda (#81F781), kita harus menambahkan variable “background” pada kode css di atas dengan kode “background-color:#81F781” sehingga menjadi seperti di bawah ini.


#sidebar {
background-color:#81F781;
width: 226px;
float: $endSide;
color: $sidebarTextColor;
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 */
}



MENGGANTI WARNA BACKGROUND PADA HALAMAN POSTING

Jika menginginkan warna background yang berbeda pada halaman posting, kita harus melakukan pengeditannya pada kode css yang biasanya dengan format seperti di bawah ini.


#main {
background-color:#kode_html_warna;
………
………
}


Catatan
  • Untuk mendapatkan warna background pada halaman posting yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #main mungkin berbeda antara satu template dengan template yang lainnya, ada yang menamakan #main-wrapper.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan kode css dengan format seperti ini.


#main {
width: 400px;
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 */
}


Nah, untuk mengganti warna background halaman posting sesuai yang kita inginkan, misalkan warna kuning (#F2F5A9), kita harus menambahkan variable “background” pada kode css di atas dengan kode “background-color:#F2F5A9” sehingga menjadi seperti di bawah ini.


#main {
background-color:#F2F5A9;
width: 400px;
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 */
}



MENGGANTI WARNA BACKGROUND PADA HEADER

Jika ingin mengganti warna background pada header, kita harus melakukan pengeditannya pada kode css yang biasanya dengan format seperti di bawah ini.


#header-wrapper {
background-color:#kode_html_warna;
……….
……….
}


Catatan
  • Untuk mendapatkan warna background pada header yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #header-wrapper mungkin berbeda antara satu template dengan template yang lainnya.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan 2 (dua) kode css dengan format seperti ini.


#header-wrapper {
background: #8b2 url(http://www.blogblog.com/moto_son/headbotborder.gif) bottom $startSide repeat-x;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;
}



#header h1 {
text-align: $startSide;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding-top: 15px;
padding-$endSide: 20px;
padding-bottom: 0;
padding-$startSide: 20px;
background-image: url(http://www.blogblog.com/moto_son/topper.gif);
background-repeat: repeat-x;
background-position: top $startSide;
}


Nah, untuk mengganti warna background header sesuai yang kita inginkan, misalkan warna hijau lumut (#0B610B), kita harus mengganti variable “background” pada kedua kode css di atas dengan kode “background-color:#0B610B” sehingga menjadi seperti di bawah ini.


#header-wrapper {
background-color:#0B610B;
margin: 0 auto;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: 15px;
padding-$startSide: 0;
border: 0;
}



#header h1 {
text-align: $startSide;
font-size: 200%;
color: $pageHeaderColor;
margin: 0;
padding-top: 15px;
padding-$endSide: 20px;
padding-bottom: 0;
padding-$startSide: 20px;
background-color:#0B610B;
background-repeat: repeat-x;
background-position: top $startSide;
}



MENGGANTI WARNA BACKGROUND PADA FOOTER

Jika menginginkan warna background pada footer yang berbeda, kita harus melakukan pengeditannya pada kode css-nya seperti di bawah ini.


#footer {
background-color:#kode_html_warna;
…………
…………
}


Catatan
  • Untuk mendapatkan warna background pada footer yang kita inginkan, kita dapat menganti kode_html_warna dengan kode_html_warna yang lain. Kode html untuk warna dapat dilihat di sini.
  • Penamaan stylesheet untuk #footer mungkin berbeda antara satu template dengan template yang lainnya.

Pada contoh kasus ini (template Son of Moto), kita akan menemukan 2 (dua) kode css dengan format seperti ini.


#footer {
clear: $startSide;
margin: 0;
padding: 0 20px;
border: 0;
text-align: $startSide;
border-top: 1px solid #f9f9f9;
}



#footer .widget {
text-align: $startSide;
margin: 0;
padding: 10px 0;
background-color: transparent;
}


Nah, untuk mengganti warna background footer sesuai yang kita inginkan, misalkan warna hijau kekuningan (#BEF781), kita harus mengganti dan menambahkan variable “background” pada kedua kode css di atas dengan kode “background-color:#0B610B” sehingga menjadi seperti di bawah ini.


#footer {
background-color:#0B610B
clear: $startSide;
margin: 0;
padding: 0 20px;
border: 0;
text-align: $startSide;
border-top: 1px solid #f9f9f9;
}



#footer .widget {
text-align: $startSide;
margin: 0;
padding: 10px 0;
background-color: #0B610B;
}



Setelah selesai mengganti warna dengan kode html warna, kemudian simpan template dan pastikan tampilan warna background blog kita telah berubah menjadi seperti yang kita inginkan.

Berikut ini adalah screenshot blog dengan template Son Of Moto sebelum dilakukan pengeditan.


Dan berikut ini screenshot hasil dari otak-atik background di atas.


Selamat Mencoba!!

Deklarasi Link Teks
Menghilangkan Angka Pada Arsip
Tips Trik Komputer
Tips Security
Tips Freeware
Tips Trik Windows XP
Description: Mengganti Warna Background Rating: 4.5 Reviewer: Unknown - ItemReviewed: Mengganti Warna Background
More aboutMengganti Warna Background

Membuat Banner Dengan Banner Break

Posted by Unknown on Tuesday, March 3, 2009

Membuat Banner Dengan Banner Break : Bagi yang sering “bergelut” dalam dunia per-blog-an, pasti sudah tidak asing lagi dengan keberadaan banner ini karena hampir semua blog yang ada telah “ditempeli” dengan banner oleh pemilik/pengelolanya. Di dalam dunia per-blog-an, pengertian banner tidak berbeda dengan pengertian banner dalam dunia “nyata” terutama dari sisi fungsinya, yang berbeda hanya terletak pada media dan segmen pasar yang dibidik.

Menurut pengertian yang saya kutip di Kamus Komputer dan Teknologi Informasi, Banner adalah salah satu bagian dari halaman web yang berisi iklan yang biasanya memiliki standar ukuran dalam bentuk pixels. Banner dapat berupa tulisan, gambar, atau kombinasi keduanya yang biasanya difungsikan sebagai sarana yang memberikan informasi kepada para pengunjung blog atau bahkan dapat digunakan sebagai sarana promosi/iklan dan apabila pengunjung mengkliknya maka pengunjung akan dibawa ke situs/blog tertentu.

Sebenarnya Tips dan Trik Blog juga pernah memposting seputar pembuatan banner yaitu dengan menggunakan layanan dari Cooltext. Di mana dengan layanan tersebut, kita dapat membuat banner secara online yang mudah dan cepat.

Nah, dengan postingan ini, saya berharap dapat melengkapi postingan seputar pembuatan banner yang sebelumnya. Dengan demikian, jika kita tidak/belum puas dengan layanan sebelumnya dapat “terobati” dengan layanan yang akan kita bahas kali ini.

Seperti kita tahu bahwa layanan serupa juga dapat kita temui di internet dengan mudah. Dengan menanyakan pada “Mbah Google” maka kita akan dengan cepat menemukannya.

Nah, salah satu layanan gratis yang menyediakan pembuatan banner secara online ini adalah Banner Break. Dengan layanan ini, kita yang merasa kesulitan atau tidak mempunyai waktu yang cukup untuk membuat banner, tidak perlu kuatir karena kita hanya perlu menyisihkan sedikit waktu saja maka banner yang kita inginkan sudah siap untuk digunakan. Satu hal lagi, untuk menggunakan fasilitas Banner Break ini, kita tidak “wajib” untuk melakukan registrasi terlebih dahulu.

Langkah-langkahnya adalah sebagai berikut.

Pertama, masuk ke http://bannerbreak.com/ hingga kita akan mendapati halaman banner break, di mana kita akan dapat menemukan banyak template banner yang dapat kita pilih sesuai selera.

Kedua, jika kurang puas dengan template yang ada, kita dapat mengklik “more >>” sehingga akan terbuka banyak template.

Ketiga, klik salah satu template yang kita sukai. Sebagai contoh, saya pilih (klik) template “Love”.

Keempat, setelah itu, kita akan mendapati jendela di mana kita dapat melakukan kustomasi/pengaturan sesuai keinginan/kebutuhan masing-masing, antara lain : banner background, Text Font (jenis huruf), text size (ukuran huruf), text angle (sudut kemiringan teks), shadow color (warna bayangan), dan lain-lain.

Kelima, untuk melihat hasilnya, klik buton Generate yang ada di bagian bawah. Untuk mengembalikan seperti sebelumnya, klik buton Reset. Untuk mendapatkan hasil yang maksimal, kita dapat mencoba-coba dengan melakukan kustomasi sendiri.

Keenam, lakukan penyimpanan banner tersebut pada computer local, dengan cara klik kanan pada banner yang sudah jadi kemudian pilih save image as kemudian arahkan pada folder di PC kita kemudian upload ke blog kita. Atau juga dapat mencopy kode html yang ada di sebelah kanan.

Ketujuh, selesai dan sekarang pastikan kita telah mempunyai banner yang “asyik punya”

Contoh hasilnya seperti di bawah ini.

Selamat Mencoba!!

Baca juga yang ini.

  1. Membuat Banner Secara Online
  2. Menghilangkan Angka Pada Arsip
  3. Deklarasi Link Teks
  4. Tips Trik Komputer
  5. Tips Trik Windows XP
  6. Tips Menghubungkan Dua Komputer
  7. Tips Membuat Shurtcut Untuk Shutdown

Description: Membuat Banner Dengan Banner Break Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Banner Dengan Banner Break
More aboutMembuat Banner Dengan Banner Break

Menghilangkan Angka Pada Arsip Blog

Posted by Unknown on Monday, March 2, 2009

Menghilangkan Angka Pada Arsip : Secara default, Blogspot akan menyertakan angka pada Arsip. Angka tersebut berfungsi sebagai numerator jumlah postingan untuk tiap-tiap klasifikasi arsip. Namun demikian blogger yang merasa tidak sreg dengan tampilan angka tersebut, dapat mencoba untuk menghilangkannya dengan cara yang sangat sederhana. Jika tertarik, silakan ikuti tipsnya bersama tips dan trik blog berikut ini.

Seperti yang kita ketahui bahwa menu Arsip adalah widget standart blogspot yang mempunyai tiga opsi tampilan menu, yaitu : Hierarki, Daftar Flat, Menu Pulldown. Di mana masing-masing pilihan menu mempunyai tampilan yang berbeda. Oleh karena itu, untuk menghilangkan angka pada arsip tersebut, dibutuhkan cara yang berbeda pula untuk masing-masing menu arsip tersebut.

Langkah-langkahnya sebagai berikut.

Pertama, login ke blogger hingga masuk Dasbor >> Tata Letak (layout) >> Edit HTML

Kedua, centangi pada “Expand Widget Template

Ketiga,

Untuk menu arsip jenis Hierarki, temukan kode berikut ini.

<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='"archivedate " + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>

Untuk menu arsip jenis Daftar Flat, temukan kode berikut ini.

<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>

Untuk menu arsip jenis Menu Pulldown, temukan kode berikut ini.

<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"' >
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>

Keempat, kemudian hapus kode yang berwarna merah tersebut.

Kelima, Simpan Template

Keenam, Selesai.

Setelah dilakukan pengeditan, tampilan untuk masing-masing menu arsip adalah sebagai berikut.

Menu Arsip dengan tampilan Hierarki tanpa angka


Menu Arsip dengan tampilan Daftar Flat tanpa angka

Menu Arsip dengan tampilan Menu Pulldown tanpa angka

Selamat Berkreasi!!

Baca juga yang ini.


Description: Menghilangkan Angka Pada Arsip Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Menghilangkan Angka Pada Arsip Blog
More aboutMenghilangkan Angka Pada Arsip Blog

Personal loans

Posted by Unknown

Personal Loans, have you ever needed this kind of loans? I believe the answer is yes and it is not only you who have needed or still needed but also almost everyone. People need it for their financial problems and purchase, such as; buying a new car, buying a new house, paying education fee and many more. Besides for the needs above, people apply for loans because they want to run a business or expand their business. To make their plans above come true, they can apply it in afsloansonline.com. Afsloansonline.com is a web site that offers Unsecured Loans and secured loans.

Unsecured Personal Loan is also easily found here and to apply loans here, we shouldn’t have to submit our documents with no additional upfront fee. If you are still doubt, you can try their 30 second free qualify form. With this form, you will know if you meet their request or games. For More info, please visit afsloansonline.com

BuyBlogReviews.com

Description: Personal loans Rating: 4.5 Reviewer: Unknown - ItemReviewed: Personal loans
More aboutPersonal loans