Cara Memasang Background Gambar pada postingan

Banyak cara untuk memperindah blog kita, salah satunya dengan memberi background gambar pada tulisan atau postingan kita, seperti pada halaman ini. Tapi tentunya gambar yang akan kita gunakan sebagai background sebaiknya kita buat lebih transparan, agar nantinya tulisan atau postingan kita tetap terlihat dan tetap enak di baca.
Dengan menambah background  pada postingan  seperti yang ada dihalaman ini saya yakin anda juga akan tertarik, pengunjung anda akan selalu betah berlama-lama diblog anda. Kerren kan......?

Ok.... sekarang kita mulai cara membuatnya ya....:

1. Silahkan anda login ke blog anda.
2. Klik Posting, lalu pilih Entri baru.
3. Masukkan kode dibawah ini pada halaman (HTML), bukan (Compose) :

<div style="background:url(URL Image) no-repeat;">Teks anda disini</div>

 
4. ganti Ulr dengan Ulr image anda.
5. Ganti tulisan "Teks anda disini" dengan tulisan atau artikel anda.
6. Setelah selesai silahkan anda terbitkan, dan lihat hasilnya

Jadi deh.....
Silahkan anda mencoba,

Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

{

Cara Memasang Background Gambar pada postingan

2012-01-30T14:09:00-08:00

Bhepal.Corp

Tips dan Trick|

Comments } Read More

Fungsi Sitemap atau Peta situs

Site map atau peta situs sama halnya dengan daftar isi atau bisa juga disebut arsip sebuah web atau blog. Site map atau peta situs merupakan bagian dari web atau blog yang sangat berperan sekali.

Tujuan penting membuat site map atau peta situs diantaranya adalah :

1. Site map atau peta situs bertujuan untuk mempermudah pengunjung untuk melihat seluruh isi artikel yang ada dalam sebuah website atau blog.

2. Site map atau peta situs bertujuan untuk mempermudah search engine seperti google mengindek seluruh isi artikel yang ada dalam sebuah website atau blog. Dengan kata lain site  map atau peta situs bertindak sebagai alat bantu navigasi dengan memberikan gambaran umum tentang isi sebuah web atau blog.  Site map Peta situs dapat meningkatkan mesin pencari optimasi situs dengan memastikan  bahwa  semua  halaman  dapat  ditemukan.

Sangat disayangkan bila web atau blog kita yang berisi banyak artikel atau halaman lain yang sangat penting dan pengunjung tidak mengetahui keberadaan artikel atau halaman tersebut, terutama search engine seperti google.

Beberapa bentuk site map atau peta situs yang bisa kita buat :

1. XML site map
Site map atau peta situs ini membantu  mesin pencari untuk lebih cerdas merangkak sebuah situs web atau blog dan menyimpan hasilnya dapam mesin pencari secara up to date. Site map yang dibuat dengan modul tersebut dapat  secara otomatis diindek oleh  mesin pencari Ask, Google, Bing, dan Yahoo!.

Contoh :

<url>

  <loc>http://www.carabuatwebgratis.com/</loc>

<lastmod>2010-12-22T06:10:34+00:00</lastmod>

  <changefreq>always</changefreq>

  <priority>1.00</priority>

</url>

<url>

  <loc>http://www.carabuatwebgratis.com/p/home.html</loc>

  <lastmod>2010-12-22T06:10:34+00:00</lastmod>

  <changefreq>always</changefreq>

  <priority>0.80</priority>

</url>

<url>

  <loc>http://www.carabuatwebgratis.com/p/explorer.html</loc>

  <lastmod>2010-12-22T06:10:34+00:00</lastmod>

  <changefreq>always</changefreq>

  <priority>0.80</priority>

</url>

... dan seterusnya.....

</urlset>

2. ROR Site map

Format XML yang dengan sendirinya  bisa  menggambarkan  setiap isi  dari artikel atau halaman suatu web atau blog secara umum, sehingga setiap mesin pencari dapat lebih  detail membaca seluruh  isi  dari artikel atau halaman suatu web atau blog tersebut.

Contoh :

<rss version="2.0" xmlns:ror="http://rorweb.com/0.1/" >

<channel>

  <title>ROR Sitemap for http://www.carabuatwebgratis.com/</title>

  <link>http://www.carabuatwebgratis.com/</link>

<item>

     <link>http://www.carabuatwebgratis.com/</link>

     <title>Tutorial blog  | Blog Tutorial | trik-tips blog</title>

     <description>Tutorial blog  | Blog Tutorial | trik-tips blog</description>

     <ror:updatePeriod>always</ror:updatePeriod>

     <ror:sortOrder>0</ror:sortOrder>

     <ror:resourceOf>sitemap</ror:resourceOf>

</item>

<item>

     <link>http://www.carabuatwebgratis.com/p/home.html</link>

     <title>Tutorial blog  | Blog Tutorial | trik-tips blog</title>

     <description>Tutorial blog  | Blog Tutorial | trik-tips blog</description>

     <ror:updatePeriod>always</ror:updatePeriod>

     <ror:sortOrder>1</ror:sortOrder>

     <ror:resourceOf>sitemap</ror:resourceOf>

</item>

... dan seterusnya ...

</channel>

</rss>

3.  HTML Sitemap

Bentuk site map atau peta situs dengan kode html. Selain untuk mengoptimalkan mesin pencari, site map atau peta situs ini lebih berfokus untuk memudahkan pengunjung melihat seluruh isi suatu web atau blog.

Contoh :

<div id="cont">
<h1>HTML Site Map</h1>
<h3><a href="http://www.carabuatwebgratis.com/">Homepage</a>
Last updated: 2010, December 23</h3>
<table cellpadding="0" cellspacing="0" border="0" width="100%">


<tr><td class="lpage"><a href="http://www.carabuatwebgratis.com/2010/10/iklan-anda.html" title="iklan anda">iklan anda</a></td></tr>


<tr><td class="lpage"><a href="http://www.carabuatwebgratis.com/2010/10/menambah-widget-jam-pada-blog.html" title="menambah widget jam pada blog">menambah widget jam pada blog</a></td></tr>


<tr><td class="lpage"><a href="http://www.carabuatwebgratis.com/2010/10/cara-membuat-read-moreselengkapnyabaca.html" title="cara membuat read more, selengkapnya">cara membuat read more, selengkapnya</a></td></tr>


<tr><td class="lpage"><a href="http://www.carabuatwebgratis.com/2010/10/cara-menghilangkan-navbar-pada-blogger.html" title="cara menghilangkan navbar pada blogger">cara menghilangkan navbar pada blogger</a></td></tr>


... dan seterusnya ...

Nah itulah beberapa tentang Fungsi Sitemap atau Peta situs, semoga bermanfaat.... Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

{

Fungsi Sitemap atau Peta situs

2012-01-30T14:03:00-08:00

Bhepal.Corp

Site Map|

Comments } Read More

Cara membuat menu dibawah header blog

Menu dibawah header blog ini ada contohnya seperti blog masterendi.com ini. Pada menu yang ini kelebihannya adalah ketika pointer mouse diarahkan maka akan tampil menu-menu lainnya.

Oke sob, mari kita bahas :

1. Login ke blog sobat klik Menu rancangan >> Edit HTMl

2. Beri centang pada “Expand Widget Templates ”

3. Lalu sobat cari kode ]]> kemudian ganti dengan kode dibawah :

         #catmenucontainer{
        height:33px;
        width:1000px;
        margin:0 auto;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEp2Sy4izmCoksHL-VAoBFYcfMyR9XYvZQyZ8vnO8hYGf1VUQk6OXmXPq17Qq3HSMQP4KIEV_1kG9DVRHIzNqKHVv2hiSoQ8g1234z0Cb-cR2NTVt1NiH_qSJKIxBGzW4soUgqt2BaUflm/s1600/2.gif) repeat-x;
        display:block;
        padding:0px 0 0px 0px;
        font-size:12px;
        font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
        font-weight:normal;
        border-top:1px solid #252424;
        }
        #catmenu{
        margin: 0px;
        padding: 0px;
        width:1000px;
        background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqkYxVI1wba0GdKDHNKVBPSzhJiJDTMbjtp6JgdT6_D3d6YpOqeQYi66RGAQKBB8yjojFkCdLa2O9Bsc148XkR9SpOvFSvHosTTQdyxJ5XfJETZvTm8FPeKTiGJt6DsWEfezNSVAehEi05/) repeat-x;
        height:33px;
        }

        #catmenu ul {
        float: left;
        list-style: none;
        margin: 0px;
        padding: 0px;
        }

        #catmenu li {
        float: left;
        list-style: none;
        margin: 0px;
        padding: 0px;
        }

        #catmenu li a, #catmenu li a:link, #catmenu li a:visited {
        color: #fae7df;
        display: block;
        margin: 0px;
        padding: 9px 10px 10px 10px;
        }

        #catmenu li a:hover, #catmenu li a:active {
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ti5QII0vCpgkA2XEWqEkldrKAjVgTxdyOqKM_f5mrDlNrCqjauz5p6J6Knt8i8eb-37s-6dC_vkIXYAoHWzNwa613PhyphenhyphenPBr11PdE3T2WIQfGIE6BtV4D30FkWQYco8UxS8XZpFAG27sd/) repeat-x;
        color: #fff;
        margin: 0px;
        padding: 9px 10px 10px 10px;
        text-decoration: none;
        }

        #catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
        background:#ED4A05;
        width: 150px;
        color: #fae7df;
        font-family:Tahoma,century gothic,Georgia, sans-serif;
        font-weight: normal;
        float: none;
        margin: 0px;
        padding: 9px 10px 10px 10px;
        border-bottom: 1px solid #FF7800;

        }

        #catmenu li li a:hover, #catmenu li li a:active {
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ti5QII0vCpgkA2XEWqEkldrKAjVgTxdyOqKM_f5mrDlNrCqjauz5p6J6Knt8i8eb-37s-6dC_vkIXYAoHWzNwa613PhyphenhyphenPBr11PdE3T2WIQfGIE6BtV4D30FkWQYco8UxS8XZpFAG27sd/) repeat-x;
        color: #fff;
        padding: 9px 10px 10px 10px;
        }

        #catmenu li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 170px;
        margin: 0px;
        padding: 0px;
        }

        #catmenu li li {
        }

        #catmenu li ul a {
        width: 140px;
        }

        #catmenu li ul a:hover, #catmenu li ul a:active {
        }

        #catmenu li ul ul {
        margin: -34px 0 0 170px;
        }

        #catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
        #catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
        left: -999em;
        }

        #catmenu li:hover ul, #catmenu li li:hover ul,
        #catmenu li li li:hover ul, #catmenu li.sfhover ul,
        #catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
        left: auto;
        }

        #catmenu li:hover, #catmenu li.sfhover {
        position: static;
        }


        ]]>

4. Lalu sobat cari kode

5. copy kode dibawah pastekan dibawah kode tersebut.

Home

Link-Name-1

• Link-Name-1-1


• Link-Name-1-2


• Link-Name-1-3

Link-Name-2

• Link-Name-2-1


• Link-Name-2-2


• Link-Name-2-2


• Link-Name-2-3

Link-Name-3

Link-Name-4

Keterangan :
Edit Your-Link-Here,Link-Title, dan Link-Name dengan link dan title link yang sobat inginkan.
untuk kode yang berwarna pink adalah menu tanpa anak menu (tanpa dropdown) , sedangkan orange dan merah adalah menu dengan dropdown.

6. Jika sudah sobat SAVE template lalu lihat hasilnya..

Jika sobat tidak menemukan kode yang dicari berarti Cara ini tidak berlaku untuk template yang sobat gunakan... tapi tetap have fun sobat.. :)

{

Cara membuat menu dibawah header blog

2012-01-30T09:56:00-08:00

Bhepal.Corp

Widget|

Comments } Read More