Minggu, 17 Januari 2010

seting faceblog


  • Extract file xml dari zip dan upload xml into your blogger,
  • Setalah anda mengupload xml pindah ke Element Halaman dan edit Faceblog Menu dan masukkan scrip berikut :

<li><h4><a href="Your Blog Link">faceblog</a></h4></li>
<li class="hasmore"><a href="Your Blog Link"><span>&nbsp;&nbsp;&nbsp;</span></a></li>
<li class="hasmoree"><a href="Your Comment Feed Link"><span>&nbsp;&nbsp;&nbsp;</span></a></li>
<li class="hasmoreee"><a href="Your Post Feed Link"><span>&nbsp;&nbsp;&nbsp;</span></a></li>

Cacatan :
Ubah teks yang berwarna hijau dan sesuaikan dengan link ke blog anda, link ke feed post dan link ke feed cooment anda.


  • Selanjutnya ubah sidebar widget About Me klik edit dan masukkan kode berikut ini :

<img style="width:170px; height:270px" alt="" src="Your Image Link.jpg"/><nm>
<a href="Your Profile Link Here" title="Link Title">Your Blog Name</a>
</nm><dsc>Your Information [Letakkan info kamu di sini]</dsc>

Cacatan :
Ubah teks yang berwarna hijau dan sesuaikan dengan url gambar anda, link ke profile anda dan tuliskan informasi tentang anda. untuk ukuran gambar 'tulisan yang berwarna kuning' (width maksimal 170 pixel dan height bisa anda sesuaikan)

  • Untuk setting menu kanan atas masuk ke Edit HTML dan cari kode
    <ul class='tabsr'> dan ganti dengan link yang anda inginkan


<ul class='tabsr'>
<li><h4><a href='Your Link Here'>Your Link Name</a></h4></li>
<li><h4><a href='Your Link Here'>Your Link Name</a></h4></li>
<li><h4><a href='Your Link Here'>Your Link Name</a></h4></li>
</ul> 

Cacatan :
Ubah teks yang berwarna hijau dan sesuaikan dengan link yang anda inginkan, untuk membuat lebih dari 3 anda bisa melanjutkan kode
<li><h4><a href='Your Link Here'>Your Link Name</a></h4></li>
diatas atau sebelum kode
</ul>

  • Untuk membuat post featured buka Element Halaman lalu edit Widget Post Featured dan isikan kode berikut:


<ul><li><img style="width:45px; height:45px" alt="" src="Image URL Here.jpg" />
<h5><a href="Your Post Link" title="Title here">Titel Here</a></h5>
<div class="desc">Short Description for your post</div></li>
.
.
Copy dari <li> sampai </li> 
dan tempel disini
.
.
.
<li><img style="width:45px; height:45px" alt="" src="Image URL Here.jpg" />
<h5><a href="Your Post Link" title="Title here">Titel Here</a></h5>
<div class="desc">Short Description for your post</div></li> </ul>

Catatan :
Ubahlah Tulisan yang berwarna hijau sesuai dengan Link ke postingan anda, judul postingan anda dan tuliskan sedikit isi dari postingan anda pada Short description for your post. Untuk width dan height ukurannya jangan di rubah. usahakan anda meletakkan 5 Featured post. [Anda juga bisa meletakkan foto teman blogger anda, nama dan description blog dari teman anda disana, sesuaikan dengan keinginan anda]

  • Untuk Image Gallery masuk ke Page Element dan click Image selanjutnya edit widget Image Gallery lihat gambar di bawah ini


<li><a href="#"><img src="Your URL Image 01.jpg" alt="" /><img src="Your URL Image 01.jpg" alt="description" class="preview" /></a></li>
.
.
.
Copy dari <li> sampai </li> 
dan tempel disini
.
.
.
<li><a href="#"><img src="Your URL Image n.jpg" alt="" /><img src="Your URL Image n.jpg" alt="description" class="preview" /></a></li>

Catatan :
Ubahlah Tulisan yang berwarna hijau sesuai dengan Url gambar yang anda inginkan.


  • Untuk Video Gallery masuk ke Page Element dan click Video selanjutnya edit widget Video Gallery lihat gambar di bawah ini






<object width="540" height="300">
<param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=6646604&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=6646604&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="540" height="300"></embed>
</object>
<p><a href="http://vimeo.com/6646604">Backstreet Boys - Incomplete</a> from <a href="http://vimeo.com/toquelatino">Toque Latino</a> on <a href="http://vimeo.com">Vimeo</a>.</p>


Catatan :
Anda bisa menggunakan embed youtube atau yang lainnya. Sebagai contoh di atas saya menggunakan embed dari situs Vimeo. Harap edit width menjadi 540 dan height menjadi 300, agar sesuai dengan lebar dari blog page.


  • Mengganti foto yang ada di setiap postinggan masuk ke Edit Html dan cari NewFaceblogv2.0.png




Anda ganti tulisan yang berwarna hijau menjadi link gambar yang anda inginkan
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8P7oil8cqNIZO4EOLB0Gw9zzQIHIHrMq4s5Rm7WvDLGzHI9Rse7Y5xSozoYCCKc6s8a1dZjF1USW7unVFVvCNiYVlgsd0NC-qXKTnnqNcUWpXGxpt1atbUuNrLuwkXs5CvvPaDQv7XaGZ/s1600/NewFaceBlogv2.0.png) no-repeat;

Cacatan
Ubah terlebih dahulu ukuran gambar menjadi width:50px dan heigth:50 px.



Pastikan pengaturan widget anda seperti gambar di bawah ini :
 

Download XML File
Happy Blogging

Sabtu, 16 Januari 2010

template


Akhirnya selesai juga template New-PlusBlue ini, Saya mengucapkan terima kasih karena telah menggunakan template sederhana yang saya buat, untuk design template ini saya telah menggunakan CSS 3 dan jQuery. Oke langsung aja, untuk installasi template tidak sulit. Ikut Langkah2 dibawah ini :
  1. Download dan Extract XML dari Zip File
  2. Login ke blogger
  3. Masuk ke Layout > Edit HTML (Backup lah widget anda terlebih dahulu)
  4. Upload XML file (Code Template jangan di copy paste)
  5. Kemudian Lihat lah template anda.
  • Untuk navigation menu masuk ke EDIT HTML dan cari <div id='navi'>  
 <div class='default' id='menu'>
  <ul>
   <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
   <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Post RSS</a></li>
   <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comment RSS</a></li>
   <li><a href='Your Link'>Link Name</a></li>
   <li><a href='Your Link'>Link Name</a></li>
   <li><a href='Your Link'>Link Name</a></li> 
  </ul>
 </div><!-- close menu -->


Catatan untuk menambahkan menu navigation :

Copy dari <li> sampai </li> dan paste sebelum kode </ul> anda bisa menambahkan hingga 8 Menu, ganti tulisan Link Here dengan link yang akan anda masukkan, dan Link Name ganti dengan nama link. 

  • Untuk menambahkan adsense 468x60 dan adsense 125x125 (misal menggunakan google adsense)
buka Google Adsesnse buatlah sebuah adsense untuk konten dan ikuti langkah di bawah ini  :
Adsense 468x60 :
  1. Unit Iklan : Hanya Iklan Text
  2. Format Iklan : 468x60 Banner
  3. Warna :
  • Garis Tepi [Border] : 426D9C
  • Judul [Title] : 500A20
  • Latar Belakang [Background] : 5A8DA6
  • Text : FFFFF
  • URL : 500A20
  • Pilih Gaya Sudut : Sedikit Agak Bundar

Adsense 125x125 : 






  1. Unit Iklan : Hanya Iklan Text
  2. Format Iklan : 125x125 Tombol
  3. Warna :
  • Garis Tepi [Border] : 426D9C
  • Judul [Title] : 500A20
  • Latar Belakang [Background] : 5A8DA6
  • Text : FFFFF
  • URL : 500A20
  • Pilih Gaya Sudut : Sedikit Agak Bundar
Atau masuk ke Element Halaman edit salah satu widget Ads 125x125 dan masukkan kode berikut 
<a href='Your Adsense Link'>
 <img src="Your Adsense Image Link.png" />
</a>


Contoh Gambar :
Kode :
<a href='http://edopranata.blogspot.com/'>
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3gFFTx7uR0PjHniSltqIUJonMi6Bt2l8M8RsFrSbMzWbX1X0mHN4SPhyphenhyphen9NpVYJ7DVHl_3XSBOirL81M2M_NGDZBt6Uj0wKhZbDV7k-yaPWPgnS6ke95crXM56Ub76WW4Q7p6UYh6jnC8T/" />
</a>







  • Untuk Tab Accordion [Popular Post] tidak ada settingan

Happy Blogging

Senin, 11 Januari 2010

Membuat Tulisan / Postingan 2 Kolom

Pada posting ini saya akan membahas mengenai cara membagi tulisan menjadi lebih dari satu kolom (seperti tulisan di koran atau majalah). Pada prinsipnya, cara sama dengan penggunaan tabel pada pengetikan (ex : microsoft word, dan lain-lain), namun masalahnya di sini adalah pada menu posting artikel tidak diberikan pilihan untuk membuat tabel/ insert table, “bisa aja sih, saya ketik di Ms Word sebuah tabel kosong, kemudian saya copy paste ke posting”, memang bisa namun biasanya ukuran tabel yang dibuat tidak sesuai dengan ukuran lebar layout posting yang di sediakan dan juga setelah tabel di copy-paste maka sulit untuk di edit/ sering error.
Cara ini sudah saya gunakan pada posting sebelumnya (dapat dilihat di sini!). Pada posting tersebut saya membuat menjadi 2 kolom dengan lebar halaman 460 px (sesuai dengan lebar themes yang saya gunakan), dan lebar masing-masing kolom adalah : kolom 1=230 px dan kolom 2=230 px (ini dapat diganti sesuai kebutuhan)
Caranya :
  • Klik menu “New Post” (untuk mebuat tulisan/ posting baru) pada halaman ”Dashboard
  • Pada halaman “Write Post” pilih mode “HTML”, kemudian copy-paste kode berikut ini :
<table width=”460″ border=”0″ cellspacing=”10″><tr><td width=”230″ valign=”top”>Mulai menulis…</td>
<td width=”230″ valign=”top”>Mulai Menulis…</td>
</tr>
</table>
  • Setelah itu kembali ke mode Visual”, maka akan tampak gambaran tabel seperti di bawah ini :
  • Anda dapat mulai menulis di masing-masing kolom yang terdapat pada tabel tersebut
  • Selesai (Save / Publish)
Ukuran dan jumlah kolom dapat diubah sesuai keinginan anda/ untuk disesuaikan dengan layout theme yang anda gunakan. Untuk mengubah ukuran, dapat dilakukan dengan mengubah kode tersebut di atas pada bagian  berikut ini:
  • Lebar tabel = table width=”460″
  • Lebar kolom 1 = td width=”230″
  • Lebar Kolom 2 = td width=”230″
  • Jarak antara kedua kolom = cellpacing=”10″
Untuk menambah jumlah kolom, dapat dilakukan dengan meng-copy kode berikut, dan diletakkan setelah kode yang sama sebelumnya :
<td width=”230″ valign=”top”>Mulai Menulis…</td>
akan jadi seperti di bawah ini (kode warna merah) untuk 3 kolom :
<table width=”460″ border=”0″ cellspacing=”10″><tr><td width=”230″ valign=”top”>Mulai menulis…</td>
<td width=”230″ valign=”top”>Mulai Menulis…</td><td width=”230″ valign=”top”>Mulai Menulis…</td>
</tr>
</table>
Selamat mencoba….


Happy Blogging