TUTORIAL BLOG | TIPS TRIK BLOG - tutorial seperti ini saya juga mendapatkanya dari sang master Hendriono dari Blogger Tune-Up. salam tengkyu lah buat beliau,.. he, hampir mirip dengan punya beliau namun saya rombak sedikit hingga menjadi seperti yang q punya,...
Yap oke, langsung aja ke tutorialnya, :
Login di blogger Anda
* Masuk ke Dasbor
* Pilih Tata Letak / Rancangan Dan Edit HTML
* Klik "Expand Template Widget"
* Jangan lupa untuk memback-up template anda terlebih dahulu (very recomended)
Kemudian
1. Cari code :
]]></skin>Sisipkan code berikut di Atas-nya :
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px
solid
#940000;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px
30px 30px 100px}
.panel p{color:#ffffff;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#940000;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana,
helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTf9Fd2d-BjMbtIPrqh0jOTFFX4TBt8EUtVGhPZWbwkRx7a6a1EoTBZMdcS9SYTDFRo-KZ8fNRMLokou4ngFY6QunESpNqiMsH8xQNey2jHKSB2RBeVezVDfG901OQj7AkBQiK2aEy-a8/)
85% 55% no-repeat;border:2px solid
#940000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px
35px 10px 10px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana,
helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1_vO9bmO7ZwEcjXrFBWYwi3pmrw8BvdRCwzwF-0TbnaZTbJH3tVZgTSs2im5RVfUr5N3hYovYyJJ2S5H9kavDyTpV4JfpV_k0JdPYcKAJLO9pkuW5MCVNH6B4XuZuKRBZu6iGmXzm4c0/)
85% 55% no-repeat;border2px solid
#940000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px
40px 10px 10px}
a.active.trigger{background:#222
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1_vO9bmO7ZwEcjXrFBWYwi3pmrw8BvdRCwzwF-0TbnaZTbJH3tVZgTSs2im5RVfUr5N3hYovYyJJ2S5H9kavDyTpV4JfpV_k0JdPYcKAJLO9pkuW5MCVNH6B4XuZuKRBZu6iGmXzm4c0/)
85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none}
.panel img{border:1px solid #FFFFFF;float:right;margin:3px 3px 6px 5px;padding:3px}
.panel h3{border-bottom:1px solid
#FFFFFF;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#940000;font-size:13px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}2. Dilanjutkan dengan mencari code :
</head>dan taruh code berikut di Atas nya :
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js type=text/javascript/>
<script type=text/javascript>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
3. Yanag terakhir cari code :
</body> Dan masukan code berikut di Atas-nya juga :
<div class=panel>
<h3>---TUTORIAL BLOG---</h3>
<p style=text-align:justify>Sebuah blog edukasi, seputar Tips dan Trik Blogger " ada disini. Ini adalah diary kecil dari manusia yang selalu ingin belajar dan belajar, berbagi informasi , sharing dan belajar bersama mengenai Blog, Facebook <a href=http://blogspot.com/ title=Prolog Gue>Baca Kelanjutannya</a></p>
<h3>About Me</h3>
<img height=73px src=http://images.zaazu.com/img/devil-animated-animation-devil-smiley-emoticon-000386-large.gif width=73px/><p style=text-align:justify>Seorang bloger pemula yang selalu ingin berbagi informasi, dan sekarang ini sedang proses pencarian jati diri</p>
<div style=clear:both;/>
<div class=columns>
<div class=colleft>
<h3>Social Stuff</h3>
<ul>
<li><a expr:href=data:blog.homepageurl + "feeds/posts/default" title=rss><img alt=RSS src=http://lh6.ggpht.com/_KnZf0QUvjQQ/TCeRwd3d93I/AAAAAAAABTc/xaDX3b9W_r0/1277661290_icontexto-inside-rss.png/></a></li>
<li><a href=http://twitter.com/@oktridarmadi title=twitter><img alt=Twitter src=http://lh5.ggpht.com/_KnZf0QUvjQQ/TCeRwO4ZUoI/AAAAAAAABTU/7YfN6fXAGiI/1277661372_icontexto-inside-twitter.png/></a></li>
<li><a href=http://www.facebook.com/oktri.darmadi title=facebook><img alt=Facebook src=http://lh6.ggpht.com/_KnZf0QUvjQQ/TCeRwGXG5EI/AAAAAAAABTY/O3pkPoh_d_o/1277661354_icontexto-inside-facebook.png/></a></li>
<li><a href=http://blogspot.com/ title=home><img alt=HOME src=http://lh3.ggpht.com/_KnZf0QUvjQQ/TCrnqA_ovAI/AAAAAAAABXw/cMkB82fs5cw/1277880204_icontexto-inside-blogger.png/></a></li>
</ul>
</div>
</div>
<div style=clear:both;/>
</div>
<a class=trigger href=#>About</a>
* Yang berwarna
merah , bisa sobat sesuai dengan keinginan,..
