Membuat Label Keren Di Blog

membuat label keren Di blog | siaang semua, ketemu lagi nih, ini posting pertama saya setelah ganti template yang baru, jadi lebih semangat nih ,hehe, oh iya kali ini saya akan posting tentang bagaimana cara membuat label keren di blog, ini menggunakan efek CSS3 loh , jadi jangan khawatir akan memberatkan blog atau membuat loading blog lama , untuk lebih jelasnya silahkan si simak

• Login ke Blogger: Dasbor
• Pergi ke Menu Tata Letak -> Tambah Gadget -> Label [seperti gambar di bawah ini]

• Kemudian pergi ke Menu Template -> Edit HTML -> centang Expand Widget Template
• Cari kode ]]></b:skin> [gunakan ctrl+F untuk pencarian cepat]
  Lalu copas kode dibawah ini tepat diatas kode ]]></b:skin>

Kode CSS3:
 /*--- MBL Custom Label Cloud With CSS3 --- */ .Label a{ padding-left:20px; background:#0000FF; padding:0 20px; color:#fff!important; border-radius:100px; -moz-border-radius:100px; height:17px; line-height:17px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#ff0; }

•  simpan template anda. 

sekian , semoga berhasil dan bermanfaat

Cara Meningkatkan Traffic Dan Visitor Blog Dengan Ping Blog

hai..sobat. semua pada kesempatan kali ini saya akan berbagi ilmu yg telah saya dapatkan yaitu "Cara Meningkatkan Traffic & Visitor Blog Dengan Ping Blog". sobat semua tau ping..?Ping adalah cara yang dilakukan oleh blogger untuk memberitahukan update konten kepada search engine. Sinyal XML-RPC akan dikirim ke satu atau lebih server ping yang memberitahukan bahwa situs atau blog tertentu memiliki konten yang baru.

Jika sobat semua sudah tau apa itu ping, sekarang yang sobat perlu tau adalah  apa fungsi ping tersebut.

Manfaatnya sendiri adalah untuk membantu mengoptimalkan blog kita di search engine, mempengaruhi posisi artikel kita di pencarian, dan tentunya pasti akan berdampak pada visitor dan pagerank nantinya. Nah, intinya Ping blog juga merupakan salah satu resep teknik SEO. Jadi ping haruslah sobat lakuakan.

Lalu dimana temapat yg menyediakan ping itu sendiri..?

Sebenarnya ada sangat banyak tempat untuk melakukan ping, tapi di sini saya tidak akan menyebukannya satu persatu, tetapi hanya beberapa saja tempat yg akan saya bagiakan, yaitu :

• Totalping
• Feed Shark
• AutoPingler
• Ping.in
• Pingler
• My Pagerank
• Googleping
• Pingomatic
• Pingmyblog
• Pingates
• Feed Ping
• Pingoat

Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse Pada Blog

 - Pengunjung Blog Copas Pada Kesempatan ini saya akan berbagi tutorial blog yaitu Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse Pada Blog 

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

 <style>#oktri img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
#oktri img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode  <div id="oktri"> sebelum url gambar dan jangan lupa di tutup dengan kode</div> contoh seperti di bawah ini:

<div id="oktri">
<a href="http://http://tutorialbelajarblogger.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfpYgkAVX3nJtBOKJ_llH7ujZdM8gLA1XJHMh7lRcxJYIu0Qb7T8SyMN2vcihTHvV0cxtaVPZwvIhaIPWYhu2GHP5D7lwC9_FDeJqfc1yphK5gA3Bv-CfKg6QCbFGgu5APWu-pGUyYqMXy/s200/naruto+dont+copy.png" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
3. Setelah semuanya selesai klik publikasikan. 

Demikianlah tips "Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse Pada Blog".

Semoga bermanfaat Sobat.

Cara Membuat Menu Blog Keren

 Mungkin Anda Berfikir Menu Blog Keren Seperti apa ? bentuknya seperti pada blog demo saya di sebelah kanan yang berwarna Hijau kalau mousenya di dekatkan maka menu blognya akan keluar,

Berikut ini langkah-langkahnya :
1. Masuk ke akun Blogger Anda.
2. Klik Tata Letak.
3. Klik Tambah Gadget.
4. Pilih HTML/JavaScript.
   Lalu copy kan script dibwah ini pada HTML/javascript

<script language="JavaScript1.2" src="http://oktri.googlecode.com/files/slide%20menu%20keren.js"></script>
<script>
resizereinit=true;
menu[3] = {
id:'menu3',
bartext:'MENU BLOG',
menupos:'left',
kviewtype:'fixed',
barbgcolor:"#00ff00",
barcolor:"#000000",
barfontweight:"bold",
bordercolor:'#000000',
hdingbgcolor:"#ffffff",
fontsize:'80%',
linkheight:20 ,
hdingwidth:210 ,
menuItems:[
["Home", "blogzcopas.blogspot.com", "_self"],
["My Facebook", "https://www.facebook.com/profile.php?id=100004548012951&ref=ts&fref=ts",""],
["Berita", "http://www.okezone.com/", ""],
["Kaskus", "http://www.kaskus.us", ""],
["My Profile", "http://www.blogger.com/profile/02713061222000849084", ""],
["Panduan Blog", "http://blogzcopas.blogspot.com", ""],
["Tips And Trics Blog", "blogzcopas.blogspot.com", ""],
["Belajar Blog", "blogzcopas.blogspot.com", ""],
["Tips Blog", "blogzcopas.blogspot.com", ""],
["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry
]};
make_menus();
</script>

Keterangan :

• Ganti Direct Link "http://oktri.googlecode.com/files/slide%20menu%20keren.js" dengan Direct Link File JS anda sendiri, sebab script tersebut bisa over load jika terlalu banyak yg menggunakan, anda bisa download script JS nya.
• Ganti link dan judul link yang saya tulis dengan warna merah dan Biru dengan link Anda sendiri.
• Ganti Tulisan left yang saya tulis dengan warna Coklat dengan rightjika anda ingin Side Menu ini muncul disebelah kanan body blog.
• 9. Selanjutnya jangan lupa untuk mengklik tombol Simpan.

      10. Selesai...Semoga Bermanfaat dan Jangan Lupa Untuk Berkomentar.

Game Pc: Teenage Mutant Ninja Turtles 2 Battle Nexus compressed

 

DOWNLOAD

Cara Membuat Menu Horizontal CSS Block Tanpa Edit HTML

• Pertama Silahkan login pada akun blog sobat
• Selanjutnya Masuk ke Dasbor
• Pilih Tata Letak
• Lalu Klik Tambah Gadget *Biasanya dipasang dibawah header
• Pilih HTML/Javascript

• Selanjutnya Copy kode CSS dibawah ini dan pastekan pada HTML/Javascript
• Berikut kode CSS-nya

<style type="text/css">

.solidblockmenu{ margin: 0; padding: 0; float: left; font: bold 13px Arial; width: 100%; overflow: hidden; margin-bottom: 1em; border: 1px solid #625e00; border-width: 1px 0; background: url(https://lh6.googleusercontent.com/-PcV4VpR8vVs/UMtMGi8I0II/AAAAAAAAAfA/1yw3SNrhT1M/w248-h248/navbangdadan.gif) center center repeat-x; } .solidblockmenu li{ display: inline; } .solidblockmenu li a{ float: left; color: white; padding: 9px 11px; text-decoration: none; border-right: 1px solid white; } .solidblockmenu li a:visited{ color: white; } .solidblockmenu li a:hover, .solidblockmenu li .current{ color: white; background: url(https://lh6.googleusercontent.com/-fKZAiQvUg8E/UMtMGrxQwrI/AAAAAAAAAfE/1IihW4JVYEQ/w248-h248/navaktifbangdadan.gif) center center repeat-x; } </style> <br /> <ul class="solidblockmenu"> <li><a class="current" href="http://bangdadan.blogspot.com/">Home</a></li> <li><a href="http://bangdadan.blogspot.com/2012/12/about-coretan-bang-dadan.html">About</a></li> <li><a href="http://www.emailmeform.com/builder/form/58bZ51u00rcDY7vL8RS3p9V">Contact</a></li> <li><a href="http://bangdadan.blogspot.com/search/label/blogger%20tutorial">Tutorial Blog</a></li> <li><a

• Selanjutnya klik Simpan

Nah selesai deh, sekarang sobat sudah punya menu horizontal seperti pada demo diatas.

Mungkin sampai disini dulu pembahasan kita kali ini tentang Cara Membuat Menu Horizontal CSS Block Keren Tanpa Edit HTML. Semoga artikel ini bermanfaat bagi sobat yang membutuhkan. Terimkasih......