Menambahkan Gambar Disamping Judul Posting

Cara menambahkan gambar disamping judul posting blog.

Gambar diatas dengan bulat merah yaitu teladan gambar yang ditempatkan di samping kiri posting blog, gambar tersebut akan muncul di setiap posting blog yang ada. Akan aku coba jelaskan secara detail, biar dapat di mengerti. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, ke pangaturan template.
2. Selanjutnya klik edit HTML dan cari instruksi ]]></b:skin> dan pasang instruksi berikut di atas instruksi ]]></b:skin>
h3.post-title {
background:url("http://1.bp.blogspot.com/-H05eMOVOPc0/UkHLnYVeExI/AAAAAAAAAzE/n0_iarY33-g/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;}
3. Save template, Selesai.

Keterangan instruksi langkah 2:

url("gambar.jpg") yaitu instruksi url sumber gambar yang akan digunakan.
no-repeat menciptakan gambar tidak berulang.
padding:10px 0px 0px 40px; mengatur posisi goresan pena judul posting.

Jika gambar ingin ditempatkan disebelah kanan atau tengah judul posting blog. Tambahkan instruksi berikut disamping no-repeat; contoh: no-repeat top right;

•  right untuk bab kanan.
•  center untuk bab tengah

Untuk menciptakan icon dengan gambar sendiri, silakan baca di cara menciptakan icon website. Dan untuk cara mengambil URL dari gambar sendiri, baca di cara upload dan ambil url gambar.

Itulah sedikit cara untuk mendesain blog sendiri, dengan menambahkan gambar disamping judul posting blog, yang akan muncul disetiap posting artikel yang ada di blog. Silakan baca juga cara membuat goresan pena bayangan di blog di judul, deskripsi blog bab tab, sidebar dikiri-kanan blog, hingga judul posting, dapat kita beri goresan pena bayangan. Semoga Bermanfaat.

Read More

Cara Menciptakan Gambar Posting Berputar

Berikut ini yaitu cara menciptakan gambar yang ada dipostingan setiap artikel berputar dan membesar dikala di sentuh kursor mouse. Salah satu cara semoga gambar sanggup diperbesar dan lebih gampang untuk dilihat dikala disentuh kursor mouse. Contoh: arahkan mouse anda ke gambar dibawah ini.

Untuk menciptakan gambar di setiap postingan berputar, silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger. 
2. Dari halaman dasbor pilih pengaturan template. Lalu klik edit HTML dan cari instruksi ]]></b:skin>(gunakan Ctrl F untuk mempermudah pencarian kode). 
3. Setelah ketemu ]]></b:skin>, Copy instruksi dibawah ini. Lalu Pastekan di Atas ]]></b:skin>
.post img{-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
.post img:hover{-o-transform:scale(1.9) rotate(360deg) translate(0px);-moz-transform:scale(1.9)
rotate(360deg) translate(0px);-webkit-transform:scale(1.9) rotate(360deg) translate(0px);-o-transition:all 0.5s
ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
4. Dan save template. Selesai.
5. Atau sanggup juga ditempatkan di Tambahkan CSS pada bab perancang template blogger(desainer template).
6. Lalu save, selesai.

Keterangan instruksi diatas: 0.5s untuk mengatur usang putaran. scale 1.9 untuk mengatur besarnya gambar sesudah di sentuh oleh kursor mouse, silakan diganti sesuai dengan keinginan. Untuk instruksi lainnya sebaiknya jangan diganti, semoga instruksi tetap berjalan dengan benar, yaitu untuk memutar gambar yang disentuh kursor mouse. 

Itulah sedikit tutorial desain blog dan tips trik yang sanggup dipakai di blog,  yang aku sanggup bagikan yaitu perihal cara menciptakan gambar posting berputar dan membesar dikala di sentuh kursor mouse.

Jika ada yang kurang dimengerti dari langkah-langkah diatas atau ada hambatan dalam pembuatannya. Silakan masukan komentar anda dibawah. Silakan dibaca juga artikel lainnya yang berkaitan dengan gambar, seperti cara mengganti judul blog dengan gambar atau cara menciptakan sajian blog dengan gambar. Semoga bermanfaat.

Read More

Cara Menciptakan Background Di Halaman Posting

Cara menciptakan atau memasukan gambar yang akan dijadikan background dihalaman posting blog, background dapat kita gunakan dengan gambar yang berbeda, disetiap posting. Sebelumnya aku sudah menciptakan artikel wacana cara menciptakan background berbeda dihalaman berbeda, yakni dengan cara memasukan background menurut URL halaman.

Dan kali ini background di halaman posting, pribadi dari artikelnya. Makara kita memasukan gambar ke artikel untuk dijadikan background. Untuk lebih jelasnya silakan lihat background gambar dibagian selesai artikel ini. Atau lihat halaman profil dan halaman Contact di blog ini.

Langsung saja, cara menciptakan background disetiap postingan blog, ikuti langkah-langkah dibawah ini.

1. Login ke blogger, kemudian buatlah entri baru. Atau edit artikel yang lama.
2. Selanjutnya copy arahan dibawah ini.
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background: url(&quot;http://4.bp.blogspot.com/-FQDSndI386M/Ulik2SQu81I/AAAAAAAAA68/_wj6HJ1qhwI/s1600/Fandra+Juani+copy.png&quot;) no-repeat right bottom;">
3. Dan pastekan di awal goresan pena blog, pada bab HTML. Contoh Gambar.

4. Setelah itu masukan arahan </div> diakhirtulisan blog, masih pada bab HTML.
5. Selanjutnya, pratinjau gambar, untuk memastikan apakah background sudah ada atau belum.
6. Jika sudah gres publikasikan(untuk artikel baru), atau Perbarui(untuk artikel lama). Selesai.

Keterangan Kode langkah 2:

•  http://4.bp.blogspot.com/-FQDSndI386M/Ulik2SQu81I/AAAAAAAAA68/_wj6HJ1qhwI/s1600/Fandra+Juani+copy.png ini url gambar yang akan dijadikan background. Silakan diganti dengan URL gambar kalian sendiri.
•  no-repeat berfungsi semoga background gambar tidak berulang. untuk mengubah background gambar berulang, ganti menjadi repeat-x;
• right bottom ini posisi background, dapat diganti dengan.
left top
left center
left bottom
center top
center center
center bottom
right top
right center
right bottom

Jika belum tau cara menciptakan dan mengambil URL gambar sendiri, kau dapat baca di cara cara upload dan ambil url gambar. Disitu ada cara upload dan ambil url sendiri dengan mudah. Background pada artikel ini aku letakan dibagian paling bawah, yakni dibagian center bottom. Karena warna background nya terang, jadi tulisannya tidak terlihat.

Kalian dapat gunakan background dengan warna yang gelap, semoga goresan pena artikel dapat terlihat.

pola background dengan gambar.  Tulisan ini sengaja aku blog, karenga tidak terlihat.         Semoga Bermanfaat.

Read More

Cara Menciptakan Gambar Posting Membesar

Cara menciptakan gambar posting membesar pada ketika disentuh mouse. Sedikit berbeda dengan artikel aku sebelumnya ialah perihal cara menciptakan gambar posting berputar, gambar akan berputar dan juga membesar. Kali ini gambar di posting blog akan kita perbesar saja. Dengan begitu kita sanggup memakai gambar dengan ukuran yang kecil. Ketika disentuh mouse, maka gambar akan membesar.

Kaprikornus sanggup menghemat ruang tulis kita di blog. Loading blog pun akan jauh lebih cepat pada ketika dibuka. Dan juga menciptakan goresan pena terlihat rapi. Untuk lebih jelasnya, ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya, Klik Edit HTML dan cari isyarat ]]></b:skin>.
3. Setelah itu, copy isyarat dibawah ini, dan pastekan diatas ]]></b:skin>
.post img{
vertical-align:bottom;max-width:90%;max-height:90%;
-o-transition:all .5s ease;
-moz-transition:all .5s ease;
-webkit-transition:all .5s ease}
.post img:hover{
-o-transform:scale(1.4) translate(0px);
-moz-transform:scale(1.4) translate(0px);
-webkit-transform:scale(1.4) translate(0px);
-o-transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease}
4. Terakhir Save Template. Selesai.

Keterangan isyarat langkah 3:
scale(1.4) untuk mengatur berapa besar gambar pada ketika di sentuh mouse. Jika kurang besar silakan diganti dengan angka yang lebih besar. Contoh:scale(1.9)
5s waktu yang dibutuhkan, ketika memperbesar gambar.

Itulah sedikit tuorial perihal cara menciptakan gambar di posting blog membesar pada ketika disentuh mouse. Silakan dibaca juga artikel aku yang lainnya. Semoga sanggup bermanfaat untuk anda.

Read More

Fungsi Border Dan Penggunaannya Di Blog

Fungsi border dan cara pengguaannya di blog. Border merupakan arahan css yang dipakai untuk menciptakan kotak di blog atau website lainnya. Salah satu pola penggunaan border ialah pembuatan kotak script, untuk menempatkan arahan script di posting blog. Berikut contohnya.

1.  Buka entri gres atau post usang kamu.
2.  Klik HTML kemudian masukan arahan sricpt dibawah ini.
<div style="border: 1px #cccccc solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 80px; text-align: left;">.kode script disini.</div>
3. Lalu klik pada bab Compose. Maka tampilannya akan menyerupai ini.
.kode script disini.
4. Klik .kode script disini. hapus dan ganti dengan arahan script yang kalian masukan.

Keteranga arahan langkah 2: 

border: 1px ketebalan kotak, #cccccc warna garis kotak, solid(bentuk kotak)
background-color:#ffffff; warna kotak
height: 80px; tinggi kotak yang akan ditampilkan diposting blog.
overflow: auto; akan ada scroll dikotak, kalau sudah melebihi tinggi kotak height: 80px;

Berikut ini ialah bentuk kotak lain yang sanggup digunakan, untuk menggantikan bentuk solid.

dotted

dashed

double

groove

ridge

inset

outset

Satu lagi penggunaan warna yang berbeda disetiap border, atas,kanan,bawah,kiri.

untuk menciptakan border menyerupai ini, arahan yang digunakan:
 <div style="border-top:2px solid green;border-bottom:2px solid red;border-left:2px solid #1780dd;
border-right:2px solid orange; padding: 10px;background-color:#ffffff;overflow: auto; height: 200px;
text-align: left;">.kode script disini.</div>
 

Contoh-contoh diatas ialah penggunaan border didalam posting, berikut ini ialah penggunaan border di bab sidebar blog.

.sidebar .widget h2 {
 border-top:2px solid red;border-bottom:2px solid green;border-left:2px solid orange;border-right:2px solid #1780dd; padding: 10px;background-color:#ffffff;
}

Contoh gambar:

Artikel diatas merupakan sedikit pola penggunaan border diblog, masih banyak yang sanggup diberi border diblog, yang terpenting kita mengetahui arahan pada bab mana yang akan kita beri border. Semoga bermanfaat untuk anda.

Read More

Merubah Tampilan Sidebar Dan Posting Blog

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

Langsung saja, cara merubah tampilan bab sidebar.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Dan pilih Desainer Template > Tingkat Lanjut.
3. Tambahkan CSS. kemudian masukan instruksi 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 bab sidebar.
• .sidebar .widget { mengatur isi dari bab sidebar.
• text-align:center; menciptakan goresan pena ditengah.
• border garis kotak 
• margin menciptakan kotak judul melebihi lebar dari isi widget atau gadget.
• padding mengatur goresan pena dibagian dalam tulisan.
• background:#eee; warna background.
• box-shadow:  warna bayangan dikotak

Cara Merubah tampilan posting blog.

---

1. Langkahnya sama menyerupai cara merubah tampilan sidebar blog. Hanya saja instruksi yang dimasukan yaitu 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 bab judul posting
• .post{ untuk mengatur isi dari bab posting.
• Jika h2.post title tidak ada ganti dengan h3.post title
• Untuk instruksi yang lainnya, fungsinya sama menyerupai keterangan instruksi di sidebar.

Silakan berkreasi sendiri, artikel diatas hanyalah sedikit pola 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 sanggup dijadikan pilihan cara dalam merubah tampilan blog anda. Semoga bermanfaat.

Read More

Cara Merubah Tampilan Blockquotes Diblog

Blockquotes biasanya dipakai untuk memperjelas tulisan, menyerupai keterangan, tips, trik, saran, atau hal terpenting yang harus dibaca/diingat oleh pembaca. Dengan memakai blockquote kita sanggup menciptakan goresan pena yang berbeda dengan goresan pena yang lainnya, biar lebih gampang untuk dibaca.

Untuk lebih jelasnya wacana 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 arahan 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 memakai blockquotes di halaman posting blog.

---

Buatlah entri baru, dan menulis menyerupai biasa. Selanjutnya Blok goresan pena yang akan diberi Blockquotes, kemudian tekan tanda Quotes(Tanda " disebelah kiri tanda T_x) yang ada di sajian bab atas entri. Setelah itu klik pratinjau untuk melihat hasilnya. Selesai.

Cara diatas merupakan pola sederhana dalam merubah tampilan Blocquotes. Kita sanggup juga memakai gambar disamping kiri dan kanannya. Contohnya menyerupai dibawah ini.

Untuk memasukan gambar kita harus menambahkan arahan gambarnya juga. Codenya menyerupai dibawah ini.

.post blockquote {
background: url(http://2.bp.blogspot.com/-JFHpSpy5aCE/UoA8G_d-owI/AAAAAAAABKo/fCSr1BlWiRE/s1600/a.png) no-repeat top left;
text-indent: 65px; color:#6299E4; }
.post blockquote div {
display: block; background: url(http://4.bp.blogspot.com/-PEebql5w7PI/UoA8G4mFANI/AAAAAAAABKs/YeT4haCXQIY/s1600/b.png) no-repeat bottom right;
padding-bottom:10px; }

Tempatkan arahan tersebut menyerupai cara sebelumnya di dalam Kotak Tambahkan CSS, Selesai. Itulah sedikit cara desain blog wacana cara merubah tampilan blockquotes yang sanggup dipakai sebagai suplemen piihan dalam menulis artikel di blog. Silakan dibaca artikel lainnya menyerupai cara mengganti background blog dengan gambar atau cara merubah tampilan sidebar blog. Dan juga artikel lainnya. Semoga sanggup bermanfaat untuk anda.

Read More

Cara Memasukan Arahan Html, Css, Script Diposting Blog

Untuk memasukan isyarat html, css, script diposting blog bekerjsama sanggup mampu ditulis secara eksklusif menyerupai kita menulis artikel menyerupai biasa. Tapi dibeberapa blog ada yang tidak sanggup menuliskannya secara langsung, menyerupai menulis isyarat ]]></b:skin>. Pada ketika diketik mungkin bisa, tapi pada ketika dipublikasikan, yang tampil hanya isyarat ]]> ini saja.

Kejadian ini aku alami pada ketika memakai template simple. Terus aku cari tau, kesalahannya dimana. Ternyata kesalahannya ada di pengaturan Setelan entri yang ada disebelah kanan pada ketika kita menulis artikel. Jika kau mengalami hal yang sama. Buka entri baru/atau entri usang kamu, kemudian klik pengaturan Setelan Entri > Pilihan > mode tulis > pilih Tunjukan HTML apa adanya dan klik selesai. Maka kode² yang kita tulis secara eksklusif diposting blog akan terlihat.

Selanjutnya, biar tampilan isyarat html, css, script diblog kita terlihat rapi. Kita sanggup memasukannya ke dalam satu kotak script. Berikut caranya.

Pembuatan kotak script

1. Pertama, copi isyarat dibawah ini, kemudian pastekan diatas ]]></b:skin>  
.kotak {
padding:10px;
margin-top:5px;
margin-bottom:10px;
border-left: 10px solid #0b5394;
border-top:1px solid #ddd;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:0px 3px 3px #aaaaaa;
background: url(https://lh4.googleusercontent.com/-20OcWWjnUys/UoH5-kSIcAI/AAAAAAAABNs/qD2oTuhBfPU/s150/Code%2520HTML%2520css.png)
no-repeat center center;}
2. Save template. Selesai.

Cara menciptakan kotak script didalam posting blog

1. Buatlah entri gres atau edit artikel usang kamu. 
2. Lalu klik bagian HTML disebelah Compose.
3. Lalu ketikan isyarat ini.
<div class="kotak">
klik disini dan ganti dengan isyarat script yang ingin kalian masukan
</div>
4. Lalu kembali ke Bagian Compose dan ganti goresan pena klik disini dan ganti dengan isyarat script yang ingin kalian masukan 
5. Setelah itu klik Pratinjau untuk melihat tampilannya. Selesai.

 Selanjutnya masuk ke tahap overflow, menciptakan kotak dengan scroll

1. Cara menciptakan Kotak scroll kebawah. Sama menyerupai cara diatas, kemudian tambahkan isyarat style="overflow: auto; height: 80px; didalamnya. Contohnya menyerupai dibawah ini.
<div class="kotak" style="overflow: auto; height: 80px;" >
Contoh kotak dengan scroll
</div>


2. Cara menciptakan kotak scroll kesamping.
Contoh penggunaan kotak denga scroll kesamping. Copi isyarat dibawah ini dan tempatkan dibagian HTML menyerupai cara diatas.

<div class="kotak" style="overflow-x: scroll; overflow-y: hidden; padding: 10px; width: 540px;" >
<p style="width:450%;">Masukan isyarat disini.
</p></div><br />

Pada ketika kita menulis artikel warna dari kotak script tidak terlihat, api pada ketika kita Pratinjau atau publikasikan, barulah kotak dengan warna tersebut akan terlihat. Agar kita tidak bingung, sebaiknya pada ketika menuliskan isyarat kotak di HTML(sebelah compose), tambahkan juga goresan pena dimana kawasan memasukan kodenya. Contoh:

<div class="kotak">
Tempat memasukan isyarat script, html, css dan lain-lain.
</div>

Dengan begitu, goresan pena yang akan tampil dihalaman Compose yaitu goresan pena Tempat memasukan isyarat script, html, css dan lain-lain. Tinggal kita klik kemudian ganti dengan isyarat yang ingin kita masukan. Selesai.

Silakan dibaca juga artikel perihal fungsi border dan penggunaannya diblog yang sanggup dipakai untuk mengganti tampilan kotak script dengan tampilan lain. 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. Makara pada halaman awal, tidak semua goresan pena dari artikel kita akan terlihat, yang terlihat hanya pada bab awalnya saja. Penggunaannya cukup mudah, kita hanya menekan tombol Insert Jump Break pada ketika kita menulis artikel(dientri). Untuk lebih jelasnya, kau sanggup baca di artikel cara menciptakan read more diblog.

Dan kali ini kita akan merubah goresan pena baca selengkapnya versi blogger dengan menambahkan aba-aba css didalamnya. Contohnya ibarat gambar dibawah ini.

Langsung saja, cara modifikasi goresan pena 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 aba-aba <div class='jump-link'>. Dan ganti dengan aba-aba 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 goresan pena 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 goresan pena 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 sanggup anda jadikan pilihan untuk mengatur tampilan blog anda. Silakan dimodifikasi sendiri sesuai dengan tampilan yang kalian inginkan. Jika ingin menciptakan baca selengkapnya secara auto/otomatis. Kamu sanggup baca di artikel cara menciptakan auto reamore diblog. Semoga Bermanfaat.

Read More

Cara Menciptakan Author Dibawah Posting Blog

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

Untuk lebih jelasnya wacana cara menciptakan author dibawah posting blog. Ikuti langkah-langkah dibawah ini.

1. Login keblogger, pilh pengaturan template.
2. Klik edit HTML dan cari isyarat <data:post.body/> kemudian masukan isyarat ini dibawahnya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='gambar'>
<img src='https://lh4.googleusercontent.com/-n-7Ujm1j6nk/UYqhfNgBZcI/AAAAAAAAAQQ/nAaz8oHf4CM/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 wacana 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 isyarat langkah 2, di bawah isyarat <data:post.body/>, ketiga2nya.
4. Selanjutnya, cari isyarat ]]></b:skin> kemudian masukan isyarat ini didalamnya.
.gambar {
background: url(http://3.bp.blogspot.com/-XQpNUW9Y0BQ/Und_bxqAsyI/AAAAAAAABKI/0xTMRKYDggw/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 isyarat langkah 2: 

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

Keterangan isyarat langkah 4: 

• Gambar untuk menawarkan background disemua tulisan. Height nya aku atur 100px dapat anda ganti sesuai dengan cita-cita anda.
• .gambar img{ untuk mengatur ukuran gambar profil author dan juga embel-embel isyarat gambar berputar.
• .gambar img:hover{ gambar akan berputar dikala disentuh mouse. Penjelasannya baca di artikel cara menciptakan gambar berputar diblog
• .Penulis a{ untuk mengatur font atau jenis goresan pena nama author.
• .keterangan{ jika memakai keterangan yang panjang. Hapus isyarat float:left; yang ada di isyarat .Penulis{ biar keterangan tetap berada disamping gambar profil.

Silakan diubah sesuai dengan cita-cita anda sendiri. Dan baca juga artikel wacana cara menciptakan tanda penulis dikotak komentar blog, biar terlihat berbeda dengan komentar dari pengunjung, sehingga orang dapat membedakan mana pengunjung, mana penulis blog. Semoga Bermanfaat.

Read More

Cara Merubah Bullet List Diposting Blog

Cara merubah tampilan bullet list diposting blog memakai gambar. Bullet list atau tanda bulat-bulat yang ada diposting blog akan kita ganti dengan memakai gambar, biar 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 isyarat berikut dan pastekan kedalam kotak tambahkan Css.
.post ul {
list-style:url(https://lh6.googleusercontent.com/-m-YGd6ZluKg/UouNF0lbvbI/AAAAAAAABSU/m2dbKwZp9K8/s12/bullet%2520list.gif);}
3. Selanjutnya Klik terapkan ke blog, selesai.

Keterangan Kode:

• .post ul { isyarat untuk mengatur bullet list diposting blog.
• https://lh6.googleusercontent.com/-m-YGd6ZluKg/UouNF0lbvbI/AAAAAAAABSU/m2dbKwZp9K8/s12/bullet%2520list.gif merupakan isyarat url dari gambar yang akan dijadikan bullet list diposting blog.

Jika ingin memakai gambar sendiri, silakan buat gambar yang akan dijadikan bullet list diprogam gambar, buatlah gambar dengan ukuran yang kecil, contohnya 16x16, menyerupai pola gambar diatas, gambar bullet list yang aku gunakan ukurannya 12x10. Untuk cara merubah ukuran gambar, kalian dapat baca di artikel cara menciptakan icon untuk website memakai photoshop.

Agar tidak memberatkan loading blog, buatlah gambar dengan format Gif. Karena dengan memakai format Gif, ukuran gambar dapat dibawah 1kb, menyerupai pola gambar, itu ukurannya hanya 873byte. Satu lagi kelebihan format gif, background gambar transparant. Makara yang terlihat hanya bab yang berwarna saja.

Setelah final menciptakan gambar, upload gambar dan ambil Url nya. Caranya dapat baca di artikel cara upload dan ambil url gambar. Dan gunakan url tersebut ke dalam isyarat .post ul { list-style(url gambar kau sendiri);}. Selesai. Semoga dapat bermanfaat untuk anda.

Read More

Cara Menciptakan Background Gradient 2 Warna

Background gradient fungsinya untuk menciptakan background warna dengan memakai 2 warna sekaligus, dengan perbandingan persen disetiap warnanya. Makara misalkan kita ingin memakai warna putih dan biru dibackground blog kita. Maka kita sanggup mengatur warna putih dibagian atas dan warna biru dibagian bawah. Berbeda dengan pengaturan warna biasa yang hanya satu warna.Contoh penggunaannya menyerupai dibawah ini.

---

Background 1 warna dengan memakai warna biru.

---

Warna Biru Saja

---

Background 2 warna dengan memakai warna biru dan putih.

---

Warna Biru dan Putih

Selanjutnya yaitu cara menciptakan dan menerapkannya diblog. Sebagai percobaan kau sanggup coba edit warna background dari halaman posting blog. Ke pengaturan tata letak > klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan isyarat 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 sanggup 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 penggalan atas sanggup diganti dengan isyarat

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

Silakan berkreasi sendiri, dengan kode2 diatas dalam mendesain blog anda semoga terlihat lebih menarik. Untuk cara penggunaan dibagian lain, menyerupai pada penggalan header, sidebar atau keseluruh body halaman blog, kau sanggup baca di artikel cara mengganti background blog dengan gambar diartikel itu, ada isyarat dari bagian2 blog, yang sanggup kau gunakan untuk diberi background 2 warna menyerupai pola diatas.
Catatan: Gradient 2 warna ini tidak sanggup dilihat di browser google chrome, sebabnya aku belum tau, kalau sudah tau aku akan tambahkan di artikel ini, untuk di mozilla bisa, warna gradient 2 warna terlihat.Semoga sanggup bermanfaat untuk anda.

Read More

Cara Menciptakan Background Warna Transparan

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

Seperti pola gambar diatas,background dasar yang dipakai yaitu background gambar, dan background trasnparanya berwarna hitam. Tapi warna hitam tersebut tidak sepenuhnya hitam. Sedikit hitam dan background gambar awalnya tetap terlihat. Berikut ini yaitu beberapa instruksi warna background yang sanggup dipakai untuk menciptakan background warna transparant.

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

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

Sebelumnya aku jelaskan sedikit wacana instruksi diatas.

• Ketiga instruksi awal dipakai untuk mengatur instruksi warna. instruksi warna 0,0,0 yaitu warna dasar Hitam.
• Untuk instruksi terakhir 0.3 dan 0.8 dipakai untuk mengatur ketebalan dari warna hitam 0,0,0 tadi. Semakin besar instruksi terakhir, maka akan semakin hitam. Kode terakhir ini hanya hingga instruksi 1. Contoh:0,0,0, 1.

Untuk mengganti dengan warna lain, kau sanggup coba instruksi 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 instruksi warna, kau sanggup lihat diphotoshop, kemudian klik pada bab set foreground color(gambar kotak untu ganti warna). Lalu lihat instruksi pada bab RGB nya.

Seperti pola gambar diatas, pertama klik dulu bab kotak yang sudah aku beri tanda merah sebelah kiri, maka akan terbuka Color Picker, dan copi 3 instruksi RGB yang bertanda kotak merah itu untuk dipakai diwebsite.

Dan yang terakhir yaitu cara penerapannya di blogger. Sebagai pola kita akan coba mengedit pada bab 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 instruksi halaman posting ke dalamnya.
.post{border:1px solid #ddd; background:rgba(0,204,0, 0.5);}
3. Dan lihat perubahannya, background nya itu aku beri warna hijau, dengan ketebalan warna 0.5 balasannya menyerupai gambar dibawah ini.

Untuk mengatur bab lainnya, coba kau baca di artikel cara mengganti background blog dengan gambar. Disana ada beberapa instruksi bab blog yang sanggup kau gunakan. Semoga Bermanfaat.

Read More

Cara Mengatur Spasi Goresan Pena Di Blog

Tips dan Trik kali ini ialah ihwal cara mengatur spasi goresan pena di blog. Spasi atau jarak kosong antara kalimat pada baris atas dan juga baris bawah. Dan juga jarak kosong antara karakter satu dengan yang lainnya. Tujuannya supaya goresan pena diblog terlihat lebih rapi, dan lebih gampang untuk dibaca.

Contoh spasi atau jarak kosong antar baris kalimat:

Contoh jarak spasi antar baris
Terlihat jauh jarak antara goresan pena ini dengan goresan pena atas.

Dan teladan spasi atau jarak kosong antar huruf.

Contoh jarak spasi antar huruf
Jarak antara karakter satu dengan karakter yang lain.

Dari teladan diatas sudah terang kan, perbedaan antara spasi atau jarak kosong antar baris kalimat dan antar huruf. Berikut ini ialah teladan penerapan pengaturan spasi goresan pena pada bab posting blog. Ikuti langkah-langkah dibawah ini.

1. Silakan login ke blogger, kemudian pada halaman dasbor pilih pengaturan Template.
2. Lalu klik edit HTML dan cari instruksi ]]></b:skin> dan masukan instruksi berikut ini diatasnya.
.post-body {
line-height:1.8em;
letter-spacing: 0.1px;
}
3. Save template, selesai.

Keterangan instruksi diatas.

• .post-body { untuk mengatur goresan pena di halaman posting blog
• line-height:1.8em; untuk mengatur spasi antar baris kalimat
• letter-spacing: 0.1px; untuk mengatur spasi antar huruf

Silakan diatur sendiri sesuai dengan harapan anda, untuk menambahkan atau mengurangi jarak antar baris ganti  nilai line-height:1.8em; contoh: 2.8em dan untuk spasti antar karakter ganti nilai letter-spacing: 0.1px; contoh: 1px;

Kalau menyerupai teladan diatas. itu instruksi spasi antar barisnya aku atur menjadi 2.8em dan spasti antar hurufnya 5px. Untuk pengaturan keseluruhan goresan pena dari halaman posting artikel blog aku ini. aku atur spasi antar barisnya menjadi line-height:1.6em; dan untuk spasti antar hurufnya letter-spacing: 0.1px;. Menurut aku sudah cukup yummy dilihat goresan pena di blog aku ini dengan pengaturan nilai 1.6em untuk baris kalimat dan 0.1 untuk spasi huruf.

Silakan dibaca juga artikel² aku yang lainnya, menyerupai menciptakan pangkat atas¹² dan bawah₉₀ di artikel tips dan trik menulis di blog. Dan juga artikel aku yang lainnya. Terima kasih telah berkunjung ke blog saya, dan semoga artikel diatas dapat bermanfaat untuk anda.

Read More