Home » Posts filed under memperindah Blog
Posted by
wiwied dyat on Wednesday, September 14, 2011
Hal yang utama bagi blogger yang ingin menjadikan blognya SEO atau Search Engine Optimatizion salah satunya adalah dengan memberi kotak Search, yang memudahkan visitor untuk searching post-post yang ada di blog anda secara cepat dan tanpa kompromi hehe.. kalau sekarang yang akan saya berikan adalah kotak search versi saya, simple dan tidak memakan tempat. Setelah itu tidak membuat lambat halaman.
Tutorialnya Langsung Saja:
- Masuk lah ke Akun Blogger anda
- Menuju rancangan
- Buatlah Gadget baru, dan pilih HTML / Javascript
- Masukkan kode berikut
<div class="block-widget_search" id="instance-search-3">
<div class="search-form">
<form action="/search" class="clearfix" id="searchform" method="get">
<fieldset>
<div id="searchfield">
<input class="text clearField" id="searchbox" name="q" onclick="thisClear()" type="text" value="" />
<input class="submit" type="submit" value="GO" />
</div></fieldset>
</form>
</div>
</div>
Sekian Tutor dari saya Terimakasih
Posted by
wiwied dyat on Sunday, September 11, 2011
Saya menemukan tutorial untuk blog yang keren. Bagi para blogger yang ingin memperindah dan mempercantik blog anda dapat menggunakan ini yaitu Mengubah Kursor Pada Blog saat berada di link. yap, jadi saat ada button atau tulisan yang mengarah ke suatu web atau page akan berubah cursornya...
Caranya:
- masuklah ke akun blogger.com anda
- pergilah ke rancangan, Edit HTML nah disini coba cari code a:hover{
- lalu tambahkan code cursor:wait;
jadi akan menjadi, contoh:
a:hover {
color:#d2691e;
font-size:19px;
font-style:strong;
cursor:wait;
}
anda dapat merubah code yang berwarna merah menjadi keinginan anda. anda bisa melihat daftar HTML cursor code di post saya ini.
Terima kasih telah membaca
More about → Cara Mengubah Kursor Pada Blog saat berada di link
Posted by
wiwied dyat
Nah, ini dia Daftar code HTML yang sudah saya janjikan..
untuk contoh tampilannya anda tinggal pindahkan cursor anda ke code di bawah ini.
HTML cursor CODE
HTML cursor codes - "Auto"
HTML cursor codes - "Default"
HTML cursor codes - "Text"
HTML cursor codes - "Help"
HTML cursor codes - "Pointer"
HTML cursor codes - "Wait"
HTML cursor codes - "Crosshair"
HTML cursor codes - "Move"
HTML cursor codes - "Smile"
HTML cursor codes - "Progress"
HTML cursor codes - "e-resize"
HTML cursor codes - "ne-resize"
HTML cursor codes - "nw-resize"
HTML cursor codes - "n-resize"
HTML cursor codes - "se-resize"
HTML cursor codes - "sw-resize"
HTML cursor codes - "s-resize"
HTML cursor codes - "w-resize"
Sekian info dari saya terima kasih
More about → Daftar HTML Cursor Code
Posted by
wiwied dyat
sekarang saya akan memberikan tutorial yang sangat mudah dan gampang. Nah, yang akan saya share adalah Cara Mengubah Font Tulisan di Blogspot yahh.. walaupun ada cara otomatisnya tetapi saya akan memberitahu manualnya. Tutornya langsung saja:
masukkan code di bawah ini pada kalimat yang anda inginkan
<span style="color:
black; font-family:
Verdana,Arial,Helvetica,Georgia; font-size:
14px;">
Lalu pada akhir kalimat akhiri dengan </span>
contoh:
<span style="color:
red; font-family:
Verdana,Arial,Helvetica,Georgia; font-size:
14px;"> http://tipstrikseoblogger.blogspot.com/ </span>
akan menjadi:
http://tipstrikseoblogger.blogspot.com/
Jangan lupa pada postingan taruh code di atas di 'Edit HTML' bukan 'compose'!! bisa digunakan juga pada tulisan yang lain
*ket: yang berwarna merah bisa di ganti dengan font yang anda suka , yang berwarna biru bisa anda ganti dengan ukuran yang anda inginkan, dan yang berwarna hijau bisa di ganti dengan warna yang anda inginkan contoh: Black diganti menjadi blue atau red.
sekian tips trik blog dari saya TERIMA KASIH telah membaca
tutor by http://tipstrikseoblogger.blogspot.com/
More about → Cara Mengubah Font Tulisan di Blogspot
Posted by
wiwied dyat on Saturday, September 10, 2011
udah lama saya tidak mengeshare dan berbagi tutorial karena mempunyai urusan diluar blog. nah sekarang tutor yang saya kasih adalah Cara Memasang Google translate dengan gambar negara yang ada bayangannya tidak jauh berbeda dari tutor yang sebelumnya yaitu, Cara Memasang Google Translate With flag tranparant. langsung saja ke tutor nya ya
berikut tutornya:
- masuklah dasbor blog anda
- menuju rancangan
- buatlah Gadget baru dengan klik 'Tambah Gadget'
- lalu pilih 'HTML/Javascript'
- setelah itu masukan kode di bawah ini
More about → Cara Memasang Google translate dengan gambar negara yang ada bayangannya
Posted by
wiwied dyat on Tuesday, August 30, 2011
Cara Menampilkan Postingan hanya judulnya - sekarang saya akan memberitahu tentang cara menampilkan postingan ganya judulnya saja. Mungkin kebanyakan blog memakai readmore yang menampilkan beberapa tulisan yang berada di postingan itu, tetapi sekarang ada cara baru dengan hanya menampilkan judulnya saja. Tidak perlu basa-basi lagi langsung saja tutorialnya
- Silahkan masuk dan login ke blogger
- Pergilah ke rancangan
- klik edit HTML
- bila anda kurang yakin atau berjaga-jaga bila terjadi kesalahan download teamplate anda terlebih dahulu.
- carilah kode ]]></b:skin>
- masukan kode dibawah tepat dibawah kode ]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.post-body{display:none;}
</b:if>
</b:if>
</style>
namun, dengan memasang kode diatas masih menyisakan beberapa elemen seperti tanggal posting, komentar dan yang lainnya. untuk menghapusnya juga silahkan gunakan kode di bawah:
<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>
Dengan begitu hanya muncul judul postingan tanpa tanggal posting, komentar dan yang lainnya.
sekian tutorial dari saya terima kasih :D
Posted by
wiwied dyat on Monday, August 29, 2011
Cara Memsang Google Translate With flag tranparant-Widget translate memang sangat di butuh kan sebagai penerjemah di blog kita, jika tidak ada translate pengunjung dari luar negeri pasti sulit sekali untuk membaca artikel kita yang biasanya berisi bahasa sehari hari. Di widget translator hanya bisa mentranslate dari bahasa baku. jadi usahakan Postingan anda berisi bahasa baku. jika anda ingin memasang widget translator.
tutorialnya sebagai berikut:
1. untuk model yang pertama (single cloumn)
Posted by
wiwied dyat on Sunday, August 28, 2011
Cara Memberi Gambar Pada Background Blog - sebuah blog yang indah akan membuat pengunjung juga memiliki kesan tersendiri, dengan begitu akan meningkatkan traffic blog kita. Nah, sekarang saya akan memberi tips untuk memberi gambar pada background agar lebih indah di lihat.
Berikut langkah - langkahnya :
- Login ke Blogger.
- Klik Tata Letak --> Edit HTML.
- Kemudian cari kode yang mirip seperti ini :
body { background: #FFFFFF;
margin:0; color:#000000;
font:12px trebuchet ms;
text-align: center }
Atau jika bingung silahkan klik
Ctrl + F kemudian ketikkan
body {, biasanya letaknya diatas.
- Untuk mengganti background dengan warna lain tinggal mengganti kode #FFFFFF dengan kode lain, untuk kode warna bisa dilihat disini. Contoh saya mengganti background dengan warna abu - abu, hasilnya akan menjadi seperti berikut :
body { background: #D8D8D8;
margin:0; color:#000000;
font:12px trebuchet ms;
text-align: justify }
- misalnya gambar yang sudah saya simpan di blogger, kode url-nya seperti ini :
lh6.googleusercontent.com/-GyNqvkAtJwI/TlfxQm9AazI/AAAAAAAAAKM/f1EctB9F9Eo/Untitled-1.gif
- Sehingga hasilnya menjadi seperti berikut ini :
body { background:#FFFFFF url(lh6.googleusercontent.com/-GyNqvkAtJwI/TlfxQm9AazI/AAAAAAAAAKM/f1EctB9F9Eo/Untitled-1.gif) repeat-x;
margin:0; color:#000000; font:12px trebuchet ms;
text-align: justify}
- Jika sudah selesai kemudian Simpan Template.
Itulah tips singkat dari saya, semoga bermanfaat :D .
More about → Cara Memberi Gambar Pada Background Blog
Posted by
wiwied dyat on Friday, August 26, 2011
Daftar isi merupakan suatu komponen yang penting sebagai denah seorang visitor, mungkin blog saya tidak memiliki navigasi next page maupun previous page yang memudahkan pengunjung untuk memutar-mutar pagenya, tetapi blog saya memiliki daftar isi yang bisa di lihat oleh semua orang. Jadi pengunjung tidak membuang-buang kuota & waktu untuk mengganti halaman hanya untuk mencari artikel yang di inginkan. Daftar isi harus di tempatkan di tempat yang mudah di lihat oleh pengunjung, seperti yang terdapat di blog saya.
Posted by
wiwied dyat
cara memberi navigasi breadcumb pada Blogspot - sekarang saya akan memberitahu tentang memasang navigasi breadcumb di blogspot
Untuk memasang navigasi breadcumb di blogger, jika breadvumb yang anda maksud sama dengan gambar diatas, berikut langkah-langkahnya:
More about → cara memberi navigasi breadcumb pada Blogspot
Posted by
wiwied dyat
Cara Menambahkan Pesan di Bawah Posting Blog - Nah sekarang saya akan memberi tips blog lagi... Sobat blogger pasti pernah liat kan blog yang dibawah postingannya ada pesan atau iklannya? kalo belom, coba liat dibawah postingan ini, yang ada di bawah..
Posted by
wiwied dyat
Membuat Text Area di Blog - Text area adalah suatu tempat atau area yang digunakan untuk menulis suatu teks atau kode HTML tertentu pada area tersendiri. Text area bisa ditempatkan di dalam suatu page(halaman) atau bisa juga diletakkan dalam suatu widget. Text area akan memudahkan pengunjung utuk copy paste text/HTML.
Posted by
wiwied dyat
Cara membuat NAVBAR (Navigasi Bar) menjadi auto hidden - Postingan kali ini berkaitan dengan trick blogging dari temen saya. Ada berita bahwa blog yang tidak memiliki navigasi bar akan di banned atau di hapus. Banyak blog yang menghapus navbar nya hanya untuk memperindah tampilan blog, oleh karena itu saya memberikan solusi cara untuk menghidden navbar.
Posted by
wiwied dyat
Cara membuat read more di blogspot- Sekarang saya akan memberitahukan cara membuat read moredi blog untuk post blog anda. read more adalah salah satu agar tampilan halaman sebuah blog bisa lebih simple dan enak dilihat dengan cara memberi pengalan pada setiap artikel baik secara otomatis atau cara manual mungkin para pembaca sudah banyak yang tahu tentang read more. Read more atau baca selengkapnya adalah sebuah kode atau script yang berfungsi memotong sebagian artikel untuk menghemat ruangan dan sekaligus memberikan link yang apa bila di klik akan menuju ke artikel/post.
langsung saja tutornya:
- Pertama masuk ke dasbor blog anda www.blogger.com
- Lalu masuk ke 'Rancangan' dan pilih menu 'Edit HTML'
- Klik "EXPAND WIDGET TEAMPLATE"
- cari kode </head> dengan menggunakan CTRL+F
- lalu masukkan kode ini dibawah kode </head>
<script type=’text/javascript’>var thumbnail_mode = “float” ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type=’text/javascript’>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(“>”)!=-1){
s[i] = s[i].substring(s[i].indexOf(“>”)+1,s[i].length);
}
}
strx = s.join(“”);
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=’ ‘ && strx.indexOf(‘ ‘,chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+’…’;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = “”;
var img = div.getElementsByTagName(“img”);
var summ = summary_noimg;
if(img.length>=1) {
imgtag = ‘<span style=”float:left; padding:0px 10px 5px 0px;”>
<img src=”‘+img[0].src+’” width=”‘+img_thumb_width+’px” height=”‘+img_thumb_height+’px”/></span>’;
summ = summary_img;
}
var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;
}
//]]>
</script>
*tulisan berwarna merah dapat kamu ganti sesuai kesukaan anda
- Selanjutnya, cari kode HTML <data:post.body/> atau <p><data:post.body/></p>
- ganti kode di atas dengan kode berikut :
<b:if cond=’data:blog.pageType != “item”‘>
<div expr:id=’”summary” + data:post.id’>
<data:post.body/>
</div>
<script type=’text/javascript’>
createSummaryAndThumb(“summary
<data:post.id/>”);
</script>
<span class=’rmlink’ style=’float:left’>
<a expr:href=’data:post.url’>READ MORE – <data:post.title/></a>
</span>
</b:if>
<b:if cond=’data:blog.pageType == "item"’><data:post.body/></b:if>
- finish, save teamplate anda
*ket:
tulisan yang berwarna merah dapat anda ganti sesuai keinginan anda
Summary noimg 250 = tinggi artikel terpenggal tanpa image
Summar img 250 = tinggi artikel terpenggal dengan image
img_thumb_height = 120; => Tinggi image
img_thumb_width = 120; =>Lebar image
“Readmore” bisa anda ganti dengan Baca Selengkapnya,[.......],Full read….,Selanjutnya atau apa saja sesuai keinginan anda.
sekian berbagi ilmu dari saya, terima kasih 
More about → CARA MEMBUAT READ MORE (BACA SELENGKAPNYA) DI BLOGSPOT
