How To Make Box Contents

/ On : 7:17 PM/ Thank you for visiting my small blog here. If you wanted to discuss or have the question around this article, please contact me e-mail at Crieshna@gmail.com.
This post I made to answer a question from a fellow blogger who asked me via email. He asked to me, "mas, how do I make a box like in the tutorial blogger blog mas Crieshna?" Hm .. Perhaps that meant was that this time it.....
Blogger Tutorial
1. Apa itu blog
2. Panduan membuat blog di blogger
3. Bagaimana cara memposting artikel pada blog
4. Optimalkan tampilan blog dengan template modern
5. Mengganti header template pada blogger
6. Cara mudah mengganti warna dan font template
7. Mengenali fungsi-fungsi dalam menu setting blog
8. cara menambahkan read more/ baca selengkapnya pada blogger
9. Cara membuat dan memasang shoutbox pada blogger
10. Cara mengatasi masalah pada kode read more
11. Memasang foto di profile
12. Apa fungsi label
13. Cara menambahkan yahoo emoticons pada blogger
14. Memposting kode HTML pada artikel
15. Mendaftar dan mengupload gambar di photobucket
16. Menambah favicon pada blogger
17. Menambahkan search box atau kotak pencari pada blogger
18. Cara menghapus gambar di picasa web album
19. Tips menghilangkan warna pada kotak blockquote
20. Cara mendapatkan kode warna dengan photoshop
21. Cara mendapatkan kode warna dengan ms paint
22. Cara membackup template, widget, dan artikel
23. Cara menghilangkan icon quick edit berbentuk tang dan obeng
24. Memasang feedjit pada blogger
25. Memasang jam pada blog
26. Membuat efek marquee atau teks berjalan
27. Tentang RSS feed
28. Memanfaatkan translator online dari google
29. Pasang Google Translator pada blog
30. Cara membuat kotak scrollbar pada blogger

Ok actually quite easy to make a list of contents as above. For those of you who have long blogging already know how to make it just that maybe a different way.

Now the following I will provide a way to make the box contents list in my own way. Please follow for those who want to try it.

1. Login to Blogger. Open the Layout -> Page Elements
2. Click Add a Gadget -> HTML / Javascript. Enter the code below into the box



<style>
.list {
border-bottom:1px dotted #ddd;line-height:1.2em;
padding:3px;
}
</style>


<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">


<div class="list">
1. <a href="http://crieshna.blogspot.com">What's blog</a></div>


<div class="list">
2. <a href="http://crieshna.blogspot.com">Guide to blog on blogger</a></div>


</div





Description:
The box is 380px wide, 180px high is the box, # ffffff background-color on a color background, and # ffffff in the border is the color of edge lines. Please be replaced in accordance with your template.

Remember:
Replace red text with your post address and replace the red text bold in your post title. If you want to add a new post then copy the code and put flashing over code</div
Do not forget to replace the numbers with the number 3 and so on if you want to add a new post again.

3. If you already click Save Template. Done.

If you want to use icon images instead of numbers then change the code below


<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>


replace with code


<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizFdjGFr9Qs6Hzwri2LL6T5VYERxuCEM_aMj1XN2uZmCRwwqPobr_UPsiFjGIYhNAqaYaFKWatf5thTBm20pHxGX7rgXv5XNGnA2Z0notT1J5d9oTRqlLUkPdY7l8mogV1W2lWd_IST7Rb/") no-repeat left center;
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px 0px 0px 20px;
}
</style>


Replace red text with your picture icon address and delete the numbers on each post title.

Good luck. Good luck.....

0 comments:

Post a Comment

Your Ad Here

artikel

Sample ads

site

Yahoo bot last visit powered by MyPagerank.NetMsn bot last visit powered by MyPagerank.Net