Home » Posts filed under Teks
Tampilkan postingan dengan label Teks. Tampilkan semua postingan
Tampilkan postingan dengan label Teks. Tampilkan semua postingan

Cara Mengganti dan Menambah Style Font di Template Blogger

Avia || || || Leave a komentar

Hai sobat bloggers, kembali kita ketemu lagi di Blog Trik dan Tips "tak ada blog jika tak ada trik"....he3. Mungkin anda sudah tau apa itu font, font adalah jenis atau gaya tulisan. Pada blogspot (blogger), anda bisa mengganti font pada template anda, namun jumlah jenis font sangat terbatas. Beberapa jenis font yang dimiliki blogger yaitu arial, courier, georgia, lucinda grande, times, trebuchet, verdana dan webdings. Jenis font ini kadang tidak sesuai dengan keinginan anda. Ada pasti ini memiliki font dengan gaya blog anda sendiri yang lebih stylis atau elegan. Untuk itu saya akan memberikan trik dan tips bagaimana kita bisa memperoleh bermacam-macam font untuk digunakan ditemplate anda. Simaklah tutorial berikut ini:

1. Buka situs Google Web Font http://www.google.com/webfonts/#ChoosePlace:select
2. Silahkan cari jenis font yang anda inginkan, tambahkan beberapa font dengan mengklik tombol Add to Collection.
3. Klik tombol Use disebelah kanan bawah browser

4. Kemudian kopi kode dari Google Font (kodenya seperti ini, kode ini hanya contoh saja tidak perlu anda kopi):
<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>
5. Pada template anda carilah kode seperti ini <![CDATA[/*

6. Paste kode yang dikopi dari Google Web Font diatas kode <![CDATA[/*
7. Tambahkan kode slash "/" yang berwarna merah pada akhir kode yang dipaste tadi sehingga terlihat seperti dibawah ini:
<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'/>
8. Sekarang anda tinggal mengganti font pada template anda. Saya akan memberikan contoh bagi anda untuk mengganti font header di template anda, caranya seperti berikut ini:
9. Carilah kode #header h1 atau h2.postTitle {
10. Setelah itu ganti font family yang tadi anda pilih, contohnya seperti dibawah ini:
Kode awal pada template yang belum dirubah
#header h1{color:#00008B;font-size:26px;font-family: Arial ;font-weight:700;text-decoration:nnne;margin:0;padding:10px 0 0 10px}
Kode setelah dirubah saya
#header h1{color:#00008B;font-size:26px;font-family:'Condiment', cursive;font-weight:700;text-decoration:nnne;margin:0;padding:10px 0 0 10px}
Begitulah caranya kita menambahkan font baru ke template, bagaimana tertarik untuk membuatnya. Silahkan dicoba aja, tapi jangan lupa ikuti langkah di atas dengan baik dan ingat untuk back up template anda. Sekian dan selamat mencoba!

Cara Mengganti Tulisan "Poskan Komentar" di atas Kotak Komentar

Avia || || ,, || Leave a komentar

Jika anda melihat halaman posting artikel pasti anda akan mendapati tulisan "POSKAN KOMENTAR". Tulisan ini biasanya terletak diatas form komentar atau kotak komentar. Tulisan ini dapat anda ganti sesuai dengan selera anda hanya dalam hitungan detik. Jadi kalo anda baca artikel ini pasti kode yang saya kasih ini tidak akan meleset....he3 just kidding. Oke kalo begitu langsung ikuti trik di bawah ini:

1. Login pada blog
2. Masuk ke Rancangan - Edit HTML
4. Centang Expand Template Widget
5. Cari kode seperti pada gambar dibawah ini, biasanya ada tiga kode yang sama seperti ini, jadi anda hanya perlu mengganti kode yang kedua.

6. Hapus kode tersebut lalu gantikan dengan pesan yang anda ingin sampaikan.
7. Simpan Template

Cobalah anda lihat hasilnya....Dijamin pasti berhasil....oke sekian trik dari saya. Jangan lupa berkomentar ya.....Bagaimana mudah kan? Selamat Mencoba!!!

Cara Membuat Kotak Pesan Admin (Author Box) di Blog

Avia || || ,, || Leave a komentar

Author box atau Kotak Pesan Admin biasanya digunakan sebagai tanda pengenal seorang penulis dari sebuah blog, atau berupa penyampaikan pesan singkat dari penulis. Kotak pesan tersebut terdapat gambar dari penulis blog serta ucapan terima kasih kepada penunjung yang telah berkunjung dan membaca artikel pada blog. Kotak admin pada dasarnya ditempatkan dibawah posting blog dan umumnya judul posting yang dibaca. Saya akan memberikan langkah untuk membuat author box pada blog anda.

1. Login ke Blogger
2. Masuk ke Rancangan lalu pilih Edit HTML
3. Expand Template Widget anda
4. Paste kode dibawah ini diatas kode ]]></b:skin>
.admin-tulisan{
display:block;
width:auto;
background:#F5F5F5;
border:1px solid #C0C0C0;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#C0C0C0;
border:none;
border-bottom:1px solid #C0C0C0;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:0px solid #E6E6FA;
padding:2px;
background:#E6E6FA
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

5. Paste kode dibawah ini diatas kode <div class='post-footer'>

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Blog Trik dan Tips</h4>
<div class='kontainer'>
<img height='80' src='http://1.bp.blogspot.com/-Vhz0UpxY3w0/T2cCx3-UKCI/AAAAAAAABxU/6UMbVlexRPo/s220/Picture%2B004.jpg' width='75'/>
Anda sedang membaca sebuah artikel yang berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b>,, Semoga artikel tersebut bermanfaat untuk anda .... <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://blogtrikdantips.blogspot.com' target='_blank'>:: Thank you for visiting ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
Keterangan: kode merah adalah url gambar

6. Simpan template anda lalu lihat hasilnya

Kini anda akan memiliki Author Box yang keren. Selanjutnya anda tinggal mengedit kode diatas agar pesan author box sesuai dengan kebutuhan anda. Oke selamat mencobanya!

Cara Mudah Membuat Teks Area yang Unik

Avia || || , || Leave a komentar

Kali ini blog trik dan tips berkesempatan untuk memberikan trik membuat teks area yang lebih unik. Fungsi dari teks area yaitu menaruh tulisan anda dalam sebuah kotak khusus. Jika sobat sudah tidak sabar untuk membuat teks area ikuti aja langkahnya berikut ini....

1. Login ke blogger.
2. Masuk ke Rancangan -- Edit HTML
3. Cari kode ]]></b:skin>
4. Masukan kode teks area dibawah ini diatas kode ]]></b:skin>















6. Simpan Template sobat

Apabila sobat ingin menambahkan teks area pada posting maka sisipkan script yang berwarna merah seperti dibawah ini:
<textarea>
Tulisan anda disni
</textarea>
Baguskan teks areanya, met mencoba........!!!!! Happy blogging

Cara Mudah Membuat Blockquote di Blog

Avia || || , || Leave a komentar

Sudahkah anda pernah mendengar istilah blockquote....Blockquote adalah penekanan sebuah kalimat/pernyataan yang kita ingin buat sehingga terkesan "penting" kepada pembaca. Blockquote juga dapat berisi kutipan dari sebuah sumber yang ingin ditampilkan lebih jelas. Jika sobat memiliki blog yang berisi tentang tutorial blogging maka sudah sewajibnya sobat membuat blockquote untuk menghighlight kode atau script sehingga terlihat lebih menarik dan mudah untuk dibaca. Untuk itu saya akan memberikan trik kepada sobat bagaimana memodifikasi blockquote pada blog sobat serta cara menerapkan blockquote pada posting sobat.

1. Login ke blogger.
2. Pilih Rancangan -- edit HTML
3. Cari kode ini ]]></b:skin>
4. Letakkan salah satu kode dibawah ini sebelum kode diatas

Blockquote 1.
.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0
}
Hasilnya seperti dibawah ini:
Contoh Blockquote 1.
Blockquote 2.
.post blockquote {
background-color: #FFFFFF;
border-left: 10px solid #8A2908;
border-right: 10px solid #8A2908;
margin: 1em 3em;
padding: .5em 1em;
font-size: 12px;
Hasilnya seperti dibawah ini:
Contoh Blockquote 2.

Blockquote 3.
.post blockquote {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-family : Courier, Arial, Verdana;
line-height:1.6;
background: url('http://3.bp.blogspot.com/-XHc6bsXTMvw/T47faFP2o_I/AAAAAAAADEk/k-icLJmzFz4/s400/w2b_codeicon.gif') no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.post blockquote li {
line-height : 24px;
color : #333333;
margin : 0;
padding : 0;
}
Hasilnya seperti dibawah ini:
Contoh Blockquote 3.

5. Simpan template sobat

Untuk membuat blockquote pada posting sobat jangan lupa untuk menyertakan kode seperti dibawah ini pada tulisan atau script yang ingin dihighlight:

<blockquote>
Masukkan tulisan atau script disini
</blockquote>

Selamat mencoba, dan good luck!

Cara Membuat Warna Background pada Teks

Avia || || || Leave a komentar

Tutorial kali ini adalah salah satu yang saya ingin bagikan di Blog trik dan tips..... Mungkin sobat udah pernah melihat tulisan yang dihighlight atau diperjelas dengan warna. Yang saya maksud adalah highlight teks seperti ini Mengganti Warna Background pada Tulisan

Nah udah liat kan bagaimana tulisan tersebut terlihat. Penasaran gimana cara buatnya. Ikuti langkahnya dibawah ini.....

1. Masuk pada Posting pilih tab Edit HTML
2. Pada saat menulis artikel masukan kode berikut:
<span style="background:#000000;font-color:#fffff;">Tulisan Sobat Diisi Disini</span>
Keterangan:
- Tulisan berwarna biru adalah kata-kata yang sobat ingin highlight
- Warna highlight (background): #00ff00 serta mengganti warna teks: black dapat sobat ganti

3. Terbitkan posting sobat dan lihat hasilnya

Mudahkan cara membuatnya! Selamat mencobanya......

Cara Membuat Konversi/ Parse HTML Javascript pada Blog

Avia || || , || Leave a komentar

Yang namanya membuat tutorial blog atau memasang iklan pada blog selalu akan berurusan dengan HTML Converter / Parser. Seringkali kita gak tau ada cara yang cepat untuk memparse kode html tersebut, akhirnya kita menjadi tergantung menggunakan blog teman untuk memparse kode html tersebut. Ada juga beberapa situs online yang menyediakan layanan gratis HTML Parse namun untuk encodenya membutuhkan waktu loading. Itu sebabnya para blogger mulai berpikir bagaimana cara membuat HTML parser langsung pada blog sobat sendiri. Jika sobat pingin tau cara membuatnya ikuti langkahnya berikut ini:

1. Login pada blogger
2. Masuk ke posting sobat, pilih tab edit HTML
3. Masukkan kode berikut ini
<center><small><b><a href="http://blogtrikdantips.blogspot.com/">Adsense Parser</a></b></small></center><script src="http://blogtrikdantips-blogspot.googlecode.com/files/adsense_parser.js" type="text/javascript"></script><center><textarea cols="50" id="somewhere" rows="7" style="background: none repeat scroll 0% 0% rgb(250, 250, 250); border: 1px dashed rgb(204, 204, 204);"></textarea>
<left><input onclick="convert();" value="Encode" type="button"></left></center>
4. Simpan hasil kerja sobat...Jika sobat pingin tau hasilnya akan terlihat seperti dibawah ini: Oh iya jangan lupa berkomentar!!!

Adsense Parser

Cara Membuat Spoiler atau Teks Area Tersembunyi

Avia || || || Leave a komentar

Ada beberapa cara bagi kita untuk memperlihatkan teks area dengan berbagai jenis tampilan. Tapi sudahkah anda pernah membuat teks area yang dapat disembunyikan. Dengan hanya sekali klik anda dapat menampilkan teks pada blog sobat. Teks area show hide ini sering dikenal dengan istilah "Spoiler". Dengan trik yang satu ini sobat tidak perlu repot2 menghabiskan banyak ruang pada blog.

Dari pada menampilkan teks yang panjang mending menampilkan teks yang disembunyikan. Sobat dapat lihat spoiler yang saya buat dibawah ini. Klik aja tombol Show. Jika ingin tau bagaimana cara membuatnya ikuti langkah dibawah ini:





--ISI TULISAN SOBAT DISINI ---
1. Langsung saja masuk pada posting sobat (tab Edit HTML) atau pada Gadjet (HTML/Javascript)
2. Kopi kode dibawah ini lalu paste di blog sobat
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 0px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
--ISI TULISAN SOBAT DISINI ---
</div></div></div></div>
3. Isi teks anda pada kode berwarna merah
4. Simpan hasil kerja anda lalu lihat hasilnya

Cara Membuat Marquee atau Teks Berjalan

Avia || || , || Leave a komentar

Marquee atau sering disebut teks berjalan sering saya temukan pada beberapa blog. Efek marquee dapat membuat blog anda menjadi lebih cantik dan animatif. Untuk itu bagi yang ingin memasang marquee, saya kasih kodenya dibawah ini. Sobat tinggal pilih tampilan marquee yang ingin dibuat, kopi kodenya lalu paste pada Gadjet (HTML/Javascipt).

Tampilan 1
<marquee direction="right" scrollamount="3" behavior="scroll" style="width: 420px; height: 20px; color: rgb(0, 0, 0); font-size: 12px; font-family: Courier New; background-color: rgb(255, 255, 255);">www.seputarberita.blogspot.com</marquee>
www.seputarberita.blogspot.com

Tampilan 2
<marquee direction="right" scrollamount="3" behavior="scroll" style="width: 420px; height: 20px; color: rgb(255, 0, 153); font-size: 16px; font-family: Comic Sans MS; background-color: rgb(255, 255, 153);">www.seputarberita.blogspot.com</marquee>

www.seputarberita.blogspot.com

Tampilan 3
<marquee direction="right" scrollamount="3" behavior="scroll" style="border: 1px dotted rgb(255, 0, 0); width: 420px; height: 20px; color: rgb(51, 102, 204); font-size: 12px; font-family: Courier New; background-color: rgb(102, 255, 255);">www.seputarberita.blogspot.com</marquee>

www.seputarberita.blogspot.com

Tampilan 4
<marquee direction="down" scrollamount="2" behavior="scroll" style="border: 2px outset rgb(255, 0, 0); width: 420px; height: 100px; color: rgb(0, 0, 0); font-size: 12px; font-family: Courier New; background-color: rgb(255, 255, 255);">www.seputarberita.blogspot.com</marquee>

www.seputarberita.blogspot.com

Tampilan 5
<marquee direction="right" scrollamount="2" behavior="alternate" style="border: 2px groove rgb(255, 0, 51); width: 420px; height: 30px; color: rgb(0, 0, 0); font-size: 12px; font-family: Courier New; background-color: rgb(255, 153, 255);">www.seputarberita.blogspot.com</marquee>

www.seputarberita.blogspot.com