Free Domain CO.CC Untuk Blogger / Wordpress

Ok.... Sobat sekalian, pada kesempatan saat ini saya akan sedikit membahas tentang Free Domain CO.CC. Domain ini menawarkan Free or Premium....... nah sekarang saya akan mengajak anda kepada domain yang Free saja, karena yang premium sama saja cara Registrasinya. Tetapi lebih banyak keunggulan dari Domain yang Free. Dan perlu di ingat jika kita memakai Free Domain, itu berarti kita harus mempunyai blog terlebih dahulu baik di blogger.com ataupun di wordpres.com. Setelah itu baru anda dapat membuat Domain. 

Ok..... langsung saja karena saya juga tidak mau berpanjang lebar. Sobat Tinggal mengikuti langkah-langkah di bawah ini.

1.  Anda Kunjungi Websitenya di  http://www.co.cc

2.  Kemudian anda pilih Create an account now

3.  Kemudian isi Formulirnya.

4.  setelah selesai mengisi formulir dengan benar centang tulisan I accept the Terms of Service

 
5.  lalu tekan tombol Create an account now 
6.  Klik Getting A New Domain

7.  Setelah itu anda akan diminta untuk menuliskan URL yang anda inginkan, misalnya aseprustandi.co.cc  maka teman-teman tinggal menetikan aseprustandi (ganti sesuai yang anda inginkan). jika anda berhasil maka akan ada tulisan seperti di bawah ini. Tetapi jika tidak ada itu berarti URL yang anda ketikan tadi sudah ada yang memakai. Teman-teman tinggal mengklik tombol Back zaja pada Firefox / browser yang teman gunakan.

8.  Setelah itu teman-teman klik tombol SETUP > Please domain setup now
9.  Nah.... disini lumayan bingung juga bagi anda yang baru mengetahuinya. jika anda ingin  mengganti URL blog anda dengan Domain CO.CC maka teman tinggal memilih URL Forwarding. Kemudian isi http:// dengan URL blog yang anda punya, jaangan lupa Title nya juga ya. Lalu kilk SETUP.

10.  jika ada tulisan Your change has been submitted. itu berarti anda telah sukses membuat Domain. Klik OK.

SELESAI ....... :D 

Selamat Mencoba Tutorial yang sederhana ini, semoga ini dapat bermanfaat khusunya bagi saya dan umumnya untuk Teman-teman sekalian. Salam semangat untuk Teman semua. Saya sebagai admin sangat mengaharapkan Kritik dan saran dari teman-teman semua.

Atas kunjungannya say ucapkan terima kasih !!!

Cara Membuat Daftar Isi

Sedikit saya akan membahas tentang Daftar isi pada blogspot. Daftar isi tersebut menggunakan javascript, sehingga agak sedikit membebani loading blog tetapi ini juga membantu pembaca untuk mencari artikel yang diinginkan.... Baiklah tidak usah berpanjang lebar kita mulai dengan langkah - langkah di bawah ini :

Langkah #1

1. Sign in di blogger dengan ID anda
2. Bilsa sudah berada di halaman dashboard, klik Tata Letak / Layout.
3. Klik tab Edit HTML
4. Klik link bertuliskan Download Template Lengkap. Silahkan di save dulu untuk backup (penting) untuk mengantisipasi agar bila terjadi kegagalan anada dapat mengembalikannya seperti semula.
5. Beri tanda tik/cek pada kotak kecil di samping tulisan Expand Widget Template. Tunggu beberapa saat. 

 

6 Lihat ke bagian body template, lalu cari kode seperti ini :

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

7. Delete / hapus kode tersebut, lalu ganti dengan kode berikut ini :


<b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
   <div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">
         <data:post.title/></div></a>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>
 <b:else/>
     <b:include data='post' name='post'/>
 </b:if>


8.Klik tombol Simpan Template

untuk langkah peratama selesai....
 

Langkah #2

1. Klik tab Elemen Halaman.
2. Klik tulisan Tambahkan sebuah Elemen Halaman.
3. Setelah muncul window baru, klik tombol TAMBAHKAN KE BLOG untuk yang HTML/JavaScript.
4. Copy lalu paste kode berikut :

<a href="http://aseprustandi.blogspot.com/search?max-results=200">Daftar isi&raquo;</a> 


5. Ganti text yang berwarna merah dengan URL blog anda
6. lalu klik tombol simpan.

maka hasilnya akan seperti di bawah ini.

 

selamat mencoba !!!

Cara Merubah Favicon

Untuk mengganti favicon tersebut, anda bisa melakukan langkah-langkah seperti berikut :

 Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon, contoh seperti gambar di bawah ini : 

Menjadi

1.  Anda bisa cari atau buat favicon seperti di atas atau anda inginkan yang lain.
2. Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs http://www.favicongenerator.com  tapi sebenar nya menggunakan .gif dan yang lainnya juga bisa sih.
   
3. Klik pada tombol Browse...
   
4. Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon
   
5. Klik pada tombol Generate Favicon.
   
6. Setelah proses selesai, klik pada Click Here to Download your favicon.
   
7. Save ke komputer anda.
   
8. Langkah selanjutnya adalah anda harus meng upload Favicon yang tadi ke tempat hosting gamabar, contoh adalah ke Yahoo! Geocities atau Photobucket. Belum tahu bagaimana cara meng upload gambar ke Yahoo! Geocities atau Photobucket.
9. Sekarang saya asumsikan bahwa anda sudah mempunyai alamat URL dari favicon anda. sebagai contoh, saya mempunyai sebuah alamat URL seperti ini :
10. 
    http://i585.photobucket.com/albums/ss291/aseprustandi/icon/download.ico
    
11. Anda harus mengubah alamat URL favicon anda menjadi seperti ini : 

<link rel="shortcut icon" href="http://i585.photobucket.com/albums/ss291/aseprustandi/icon/download.ico"/>

11. Langkah selanjutnya adalah silahkan login ke blogger dengan ID anda.
12. Klik pada Tata Letak.
13. Klik Edit HTML.
14. Silahkan cari kode </head> (posisinya hampir paling atas, jadi jangan jauh-jauh nyari kebawah).
15. Simpan kode favicon yang tadi persis di atas kode </head> .

17. Klik tombol Simpan Template.

Selesai.....


Selamt Mencoba !!!

ColectionsTemplate

Untuk anda yang mendambakan mempunyai blog dengan tampilan template yang cool dan terkesan Profesional, free template yang mungkin layak untuk anda pertimbangkan. 

Download Smart Shadow Template

 Download stubbornblogger template

 

Download awesomegallery template

menambahkan Footer 3 Kolom

Mengedit template blogger untuk memiliki footer 3 kolom untuk template blogger ternyata bukan perkara yang sulit, namun sangatlah mudah, hanya butuh beberapa menit waktu anda. Mungkin rekan-rekan blogger menganggap ini perkerjaan rumit, yah silahkan saja menganggap begitu, namun tunggu dulu baca tutorial ini, pasti anda akan heran.

Pemberitahuan jika anda akan mengedit blog anda maka di sarankan anda harus menyimpan template anda dengan cara Download Template Lengkap. Pada submenu Edit HTML. Agar bila terjadi kegagalan anda dapat mengembalikannya seprti semula dengan mengunggahnya kembali.


ok !!! langsung saja ke pokok pembahasan???

1. Login pada Blog anda
2. Pilih Tab Tata Letak
3. Pilih Sub Menu Edit HTML
4. Kemudian klik “Expand Widget Template”
5. Lantas save template anda kalau-kalau terjadi kesalahan
6. Kemudian temukan ini.

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

5. Ganti kode yang berwarna merah dengan kode berikut:

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

6. Save template anda!
Selamat anda telah mempunyai footer 3 kolom di blogger anda. Untuk melihat hasilnya, anda kembali ke “page element” lalu lihat bagian footer, pasti ada 3 tempat untuk menempatkan page element. Nah silahkan anda taruh page element yang anda inginkan di footer 3 kolom blogger blogspot anda.

Semoga bermanfaat dan selamat mencoba.

Update Kolom tidak rata Template Magazine

Hiks… sudah beberapa hari tidak hadir di blog ini karena berbagai kesibukan, hasil cek ‘n ricek banyak laporan bahwa pada template magazine buatan kang Rohman terdapat masalah seperti kolom yang tidak rata dan link navigasi next previous hilang.
Sepertinya baru-baru ini blogger sedikit melakukan perubahan pada templatenya, ini terlihat pengaruhnya terhadap template magazine yang dahulu tidak bermasalah sekarang menjadi bermasalah, untuk itu diperlukan sedikit modifikasi pada template magazine tersebut.
Perlu diketahui sebelumnya bahwa artikel ini khusus untuk pengguna magazine template buatan kang Rohman yang kolom sebelah kiri tidak rata dengan kolom yang lain.

Agar kolom tersebut kembali sejajar dan navigasi next serta previous kembali muncul, silahkan lakukan langkah-langkah berikut ini :

• Silahkan login ke blogger dengab ID anda.
• Klik Tata Letak.
• Klik tab Edit HTML.
• Cari kode seperti berikut :

#main-wrapper

• Kode tadi terdapat dua kode yang sama pada posisi yang berbeda, ganti kedua kode tersebut menjadi

#main-wrapper, #blog-pager

• Klik tombol SIMPAN TEMPLATE.
• Selesai.

Seharusnya sekarang template anda sudah kembali sejajar dan link navigasi next previous akan kembali muncul.


Selamat mencoba!

The Best Accordion Untuk Blogger

Banyak dari para blogger mandambakan bahwa blog yang dimilikinya tampil menarik, elegan serta profesional. Banyak cara untuk mewujudkan itu semua, salah satunya adalah dengan menggunakan The Best Accordion untuk blogger yang di rancang oleh sahabat kang Rohman yaitu Abu Farhan.
Dengan menggunakan The best Accordion by Abu Farhan maka sidebar anda akan tampak rapih dan hemat tempat karena isi dari widget sidebar akan disembunyikan ( Hide ) dan akan tampil ( Show ) ketika judul sidebar di klik oleh pengunjung, namun tidak hanya itu saja, gerakan yang halus saat membuka dan menutup ( Show / Hide ) menjadikan The best accordion terlihat profesional.


Live Demo
Untuk  membaca tutorial lengkap tentang pemasangan The best Accordion, silahkan di baca disini!

Cara Memasang Icon Ym Pada Blog

jika anda ingin menambahkan status online pada blog ketika kita membuka yahoo mesengger anda bisa ikuti langkah - langkah ini.

1.  login ke Blog anda
2. pilih tab Tata letak 
3. Lalu Element Halaman
4. Kemudian pilih Tambah Gadget yang anda inginkan.
5. Masukan Kode di bawah ini. 

<a target="_blank" href="http://ymgen.com/chat.php?idne=YAHOO ID ANDA">
<img border="0" src="http://ymgen.com/ym.php?id2=YAHOO ID ANDA&s2=1"></a>

 Ket :

tulisan YAHOO ID MU pada kode di atas silakan ganti dengan ID / alamat email yahoo kamu, maka icon tersebut akan menjadi seperti di bawah ini.

atau anda ingin icon yang lain yang lebih kecil dan praktis anda tinggal mengganti kode yang berwarna biru / link dengan masing - masing link di bawah ini. 

Style ID 1                      Style ID 2                       Style ID 3         Style ID 4     Style ID 5






masing-masing gambar mempunyai URL adddress sendiri yaitu :

http://opi.yahoo.com/online?u=YahooID&m=g&t=1
Untuk Style ID 1

http://opi.yahoo.com/online?u=YahooID&m=g&t=2
Untuk Style ID 2

http://opi.yahoo.com/online?u=YahooID&m=g&t=3
Untuk Style ID 3

http://opi.yahoo.com/online?u=YahooID&m=g&t=4
Untuk Style ID 4

http://opi.yahoo.com/online?u=YahooID&m=g&t=5
Untuk Style ID 5


itu tadi adalah URL address masing-masing Style ID, maka agar tampil menjadi gambar, kita harus menambah kode yaitu :

Sehingga untuk menampilkan URL address di atas menjadi sebuah gambar, maka kodenya akan seperti ini :

&m=g&t=1" border="0">
Untuk Style ID 1

&m=g&t=2" border="0">
Untuk Style ID 2

&m=g&t=3" border="0">
Untuk Style ID 3

&m=g&t=4" border="0">
Untuk Style ID 4

&m=g&t=5" border="0">
Untuk Style ID 5 

atau anda ingin Icon yang lebih Fantasi lagi seperti Icon di bawah ini

maka anda harus menggantinya dengan link di bawah  ini

http://opi.yahoo.com/online?u=YAHOO ID ANDA&m=g&t=14

  6. Simpan Lalu lihat hasilnya.
 

Tambahan :

  Ganti YahooID dengan ID anda (email),Tapi jika anda masih bingun klik disini, maka anda akan menemukan seperti pada gambar di bawah ini.

 


setelah terbuka jendela seperti diatas anda dinggal memasukan ID anda (email) kedalam kotak yang sudah di tunjukan. Kemudian Klik Submit maka akan muncul kode seperti di bawah ini, yang akan anda salin ke dalam widget/Gadget yang anda miliki.





 

 



simpan pada Element Halaman lalu pilih letak Gadget dimana anda akan menaruhnya...

bagaimana serukan, semoga bermanfaat bagi anda.


selamat mencoba!!!

CSS Bubble Tooltips

Ingin blog anda lebih variatif? mungkin anda bisa menggunakan teknik CSS Bubble Tooltips. Dengan CSS Bubble Tooltips anda dapat memberikan syatu keterangn singkat suatu link yang di inginkan dan keterangan tersebut akan muncul apabila pengunjung blog menyorotkan cursor mouse pada link yang anda beri efek tooltips.

< (((((((( \\\\\\\\\\\\\\\\\\\\      LIve Demo      ///////////////////// )))))))) >

Silahkan arahkan mouse komputer anda pada link yang ada pada halaman tersebut, dan seharusnya ada akan melihat efek bubble tooltips.

Teknik Tooltips yang dipakai adalah 100% menggunakan CSS, jadi tentunya tidak akan terlalu membebani loading blog anda. Cara untuk mengimplementasikan CSS Bubble Tooltips terbilang sangat mudah, berikut caranya.

Langkah #1

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik Tab Edit HTML.
4. Jangan lupa untuk Membackup template anda terlebih dahulu, klik link Download Template Lengkap.
5. Silahkan cari kode ]]>
6. Copy lalu paste kode berikut diatas kode ]]> 

/*---------- bubble tooltip -----------*/ a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
    font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
    padding: 15px 0 0 0;
    width:200px;
    color: #993300;
    text-align: center;
    filter: alpha(opacity:90);
    KHTMLOpacity: 0.90;
    MozOpacity: 0.90;
    opacity: 0.90;
}
a.tt:hover span.top{
    display: block;
    padding: 30px 8px 0;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_9O5XaVF_cZhGlSs1D9rIUNmzahZCITtPBBmZh8N5EZlXUeAI-XLGKhE0kTbi0V2niJNSaStjcr48yn4CJ_8KMs78qweb8F-FtDM4CwTouQGUxBohf_V63MYX4cge8utL2isMY_3rZ4/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
    display: block;
    padding: 0 8px;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmtghPaIB-MvmB8PWz7T5irJVuT1mvsOew4xun8xgb1exMpN6cpu9TZqxdYORnjEOSWDsCHz0-hJJZ2Db7j-IJ093fXhjvGjAm-JlviogCYfO1Sroa1KFnkgGK03frYC36vq1Z2U_V8zs/) repeat bottom;
}
a.tt:hover span.bottom{
    display: block;
    padding:3px 8px 10px;
    color: #548912;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_9O5XaVF_cZhGlSs1D9rIUNmzahZCITtPBBmZh8N5EZlXUeAI-XLGKhE0kTbi0V2niJNSaStjcr48yn4CJ_8KMs78qweb8F-FtDM4CwTouQGUxBohf_V63MYX4cge8utL2isMY_3rZ4/) no-repeat bottom;
}

1. Klik tombol SIMPAN TEMPLATE.
2. Langkah pertama selesai.

Untuk langkah selanjutnya anda hanya perlu menambahkan sedikit kode HTML pada link yang ingin ada efek bubble tooltips nya. Posisi link tentunya bisa dimana saja sesuai dengan keingina, bisa di dalam posting, sidebar, ataupun footer. Format kode tambahannya seperti ini :

<a href="link_tujuan" class="tt">Teks link yg muncul<span class="tooltip"><span class="top"></span><span class="middle">Pesan yang akan muncul</span><span class="bottom"></span></span></a>

Contoh :

Bagi yang ingin belajar membuat blog di blogspot, coba kunjungi deh  

Bagi yang ingin belajar membuat blog di blogspot, coba kunjungi deh

<a href="http://aseprustandi.blogspot.com" class="tt">My Bloging<span class="tooltip"><span class="top"></span><span class="middle">panduan lengkap membuat blog di blogspot</span><span class="bottom"></span></span></a>, di jamin puas karena tutorialnya gratisss.
Langkah #2

Untuk mencoba memasang di bagian sidebar, berikut caranya :

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Elemen Halaman.
4. Klik Tambah Gadget.
5. Klik tanda plus (+) untuk HTML / Javascript
6. Masukan kode link yang anda inginkan ( lihat kode diatas).
7. Klik SIMPAN.
8. Selesai.

Jika anda ingin memasukkan didalam posting, pilih terlebih dahulu mode Edit HTL bukan pada mode Compose, kemudian masukan kode tambahan link tooltipnya, setelah itu anda dapat kembali ke mode compose jika mau.

Silahkan mencoba!

Variasi Icon Pada Judul Sidebar

Pernah melihat blog yang judul sidebarnya memiliki variasi icon yang berbeda antara satu widget dengan widget lainnya?
Memang sepertinya sedikit cukup menarik apabila setiap judul di sidebar mempunyai icon yang berbeda karena sejatinya judul disidebar tidak mempunyai icon, atau apabila mempunyai icon, icon tersebut akan sama anatara widget yang satu dengan widget yang lainnya.
Agar judul sidebar anda mempunyai icon yang bervariasi, maka ada sedikit trik yang harus anda lakukan.
Bagi anda yang tertarik namun belum mengetahui caranya, berikut kang rohman akan memberi gambaran bagaimana agar anda bisa dapat memasang icon favorit anda pada judul sidebar.

#1 Pilih Icon Favorit anda
Silahkan persiapkan icon favorit milik anda atau jika belum mempunyai koleksi icon anda bisa mendownloadnya secara gratis di internet. sedikit referensi, kang rohman pernah posting beberapa penyedia icon gratis, silahkan anda baca pada artikel Free Icon Untuk Blog Dan Website atau pada artikel

Cari icon  di IconFinder.

Sebagai contoh, beberapa icon yang kang Rohman pakai ;

 

Silahkan upload icon-icon tersebut ke hosting tempat biasanya anda menyimpan gambar, jika anda belum mengetahui bagaimana cara upload gambar, anda bisa membaca artikel kang Rohman tentang  Buat Logo & Image Button atau bisa juga anda baca artikel Upload gambar melalui blogger.

Berikut beberapa contoh alamat gambar (URL) icon yang telah kang di upload :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEg5C1YIKUMNhRVsZ02p_xuXwD58ESjzT7VLxyqdCRk1pMG3_McD9jmFbKhKV9A_swuLfGKlrYMeAwx-wKZR0X5j0fPxQjylYxg9YtkM2fh6sseCzy-XsF5oMYaigUrIhR6sxNUbwyIZ8/
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NmTdyxMy3ijqzltNrKCpi3MIlZ6KovYQYP1U7oVP1yMuRab7E6I7bl52eizayqWYLXZFpkzFB2gy4bBmOLa6nHcCIFiEa7IjF9ACFa6f78kATsDnCFs0FdIf7bvRIFdBD8uk1POzyFk/
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT2i4BYpGv6MXDIFuqFzenvgtf-9K1ILK1jkW6BQNyJqwnxa-WikiMuNDILGyj2ADkxSJ2BHuHKyYhDi_8tCEhyphenhypheneNZr5NdYAoKGrZPN54ChwUXAGjqre6kV8EAbxjskbAvP6iH9ylZr6Y/

Silahkan anda sesuaikan berapa jumlah icon yang ingin anda pasang. Sebagai contoh akan diterangkan untuk memasang 3 icon saja.

#2 Mencari Kode Widget Sidebar
Langkah kedua yaitu mencari tahu kode widget di dalam template anda, mana yang ingin di pasang icon. Berikut langkah-langkahnya :

• Silahkan login ke blogger dengan ID anda.
• Klik Tata Letak.
• Klik tab Edit HTML
• Carilah kode yang mirip-mirip seperti ini :
  
  
  
  
  
  
• Setiap blog pasti berbeda kodenya, makanya kang Rohman tulis yang mirip dengan kode diatas. Copy kode tadi pada pada note pad atau sejenisnya.
  

Dari contoh diatas, blog kang Rohman mempunyai 5 widget, dan yang penting harus anda perhatikan adalah yang tercetak merah  dan orange yaitu :

• Profile1   -    About Me
• Label1    -    Categories
• HTML2   -   Friend Llinks
• HTML1  -   Sponsors
• BlogArchive1  -  Blog Archive

Yang dicetak merah adalah ID dari widget dan yang dicetak orange adalah judul widget atau judul yang ada di sidebar.
Sebagai contoh, kang Rohman hanya akan memasang pada widget  dengan ID Profile1, Label1, serta HTML2.

#3 Membuat kode CSS
Langkah ke tiga adalah membuat kode CSS untuk ID widget yang tadi (Profile1, Label1, serta HTML2). Property yang di buat cukup sederhana, yaitu anda hanya menambah h2 pada ujungnya, contoh :

#Profile1 h2 { }
#Label1 h2 { }
#HTML2 h2 { }

Untuk value nya, anda bisa berkreasi sendiri sesuai dengan keinginan, namun sebagai contoh, value nya misalkan seperti ini :

#Profile1 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#Label1 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#HTML2 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}

Untuk URLGambar tentunya harus anda ganti dengan URl gambar anda, namun sebagai contoh kang Rohman akan memakai URL gambar yang sudah di tulis di artikel bagian atas, sehingga kodenya akan seperti ini :

#Profile1 h2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEg5C1YIKUMNhRVsZ02p_xuXwD58ESjzT7VLxyqdCRk1pMG3_McD9jmFbKhKV9A_swuLfGKlrYMeAwx-wKZR0X5j0fPxQjylYxg9YtkM2fh6sseCzy-XsF5oMYaigUrIhR6sxNUbwyIZ8/) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#Label1 h2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NmTdyxMy3ijqzltNrKCpi3MIlZ6KovYQYP1U7oVP1yMuRab7E6I7bl52eizayqWYLXZFpkzFB2gy4bBmOLa6nHcCIFiEa7IjF9ACFa6f78kATsDnCFs0FdIf7bvRIFdBD8uk1POzyFk/) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#HTML2 h2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT2i4BYpGv6MXDIFuqFzenvgtf-9K1ILK1jkW6BQNyJqwnxa-WikiMuNDILGyj2ADkxSJ2BHuHKyYhDi_8tCEhyphenhypheneNZr5NdYAoKGrZPN54ChwUXAGjqre6kV8EAbxjskbAvP6iH9ylZr6Y/) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}

#4 Memasang kode CSS
Karena tadi sudah mendapatkan kode CSS yang di perlukan, maka langkah terakhir adalah memasang kode CSS tadi ke template anda, berikut langkah-langkahnya :

• Silahkan login ke blogger dengan ID anda.
• Klik Tata Letak.
• Klik tab Edit HTML
• Carilah kode ]]>
• Copy lalu paste kode berikut diatas kode tadi ( namun ingat! widget ID serta URL gambarnya harus anda ganti sesuai dengan blog anda )
  
  

  #Profile1 h2{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEg5C1YIKUMNhRVsZ02p_xuXwD58ESjzT7VLxyqdCRk1pMG3_McD9jmFbKhKV9A_swuLfGKlrYMeAwx-wKZR0X5j0fPxQjylYxg9YtkM2fh6sseCzy-XsF5oMYaigUrIhR6sxNUbwyIZ8/) no-repeat scroll left center;
  padding:8px 8px 2px 40px;
  margin-top:15px;
  }
  #Label1 h2{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7NmTdyxMy3ijqzltNrKCpi3MIlZ6KovYQYP1U7oVP1yMuRab7E6I7bl52eizayqWYLXZFpkzFB2gy4bBmOLa6nHcCIFiEa7IjF9ACFa6f78kATsDnCFs0FdIf7bvRIFdBD8uk1POzyFk/) no-repeat scroll left center;
  padding:8px 8px 2px 40px;
  margin-top:15px;
  }
  #HTML2 h2{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT2i4BYpGv6MXDIFuqFzenvgtf-9K1ILK1jkW6BQNyJqwnxa-WikiMuNDILGyj2ADkxSJ2BHuHKyYhDi_8tCEhyphenhypheneNZr5NdYAoKGrZPN54ChwUXAGjqre6kV8EAbxjskbAvP6iH9ylZr6Y/) no-repeat scroll left center;
  padding:8px 8px 2px 40px;
  margin-top:15px;
  }

• Klik tombol SIMPAN TEMPLATE
• Selesai.

Ternyata mudah sekali bukan?

Tambahan, agar tampilan icon cocok dengan kondisi template anda maka anda bisa mengubah nilai padding atau margin nya.

padding:8px 8px 2px 40px;
margin-top:15px;

Selamat Mencoba!

Navbar Blogger Transparan

Salah satu yang dirasa sedikit mengganggu dari sebuah tampilan blog diblogspot adalah dengan hadirnya navbar blogger yan berada paling atas pada halaman blog, oleh karenanya banyak dari blogger yang sengaja menghilangkan navbar tersebut dengan berbagai cara, ada yang menghilangkan langsung navbar tersebut ada juga yang memakai teknik auto hide atau jika disorot barulah navbar tersebut muncul.
Menghilangkan navbar blogger hingga saat ini masih jadi wacana antara boleh atau tidak boleh hal tersebut dilakukan karena dianggap melanggar TOS yang ditetapkan blogger. Rupanya pihak pengembang blogger sedikit peduli akan hal tersebut, terbukti dari ditambahkannya koleksi navbar berbentuk transparan. Ada dua model dari navbar transparan ini yakni Transparent Light  ( transparan terang )  serta transparent dark ( transparan gelap).



Sebenarnya navbar ini tidaklah seratus persen transparan namun termasuk semi transparan. Dengan hadirnya navbar transparan ini diharapkan dapat lebih menyatu dengan desain template anda.
Bagi yang mau mencoba berikut cara menambahkan navbar transparan diblog anda :

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak
3. Klik tab Elemen halaman
4. Klik Edit pada elemen navbar
   
5. Pilihlah navbar transparan yang anda sukai ( transparan gelap atau terang )
   
6. Tekan tombol “ SAVE “ atau “ SIMPAN “
   
7. Selesai.
   

Yang mau mencoba navbar transparan, silahkan!

Fitur Baru Blogger - Avatar Komentar

Lagi-lagi blogger buzz mengabarkan bahwa kini blogger telah menambahkan satu fitur baru  kedalam mesin mereka yaitu berupa avatar disamping komentar. Dikatakan bahwa fitur ini adalah untuk melengkapi berbagai fitur baru dalam rangka perayaan ulang tahunnya blogger.


Bagi anda yang komentarnya belum muncul avatar, mungkin template anda memang belum support untuk fitur baru ini, namun tentunya jangan khawatir karena dengan sedikit sentuhan modifikasi pada kode template anda, avatar blogger akan muncul, yang penting fasilitasnya sudah disediakan oleh blogger.
Untuk pengembang blogger, ditunggu kehadiran fitur barunya yang lain agar para blogger mania tidak merasa minder menggunakan mesinmu. Go..go..go.. blogger.

Pasang Iklan di bawah posting

Seperti yang diinformasikan pada posting terdahulu, bahwa blogger sekarang telah mempunyai sistem read more sendiri, oleh karena itu semua posting kang Rohman terdahulu yang berhubungan dengan kode read more yang lama menjadi usang atau out of date, sehingga artikel-artikel tersebut harus diperbaharui atau di update. Salah satu postingan yang telah usang tersebut adalah tentang cara memasang iklan di bawah posting. Kenapa kang Rohman langsung menyoroti hal ini? ini di karenakan pada posting tentang sistem read more bloger yang baru kemarin ada beberapa komentar yang bernada khawatir bahwa apabila memakai sistem read more baru blogger maka iklan yang di pasang di bawah setiap posting akan terganggu.
Satu yang harus di ingat adalah teknik ini tidak hanya untuk memasang iklan saja tapi bisa juga memasang banner, pesan, informasi subscribe serta yang lainnya yang ingin di pasang dibawah posting. Yang perlu di ingat pula yaitu iklan atau pesan yang terpasang tidak akan tampil dihalaman depan, namun akan tampil dibawah setiap posting apabila pembaca meng klik link "Read more" atau baca "selengkapnya" atau dengan kata lain artikel anda di baca secara keseluhan.
Teknik yang dipakai adalah sebagai berikut, biasanya kode untuk posting adalah seperti ini :

     
     

   

atau ada juga yang seperti ini

     

     

   

Dua-duanya sama saja karena kode tambahan … itu adalah kode html untuk "paragrap" atau dengan kata lain agar kode posting mempunyai paragrap yang berbeda dengan yang lain.

Untuk memasang iklan atau pesan atau apapun sesuai keinginan anda di bawah posting, maka anda hanya perlu menambahkan kode tambahan seperti ini :

           
    
Kode iklan, banner, pesan atau apapun di pasang disini!
    

   

Nah, ternyata gampang bukan. jadi anda tidak perlu khawatir dengan sistem read more baru blogger, karena kita bisa beradaptasi.

Namun ingat, beberapa kode iklan seperti kode iklan adsense, adbrite dan yang lainnya tidak bisa langsung di pasang disitu tapi harus di parse terlebih dahulu seperti yang pernah kang Rohman terangkan dahulu pada posting tentang  Pasang Iklan Google Adsense di Bawah Posting.

Masih bingung tentang cara pasang iklan di bawah posting, berikut sebagai gambaran agar lebih gampang di praktikan :

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik Tab Edit HTML. lalu backup dahulu template anda.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "
   
5. Carilah kode yang mirip seperti Ini :
   
   
   
   
        
        
   

   
      
6. Silahkan tambahkan kode yang di cetak dengan warna merah serta hijau;
   
   
   
              
       
   Kode iklan, banner, pesan atau apapun di pasang disini!
       
   
   
   

   
      
7. Klik tombol SIMPAN TEMPLATE
8. Selesai.

Untuk teknik yang berhubungan dengan read more yang baru, mudah-mudahan bisa diposting berikutnya.

Trik agar bisa Upload Gambar Ukuran besar di blogger

Trik agar bisa upload gambar ukuran besar di blogger -  Dalam postring kemarin sudah di tulis bagaimana mendapatkan hosting gambar yang unlimited bandwidth, yaitu dengan memakai blogger. Namun, ada sedikit yang membuat tidak nyaman yaitu kita tidak bisa posting atau upload gambar yang ukurannya lebih dari 400 pixel, karena apabila kita upload gambar yang ukurannya lebih besar dari 400 pixel maka secara otomatis gambar tersebut akan di perkecil menjadi 400 pixel.

Apakah ada trik agar bisa upload gambar ukuran besar di blogger? jawabannya ada dan terbilang sangat mudah. Penasaran? begini caranya :

• Silahkan upload gambar yang berukuran lebih dari 400 pixel ke blogger.
• Jika gambar sudah tampil di blog anda, klik kanan pada gambar tersebut lalu pilih Copy Image Location untuk mendapatkan alamat gambar tersebut.
• Paste pada program text editor seperti "Notepad", "WordPad' atau text editor lainnya. Contoh : alamat gambar yang kang Rohman dapatkan seperti ini : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3Rw8AAi22MGnhlCUSAgbJhervGaE-yx-e-1dPYce7zmE9EP28OG6BRcfny9cAeFEvoaetJqGPu1DZDWuoYgdQwJRTMNs__Y3lAHtDHGfhJCg0r9iGsUE9S5s7oIaskq5LFmDQK8a6uwf/s400/blog-aing.jpg
  
• Perhatikan kode yang saya cetak merah, kode tersebutlah yang membatasi gambar besar yang kita upload menjadi kecil. Agar gambar bisa tampil maksimal, maka kita hanya cukup mengubah nilainya menjadi s800 ( jika gambar yang di upload kurang dari 800 pixel ) atau di ganti dengan s1600 ( jika gambar yang di upload melebihi 800 pixel ). Contoh, kodenya jadi seperti ini : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3Rw8AAi22MGnhlCUSAgbJhervGaE-yx-e-1dPYce7zmE9EP28OG6BRcfny9cAeFEvoaetJqGPu1DZDWuoYgdQwJRTMNs__Y3lAHtDHGfhJCg0r9iGsUE9S5s7oIaskq5LFmDQK8a6uwf/s800/blog-aing.jpg
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3Rw8AAi22MGnhlCUSAgbJhervGaE-yx-e-1dPYce7zmE9EP28OG6BRcfny9cAeFEvoaetJqGPu1DZDWuoYgdQwJRTMNs__Y3lAHtDHGfhJCg0r9iGsUE9S5s7oIaskq5LFmDQK8a6uwf/s1600/blog-aing.jpg
  

Mudah sekali bukan? mau bukti, silahkan klik link di bawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3Rw8AAi22MGnhlCUSAgbJhervGaE-yx-e-1dPYce7zmE9EP28OG6BRcfny9cAeFEvoaetJqGPu1DZDWuoYgdQwJRTMNs__Y3lAHtDHGfhJCg0r9iGsUE9S5s7oIaskq5LFmDQK8a6uwf/s400/blog-aing.jpg

Coba bandingkan dengan yang ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3Rw8AAi22MGnhlCUSAgbJhervGaE-yx-e-1dPYce7zmE9EP28OG6BRcfny9cAeFEvoaetJqGPu1DZDWuoYgdQwJRTMNs__Y3lAHtDHGfhJCg0r9iGsUE9S5s7oIaskq5LFmDQK8a6uwf/s800/blog-aing.jpg

Bandingkan juga dengan yang ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW3Rw8AAi22MGnhlCUSAgbJhervGaE-yx-e-1dPYce7zmE9EP28OG6BRcfny9cAeFEvoaetJqGPu1DZDWuoYgdQwJRTMNs__Y3lAHtDHGfhJCg0r9iGsUE9S5s7oIaskq5LFmDQK8a6uwf/s1600/blog-aing.jpg

Format kode gambar di atas adalah apabila anda mengupload gambar langsung melalui post edtor blogger. Apabila anda mengupload melalui Windows Live Writer seperti yang biasa kang Rohman lakukan, maka format gambar yang di hasilkan adalah seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-WaiBw9mgn_ilQKXbNyoiCH5ifzfsaZZ9nTC1cE-qTjHYp4VfCPMtBcz3cACF3s_JzLbfUJfvWKUFkIzg4AUe-VewMs7aYzvkoPelfyflsQdY0AnqvsJOzK-NjcQiCVoGPGc4OhXPjTo/?imgmax800

Terlihat bahwa gambar yang di tampilkan di batasi hanya 800 pixel, agar mendapatkan gambar yang maksimal, cukup dengan mengubah angka 800 dengan angka 1600, sehingga kodenya jadi seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-WaiBw9mgn_ilQKXbNyoiCH5ifzfsaZZ9nTC1cE-qTjHYp4VfCPMtBcz3cACF3s_JzLbfUJfvWKUFkIzg4AUe-VewMs7aYzvkoPelfyflsQdY0AnqvsJOzK-NjcQiCVoGPGc4OhXPjTo/?imgmax1600

Trik mengubah nilai pixel ini berlaku juga untuk posting gambar secara umum, anda hanya perlu masuk dulu ke edit HTML, lalu ubah kode pixelnya.

 

Ternyata kita bisa upload gambar dalam ukuran besar ke blogger bukan?

Selamat mencoba!

Fitur Baru Blogger : Label Cloud

Fitur Baru Blogger : Label Cloud - Ada berita baru dari blogger buzz, sekarang sudah support untuk label cloud. Jika dulu kang Rohman pernah menuliskan sebuah hack untuk membuat label cloud, sepertinya hack tersebut sudah tidak perlu lagi karena blogger sudah membuatnya.

Widget Label Cloud yang di buat oleh blogger di rasa sangat menarik, diantaranya yaitu kita bisa memilih dalam label cloud tersebut mau memakai jumlah posting atau tidak atau label mana saja yang mau di tampilkan.
Bagi anda yang masih bingung cara memasang label cloud blogger, berikut langkah-langkahnya :

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak
3. Klik Tambah Gadget ( jika gadget Label sudah ada di blog anda, tinggal klik Edit Saja )
4. Klik tanda plus ( + ) untuk Label :
   
   
5. Beri tanda untuk pilihan Cloud :
   
   Jika anda menginginkan agar label cloud anda tidak mempunyai nomor jumlah posting, anda tinggal menghilangkan tanda centang pada pilihan "Tampilkan jumlah Entri per label"
   
   Apabila anda tidak menginginkan semua label yang dibuat tampil, anda bisa memfilternya dengan memberi tanda pada pilihan "Label yang Dipilih", kemudian klik tulisan edit. Hilangkan tanda centang pada label yang tidak ingin di tampilkan.
   
   
6. Untuk mengakhiri semua pengaturan, tentu saja dengan klik tombol SIMPAN.
7. Selesai.

Ada pengalaman, bahwa bagi yang sebelumnya sudah terpasang widget / gadget Label tidak sukses ketika melakukan edit, cara yang sudah di coba yaitu hapus dahulu widget / atau gadget label yang sudah ada kemudian tambahkan kembali widget yang baru.
Selamat menikmati fitur baru dari blogger, semoga semakin hari semakin banyak fitur baru yang di buat oleh blogger.