Showing posts with label Desain Blog. Show all posts
Showing posts with label Desain Blog. Show all posts

Cara membuat read more berwarna


Cara membuat read more, cara membuat read more berwarna, tips membuat read more, memberi background pada read more.  Ini adalah salah satu cara untuk memoles tampilan link "Read more" di blog anda. Link Read more anda bisa ditambahkan background dengan warna untuk memperindah tampilan blog anda dan semakin profesional.



Cara ini untuk memperindah tampilan link Read more di blog anda, yaitu :

Untuk memodifikasi background link "Read More", memang diharuskan untuk mengedit kode HTML blog anda. Untuk membuatnya berikut ini caranya.

  1. Login ke blogger.com
  2. Klik Dashboard
  3. Klik Rancangan 
  4. Klik Edit HTML

Tapi Pertama-tama download dulu kode HTML blog anda untuk jaga-jaga kalau anda ingin kembali ke tampilan blog sebelumnya.

Setelah itu copy paste kodenya di bawah ini
.jump-link a  {-moz-border-radius:5px;-khtml-border-radius: 5px;  -webkit-border-radius: 5px; padding:2px 12px; font-style: italic; border:1px solid #b7b7b6; margin:10px 0px; text-decoration: none; color: #000; background: #ccc; text-align: right; float: right; }
.jump-link a:hover {border:1px solid #545353; color:#fff; background:#797878; }
Taruh kodenya diatas  ]]></b:skin>
Untuk mempercepat pencarian kode ]]></b:skin>, tekan CTRL+F di keyboard anda.
Kemudian klik Save dan finish.

Anda masih dapat mengubah kode CSS seperti yang Anda inginkan, berdasarkan desain blog Anda. Warna yang diberikan adalah abu-abu, tetapi Anda dapat mengubahnya dengan warna lain, misalnya
background: # ccc;
Ganti kode warna dengan kode warna favorit Anda, seperti:
background: # 1881f7;
Jika Anda memiliki kode diedit, jangan lupa untuk Simpan Template.

Cara membuat komentar admin berbeda


Cara membuat komentar, cara membuat komentar admin berbeda, cara mengubah penampilan komentar. Ketika saya jalan-jalan (blogwalking) saya sering menemukan komentar admin yang berbeda dari pengunjung nya. Hal ini membuat saya selalu bertanya-tanya bagaimana cara mereka membuat nya karena template blogspot punya saya tidak seperti itu.

Akhirnya saya googling dan menemukan banyak cara untuk membuat ini, berikut Cara Membuat Kotak Komentar Admin Berbeda Di Blog :

1. Masuk blogger > rancangan > edit html > centang expand template widget
2. Cari kode ]]></b:skin>
3. Pastekan kode berikut tepat di atas kode  ]]></b:skin>
.author-comments {
background: #333333;
border: 2px solid #666666;
padding: 5px;
}
Pada kode berwarna merah di kotak atasbisa diganti sesuai keinginan.
Kemudian cari kode :

<data:commentPostedByMsg/>
</dt>

Jika sudah ketemu kode di atas, pastekan kode di bawah ini tepat di bawah </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
Kemudian cari kode <dd class='comment-footer'> tambahkan </b:if> tepat di atas kode :
<dd class='comment-footer'>


Sehingga keseluruhannya tampak seperti di bawah ini :
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/> <dd class='comment-body' expr:id='data:widget.instanceId data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
Terakhir simpan template, dan kemudian untuk melihat hasilnya silahkan  berkomentar di blog sendiri dengan catatan harus login di blogger dulu.

Semoga bermanfaat buat blog sobat.

Cara menghilangkan attribute Powered By Blogger


powered by blogger
Kalau kita memakai template bawaan Blogger.com seperti blog ini, maka pasti akan ada widget attribute di bagian footer template. Sebagian orang kadang merasa tidak perlu menampilkan widget ini, maka lebih baik menghilangkannya atau tepatnya menyembunyikannya.
Cara menghilangkan attribute blog powered by blogger adalah sebagai berikut :
<a href='http;//toolbarku.blogspot.com'>Toolbarku</a>
1. Masuk dashboard
2. Pilih design, lalu edit html
3.Cari kode ]]></b:skin>.
4. Kemudian letakkan kode berikut ini tepat di atas ]]></b:skin>.
#Attribution1 {
height:0px;
visibility:hidden;
display:none
}
5. Simpan template dan selesai.
<a href='http;//toolbarku.blogspot.com'>Toolbarku</a>
Catatan: Karena sekarang Blogger.com akan menggunakan tampilan dashboard yang baru, mungkin cara mengedit template seperti di atas harus di lakukan secara offline, jadi terlebih dahulu kita download full templatenya, kemudian baru di edit dan di upload lagi.

Semoga bermanfaat dan blog sobat terlihat profesional.

Cara menghilangkan navbar


Navbar Blogger
Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.
Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena itu, kadang para blogger menghapus NavBar tersebut. Pertanyaannya adalah: Apa tidak melanggar Term of Service (TOS) dari Blogger.com? Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga mendapat teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga tidak ada aturan yang cukup detail tentang hal ini.


Nah, bagaimana menghilangkan Navigation Bar?
Ada beberapa penyedia template yang memang sudah tidak ada NavBar-nya. Namun bagi kamu yang memakai template yang masih ada NavBarnya dan ingin menghilangkannya maka inilah caranya.


1. Kamu harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Rancangan --> Edit HTML
3. Copy script berikut dan paste sebelum ]]></b:skin>
#navbar-iframe {display: none !important;}
4. Setelah simpan template dan selesai

Semoga blog sobat menjadi lebih profesional.
<a href='http;//toolbarku.blogspot.com'>Toolbarku</a>

Cara memperindah blockquote


Blockquote
Fungsi dari Blockquote itu adalah mendeskripsikan postingan penting baik itu berupa script code maupun artikel yang menurut anda sangat penting untuk dilihat, nah saya akan memberi anda sebuah tips memperindah blockquote karena dengan adanya blockquote yang bagus itu dapat nilai tersendiri bagi pembaca. Berikut script code yang akan saya kasih untuk sobat blogger untuk memperindah postingan pada blog :

Cari kode ]]></b:skin> (untuk mempermudah gunakan keyboard dan tekan Ctrl+F),setelah ketemu,tepat diatas kode tersebut letakkan kode berikut :
.post-body blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: url(http://2.bp.blogspot.com/_n7xseT2-HDU/TTfSVR6DdyI/AAAAAAAAArQ/ZtQUl-i6dhU/s1600/blockquote%2Bpelajaran%2Bblog.png) no-repeat left top;
border-left: 10px solid #666666;
}
4.Lalu simpan Templates,dan selesai.
<a href='http://toolbarku.blogspot.com/'>Toolbarku</a>
Catatan:jika css blog sobat sudah ada kode .post-body blockquote dengan cara menekan CTRL + F dan pastekan kode dibawah ini :
.post-body blockquote
Jika sudah ketemu nah,, silahkan ganti dengan kode diatas.
Semoga  bermanfaat

Cara membuat tulisan copyright


Create copyright
Membuat tulisan copyright di blog memang banyak manfaatnya. Salah satunya supaya blog kita anti pembajakan. Sebenarnya pembajakan tetap saja terjadi karena tulisan copyright ini hanya sebuah tulisan tanpa ada hukum yang mendampinginya. Tulisan copyright ini sangat sering kita temui di bagian bawah sebuah blog atau website. Kalau menurut saya, tulisan ini memberikan informasi siapa pembuat template blog Sobat, siapa pemilik blog tersebut atau info-info lainnya.
Selain memberikan informasi, tulisan ini juga membuat blog atau website kita lebih profesional.Membuat tulisan copyright di blog cukup mudah karena tidak menggunakan kode HTML yang sulit. Kalau di blog Sobat belum ada tulisan Copyright kenapa ngga mulai memasang sekarang juga??? Okeh lah, langsung saja kita meluncur ke tutorial membuat tulisan copyright di blog.

Langkah 1

Login ke akun Blogger milik Sobat > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Copas kode berikut tepat di atas kode ]]></b:skin>
.copyright{
float:left;
padding-top:5px;
padding-bottom:5px;
font:normal 80% Verdana,Trebuchet,Arial,Sans-serif;
}
Ganti float menjadi right jika Sobat ingin meletakkannya pada bagian kanan blog, left pada bagian kiri. Jika ingin terletak di tengah, hapus kode float.

Langkah 2

Copas kode berikut ini tepat di atas kode </body>
<div class='copyright'>Copyright © 2009-2010 <a href='http://toolbarku.blogspot.com/'>NAMA BLOG ANDA</a> <br/>Modify By : <a href='http://dexer.blogspot.com>NAMA ANDA</a></div>
Hasilnya bisa Sobat lihat pada bagian bawah blog ini.
Semoga Bermanfaat...