Cara Membuat Info Blog Menarik Cantik

Cara Membuat Info Blog Menarik Cantik dekat sudut kiri blog sendiri, seperti blog ane ini..
Kali ini saya memposting karena kemarin, ada seseorang yang mengkontak saya lewat Contact Us di blog ane, dia menyebutkan blog ane.. lalu bertanya. bagaimana cara membuat info menarik berputar seperti blog kamu. katanya. :))  ya cukup terimakasih saja walaupun hanya meminta, dan tidak memberi masukkan baik. haha

ya untuk kali ini saya memposting untuk selera pengunjung saja :) semoga artikel ini bermanfaat.

 

 Oke langsung saja ke tkp pastinya, ikutin langkah berikut ;

1. Pastikan anda login dulu ke blog anda login

2. Setelah itu pilih blog sobat yang ingin anda ubah

3. Pilih edit tata letak pada blog, seperti pada gambar berikut ini

4. Setelah muncul tampilan edit tata letak, tambah kode html ini gadget seperti pada gambar dibawah ini;

Select all.

<style type='text/css'>#info-teja {z-index: 1000;background:-moz-linear-gradient(top, #1F2326, #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;width:400px;position: fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#info-teja{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #info-teja:hover{width:400px;opacity:1.0;margin-left:0;}.Tejainbox {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#ffffff; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}.Tejainbox:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}.Tejainbox2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}.teja15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.Teja2 ul.bom {margin: 0; padding: 0;}.Tejainbox2 li {margin-left:20px;}.Tejainbox2 li a {color: #FFFFF; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.Tejainbox2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.Tejainbox2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}.Tejatouch {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.Tejatouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: red;}</style><div id='info-teja'><span class='Tejatouch'>Info</span><div class='Tejainbox'><div class='Tejainbox2 teja15'><h2>Catatan Boy Manalu</h2>SELAMAT DATANG DI BLOG SAYA :), ISIKAN TENTANG BLOG SOBAT <h2>Sekilas Tentang Admin</h2><img height='130x' src='ISIKAN URL GAMBAR PROFIL ANDA' width='100px'/><p style='text-align:justify'>ISIKAN TENTANG ADMIN ANDA </p></div></div></div>

 Copy pastekan kode html diatas kedalam blog sobat,,,,,,,,,,,,,,,,,Selesai Save.

5. Ketentuan Untuk Kode
- Warna Hijau : Ucapan menarik buat blog sobat sekalian.
- Warna Merah : Link url gambar anda disarankan gambar url profil facebook
- Warna Biru : Tentang Anda

6.Selesai

Semoga artikel ini berguna buat kita.. trimss..