ROSORASA

Pada template default terkadang tidak ada fasilitas tambah elemen (tambah gadget) dibawah atau diatas header, sehingga kita akan kesulitan untuk memasang aksesoris berupa gambar, iklan, Menu bar atau lainnya yang kira-kira sangat bagus untuk ditempatkan di bawah header.
untuk memunculkannya sebagai berikut :
1. Login ke dashboard => Tata Letak => Edit HTML "centang pada "Expand widget template"
2. Cari kode berikut :


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


3. Ganti tulisan angka '1' menjadi 2 atau lebih,  dan tulisan 'no' dirubah menjadi 'yes'
4. Simpan template

Lihat perbedaannnya :

Menu Navigasi bercabang (dropdow menu) adalah menu navigasi yang berfungsi untuk menghubungkan link satu dengan link lainnya, biasanya diletakan dibawah atau diatas header, seperti contoh berikut :


untuk membuatnya sebagai berikut :

1. Login ke dasbor ---> tata letak --->  edit HTML (centang : expand template widget)
2. Cari kode berikut :

]]></b:skin>

3. Kopy paste kode dibawah ini diatas kode tadi :

   /* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i40.tinypic.com/21bnh2e.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 50);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#330000; text-decoration:none; font:13px Verdana, Arial, Helvetica, sans-serif; background:url(http://i40.tinypic.com/21bnh2e.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#330000;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#330000;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:0px dotted #fff; background:LightSkyBlue; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#00CCFF;}
.status-msg-wrap{
display:none;
}

4. Simpan lalu masuk ke ---&gt; Tata letak ---&gt; klik  tambah gaddget  yang ada dibawah header blog.
Lalu pilih HTLM/JavaScript, setelah muncul jendela JavaScript, kopy paste kode berikut :

<div id="menu">
<ul>
<li><a class="active" href="/"> Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
</ul></li>
<li><a href="#">Menu 4</a></li>
<ul>
</ul>
</ul></div>

Lalu Simpan, tanpa diberi judul diatasnya.


catatan untuk kode "#" isi dengan alamat url target anda (lihat gamabar paling bawah), tanda petiknya jangan di hilangkan dan tulisan Menu,  menu 1, menu 2 dst silahkan isi sesuai kehendak.  misalnya :

a. untuk yang tunggal (Tulisan 'Menu1" saja)
<li><a href="#">Menu1 </a></li> dirubah kodenya, menjadi :
<li><a href="http.www.mapasanda.co.cc/2010/01/tentang-saya.html">Tentang Saya</a></li>


b. untuk yang bercabang (tulisan "menu2, menu3 dst)

<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul></li>

 dirubah kodenya menjadi :

<li><a href="http.www.mapasanda.co.cc/">Tutorial</a>
<ul>
<li><a href="http.www.mapasanda.co.cc/2010/05/tutorial-blog">Tutorial Blog</a></li>
<li><a href="http.www.mapasanda.co.cc/2010/10/tutorial-komputer">Tutorial Komputer</a></li>
</ul></li>dan seterusnya lalu simpan

untuk mendapatkan alamat URL target cukup melihat diatas browser anda, seperti gambar dibawah ini :
semoga bermanfaat

Adakah rindu ini hanya untukmu, duhai bidadari bermata syahdu
Dirimu yang berdiri jauh di sana
Menari mesra berlenggok manja

Hanya larik sinar mata syahdumu yang sampai di tapal batas itu
Tempat di mana aku berdiri menatap kuyu, ke arahmu
Cuma sinar itu yang ku tahu
Dan ayu rupamu akupun meragu

Boleh kubeli mata syahdu itu?
Atau mungkin ku tukar dengan separuh jantungku
Lalu kumasukan ke dalam toples kaca
Aku pajang di tempat terbaik

Ada jarak tak berjarak
Ada dinding yang tak tampak
Ada ragu yang kau sematkan diantara ketidakmpuan dan ketidakyakinan

Biarkan semua mengalir
seperti embun yang membulir lalu menetes lenyap ditelan pasir
Mungkin jarak ini yang membuat kita tetap saling membutuhkan
Mungkin dinding ini yang membuat kita merinding dalam romansa bening


Malam di Ibukota kita
Hiruk pikuk tetap tak selesai
Namun hati kita terus damai dalam jarak itu..

Jakarta, 12 April 2010 (Suriyanto Bari)

Pernah tersemat kuntum mawar di telingamu
Merah, merekah serta semerbak
Saat kita bertemu di tepi telaga biru
Di pinggir Jakarta kita
Jingga, cantiknya dirimu saat itu

Lalu kutawarkan sebuah kuncup dandelion, saat matamu menatap penuh harap.
Di ranum kelopak bunga itu masih tersisa bulir embun sisa subuh tadi
Hampir kering tersengat matahari pagi
"Pasang di sini," ucapmu sambil menunjuk saku kemeja motif kotakmu
Penuh lembut, aku selipkan batang bunganya di situ
Terlihat kelopak hampir mekar di mulut saku kemeja itu
Cukup rapuh sungguh

Maka jagalah dan jangan biarkan semilir merusak kelopaknya
Jingga, Asaku seperti pintamu
Harapku juga maumu

Lalu harus apa lagi selain bunga rumput itu yang akan kuberi padamu
Musim terlalu kering
Hanya dandelion itu yang bertahan
Itupun tinggal satu-satunya yang kutemukan di hutan kecil sana

Jaga, jagalah.....

(Suryanto Bari)

Ingin menampilkan atau menyembunyikan widget di blog sehingga tampil dihalaman tertentu saja? berikut langkah-langkahnya :

A. Menyembunyikan widget di halaman berikutnya

1.  Login ke blogger 
2.  Pilih Tata Letak 
3.  lalu klik Edit HTML
4.  Ceklist Expand Template Widget
5. lalu cari id widget yang akan kita sembunyikan misalnya  Shoutmix

<b:widget id='HTML6' locked='false' title='Shout Mix' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>


6. Lalu tambahkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if>  sehingga tampilannya akan seperti ini :

<b:widget id='HTML6' locked='false' title='Shout Mix' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

7. Simpan

B. Menyembunyikan widget di halaman utama dan menampilkannya di halaman berikutnya

Prosesnya sama hanya kode <b:if cond='data:blog.url == data:blog.homepageUrl'> diganti dengan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> sehingga tampilannya seperti berikut :

<b:widget id='HTML6' locked='false' title='Shout Mix' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget> 

Lalu simpan.

Sekian, semoga bermanfaat. komentar yang masuk sangat diharapkan. terima kasih

Ingin memasang fitur print di setiap postingan blog? berikut langkah-langkahnya :

<!-- quickedit pencil -->

<b:include data='post' name='postQuickEdit'/>

</span>

</div>

5.  Letakan kode di bawah ini di bawah di kode di atas.

<a href="javascript:print(document)"><img src="http://i47.tinypic.com/2jc6kwx.jpg

" alt="print" border="0"/>Print</a>

6. Sehingga tampilannya menjadi seperti dibawah ini

<!-- quickedit pencil --> 

<b:include data='post' name='postQuickEdit'/>

</span>

</div>

<a href="javascript:print(document)"><img src="http://i47.tinypic.com/2jc6kwx.jpg

" alt="print" border="0"/>Print</a>

7. Lalu  Save. lihat hasilnya. jika berhasil akan akan menampilkan halaman print layout berikut



semoga bermanfaat

Google Translate merupakan fitur yang berfungsi sebagai penerjemaah sebuah blog/ web, bentuknya pun bermacam-macam. pada postingan kali ini saya akan coba untuk menampilkan Google translate yang berbentuk Flag Icon.
Berikut langkah-langkahnya :

Pilih menu dasbord----->> tata letak ------>> tambah gagdet------>> tambah javacript ------>> copy paste  kode beikut kedalam blog kamu


  
lalu di save.

Semoga bermanfaat.