Buat Widget Melayang

Klo kamu mau buat widget yang lumayan beda seperti contoh status YM milik saya yang terkesan "Melayang" di atas, bisa banget dan mudah lagi.

Well, lagi-lagi saya contek caranya di sini (seneng deh ke sini coz tutorialnya lumayan lengkap and mudah ^^ ~~ jgn marah ya om di contekin terus hhihi...)

Sutra yuk tanpa berpanjang lebar.., kita langsung buat ajah:

Pertama masuk ke blogger dan langsung menuju ke halaman Edit HTML. Jangan lupa centang Expand Widget Template.

Lalu letakkan kode di bawah ini sebelum kode ]]></b:skin>

#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Tulisan bottom dan left yang bercetak tebal merupakan posisi widget berada. Bottom berarti posisi di bawah, bila ingin meletakkan di atas ganti dengan top. Begitu juga dengan left yang berarti kiri, bila ingin meletakkannya di kanan ganti dengan right.

Selanjutnya letakkan kode di bawah ini (yang merupakan widget YM) sebelum kode </body>

<div id="melayang">
<a href="ymsgr:sendIM?IdYmKamu"> <img src="http://opi.yahoo.com/online?u=IdYmKamu&amp;m=g&amp;t=1&amp;l=us"/>
</a>
</div&gt

Barisan kode berwarna merah merupakan kode widget Status YM. Kode tersebut bisa kamu ganti dengan widget pilihan kamu lainnya. Seep kan...???

Bikin ReadMore Plus Judul Posting

Klo kamu lihat model Readmore yang saya pakai terlihat ada judul postingan setelah bacaan Readmore. Mungkin sudah banyak blog yang membahas soal ini, tapi saya akan coba bahas lagi caranya yang saya liat dari sini.

Sebelum buat tutorial ini tentu saja kamu harus sudah punya aplikasi Readmore di blog kamu. Buat yang belum punya bisa bikin dulu and liat caranya di postingan saya sebelumnya yang berjudul Bikin ReadMore Cara:1

Ok klo udah, cek caranya bareng-bareng yach...

• Log in ke blogspot kamu dan pilih Layout >> Edit HTML
• Centang Expand Widget Template
• Cari kode Readmore kamu, contohnya seperti readmore punya saya ini:
  
  
  <p><data:post.body/>
  
  <a expr:href='data:post.url'>ReadMore...</a></p>
  
  
  
• Tambahkan kode "<data:post.title/>" tepat setelah bacaan ReadMore... sehingga hasilnya seperti contoh di bawah ini:
  
  
  <p><data:post.body/>
  
  <a expr:href='data:post.url'>ReadMore... "<data:post.title/>" </a></p>
  
  
  
• Save Template.
  
  

Mudah banget kan??? Nanti model tulisan ReadMore...nya bisa kamu ubah sesuai keinginan kamu. Selamat mencoba...

Bikin ReadMore Cara:2

Pernah blogwalking dan nemu readmore model [+- Selengkapnya...] plus [+- Ringkasan Saja...] kayak contoh ini nich => ~~diklik~~ And tertarik mo bikin juga?

Kebetulan di web tersebut dijelasin cara bikinnya, (yang mo liat langsung ke sini aja) buat yang mo liat di blog ini aja, boleh-boleh..., sumpee gk dilarang, malah seneng kalee

Langkah Pertama:

• Oke seperti biasa log in ke blogger, and langsung meluncur ke Edit HTML
• Centang Expand Widget Template dan sangat disarankan Download Full Template sebelum otak-atik
• Letakkan kode di bawah ini sebelum kode </head>
  
  
  <!-- script readmore -->
  <script src='http://eosscript.googlepages.com/Readmore.js' type='text/javascript'></script>
  <!-- script readmore ends -->
  
  
• Cari kode <b:includable id='post' var='post'> dan perhatikan baik-baik letak kode di bawah ini:
  
  <b:includable id='post' var='post'>
  <div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
  <a expr:name='data:post.id'/>
  <b:if cond='data:post.title'>
  <h3 class='post-title'>
  <b:if cond='data:post.url'>
  <a expr:href='data:post.url'><data:post.title/></a>
  <b:else/>
  <data:post.title/>
  </b:if>
  </h3>
  </b:if>
  
  <div class='post-header-line-1'/>
  
  <div class='post-body'>
  
  <b:if cond='data:blog.pageType == "item"'>
  
  <p><data:post.body/></p>
  
  <b:else/>
  <style>#fullpost {display:none;}</style>
  <p><data:post.body/></p>
  <span id='showlink'>
  <p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>[+/-] Selengkapnya...</a></p>
  </span>
  <span id='hidelink' style='display:none'>
  <p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>[+/-] Ringkasan Saja...</a></p>
  </span>
  <script type='text/javascript'>
  checkFull("post-" + "<data:post.id/>");
  </script>
  </b:if>
  
  <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
  
  
• Perhatian: Kode berwarna hitam di atas merupakan kode asli template kita dan kode berwarna merah merupakan kode yang harus kita tambahkan. Anda tidak perlu bingung bila kode yang anda cari tidak ditemukan, patokan anda tiap kode yang ditambahkan harus diletakkan setelah kode <b:includable id='post' var='post'>
• Jangan lupa Save Template.
  

Langkah Kedua:

• Masuk ke menu Setting (pengaturan)
• Klik Formatting
• Letakkan kode di bawah ini pada kotak isian Post Template yang terletak di paling bawah halaman:
  
  <span id="fullpost">
  
  
  </span>
  
  
• Save Setting
  
  
• Berikut contoh cara panggilnya tiap kamu hendak membuat postingan baru:
  
  Wikipedia is a multilingual, Web-based, free-content encyclopedia project. The name "Wikipedia" is a portmanteau (a combination of portions of two words and their meanings) of the words wiki (a type of collaborative Web site) and encyclopedia. Wikipedia's articles provide links to guide the user to related pages with additional information.
  <span id="fullpost">
  Wikipedia is written collaboratively by volunteers from all around the world; anyone can edit it. Since its creation in 2001, Wikipedia has grown rapidly into one of the largest reference Web sites, attracting at least 684 million visitors yearly by 2008. There are more than 75,000 active contributors working on more than 10,000,000 articles in more than 260 languages. As of today, there are 2,726,941 articles in English. Every day, hundreds of thousands of visitors from around the world collectively make tens of thousands of edits and create thousands of new articles to augment the knowledge held by the Wikipedia encyclopedia.
  </span>

Phewww.., akhirnya selesai juga. Memang ReadMore yang satu ini rada susah yach?! Tapi jangan nyerah dulu, klo jadi dan dah liat hasilnya pasti bakal bangga dan senyum-senyum sendiri... Hhehee... asal jgn keterusan senyum2nya, nanti bisa-bisa dikira......wkwkkkwkk...

Bikin ReadMore Cara:1

Dear Gals,

Bosen gak sih sama postingan tentang yang satu ini? Hihii... moga aja ngga. Saking banyaknya yang ngebahas soal ini saya sering nyoba-nyoba sendiri, error sendiri, and pusing sendiri ~~hiks..hiks.. :'( kacian deh loe~~. Tapi sejak pake caranya mba pinter satu ini, readmore yang saya pake (dalam hal ini continue reading) jadi gak pernah bermasalah tuch!

[[Sekalian ach mo ucapin: thank u so much buat mba' Jovie... bener-bener dech, you hv such a great way with words, salute! Btw aq contek neh mba caranya, jgn marah yac^^;]]

Truz kenapa judulnya "Cara:1" sich??? Hhee, itu karena ternyata ada banyak cara untuk membuat program Readmore ini, dan saya bakal ngebahas cara kedua di posting selanjutnya. Nah klo masih mo tahu cara bikin readmore persis seperti yang ada di blog ini, lanjut yuk! Mari...

1. Masuk ke halaman edit html
2. Centang Expand Widget Template
3. Cari kode di bawah ini: (tekan Ctrl+F untuk memudahkan pencarian)
   
   <p><data:post.body/></p>
   
   
4. Letakkan kode di bawah ini sebelum kode pada langkah no.3
   
   

   <b:if cond='data:blog.pageType == "item"'>
   <style>.fullpost{display:inline;}</style>
   <p><data:post.body/></p>
   <b:else/>
   <style>.fullpost{display:none;}</style>

   
   
5. Dan kode di bawah ini setelah kode pada langkah no.3
   
   

   <a expr:href='data:post.url'>Continue Reading..</a></b:if>

   
   
6. Sehingga hasilnya menjadi seperti ini:
   
   

   <b:if cond='data:blog.pageType == "item"'>
   <style>.fullpost{display:inline;}</style>
   <p><data:post.body/></p>
   <b:else/>
   <style>.fullpost{display:none;}</style>
   

   <p><data:post.body/></p>
   

   <a expr:href='data:post.url'>Continue Reading..</a></b:if>

   
   
7. SAVE Template.
8. Sekarang klik Settings >> Formatting >> Post Template, dan letakkan kode berikut ini:
   
   

   <div class="fullpost">
   
   </div>

   
   
9. SAVE Setting.
10. Nah nantinya tiap kamu mau buat postingan baru kode di no.8 akan otomatis muncul di tab Edit Html (bukan Compose). Berikut contoh cara panggilnya:
    
    Wikipedia is a multilingual, Web-based, free-content encyclopedia project. The name "Wikipedia" is a portmanteau (a combination of portions of two words and their meanings) of the words wiki (a type of collaborative Web site) and encyclopedia. Wikipedia's articles provide links to guide the user to related pages with additional information.
    <div class="fullpost">
    Wikipedia is written collaboratively by volunteers from all around the world; anyone can edit it. Since its creation in 2001, Wikipedia has grown rapidly into one of the largest reference Web sites, attracting at least 684 million visitors yearly by 2008. There are more than 75,000 active contributors working on more than 10,000,000 articles in more than 260 languages. As of today, there are 2,726,941 articles in English. Every day, hundreds of thousands of visitors from around the world collectively make tens of thousands of edits and create thousands of new articles to augment the knowledge held by the Wikipedia encyclopedia.
    </div>
    

Selesai dech! Moga gak bingung yach dengan penjelasan yg njelimet ini, and moga berhasil...