Cara membuat tombol sosial media share diblog

Cara membuat sosial media share, seperti facebook, google+, twitter dan lain2nya diblog. Tombol sosial media share dapat kita tempatkan dibawah judul posting atau dibawah posting. Dan dapat juga ditempatkan diwidget HTML/javascript di bagian sidebar blog.

Cara membuat sosial media share di blog, ikuti langkah-langkah dibawah ini.

1. Login ke blog, lalu pilih pengaturan Template.
2. Klik edit HTML dan cari kode </head> lalu masukan kode berikut ini diatasnya.
<script src="http://w.sharethis.com/button/buttons.js" type="text/javascript"></script>
<script type="text/javascript">stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
3. Save template. Selesai.

Setelah menempatkan kode script. Sekarang kita akan coba memasukan kode share di bagian2 blog, seperti di bawah judul posting, diwidget sidebar atau dibawah posting blog. Silakan dipilih salah satu. Caranya seperti dibawah ini.

Sosial media share dibawah judul posting

1. Ke pengaturan template, klik edit hmtl dan cari kode <div class='post-header-line-1'/>
2. Kode <div class='post-header-line-1'/> ada 2,  piih yang nomor 2 lalu masukan kode share button ini dibawah nya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left' class='kode-share-buttons'>
<keterangan>Bagikan Artikel >>></keterangan>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p></b:if>
3. Silakan gunakan kode share yang kalian inginkan, dan untuk tulisan Bagikan Artikel >>> Kamu bisa ganti dengan kata yang kamu inginkan. Setelah itu save template, selesai.

Sosial media share dibawah posting

1. Ke pengaturan template, klik edit hmtl dan cari kode <data:post.body/>
2. Kode <data:post.body/> ada 3,  piih yang nomor 3 lalu masukan kode share button dibawah nya.
3. Kode kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
4. Save template, selesai.

Sosial media share di widget atau sidebar

1. Kepengaturan tata letak, Klik Tambahkan widget/gadget > HTML/Javascipt.
2. Lalu masukan kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
3. Save gadget/widget, lalu tempatkan sesuai dengan yang kalian inginkan, selesai.

Dan yang terakhir adalah menambahkan  kode css untuk menambah tampilan dari tombol sosial media share. Caranya.

1. Kepengaturan TATA LETAK. Klik desainer template > tingkat lanjut > tambahkan css. Lalu masukan kode ini kedalmnya.
.kode-share-buttons{border-top:1px dashed #ccc;border-bottom: 1px dashed #ccc;padding: 10px;}
keterangan {color:#000;font-weight:bold;margin-right:20px;}
2. Terapkan ke blog selesai.

Semoga Bermanfaat.

Read More

Cara membuat icon sendiri dengan mudah

Tutorial kali ini saya akan coba bagikan tips dan trik tentang cara membuat icon sendiri dengan mudah, menggunakan program microsoft office PowerPoint. Icon atau lambang gambar biasanya digunakan untuk logo website atau blog, ada juga untuk icon disebelah tulisan menu, bahkan digunakan juga sebagai menu.

Contohnya seperti gambar dibawah ini:

Gambar diatas adalah hasil dari pembuatan icon di PowerPoint, yang disave dalam format PNG, agar background icon tetap transparant. Untuk lebih jelasnya tentang cara pembuatan icon di microsoft PowerPoint. Ikuti langkah - langkah dibawah ini.

1. Silakan buka program PowerPoint. Lalu pilih bagian Insert.
2. Selanjutnya pilih tulisan Shape dan pilih bentuk gambar yang kita inginkan.
3. Setelah gambar nya sudah ada, klik gambar tersebut dan pilih Format dibagian atas bar powerpoint.
4. Lalu edit gambar itu sesuai dengan yang kita inginkan.
5. Untuk menyimpan gambar, klik Kanan gambar tersebut dan pilih Save as picture lalu save dalam format PNG. Selesai.

Contoh gambar icon yang saya buat. Icon pertama menggunakan satu gambar awan dan Icon kedua menggunakan 2 gambar gambar awan dan matahari.

Untuk membuat icon dengan 2 gambar, silakan buat 2 gambar di powerpoint, lalu blok ke 2 gambar setelah itu baru Save As Picture. Selesai. Jika kamu ingin menggunakan icon dengan ukuran yang sama, kamu bisa gunakan photoshop, caranya bisa dilihat di artikel cara membuat icon untuk website.

Untuk mencoba hasil gambar yang telah kamu buat diblog. Kamu bisa baca artikel mengganti tulisan beranda posting lama baru yang letaknya dibawah posting dengan gambar. Tapi sebelumnya upload terlebih dahulu gambar kamu ke blog dan ambil urlnya, caranya baca di cara upload dan ambil url gambar.

Itulah sedikit tips dan trik dari saya dalam membuat icon sendiri dengan mudah menggunakan program microsoft office PowerPoint yang dapat digunakan untuk mendesain icon blog atau website anda sendiri. Semoga bisa bermanfaat untuk anda.

Read More

Cara merapikan tulisan hasil copi internet

Cara merapikan tulisan hasil copi internet di microsoft word dengan menggunakan program notepad. Jika kita mencopi tulisan dari internet/website atau blog orang, lalu langsung kita pastekan ke microsoft word. Maka format tulisan dari internet pun akan ikut masuk ke microsoft word. Seperti contoh gambar dibawah ini. Sebelum dan sesudah dirapikan.

Dari gambar diatas kita bisa melihat, tulisan hasil copian internet jika langsung kita pastekan di microsoft word, maka tulisan aslinya pun akan ikut ke microsoft word. Berbeda dengan hasil copian internet jika sudah di pindahkan ke program notepad, lalu baru kembali ke microsoft word. Maka format tulisan akan sama yaitu format font Calibri dengan ukuran 11, tidak ada format lain. Sehingga memudahkan kita untuk merapikannya. 

Langsung saja kebagian utama. Cara merapikan tulisan hasil copi internet.

1. Pertama, silakan copi tulisan yang ada diinternet. Diwebsite atau diblog orang. Selanjutnya pastekan di Microsoft word.
2. Dari hasil copian di microsoft word, copi tulisan yang akan dirapikan.
3. Lalu pastekan ke program Notepad(Start > All Program > Accessories > Notepad)
4. Setelah itu copi tulisan yang ada dinotepad, dan pastekan kembali ke Microsoft Word. Selesai.

Kekurangan dari format ini adalah notepad tidak membaca gambar, jadi yang terbaca hanya tulisan saja. Bagaimanapun bentuk format tulisan dari sebuah tulisan, jika sudah masuk ke notepad. Maka tulisan tersebut akan berformat font Calibri ukurannya 11. Jadi istilahnya notepad ini gunannya untuk menetralisir format tulisan. 

Memang tidak sepenuhnya rapi, masih harus dirapikan sendiri tulisan di microsoft word. Tapi setidaknya format2 tulisan yang berwarna-warni dari link2 blog orang akan hilang. Jadi tidak harus mengganti warna link satu persatu dimicrosoft word. Semoga Bermanfaat.

Read More

Cara membuat background warna transparan

Background warna transparan, yang berarti background dengan menggunakan warna transparan, tetapi background aslinya juga terlihat. Jadi background awal juga terlihat, misalkan background awal kita menggunakan gambar, dan background warna transparan kita warnanya hitam. Maka warna transparan hitam dengan background gambar juga akan terlihat.

Seperti contoh gambar diatas,background dasar yang digunakan adalah background gambar, dan background trasnparanya berwarna hitam. Tapi warna hitam tersebut tidak sepenuhnya hitam. Sedikit hitam dan background gambar awalnya tetap terlihat. Berikut ini adalah beberapa kode warna background yang dapat digunakan untuk membuat background warna transparant.

background:rgba(0,0,0, 0.3);

background:rgba(0,0,0, 0.8);

Sebelumnya saya jelaskan sedikit tentang kode diatas.

• Ketiga kode awal digunakan untuk mengatur kode warna. kode warna 0,0,0 adalah warna dasar Hitam.
• Untuk kode terakhir 0.3 dan 0.8 digunakan untuk mengatur ketebalan dari warna hitam 0,0,0 tadi. Semakin besar kode terakhir, maka akan semakin hitam. Kode terakhir ini hanya sampai kode 1. Contoh:0,0,0, 1.

Untuk mengganti dengan warna lain, kamu bisa coba kode dibawah ini.

Untuk warna merah - background:rgba(204,0,0, 0.6);

Untuk warna pink - background:rgba(204,0,204, 0.8);

Untuk warna biru - background:rgba(0,0,204, 0.8);

Untuk warna Hijau - background:rgba(0,204,0, 0.8);

Untuk warna Kuning - background:rgba(204,204,0, 0.8);

Untuk warna Orange - background:rgba(255,102,0, 0.8);

Dan masih banyak lagi warna yang lainnya. Untuk melihat kode warna, kamu bisa lihat diphotoshop, lalu klik pada bagian set foreground color(gambar kotak untu ganti warna). Lalu lihat kode pada bagian RGB nya.

Seperti contoh gambar diatas, pertama klik dulu bagian kotak yang sudah saya beri tanda merah sebelah kiri, maka akan terbuka Color Picker, dan copi 3 kode RGB yang bertanda kotak merah itu untuk digunakan diwebsite.

Dan yang terakhir adalah cara penerapannya di blogger. Sebagai contoh kita akan coba mengedit pada bagian halaman posting blog. Caranya ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pada halaman Dasbor pilih pengaturan Tata Letak.
2. Selanjutnya klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode halaman posting ke dalamnya.
.post{border:1px solid #ddd; background:rgba(0,204,0, 0.5);}
3. Dan lihat perubahannya, background nya itu saya beri warna hijau, dengan ketebalan warna 0.5 hasilnya seperti gambar dibawah ini.

Untuk mengatur bagian lainnya, coba kamu baca di artikel cara mengganti background blog dengan gambar. Disana ada beberapa kode bagian blog yang dapat kamu gunakan. Semoga Bermanfaat.

Read More

Cara buat kotak bayangan diblog

Cara membuat kotak bayangan diblog. Maksudnya adalah kita dapat membuat bayangan pada kotak yang ada diblog seperti pada bagian sidebar, posting, header dan juga pada bagian lain-lainnya. Contoh kotak bayangan seperti dibawah ini.

---

Untuk cara menerapkannya ke blog, kita coba edit pada bagian sidebar blog yang ada disebelah kanan/kiri blog. Caranya ikuti langkah-langkah dibawah ini.

---

1. Login keblogger, lalu kepengaturan Tata Letak.
2. Selanjutnya klik Desainer Template > Tingkat lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya.
.sidebar .widget {box-shadow: 0px 15px 15px #1780dd;}
3. Maka hasilnya akan seperti contoh kotak bayangan diatas.
4. Dan klik Terapkan ke blog, untuk menyelesaikan editan.

---

Berikut ini beberapa contoh kode box-shadow atau kotak bayangan yang dapat anda gunakan diblog.

---

box-shadow: 0px 0px 15px #1780dd;

box-shadow: 5px 5px 5px#1780dd;

box-shadow: -5px -5px #1780dd;

box-shadow: inset 0 0 10px;

box-shadow: 5px 5px 5px 5px #1780dd;

Silakan dicoba sendiri diblog anda, dengan menggunakan kode2 diatas. Untuk mengedit pada bagian yang lain silakan baca artikel cara mengganti blog dengan gambar atau cara membuat tulisan bayangan diblog disana ada kode2 bagian dari blog, yang dapat anda gunakan juga untuk diedit. Itulah sedikit cara mendesain blog menggunakan kode box-shadow atau kotak bayangan yang dapat digunakan diblog. Semoga bisa bermanfaat untuk anda.

Read More

Cara membuat background gradient 2 warna

Background gradient fungsinya untuk membuat background warna dengan menggunakan 2 warna sekaligus, dengan perbandingan persen disetiap warnanya. Jadi misalkan kita ingin menggunakan warna putih dan biru dibackground blog kita. Maka kita dapat mengatur warna putih dibagian atas dan warna biru dibagian bawah. Berbeda dengan pengaturan warna biasa yang hanya satu warna.Contoh penggunaannya seperti dibawah ini.

---

Background 1 warna dengan menggunakan warna biru.

---

Warna Biru Saja

---

Background 2 warna dengan menggunakan warna biru dan putih.

---

Warna Biru dan Putih

Selanjutnya adalah cara membuat dan menerapkannya diblog. Sebagai percobaan kamu bisa coba edit warna background dari halaman posting blog. Ke pengaturan tata letak > klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode background posting berikut kedalamnya.

.post{
background: -moz-linear-gradient(center top , #ffffff 40%, #1780dd 100%);}

Lalu lihat perubahan background halaman posting, warna putih akan berada diatas dan biru ada dibagian bawah.

---

Berikut jenis2 pengaturan warna gradient 2warna yang dapat kita gunakan.

---

Atas - Bawah
background: -moz-linear-gradient(top , #ffffff, #1780dd);

Kiri - Kanan
background: -moz-linear-gradient(left , #ffffff, #1780dd);

Warna Berhenti putih-biru-putih-biru-putih
background: -moz-linear-gradient(left , #ffffff, #1780dd, #ffffff, #1780dd, #ffffff);

Warna Berhenti putih-biru-putih-biru-putih dengan persen%
background: -moz-linear-gradient(left , #ffffff, #1780dd 5%, #ffffff, #1780dd 95%, #ffffff);

Warna putih dikiri-kanan dan biru ditengah
background: -moz-radial-gradient(circle, #1780dd, #ffffff);

Posisi dan Ukuran
background: -moz-radial-gradient(80% 20%, closest-corner, #1780dd, #ffffff);

Ukuran: 80% untuk warna putih dan 20% untuk warna biru
Posisi: closest-corner pada bagian atas bisa diganti dengan kode

closest-side
closest-corner
farthest-side
farthest-corner
contain
cover

Silakan berkreasi sendiri, dengan kode2 diatas dalam mendesain blog anda agar terlihat lebih menarik. Untuk cara penggunaan dibagian lain, seperti pada bagian header, sidebar atau keseluruh body halaman blog, kamu bisa baca di artikel cara mengganti background blog dengan gambar diartikel itu, ada kode dari bagian2 blog, yang dapat kamu gunakan untuk diberi background 2 warna seperti contoh diatas.
Catatan: Gradient 2 warna ini tidak bisa dilihat di browser google chrome, sebabnya saya belum tau, jika sudah tau saya akan tambahkan di artikel ini, untuk di mozilla bisa, warna gradient 2 warna terlihat.Semoga bisa bermanfaat untuk anda.

Read More

Menu gambar dengan posisi sembarangan

Menu gambar dengan posisi sembarangan. Maksudnya adalah membuat menu menggunakan gambar, dengan posisi gambar yang tidak beraturan. Gambar bisa ditempatkan diatas, bawah, kanan, kiri sesuai dengan yang kita inginkan. Contohnya seperti dibawah ini.

• 

• 

• 

• 

• 

---

Cara membuatnya, ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Dan klik Tambahkan Gadget di bawah header atau disidebar. Dan pilih HTML/Javascript.
3. Selanjutnya copi kode HTML dibawah ini, dan pastekan didalam Gadget HTML/Javascript tadi.
<div id="satu1">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="dua2">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="tiga3">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="empat4">
<ul>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html" title="Daftar isi"><img alt="Daftar Tutorial Desain Blog" height="74" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhZ4W1VYPVS_da-8YxqC4Cnd6nTq2s14PKell8i3zDjT499H7Le2tQpFcWLXjsBVXh93yJVxJR3JKJIV1ZlCOPnhyphenhyphenSTVRn-tYVBp_kg3IWRRT1Fi_wi4V0qvWGczA5U_B5jXSY0U6AEKg/s133/Daftar%2520Isi.PNG" title="Daftar isi" width="133" /></a></li>
</ul>
</div>

<div id="lima5">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>
4. Selanjutnya, simpan HTML/Javascript.

Keterangan kode:

• Silakan isi URL Menu dengan URL/Halaman web anda.
• Silakan isi URL dari Gambar dengan URL dari gambar anda.
• Contoh URL bisa dilihat di div id="empat4" 

---

Setelah itu ke tahap pengaturan posisi gambar, caranya klik Desainer Template(masih pada pengaturan Tata Letak). Lalu Klik Tingkat Lanjut > Tambahkan Css. Dan masukan kode CSS dibawah ini kedalamnya.

---

#satu1{background:transparent;margin:-10px 0px 0px -100px;float:left;}
#satu1 ul{list-style:none}

#dua2{background:transparent;margin:-40px 0px 0px 0px;float:left;}
#dua2 ul{list-style:none}

#tiga3{background:transparent;margin:-10px 0px 0px 0px;float:right;}
#tiga3 ul{list-style:none}

#empat4{background:transparent;margin:40px -390px 0px 0px;float:right;}
#empat4 ul{list-style:none}
#empat4 img{position:relative;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .4s ease-in-out}
#empat4 img:hover{-o-transform:scale(1) rotate(720deg);-moz-transform:scale(1) rotate(720deg);-webkit-transform:scale(1) rotate(720deg)}

#lima5{background:transparent;margin:-40px -160px 0px 0px;float:right;}#lima5 ul{list-style:none}

---

Keterangan Kode:

---

• margin:40px -390px 0px 0px; fungsinya untuk mengatur gambar ke posisi yang kita inginkan, formatnya kode tersebut adalah 40px(atas) -390(kanan) 0px(bawah) 0px(kiri).
• float:right;  dan float left fungsinya untuk memudahkan kita menempatkan gambar ke bagian kiri atau kanan
• #empat4 img{ dan #empat4 img:hover{ kode tambahan agar gambar berputar ketika disentuh mouse.

Atur posisi dari gambar tersebut sesuai dengan yang kalian inginkan.  Setelah selesai mengatur posisi gambar, baru lah klik Terapkan Ke Blog, Selesai.

Dengan memasukan kode Css ke bagian Tambahkan Css, kita dapat melihat perubahan posisi gambar secara langsung, ketika kita merubah nilai dari kode Css. Contoh gambar penempatan kode Css didalam ruang Tambahkan Css.

Silakan baca juga artikel tentang cara membuat menu blog dengan gambar, yang dapat dijadikan pilihan dalam pembuatan menu gambar diblog. Semoga bisa bermanfaat untuk anda.

Read More

Cara membuat menu HTML dan Css

Cara membuat menu html dan css serta cara mengisi menu tersebut dengan link atau url yang kita inginkan. Perlu diketahui bahwa menu terdiri dari kode HTML sebagai pokok utama dari menu dan CSS sebagai penghiasnya. Akan saya coba jelaskan sedikit demi sedikit.

---

Kode dasar HTML dari sebuah menu, kira-kira seperti ini.

---

<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
</ul>
</div>

Maka hasilnya akan menjadi seperti ini.

• Beranda

Selanjutnya kita coba tambahkan menu yang lainnya. Seperti Profil, Contact, dan Daftas isi.

<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
<li><a href="URL alamat web">Profil</a></li>
<li><a href="URL alamat web">Contact</a></li>
<li><a href="URL alamat web">Daftas Isi</a></li>
</ul>
</div>

Maka hasilnya akan menjadi seperti ini.

• Beranda
• Profil
• Contact
• Daftar Isi

Dari contoh diatas, setiap menu mempunyai kode sendiri.
Seperti Beranda kodenya: <li><a href="URL alamat web">Beranda</a></li>.
Jadi jika ingin menambahkan menu lagi, kita dapat menambahkan kode dengan format
<li><a href ="URL address">Nama menu yang akan dibuat</a></li>

Dari kode HTML menu diatas. Menu akan berbentuk menurun/vertical dengan bullet-list disamping kirinya. Sekarang masuk ke bagian CSS/Penghias menu. Dari kode CSS inilah kita dapat membuat menu menjadi bentuk Horizontal atau memanjang kesamping. Mengatur warna tulisan, warna background, jarak antar tulisan dan lain-lainnya. Kode Css akan berjalan sesuai dengan kode HTML yang kita buat.

Untuk cara memasangnya di blog, ke pengaturan tata letak > klik tambahkan gadget > pilih HTML/Javascipt, lalu masukan kode HTML dan CSS kedalamnya Dengan format seperti dibawah ini.

<style>
kode Css
</style>
kode html

Lalu Save, selesai.

Lanjut ke bagian Css. Seperti contoh kode HTML diatas. Kita membuat menu dengan Kode id=menu maka dikode Css nya juga harus menu. Contoh:

#menu { background:#eee;border:1px solid #444444;}

Maka hasilnya akan menjadi seperti ini.

• Beranda
• Profil
• Contact
• Daftas Isi

Selanjutnya menghilangkan bullet list. Tambahkan kode #menu ul {list-style:none;} Maka hasilnya akan menjadi seperti ini.

• Beranda
• Profil
• Contact
• Daftas Isi

Mengatur jarak antar tulisan. Tambahkan kode #menu ul li {padding:5px;} hasilnya.

• Beranda
• Profil
• Contact
• Daftas Isi

Mengatur warna,ukuran,tebal tulisan tambahkan kode Css #menu ul li a{color:#aaaaaa;font-size:12px;font-weight:bold;} Hasilnya:

• Beranda
• Profil
• Contact
• Daftas Isi

Mengatur warna tulisan ketika disentuh mouse. tambahkan kode #menu ul li a:hover{color:#aaa;} Hasilnya.

• Beranda
• Profil
• Contact
• Daftas Isi

---

Jadi kode keseluruhan dari kode HTML dan CSS diatas adalah seperti ini.

---

<style>
#menu { background:#eee;border:1px solid #444444;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>

<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>

---

Sekarang ke tahap pembuatan menu horizontal. Kode HTML nya sama seperti cara diatas, yang berbeda hanyalah kode Css nya kita tambahkan kode float;left pada bagian #menu ul li {padding:5px;float;left; } dan juga kode height:40px; pada bagian #menu { background:#eee;border:1px solid #444444;height:40px;} . Contoh:

---

<style>
#menu { background:#eee;border:1px solid #444444;height:40px;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;float;left}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>

<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>

---

HASILNYA

---

• Beranda
• Profil
• Contact
• Daftas Isi

Dari contoh2 diatas, kita dapat melihat perbedaan antara menu horizontal dan vertical terletak pada kode Cssnya sedangkan kode HTML nya tetap sama. Silakan berkreasi sendiri. Artikel diatas hanyalah sedikit tutorial sederhana dari saya, yaitu tentang dasar pembuatan menu menggunakan kode HTML dan Css, yang dapat anda kembangkan sendiri sesuai dengan keinginan anda. Semoga Bermanfaat.

Read More

Cara merubah bullet list diposting blog

Cara merubah tampilan bullet list diposting blog menggunakan gambar. Bullet list atau tanda bulat-bulat yang ada diposting blog akan kita ganti dengan menggunakan gambar, agar terlihat lebih stylish. Contoh gambar lihat dibawah ini.

Bagaimana??anda tertarik untuk mengganti bullet list diblog anda dengan gambar. Jika tertarik, silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Selanjutnya kepengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. 
2. Lalu copi kode berikut dan pastekan kedalam kotak tambahkan Css.
.post ul {
list-style:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6ifwfdCFi-Rb4yV8ACZ3_Dk-2uhkhk-v26vm9gO8J6gFX6sq28w2xB7ZbwidOHtar3Rw5lsHoJE71r-PZGPJ_UOR-6wtt6iKS_r0zbHhabhdzkNC7HY1vUNPgylemSyZxfTUHwviGT2S/s12/bullet%2520list.gif);}
3. Selanjutnya Klik terapkan ke blog, selesai.

Keterangan Kode:

• .post ul { kode untuk mengatur bullet list diposting blog.
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6ifwfdCFi-Rb4yV8ACZ3_Dk-2uhkhk-v26vm9gO8J6gFX6sq28w2xB7ZbwidOHtar3Rw5lsHoJE71r-PZGPJ_UOR-6wtt6iKS_r0zbHhabhdzkNC7HY1vUNPgylemSyZxfTUHwviGT2S/s12/bullet%2520list.gif merupakan kode url dari gambar yang akan dijadikan bullet list diposting blog.

Jika ingin menggunakan gambar sendiri, silakan buat gambar yang akan dijadikan bullet list diprogam gambar, buatlah gambar dengan ukuran yang kecil, misalnya 16x16, seperti contoh gambar diatas, gambar bullet list yang saya gunakan ukurannya 12x10. Untuk cara merubah ukuran gambar, kalian bisa baca di artikel cara membuat icon untuk website menggunakan photoshop.

Agar tidak memberatkan loading blog, buatlah gambar dengan format Gif. Karena dengan menggunakan format Gif, ukuran gambar bisa dibawah 1kb, seperti contoh gambar, itu ukurannya hanya 873byte. Satu lagi kelebihan format gif, background gambar transparant. Jadi yang terlihat hanya bagian yang berwarna saja.

Setelah selesai membuat gambar, upload gambar dan ambil Url nya. Caranya bisa baca di artikel cara upload dan ambil url gambar. Dan gunakan url tersebut ke dalam kode .post ul { list-style(url gambar kamu sendiri);}. Selesai. Semoga bisa bermanfaat untuk anda.

Read More

Cara membuat author dibawah posting blog

Cara membuat author dibawah posting blog. Dengan menambahkan author atau profil penulis blog. Maka pengunjung akan lebih mudah untuk mengenali pemilik/penulis dari blog yang sedang dibacanya. Contoh gambar bisa lihat dibawah ini.

Untuk lebih jelasnya tentang cara membuat author dibawah posting blog. Ikuti langkah-langkah dibawah ini.

1. Login keblogger, pilh pengaturan template.
2. Klik edit HTML dan cari kode <data:post.body/> lalu masukan kode ini dibawahnya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='gambar'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIpaxAVk1XewCjg5cMkJn4TimXisnuDo7ixKl9YC-CZHbO5O3K5ln81nAQ8DXs100R1-STeQZqXI3VwPKDhP-qb9GVG11aPBlXdvNjiNN5HfsB0jO2bfBjAOU469wipxPuYpfbgXVyFTBz/s361/Fandra%2520Juani.jpg'/>

<div class='Penulis'>
<span>Penulis : <a href='http://fandrajuani.blogspot.com/p/blog-page_25.html'><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></a></span>

<div class='keterangan'>
<span>Ada Pertanyaan tentang artikel diatas, silakan masukan komentar dibawah. </span>

<div class='terimakasih'>
<span>Terima Kasih Atas Kunjungannya. Assalamualaikum wr.wb.</span>
<div style='clear:both;'/>
</div></div></div></div></b:if>
<div style='clear: both;'/>
</div>
3. Kode <data:post.body/> di template blog, biasanya ada 3, masukan kode langkah 2, di bawah kode <data:post.body/>, ketiga2nya.
4. Selanjutnya, cari kode ]]></b:skin> lalu masukan kode ini didalamnya.
.gambar {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-vnYm75OJtzb51003lvzoiwpXXO3h2SIHYnCOmDFiWSYOT0hjc874S9Eqy9tmhkEJLNfHIkA12gEQVXBz8UmczK6t4xAvHhrlyEUz0Z_4DWfpFlIWgteYWXwgymq0yr-cRCapRga_PJ7e/s1600/gt.jpg) repeat-x top center;
box-shadow:0px 1px 10px #aaaaaa;
border:2px solid #eeeeee;
padding:0;
margin:10px 0;
font:bold 12px Arial,Sans-Serif;height:100px;}

.gambar img{
width:70px;
height:70px;
margin:10px;
float:left;
padding:4px;
background:#ffffff;
border:1px solid #dddddd;
position: relative;
-moz-transition:all .4s ease-in-out;;
-ms-transition:all .4s ease-in-out;;
-o-transition:all .4s ease-in-out;;
-webkit-transition:all .1s ease-in-out;
transition:all .4s ease-in-out;}

.gambar img:hover{
-o-transform: scale(1) rotate(720deg);
-moz-transform: scale(1) rotate(720deg);
-webkit-transform: scale(1) rotate(720deg);}

.Penulis{
float:left;
margin:10px 0px 0px 0px;
text-shadow: 2px 2px 5px #107cde;
font-weight:bold;color:white;}
d{font-size:180%;color:DarkCyan}
g{color:red}
h{color:blue}
i{color:#ee3e80}
j{color:pink}
k{color:black}
l{font-size:180%;color:violet}
m{color:DarkCyan}
n{color:blue}
o{color:pink}
r{color:red}

.Penulis a{
text-transform:uppercase;
font-family:Ravie;
font-size:12px;
text-shadow:2px 2px 5px #1780dd;
font-weight:bold;padding:0}

.keterangan{
padding:15px 0px 0px 0px;
color:white;font:italic 12px Arial, Sans-Serif;
text-shadow: 2px 2px 5px #107cde;font-weight:bold;}

.terimakasih{
margin:13px 0px 0px 150px;
font:italic 12px Arial, Sans-Serif;color:black;
text-shadow: 2px 2px 5px #ffffff;}
5. Save template, selesai.

Keterangan kode langkah 2: 

• Gambar untuk memasukan foto yang akan kita gunakan sebagai profil author.
• Penulis isi dengan nama kamu, tulisannya saya buat dengan warna yang berbeda disetiap hurufnya. Untuk penjelasannya baca diartikel tulisan dengan warna yang berbeda.

Keterangan kode langkah 4: 

• Gambar untuk memberikan background disemua tulisan. Height nya saya atur 100px bisa anda ganti sesuai dengan keinginan anda.
• .gambar img{ untuk mengatur ukuran gambar profil author dan juga tambahan kode gambar berputar.
• .gambar img:hover{ gambar akan berputar ketika disentuh mouse. Penjelasannya baca di artikel cara membuat gambar berputar diblog
• .Penulis a{ untuk mengatur font atau jenis tulisan nama author.
• .keterangan{ jika menggunakan keterangan yang panjang. Hapus kode float:left; yang ada di kode .Penulis{ agar keterangan tetap berada disamping gambar profil.

Silakan diubah sesuai dengan keinginan anda sendiri. Dan baca juga artikel tentang cara membuat tanda penulis dikotak komentar blog, agar terlihat berbeda dengan komentar dari pengunjung, sehingga orang bisa membedakan mana pengunjung, mana penulis blog. Semoga Bermanfaat.

Read More

Modifikasi baca selengkapnya versi Blogger

Cara modifikasi baca selengkapnya versi blogger. Baca selengkapnya fungsinya untuk memotong artikel pada tampilan awal blog. Jadi pada halaman awal, tidak semua tulisan dari artikel kita akan terlihat, yang terlihat hanya pada bagian awalnya saja. Penggunaannya cukup mudah, kita hanya menekan tombol Insert Jump Break pada saat kita menulis artikel(dientri). Untuk lebih jelasnya, kamu bisa baca di artikel cara membuat read more diblog.

Dan kali ini kita akan merubah tulisan baca selengkapnya versi blogger dengan menambahkan kode css didalamnya. Contohnya seperti gambar dibawah ini.

Langsung saja, cara modifikasi tulisan baca selengkapnya versi blogger. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Lalu klik edit HTML dan cari kode <div class='jump-link'>. Dan ganti dengan kode dibawah ini.
<div class='jump-link' style='text-align: right;border:1px solid #dddddd;background:#eeeeee;box-shadow:0px 5px 5px #aaaaaa;margin:5px 0px 0px 450px;padding:5px;background-image: -moz-linear-gradient(center top , #fff 0%, #ddd 100%);'>
3. Selanjutnya, save template. Selesai.

Keteranga kode:

• style='text-align: right; untuk mengatur tulisan baca selengkapnya disebelah kanan.
• border:1px solid #dddddd; untuk mengatur border kotak baca selengkapnya.
• background:#eeeeee; warna backgroundnya.
• box-shadow:0px 5px 5px #aaaaaa; warna bayangan kotak.
• margin:5px 0px 0px 450px; untuk mengatur lebar dan panjang kotak baca selengkapnya.
• padding:5px; untuk mengatur tulisan didalam kotak.
• background-image: -moz-linear-gradient(center top , #fff 0%, #ddd 100%); untuk mengatur warna background atas dan bawah kotak baca selengkapnya.

Selesai sudah cara modifikasi baca selengkapnya versi blogger, yang dapat anda jadikan pilihan untuk mengatur tampilan blog anda. Silakan dimodifikasi sendiri sesuai dengan tampilan yang kalian inginkan. Jika ingin membuat baca selengkapnya secara auto/otomatis. Kamu bisa baca di artikel cara membuat auto reamore diblog. Semoga Bermanfaat.

Read More

Cara membuat contact form di posting blog

Cara membuat contact form di blogger, pada halaman posting atau laman blog. Contact form ini fungsinya Untuk memudahkan pengunjung menghubungi kita. Dengan mengisikan nama, email dan juga pesan yang ingin disampaikan ke penulis melalui kotak form yang telah disediakan. Pesan yang dikirimkan, akan masuk ke alamat email yahoo kita, yang kita gunakan diblog. Jadi tinggal buka yahoo dan lihat apakah ada pesan yang masuk dari kontak blogger.

Gambar diatas adalah contoh contact form yang akan kita buat. Caranya ikuti langkah-langkah dibawah ini.

Langkah pertama : Membuat contact form dihalaman posting atau laman blog.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak
2. Lalu klik tambahkan Gadget > Gadget Lainnya > lalu pilih Formulir Kontak > Dan letakkan dibagian sidebar paling bawah.
3. Selanjutnya, memasukan formulir kontak ke halaman posting. Buatlah artikel baru atau buat dilaman > Laman baru > Laman Kosong. Dan Copi kode dibawah ini lalu pastekan dibagian HTML(disebelah compose).
<form name='contact-form'>
<div>Nama Kamu:</div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>

<div>Email:</div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

<div>Pesan:</div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>

<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div>
</form>
4. Terakhir beri judul, dan Publikasikan. Selesai.

Langkah kedua : Merubah tinggi dan panjang dari form nama, email, pesan.

1. Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya.
/* untuk mengatur ukuran form name dan email*/
.contact-form-name, .contact-form-email {
max-width: 300px;
width: 100%;
}
/* untuk mengatur ukuran form pesan*/
.contact-form-email-message {
max-width: 300px;
width: 100%;
}
2. Lalu terapkan ke blog, jika ingin merubah tingginya tambahkan kode height:100px;. Silakan diatur sendiri.

Langkah ke 3 : Menghilangkan Contact Form di halaman Blog.

1. Ke pengaturan Template > Edit HTML > Dan klik Lompat ke Widget > Pilih ContactForm1.
2. Selanjutnya, buka semua kode, dan hapus beberapa kode didalamnya(hanya kode dibagian ContactForm1 bagian lain jangan dihapus). Sampai yang tertinggal hanya kode dibawah ini
<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
    <b:includable id='main'>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
3. Setelah itu, cari kode ]]></b:skin> dan tempatkan kode dibawah ini, fungsinya untuk menghilangkan sisa dari widget contact form dihalaman blog.
#ContactForm1 {
height: 0px;
visibility: hidden;
display: none;
background:transparent;
box-shadow:none;}
4. Save temlate, selesai.

Widget contact form tetap akan ada di blog kita. Tapi hanya di bagian tata letak saja, pada halaman blog tidak akan terlihat. Jika ingin menambahkan background gambar didalamnya, kamu baca di artikel cara membuat background dihalaman posting. Semoga bisa Bermanfaat untuk anda.

Read More

Cara merubah tampilan kotak komentar blog

Cara merubah tampilan kotak komentar blog, agar terlihat lebih rapi. Dengan cara menambahkan background, box-shawod, warna, serta ukuran dari tulisan yang ada didalam komentar blog. Contohnya seperti gambar dibawah ini.

Untuk lebih jelasnya tentang cara merubah tampilan kotak komentar blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pili pengaturan Tata Letak > Desainer Templates.
2. Lalu pilih Tingkat Lanjut > Tambahkan Css
3. Dan masukan kode ini kedalamnya.
.comments h4 {Color:#0b5394;margin:0;}
.comments {
border:1px solid #cccccc;
margin:0px 10px 20px 10px;
padding:10px;
box-shadow:0px 1px 10px #aaaaaa;
background:#ffffff;
background-image: -moz-linear-gradient(center top , #fff 0%, #f3f3f3 100%);}

.comments .comments-content {
background:transparent;
margin:-20px 0px -50px 0px;
font-size:13px;
text-align:left;}

.comments .comments-content .user a{
color:#1780dd;
font-size:14px;
font-weight:700;}

.comments .comment-replies .comment-thread{
border:1px solid #dddddd;
box-shadow:1px 1px 1px #bbbbbb;
background-image: -moz-linear-gradient(center top , #fff 0%, #e6e6e6 100%);
margin:0px 0px 0px 12px;}

.comments .continue{border-top:none;}  
.comments .comments-content .comment {margin:0px 0px -10px 0px;}
.comments .comments-content .datetime{
font-size:11px;
margin:3px 0px 0px 0px;
float:right;font-weight:700;}
4. Save template, Selesai.

Keterangan Kode:

• .comments h4 { untuk mengatur warna tulisan dari jumlah komentar. 
• .comments { untuk mengatur warna background dari seluruh kotak komentar blog. 
• .comments .comments-content { untuk mengatur warna, ukuran tulisan dari isi komentar, dan jarak tinggi komentar blog. 
• .comments .comments-content .user a{  untuk mengatur warna dari seluruh nama yang ada dikotak komentar. 
• .comments .comment-replies .comment-thread{ untuk mengatur warna background dari komentar balasan. 
• .comments .continue{ untuk mengatur tombol Balas. 
• .comments .comments-content .comment { untuk mengatur jarak antar komentar balasan. 
• .comments .comments-content .datetime{ untuk mengatur warna dan posisi tanggal.

Silakan baca juga artikel yang terkait dengan desain kotak komentar blog. Seperti cara membuat tanda penulis dikotak komentar blog. Dan juga cara menggantu tulisan poskan komentar dengan gambar. Dan juga artikel-artikel lainnya. Semoga Bermanfaat.

Read More

Cara membuat tulisan 2 baris dalam satu kotak excel

Cara membuat tulisan 2 baris dalam satu kotak excel. Pada dasarnya, saat kita menulis diexcel dengan kata yang panjang, maka tulisan tersebut akan memerlukan banyak kotak colomn kesamping. Agar terlihat rapi, kita dapat membagi tulisan tersebut menjadi 2 row, row atas dan row bawah. Tapi jika membagi kata menjadi 2 row, kita memerlukan waktu yang lama, dan agak sedikit susah membaginya. 

Berikut ini adalah cara mudah membuat tulisan yang panjang menjadi 2baris hanya dalam satu kotak excel. Contohnya seperti dibawah ini.

Untuk lebih jelasnya tentang cara membuat 2baris dalam satu kotak excel. Ikuti langkah-langkah dibawah ini.

1. Pertama buka program excel kamu. Lalu tulis seperti contoh gambar dibawah ini.

2. Selanjutnya, klik tanda Wrap Text pada menu atas excel. Contoh gambar.

3. Setelah itu atur lebarnya sesuai dengan yang kalian inginkan, selesai.

Silakan dibaca juga artikel lainnya tentang excel, seperti cara  cara print banyak kotak diexcel, atau cara menuliskan mata uang rupiah dimicrosoft excel. Dan juga artikel-artikel lainnya. Semoga bermanfaat.

Read More

Cara mengganti poskan komentar dengan gambar

Cara mengganti tulisan poskan komentar yang berada di atas kotak komentar dengan gambar. Tulisan poskan komentar ini akan muncul jika artikel kita belum ada komentar. Dan akan hilang dengan sendirinya jika artikel sudah ada yang berkomentar.

Gambar diatas adalah contoh tulisan poskan komentar yang berada di atas kotak komentar blog. Untuk menggantinya dengan gambar. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, ke pengaturan Template.
2. Lalu klik edit HTML dan cari kode <data:postCommentMsg/>
3. Setelah itu ganti tulisan tersebut dengan format kode dibawah ini.
<img src="URL gambar kalian" />
4. Kode <data:postCommentMsg/> ada 4 di template blog Ganti semuanya dengan kode gambar seperti diatas.
5. Save template, selesai.

Saya beri contoh gambar dan kodenya.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVDAwXblOdNKVcupijMJT93eLNaBqU8gxVez_lmUgCwBeQpQQUcRLuZKu-U8je-ihXk1EYXO9tWbJfg-ELmlLpbOegACHXFm1YDuCCIYf5mLSRmfFbmd1Qut2HUFO4XV6yu4FXOjALDMak/s1600/KOMENTAR+1.gif" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj580rLrd7xS3uAS03WYDqIdWSQRyK-R3CloRo6sam4tkdjopW9Q84DVOtATvwWA7lZrz4piQXc9ahaSFN8rmqeMSiQqRqAVjcrXuxp_WM3wx3e_DDBhIxQrqT7BBR1G1Y8FfcwhAEjYG13/s1600/Poskan+Komentar+02.gif" />

Silakan gunakan kode dan gambar diatas untuk percobaan diblog anda. Selanjutnya anda bisa gunakan gambar sendiri yang kalian inginkan. Untuk cara upload dan ambil url gambar, upload saja gambarnnya ke blogger, lalu klik kanan dan ambil urlnya, untuk lebih jelasnya bisa kalian baca di cara upload dan ambil url gambar.

Setelah mengganti tulisan poskan komentar dengan gambar, kita juga dapat mengatur posisinya, dikanan, dikiri atau ke posisi lainnya yang sesuai dengan keinginan kita. Caranya tempatkan kode berikut diatas ]]></b:skin>

.comments h4 img{
float:right;
margin:-42px  -35px 0px 0px;
}

Ketarangan kode:

• float:right; mengatur posisi gambar berada dikanan. Untuk mengubah menjadi sebelah kiri, hapus saja kode tersebut.
• margin:-42px  -35px 0px 0px; untuk mngatur posisi kanan, atas, bawah, kiri gambar.

Terakhir save template, selesai. Silakan dibaca juga artikel laiinya yang berkaitan dengan kotak komentar seperti cara membuat tanda penulis di blog pada bagian kotak komentar. Atau cara menghilangkan kotak komentar pada halaman tertentu diblog. Dan juga artikel-artikel lainnya. Semoga bisa bermanfaat untuk anda.

Read More

Cara merubah tampilan blockquotes diblog

Blockquotes biasanya digunakan untuk memperjelas tulisan, seperti keterangan, tips, trik, saran, atau hal terpenting yang harus dibaca/diingat oleh pembaca. Dengan menggunakan blockquote kita dapat membuat tulisan yang berbeda dengan tulisan yang lainnya, agar lebih mudah untuk dibaca.

Untuk lebih jelasnya tentang cara merubah tampilan blockquotes. Ikuti langkah-langkah dibawah ini.

Cara merubah tampilan blockquotes.

---

Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan CSS. Lalu masukan kode ini kedalamnya.

.post blockquote {
background:#f9f9f9;
padding:10px;
margin:15px 0px 15px 0px;
border-left: 10px solid #0b5394;
box-shadow:0px 5px 5px #aaaaaa;
border-top:1px solid #ddd; }

Setelah itu, klik Terapkan ke blog, Selesai.

Cara menggunakan blockquotes di halaman posting blog.

---

Buatlah entri baru, dan menulis seperti biasa. Selanjutnya Blok tulisan yang akan diberi Blockquotes, lalu tekan tanda Quotes(Tanda " disebelah kiri tanda T_x) yang ada di menu bagian atas entri. Setelah itu klik pratinjau untuk melihat hasilnya. Selesai.

Cara diatas merupakan contoh sederhana dalam merubah tampilan Blocquotes. Kita dapat juga menggunakan gambar disamping kiri dan kanannya. Contohnya seperti dibawah ini.

Untuk memasukan gambar kita harus menambahkan kode gambarnya juga. Codenya seperti dibawah ini.

.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhopEQmmnVlpTpIAgYmBMUvbyGKgicF_i1MPgagZDGxW_iJEsdstBqpSI4RyQtXVnzFgAhSYW2Un6sS1LsEz94M3m0mbB2EtA9KWOjliP_g1kHKpiTImfk5zlnDKh0NSXmjQslfDaH51MqE/s1600/a.png) no-repeat top left;
text-indent: 65px; color:#6299E4; }
.post blockquote div {
display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE65G7V3HDOpgFEL3MLMR4v0UYA6_mkF0u9u0DFg29nSe47qYDk-tlYkNk-rLFqzrXZCdyMMTQVcAFbHDmqUm2TrXV0DesRp9OZ6wp8BwLx6_oSuHve3-aaqWukdnqNlreZskY0FmUnoR4/s1600/b.png) no-repeat bottom right;
padding-bottom:10px; }

Tempatkan kode tersebut seperti cara sebelumnya di dalam Kotak Tambahkan CSS, Selesai. Itulah sedikit cara desain blog tentang cara merubah tampilan blockquotes yang dapat digunakan sebagai tambahan piihan dalam menulis artikel di blog. Silakan dibaca artikel lainnya seperti cara mengganti background blog dengan gambar atau cara merubah tampilan sidebar blog. Dan juga artikel lainnya. Semoga bisa bermanfaat untuk anda.

Read More

Cara mengganti background blog dengan gambar

Cara mengganti background blog dengan gambar, secara keseluruhan. Background akan terlihat disemua bagian yang ada diblog. Contoh background menggunakan gambar bisa dilihat di artikel background berbeda dihalaman berbeda. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak.
2. Dan pilih Desainer template > Tingkat Lanjut > Tambahkan CSS dan masukan kode ini didalamnya.
body {
background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}
3. Terapkan ke blog selesai.

Keterangan kode:

• background: url( adalah url dari backgorund gambar yang akan digunakan.
• repeat-x gambar mengulang kesamping. bisa diganti dengan repeat-y untuk gambar mengulang ke bawah atau no-repeat gambar tidak berulang.
• fixed gambar akan tetap pada posisinya, walaupun halaman blog di scroll ke bawah.
• top center posisi gambar. Top bisa diganti dengan bottom dan center bisa diganti dengan right atau left.
• jika menggunakan backgorund gambar keseluruh bagian blog. gunakanlah ukuran gambar yang besar, contoh: 1400 x 900

Pada dasarnya kode body digunakan untuk mengatur seluruh background blog. Tapi jika tidak bisa jalan ditemplate kamu, coba ganti kode body dengan kode content. Contoh:

.content {
background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}

Sekarang coba lihat tampilan blog kamu. Jika background gambar tidak sepenuhnya terlihat. Atau background tertutup oleh background warna. Itu dikarenakan template yang kamu gunakan, sudah menggunakan background warna.

Contoh: Misalkan kamu pasang background gambar, tapi pada bagian headernya tertutup background warna putih, agar background warna putih itu hilang dan terganti dengan gambar. Gunakan kode #Header Atur backgroundnya menjadi transparent;. Seperti ini > #Header { background:transparent; }

Tempatkan kode #Header { background:transparent; } seperti cara dari langkah 1-3 diatas. Dibawah ini adalah kode-kode dari bagian blog yang saya tau, mulai dari header, tab, sidebar, sampai footer dan juga kode2 lainnya, yang bisa kamu gunakan untuk mengatur background dari halaman blog kamu. Berikut kodenya: 

---

 Untuk bagian header

---

#Header { background:transparent; }
.header h1  { background:transparent; }
.body-fauxcolumn-outer .cap-top { background:transparent; }

---

Untuk bagian posting

---

.post-body { background:transparent; } hanya pada bagian tulisan posting.
.post { background:transparent; } bagian posting keseluruhan.
.post-outer { background:transparent; }  bagian posting sampai keluar
.main-inner { background:transparent; } bagian posting dan sidebar
#blog-pager { background:transparent; } pada bagian tulisan beranda, posting lama, posting lebih baru

---

Untuk bagian tab

---

.tabs-outer .PageList { background:transparent; }

---

Untuk bagian sidebar

---

.sidebar .widget { background:transparent; } hanya pada bagian widgetnya saja.
.sidebar { background:transparent; } seluruh bagian sidebar

---

Bagian footer.

---

.footer-fauxborder-left { background:transparent; }
.footer-outer { background:transparent; }

---

kode-kode lainnya, jika diperlukan.

---

.content-outer { background:transparent; } bagian halaman blog. dari header sampai ke footer.

.content-inner { background:transparent; } bagian halaman blog. dari header sampai ke footer. Untuk mengatur warna tulisan juga bisa.

.body-fauxcolumn-outer .fauxcolumn-inner { background:transparent; }

.body-fauxcolumn-outer .cap-top .cap-left { background:transparent; }

Jadi jika ingin menggunakan background gambar diseluruh bagian blog. Cukup menggunakan satu gambar background pada bagian body/content saja, dan yang lainnya di buat menjadi transparent;. Silakan berkreasi sendiri agar sesuai dengan yang kalian inginkan. Semoga bisa bermanfaat untuk anda.

Read More

Merubah tampilan sidebar dan posting blog

cara merubah tampilan sidebar dan posting blog. Menggunakan kode border, margin, padding, dan box shadow. Sehingga membuat tampilan blog menjadi lebih menarik. Kotak dari judul widget disidebar dan judul posting akan dibuat berbeda dengan isinya. Seperti contoh gambar dibawah ini, salah satu gadget atau widget yang ada disidebar.

Langsung saja, cara merubah tampilan bagian sidebar.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Dan pilih Desainer Template > Tingkat Lanjut.
3. Tambahkan CSS. lalu masukan kode dibawah ini.
.sidebar .widget h2{
text-align:center;
border:1px solid #ddd;
margin:-10px -10px 0 -10px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 5px 5px #aaaaaa;}

.sidebar .widget {
text-align:center;
border:1px solid #ddd;
padding:5px 0 5px 0;
box-shadow:0px 10px 10px #aaaaaa;}
4. Terapkan ke blog. Selesai.

Keterangan kode:

• .sidebar .widget h2{ mengatur judul pada bagian sidebar.
• .sidebar .widget { mengatur isi dari bagian sidebar.
• text-align:center; membuat tulisan ditengah.
• border garis kotak 
• margin membuat kotak judul melebihi lebar dari isi widget atau gadget.
• padding mengatur tulisan dibagian dalam tulisan.
• background:#eee; warna background.
• box-shadow:  warna bayangan dikotak

Cara Merubah tampilan posting blog.

---

1. Langkahnya sama seperti cara merubah tampilan sidebar blog. Hanya saja kode yang dimasukan adalah sebagai berikut.
h2.post-title{
border:1px solid #ddd;
margin:-12px -20px 0 -20px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 10px 5px #aaaaaa;}

.post{
border:1px solid #ddd;
padding:10px 10px 0 10px;
margin:7px 10px 20px 10px;box-shadow:0px 1px 10px #aaaaaa;}
2. Terapkan ke blog. Selesai.

Keterangan kode:

•  h2.post-title{ untuk mengatur bagian judul posting
• .post{ untuk mengatur isi dari bagian posting.
• Jika h2.post title tidak ada ganti dengan h3.post title
• Untuk kode yang lainnya, fungsinya sama seperti keterangan kode di sidebar.

Silakan berkreasi sendiri, artikel diatas hanyalah sedikit contoh cara merubah tampilan sidebar dan posting blog. Silakan baca juga artikel cara desain blog dan tips trik blogspot lainnya. Seperti artikel fungsi margin dan padding di blog dan juga fungsi border dan penggunaannya di blog, yang dapat dijadikan pilihan cara dalam merubah tampilan blog anda. Semoga bermanfaat.

Read More