BizriL blog

Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

11.1.15     + Bagikan / Simpan Post Ini

Mengenal Kode Script Template Blogger

Mengenal Kode Script Template Blogger
Halo sobat blogger, selamat pagi di penghujung pekan yang cerah, semoga kita selalu diberkahi anugerah kesehatan agar kita senantiasa dapat menikmati akhir pekan seperti ini.

Mungkin tidak aneh buat seorang blogger untuk mengutak-atik dan ngoprek template agar tampilan blognya lebih bagus daripada menggunakan template aslinya, baik script asli bawaan maupun script lain yang bisa diperoleh dan didownload secara gratis. Tetapi tahukah kamu mengenai kode-kode script itu ?

7.1.15     + Bagikan / Simpan Post Ini

Menambahkan Nomor Halaman Pada Blogger

Hallo sobat blogger.. Siang ini matahari bersinar cukup terik, tetapi jangan mematahkan semangat untuk tetap beraktivitas, semoga kita semua selalu dilimpahkan kesehatan dan kemudahan untuk melaksanakan semua kegiatan, Aamin YRA.

Pada hari yang cerah ini Bizril akan membahas tentang Trick dan Tutorial untuk menambahkan nomor halaman pada Blogger seperti yang digunakan pada Bizril blog ini, tepatnya di bawah posting paling bawah tepat di atas footer. Nomor halaman ini sekaligus menggantikan link Prev / Next yang muncul sebagai bawaan template blogger.


9.12.14     + Bagikan / Simpan Post Ini

Terjemahan Pada Blog Sendiri

Terjemahan Pada Blog Sendiri
Hai sobat-sobat blogger di seluruh dunia, bagaimana kabar di hari selasa ini? semoga hari ini lebih baik dari hari sebelumnya dan paling penting selalu dianugerahi kesehatan agar bisa melakukan aktivitas biasanya, Aamiin YRA.

Orang yang bisa bahasa Indonesia tidak masalah membaca artikel posting ini, masalah untuk yang tidak bisa bahasa Indonesia, jangankan memahami isinya, membaca saja pasti tidak bisa.

Pernahkah sobat menggunakan alat penterjemah seperti Google Translate atau alat penterjemah lainnya yang terdapat pada sebuah blog / website? Tentu saja fungsi penterjemah penting untuk memahami artikel dari blog/website yang menggunakan bahasa yang tidak dimengerti.

2.12.14     + Bagikan / Simpan Post Ini

BlogToC Widget Daftar Isi Terbaik

BlogToC Widget Daftar Isi Terbaik
Hai sobat-sobat blogger di seluruh jagat raya apa kabar? Bersyukur pada Tuhan yang telah memberikan semua kebaikan hingga kita masih bisa ngeblog untuk meraih harapan melalui tulisan.

Apa kalian melihat sesuatu yang baru di Bizril blog? kalau konten dan post-post jangan ditanya karena semuanya baru dan segar-segar, hehe.. Bizril blog gak pernah memuat posting copas dari sumber lain, kalopun ada mungkin cuma ilmunya aja, hehe.. Oh iya sobat ternyata ada beberapa bagian yang berubah di sini, diantaranya perubahan widget Archives (Daftar Isi), sekarang lebih sederhana saja dengan hanya menampilkan sebaris tulisan Tampilkan dan Sembunyikan.

20.11.10     + Bagikan / Simpan Post Ini

Free Bigger and Faster Hosting Site

freebiggerHiya dearest friends and lovely visitors, last morning i was so sad because i lost many files in a free hosting service site, so that why if you went here for many times the vertical header menu not appear well, its because the supported js and css file can not be downloaded. The sites admin says if i have reach bandwidth limit size, i must reduce the file download until less then 24 times a day, for a lot of blogger this must be a serious problem, not all free hosting service can upload the js and css file, most of them are rejecting if i try to upload js and css file.

I can smile back again after found a free hosting service that i can upload js and css files with 5gb spaces and 1gb daily download and its all really free and faster, it is Free Bigger and Faster Hosting Site 1, i found this free hosting site from my blogger friend.


26.7.09     + Bagikan / Simpan Post Ini

CSS Menu With Subfolder

cssmenu2

Dear my friends, someone comment me if i have no a new post for almost a week, i value him because he think i won't got SEO if i have no new post, OK you are right man.

Sorry, many days I don't make a new post because I looking for a new way to increase my blog traffic with blogsurfing around the internet world (hihihi..).

OK friends, now i have to make a new post. This post is a trick and tutorial about how to make a horizontal drop down menu with sub folder using CSS, I always like using CSS to make my blog menu.

Tips: For some blogger who have many post it will be hard for visitor to find the oldest post, so you have to make a menu with sub folder to separated some posts with the labels and put its label on the sub folder menu, sure it will be easier for visitor to find your oldest post.

Here i will explain a trick how to make menu with sub folder using CSS, please follow this tutorial :

As a preparation step, you should download files below

http://h1.ripway.com/woyzer/jqueryslidemenu.css

http://h1.ripway.com/woyzer/jqueryslidemenu.js


You could make change to the CSS files for background or foreground menu color, then upload files to your upload host server, for example I use ripway for my files upload host server.

Login to your blogger account, enter to Layout and Edit HTML, make sure to checklist Expand Widget Template.

Always backup your template before make a change

Put this code below before </HEAD> code :


<link rel="stylesheet" type="text/css" href="http://h1.ripway.com/woyzer/jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://h1.ripway.com/woyzer/jqueryslidemenu.js"></script>

Change the red written text with your own files URL address !

Find this code <div id='main-wrap1'> (your main wrap widget, maybe name is different), put this code below before your main wrap widget:


<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://bizril.blogspot.com">HOME</a></li>
<li><a href="http://bizril.blogspot.com/search?max-results=200">CONTENT</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.blogger.com/profile/09867939709875498061">ABOUT</a></li>
</ul>
<br style="clear: left" />
</div>

You should change the red written text with your own URL, green written text with your own menu item and also you could add or remove menu items depend on your needed.

Save the template and now you ready to use your menu.

Blog, Blogger, Google, Alexa, Bing, Yahoo, Search, SEO, PageRank, Traffic, Meta, Tag, Webmaster, Analyzer, Tutorial, Tips, Trick, Booster

13.7.09     + Bagikan / Simpan Post Ini

Web Design and SEO Using CSS


Cascading Style Sheets (CSS) is a simple style sheet language which is used to add the presentation (i.e. the look and formatting) of a particular document or web pages. It’s most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML pages. The CSS language lets you to build fast loading pages, increases your search engine ranking, and modifies your complete website using one style sheet.

Most of the people don’t use CSS as because they have got so much familiar with html design and are afraid or too lazy to upgrade their skills. Even by merging CSS with the functionality of a Content Management System (CMS) a considerable amount of flexibility can be planned into content submission forms. It allows the user who may not be familiar or able to understand or edit CSS or HTML code to select the layout of a web page they are submitting on-the-fly, in the same form.

Advantages of Cascading Style Sheets (CSS)


* Separating content from presentation, using CSS you can easily separate your HTML markup, text, graphics and multimedia from the presentation.

* Consistent site wide look and feel consistency, CSS file saves your plenty of time, especially if you had to edit every page separately. It is very simple and easy to apply one style for 100’s of web pages all at once. So if you need to change the color of all pages on your site, you just have to edit one style sheet.

* Web site maintenance, apart from being able to make site wide changes easily through one CSS file, the clean code it generates makes it easier to update. Properly marked-up web pages permit them to be maintained by more than one person. It will also work in more browsers. Web site redesigns will take much less time.

* Improves search engine ranking, search engines generally spider the code at the top of your web page first. For most sites that means the navigation bar will be spidered first (resides at top of page code). CSS enables you to position the code for your content at the top making your page search engine friendly. Properly marked up HTML pages can easily found and properly categorized by search engines.

* Fast loading, CSS reduces the amount of tags used therefore producing clean code. Table less design can reduce your load time by 25% to 50%.

* Reduces bandwidth, compacting the amount of code used will reduce the amount of bandwidth needed to host your web pages. Therefore you won’t have to pay higher fees when adding more web documents to your site.

* Accessibility, increasing accessibility with CSS means being able to serve web content to a larger audience, increasing web site usability, even for non-disabled people. Content can easily be formatted for projection as well as screen display. Table less layouts display well on hand-held.

* Improves the printing of web page, most printers will only allow you to print a portion of the web page. With CSS your whole document can be printed.

When you use CSS it becomes quick and easy to apply new styles that not only effect all styles on your web page but also your whole site.

Blog, Blogger, Google, Alexa, Bing, Yahoo, Search, SEO, PageRank, Traffic, Meta, Tag, Webmaster, Analyzer, Tutorial, Tips, Trick, Booster


25.6.09     + Bagikan / Simpan Post Ini

HORIZONTAL GLOSSY CSS MENU

CSS is Cascading Style Sheet, which is the command to format the various forms or variations of both the text and the variations with the release of HTML with so much and re-repeated commands. With this CSS command one can represent the other commands. Currently, the CSS has been dominated in the making of the homepage, blog and blogger layout. If you see the source code of blogger layout, much is using CSS.
On this post I want to explain about how to make horizontal menu bar using CSS.
Sit down and relax, follow and learn step by step :

Click Sttings-Edit HTML and Check Expand Widget Templates, Dont forget to back-up your template first before you change it !

Find out this code

</head>

Copy this code bellow and paste upper that code :

<style type="text/css">

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>


After that codes has copied, and then find out this codes :


</b:includable>
</b:widget>
</b:section>
</div>


copy and paste the code below under the appropriate code before :


<ul class="glossymenu">
<li class="current"><a href="http://your_url/"><b>Home</b></a></li>
<li><a href="http://
your_url/"><b>CSS</b></a></li>
<li><a href="http://
your_url/"><b>Forums</b></a></li>
<li><a href="http://
your_url"><b>Webmaster Tools</b></a></li>
<li><a href="http://
your_url/"><b>JavaScript</b></a></li>
<li><a href="http://
your_url"><b>Gallery</b></a></li>
</ul>


WAIT, not finish yet !! After all codes has copied you must :

- Change the blue typed words with your own image URL !
- Change the green typed words with your own URL to link the menu !
- Change the red typed words with your own MENU !
- You may download the images menu here :


menur_bg.gif
menur_hover_left.gif
menur_hover_right.gif

Upload all images to your own hosting place !!

You can add or sub the menu depend on your needed.
Example :
Look at my own horizontal menu ! it made by CSS codes.
Now it has finish, SAVE TEMPLATE and enjoy this menu !!

Blog, Blogger, Google, Alexa, Bing, Yahoo, Search, SEO, PageRank, Traffic, Meta, Tag, Webmaster, Analyzer, Tutorial, Tips, Trick, Booster