Cara Ganti Warna Backround Blog

Terkadang kita jenuh melihat blog kita dengan warna backround itu-itu saja. maka dari itu saya akan share pengalaman saya bagaimana cara mengganti warna backround blog kita. Oke, betikut caranya,.

• Masuk ke blog Anda
• Pilih Tata Letak -> Javasript
• Copy kode berikut ini

<style>
body {
background-image: url('URL BACKGROUND');
background-attachment: fixed;
background-repeat: repeat;
}
</style>

• Pastekan kode tersebut dalam kotak javasript tersebut
• Selesai

KETERANGAN :
Ganti URL BACKROUND sesuka anda, 

Demikan tutorial Cara Ganti Warna Backround Blog, semoga bermanfaat,,dan jangan lupa bertanya jika belum faham, silahkan bertanya pada kontak komentar ya,,Thank youuuuuuu,,,,,,,

Baca Selengkapnya...

Cara Membuat Daftar Isi Menggunakan Scroll Box

Daftar isi sangat penting dalam sebuah blog, agar para visitor mudah untuk mencari tulisan-tulisan yang mereka butuhkan. Tapi jika postingan kita banyak sampe ribuan gitu, maka juga terjadi kesulitan dalam mencarinya. Maka, agar pencairan tulisan kita dalam daftar isi mudah, sebaiknya pasanglah scroll boxnya.

Baiklah, sekarang saya akan posting bagaimana Cara Membuat Daftar Isi Menggunakan Scroll Box, berikut tutorialnya:

• Login ke blog
• Pilih laman
• Pilih laman daftar isi sobat, jika sobat belum memiliki daftar isi blog lihat cara membuatnya DISINI
• Pilih lagi halaman HTML
•  Kemudian copy kode berikut ini dan pastekan tepat di atas kode daftar isi blog sobat

<div style="overflow:auto;width:100%px;height:50px;padding:10px;border:1px solid #555">

• Kemudian letakkan kode </div> tepat di bawah kode script daftar isi blog sobat
• Kemudian publiskan, dan lihat hasilnya.

Demikian cara  Membuat Daftar Isi Menggunakan Scroll Box, semoga berhasil. Good Luck.
 

Baca Selengkapnya...

Cara Memasang Widget Jumlah Pengunjung Online

Pada dasarnya setiap blogger penasaran ingin melihat siapa sih yang mengunjungi blognya dan berpa jumlah pengunjung yang online pada blognya. Untuk menghilangkan rasa penasaran itu, mari kita pasang widget deteksi untuk melihat siapa orang yang berani mengunjungi blog kita,,hehheee

Baik, sekarang kita akan menggunakan jasa dari website yang terkenal dengan nama www.whos.amung.us sebagai media jasa untuk mendapatkan widget tersebut. Mari langsung ke tutorial Cara Memasang Widget Jumlah Pengunjung Online, begini caranya :

• Pertama pastinya sobat login ke blognya
• Pilih tata letak 
• Kemudian pilih tambah gadget
• Selanjutnya pilih HTML/javascript
• Copy kode di bawah ini sesuai model gambar icon yang anda inginkan dan pastekan ke halaman HTML/javascript tersebut
• Terakhir simpan gadget.

Berikut ini model gambar dan kode icon jumlah pengunjung online.

• Model Pertama 

<script id="_wauw91">var _wau = _wau || []; _wau.push(["classic", "x2ysn3f6viy5", "w91"]);

(function() {var s=document.createElement("script"); s.async=true;

s.src="http://widgets.amung.us/classic.js";

document.getElementsByTagName("head")[0].appendChild(s);

})();</script>

• Model kedua

<script id="_waue0r">var _wau = _wau || [];

_wau.push(["colored", "x2ysn3f6viy5", "e0r", "ffc20e000000"]);

(function() {var s=document.createElement("script"); s.async=true;

s.src="http://widgets.amung.us/colored.js";

document.getElementsByTagName("head")[0].appendChild(s);

})();</script>

• Model ketiga

<script id="_wau8z5">var _wau = _wau || []; _wau.push(["small", "x2ysn3f6viy5", "8z5"]);

(function() {var s=document.createElement("script"); s.async=true;

s.src="http://widgets.amung.us/small.js";

document.getElementsByTagName("head")[0].appendChild(s);

})();</script>

• Model keempat

<script id="_wau9ba">var _wau = _wau || [];

_wau.push(["tab", "x2ysn3f6viy5", "9ba", "left-middle"]);

(function() {var s=document.createElement("script"); s.async=true;

s.src="http://widgets.amung.us/tab.js";

document.getElementsByTagName("head")[0].appendChild(s);

})();</script>

Silahkan sobat pilih sesuai dengan keinginan hati ya..Demikian cara memasang icon pengunjung online untuk blog. Terima kasih.

Herman Maulana

Baca Selengkapnya...

Cara Centerkan Title Post dan Title Sidebar Blog

Tidak henti-hentinya kita mencari ilmu dan pengalaman seperti yaang terdapat di dalam hadits "Tuntutlah Ilmu dari ayunan sampai keliang lahat", begitulah pentingnya menuntut ilmu bagi setiap mananusia. dan berbagi ilmu juga merupakan hal penting bagi setiap manusia seperti yang di jelaskan dalam sunnah nabi " smpaikanlah ilmu dariku walau hanya satu ayat" (H.R. Bukhori), begitulah pentingnya berbagi ilmu tersebut.

Maka dari itu, saya akan berbagi ilmu kepada sobat dengan ilmu yang saya dapat. Adapun ilmu yang saya bagikan adalah bagaimana Cara Centerkan Title Post dan Title Sidebar Blog. Caranya sebagai berikut :

• Login ke blog
• Pilih template
• Pilih Edit HTML
• Cari kode ]]></b:skin>
• Copy kode berikut ini dan pastekan tepat di atas kode ]]></b:skin>

h2 {

text-align:center;

}

• Kemudian lakukn pratinjau template 
• Jika berhasil, simpanlah template blog sobat 

Demikian Cara Centerkan Title Post dan Title Sidebar Blog, jika sobat berhasil dengan mengikuti tutorial dari saya maka jangan lupa share postingan ini atau like. Good Luck.

Herman Maulana

Baca Selengkapnya...

Cara Center Judul Blog

Terkadang kita muak dengan tampilan blog itu-itu saja, kita ingin blog kita tampil sedemikian rupa bagusnya. Agar rasa muak atau bosan melihat tampilan blog yang biasa saja, sekarang saya akan berbagi pengalaman kepada sobat bagaimana cara centerkan judul blog.

Tutorial saya ini hasil coba-coba, eh ternyata berhasil juga. Sekarang saya akan beri tutorialnya. adapun tutorial Cara Center Judul Blog sebagai berikut :

• Login ke blog
• Pilih template
• Pilih Edit HTML
• Cari kode  berikut ini, biasanya terletak di atas ]]></b:skin>, atau cari saja dengan CTRL+F dan ENTER

#headersec {
    height: 126px;
Letakkan Kode Center
}

• Copy kode berikut ini dan pastekan ke dalam kode yang tertera di atas

text-align:center;

• Kemudian lakukan pratinjau template
• Jika berhasil, simpanlah template sobat.

Demikian tutorial  Cara Center Judul Blog, jika sobat berhasil dengan mengikuti tutorial dari saya, maka saya berharap sobat bisa berikan sedikit komentar pd posting ini atau shre posting ini atau like posting ini. Terima kasih. Good Luck.

Herman Maulana

Baca Selengkapnya...

Cara Membuat Scroll Box pada Populer Post

Terkadang kita sangat muak sekali melihat populer post yang begitu panjang dan menghabiskan tempat sidebar blog kita. Maka dari tu disini saya akan menjadikan populer post tersebut enak dilihat. Berikut ini tutoril Cara Membuat Scroll Box pada Populer Post.

• Login ke blog
• Pilih Template
• Pilih Edit HTML
• Cari kode ]]>< /b:skin > 
• Jika sudah ketemu copy dan pastekan kode di bawah ini tepat diatas kode ]]>< /b:skin >

#PopularPosts1 .widget-content{
height:170px;
width:auto;
overflow:auto;
}

• Setelah itu lakukan pratinjau template jika berhasil langsung simpan template sobat
• selesai...

Demikian  Cara Membuat Scroll Box pada Populer Post, jika sobat berhasil membuat scroll box pada populer post dengan membaca atau mengikuti langkah-langkah dari saya, maka sebagai ucapan terima kasih sobat cukup share atau like atau komentar postingan saya ini. Good Luck.

Herman Maulana

Baca Selengkapnya...

Cara Membuat Scroll Box di Label

Scroll Box adalah sebuah kotak yang berisi teks, gambar, tau elemen lainnya yang memungkinkan pengguna untuk mengulir jika isinya terlalu besar atau banyak untuk kotak. Jadi, Scoll Box dapat memperkecil penggunaan suatu ruang untuk menampilkan teks, gambar, atau elemen lainya, seperti label pada blog. Sedangkan fungsi dari Scroll Box adalah dapat menghemat tempat dan juga memasukkan berpuluh-puluh postingan tanpa batas. 

Setelah mengetahui apa itu Scroll Box dan fungsi dari Scroll Box tersebut, selanjutnya kita akan memasang scroll box tersebut untuk label blog, karena label tersebut bisa memakan banyak tempat apabila post blog banyak.

Cara Membuat Scroll Box di Label. Berikut ini caranya..

• Login ke Blog>Template>Edit HTML
• Kemudian cari kode ]]></b:skin>
• Kemudian letakkan kode berikut ini di atas kode ]]></b:skin> 

#Label1 .widget-content{
height:315px;
width:auto;
overflow:auto;
}

#Label1 .widget-content{
height:315px;
width:auto;
overflow:auto;
} - See more at: http://www.ngeblognews.com/2012/02/cara-membuat-scroll-di-label-pada.html#sthash.OibFYpZM.dpuf

#Label1 .widget-content{
height:315px;
width:auto;
overflow:auto;
} - See more at: http://www.ngeblognews.com/2012/02/cara-membuat-scroll-di-label-pada.html#sthash.OibFYpZM.dpuf

• Sebelum menyimpan template lakukan pratinjau template dahulu
• Setelah berhasil simpan templatenya.

KETERANGAN : Ganti angka yang berwarna merah sesuai keinginan sobat, itu merupakan tinggi scroll box.

Demikian Cara Membuat Scroll Box di Label, semoga berhasil.

• ]

Baca Selengkapnya...

Cara Menganti Icon Tombol Share dengan Photo Sendiri

Tombol share sangat dibutuhkan untuk mempromosikn blog kita. Sistem kerja dari tombol share adalah memberikn kesempatan kepada visitor blog untuk membagikan blog melalui media sosial, seperti facebook, twitter, atau media sosail lainnya.

Jadi, tombol share sangat mempengaruhi dalam memperkenalkan blog kita. Oke. Sekarang saya akan berbagi pengalaman bagaimana Cara Menganti Icon Tombol Share dengan Photo Sendiri,,HEHE. Yukkkss,,langsung ke tutorialnya.

• Login ke Blog > Template > Edit HTML
• Sobat cari kode CSS berikut ini

<div class='addthis_toolbox'>

• Kemudian sobat akan melihat kode di bawah <div class='addthis_toolbox'>, seperti berikut ini

<div class='custom_images'>
    <a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPP0U67uzn_M-qRuwZJU7vaYIVnnSKMhVoW1Zu0RbD8MiVxQu7akrG2MfV0e6ZgJvIXYinwgghQRArH5VVjmmJQU3ATG22837NePWS83P8HxpZIOv__H5S7QDSSTNqB5GuashfjtB1PxBX/s0/twitter.png' width='32'/></a>
    <a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCmcC5fiGEMbR0YT65020LuNUILlGtmsDejq2ElAB8Q-lNMgppSejbY2iaWR9jYx2A0Ov_btxFTZRpMp1h0_YjEIlBhBzJCXHo7ykBbEc8_54ZJd6gGQ_o1_kFA0M22SV5ikGSaNEgoUe3/s0/delicious.png' width='32'/></a>
    <a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkwPGdhyphenhyphenrSmmykMpi-ewwnua6VDFVReQHz9WVBpNFzvqTQUSpcWo1_mNMt1NRSGGC3d_Z-pOYCt2Z7W1UfdWDj69h7taVF2VPX_8TEBpQ9-1Ft0YvfKObVc3hpeBs059WX6HHARaHPghd2/s0/facebook.png' width='32'/></a>
    <a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj_XV8yGOypD73cCYuXX_QLce9RB-_GZSCz5G7MCMsQj0jrQ28OJCaJXokn9Y0sjmwcg1CCBbCunS1HB53zKy5l0LBOL1IfoK7t2CyxfB-oXVGmkTFW9dSyAbhfH5F-mHirkw-8BtWhFBj/s0/digg.png' width='32'/></a>
    <a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipmMzZfC8Hrska64Du2O5dZ_eZx6323blAxMn2EZ0iyqEVVtW37U9Mfgm39IOWJI45XvOQAAvGcmkn-lDEL1sJXTBacY30C_SyRpUWVGMIq1ngv4LjPjwx8BLN3_0CsYP_G98crn090zzr/s0/stumbleupon.png' width='32'/></a>
    <a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia-Rgx_cRac6-JG4gpCCL4r6oaVhKsGAz4Y-gGLTZvuc3QuZGWecpyqFwdM4EOGBycJaWP74Fe36l5fydhC6_kibarGyy-r9HTN5CTqxaH3R0WvkhSmg2N0ik4iL7OaoA9lo26fbuB3ilB/s0/favorites.png' width='32'/></a>
    <a class='addthis_button_more'><img alt='More' height='32' src='http://1.bp.blogspot.com/-U_wOvK00LZc/Us7ACwKyKAI/AAAAAAAAA9c/fPKKms8lREM/s1600/her2.jpg' width='32'/></a>
</div>

KETERANGAN :  

1. Kode Url gambar yang berwarna merah silahkan sobat ganti dengan URL gambar sobat sendiri.
2. Cara mendapatkn Url gambar lihat DISINI

• Setelah selesai mengganti url gambar maka sebelum disimpan pratinjau template dulu template sobat, jika berhasil silahkan simpan templatenya.

Demikian tutorial  Cara Menganti Icon Tombol Share dengan Photo Sendiri, jika sobat berhasil mengganti icon tombol share dengan gambar sendiri maka jangan lupa untuk share atau like positngan ini atau berikan komentar sederhana, seperti hehehe,,.

Baca Selengkapnya...

Cara Membuat Scroll Box Archive Blog

Sebelum ke tutorial Cara Membuat Scroll Box Archive Blog, sebaiknya kita diajurkn untuk mengetahui apa sih Scroll Box dan apa sih fungsi dari Scroll Box tersebut.Scroll Box adalh sebuh kotak yang berisi teks, gambar, tau elemen lainya yang memungkinkan pengguna untuk mengulir jika isinya terlalu besar atau banyak untuk kotak. Jadi, Scoll Box dapat memperkecil penggunaan sutu ruang untuk menampilkan teks, gambar, atau elemen lainya, seperti archive pda blog. Sedangkan fungsi dari Scroll Box adalah dapt menghemat tempat dan juga memasukkan berpuluh-puluh postingan tanpa batas.

Setelah mengetahui apa itu Scroll Box dan fungsi dari Scroll Box tersebut, selanjutnya kita akan memasang scroll box tersebut untuk archive blog, karena archive tersebut bisa memakan banyak tempat apabila post blog banyak.

Oke,. Sekarang kita langsung ke tutorial Cara Membuat Scroll Box Archive Blog, berikut ini caranya :

• Login ke blog
• Klik Template
• Klik Edit HTML, dan jangan lupa cadangkan dulu template blog sobat, gunanya untuk menghindarkan kesalahan pemasangan kode, jika salah kita masih bisa mengembalikan template seperti semula.
• Selanjutnya cari kode berikut ini dengan cara tekan CTRL+F, pastekan kode tersebut dan tekan ENTER

kotak yang berisi teks, gambar, atau elemen lainnya, yang memungkinkan pengguna untuk menggulir jika isinya terlalu besar untuk kotak. Kotak gulir sering digunakan ketika Anda tidak ingin mengambil ruang terlalu banyak dengan konten Anda. Dengan membuat kotak scroll, Anda mengizinkan lebih banyak konten untuk masuk ke dalam ruang yang lebih kecil. 
- See more at: http://chalouiss.blogspot.com/2012/09/membuat-scroll-box.html#sthash.xmBiDNhS.dpuf

kotak yang berisi teks, gambar, atau elemen lainnya, yang memungkinkan pengguna untuk menggulir jika isinya terlalu besar untuk kotak. Kotak gulir sering digunakan ketika Anda tidak ingin mengambil ruang terlalu banyak dengan konten Anda. Dengan membuat kotak scroll, Anda mengizinkan lebih banyak konten untuk masuk ke dalam ruang yang lebih kecil. 
- See more at: http://chalouiss.blogspot.com/2012/09/membuat-scroll-box.html#sthash.xmBiDNhS.dpuf

kotak yang berisi teks, gambar, atau elemen lainnya, yang memungkinkan pengguna untuk menggulir jika isinya terlalu besar untuk kotak. Kotak gulir sering digunakan ketika Anda tidak ingin mengambil ruang terlalu banyak dengan konten Anda. Dengan membuat kotak scroll, Anda mengizinkan lebih banyak konten untuk masuk ke dalam ruang yang lebih kecil. 
- See more at: http://chalouiss.blogspot.com/2012/09/membuat-scroll-box.html#sthash.xmBiDNhS.dpuf

<div id='ArchiveList'>

• Setelah ketemu kode <div id='ArchiveList'>, maka di atasnya ada kode seperti berikut ini.

<div class='widget-content'>

• Kemudian ganti kode <div class='widget-content'> dengan kode di bawah ini

<div class='widget-content' style='overflow:auto; height:200px'>

 LIHAT GAMBAR INI

• Save template sobatdan lihat hasilnya

CATATAN : Sobat bisa mengganti Size Scroll Box sesuai keinginana, ganti yang angka 200px tersebut. 

Demikian tutorial Cara Membuat Scroll Box Archive Blog, jika sobat berhasil memasang scroll box berkat mengikuti tutorial dari saya, mohon share ya atau beri komentar sedikit saja sebgai ucapan terima kasih dari sobat. Good Luck. 

Baca Selengkapnya...

Cara Membuat Background Posting Bergambar

Agar blog kita terlihat lebih menarik dan visitor betah berlama-lama mampir di blog kita ini dikarenakan bahwa blog tersebut memberikan informasi yang bagus. Selain itu, penampilan sebuah blog juga memberikan pengaruh yang sangat signifikan terhadap kebetahan visitor berlama-lama diblog tersebut.

Berdasarkan fenomena di atas maka saya akan mmemberikan tutorial bagaimana Cara Membuat Background Postingan Bergambar, seperti blog saya , lihat DISINI

Oke,. Berikut tutorial Cara Membuat Background Postingan Bergambar...

• Masuk ke blog
• Klik Entri baru atau New Post 

• Kemudian klik halaman HTML bukan Compose

• Setelah masuk ke halaman HTML, selanjutnya copykan kode berikut ini 

 <div style="background:url(Link gambar disini) no-repeat;">

• Kemudian, pastekan kode tersebut pada halaman HTML
•  Selanjutnya silahkan anda menulis postingan sobat di bawah kode tersebut
• terakhir jangan lupa tutup kode terakhir di bawah tulisan sobat dengan kode berikut

</div>

• Setelah selesai menulis publiskan postingan sobat dan lihat hasilnya. 
• Selesai

 Kode Lengkapnya seperti berikut.

 <div style="background:url(Link gambar disini) no-repeat;">
Tulisan Postingan
</div>

Demikian tutorial Cara Membuat Background Postingan Bergambar, jika berhasil membuat Background Postingan Bergambar dengan membaca tutorial ini jangan lupa testimoninya ya sobat,,,hehe,,Good Luck.

Baca Selengkapnya...