Menambah Widget pada Header

Assalamualaikum wr.wb
Secara default, template blogspot tidak menyediakan widget header, yaitu gadget atau widget yang dapat ditambahkan atau berada pada header blog. Blogspot hanya menyediakan gadget / widget pada side bar dan footer. Dengan sedikit meng-Edit HTML, kita dapat Menambah Widget Pada Header Blog. Dengan adanya widget ini, kita dapat menggunakannya untuk penempatan iklan atau informasi penting lainnya.

Langkah-langkah untuk menambah widget pada Header Blog adalah sebagai berikut.

1. Loggin ke http://blogger.com hingga masuk Dasbor

2. Klik Tata Letak (layout)

3. Klik tabs Edit HTML dan pastikan untuk mencentang Expand Widget-nya.

4. Kemudian cari kode di bawah ini atau cari kode yang mirip dengan kode di bawah ini. (karena masing-masing template kadang-kadang mempunyai kode yang agak berbeda)

<b:section class="header" id="header" maxwidgets="1" showaddelement="no"> </b:section>

Atau juga bisa seperti di bawah ini.

<b:section class="header" id="header" maxwidgets="1">

5. Kemudian ganti dengan kode tersebut dengan kode di bawah ini.

<b:section class="header" id="header" preferred="yes">

atau

<b:section class="header" id="header" maxwidgets="3">

atau

<b:section class="header" id="header" showaddelement="yes">

(angka 3 pada maxwidgets menunjukkan jumlah maksimal widget dan dapat kita ganti sesuka kita)

6. Kemudian Simpan Template

7. Selesai

Sekarang klik Elemen Halaman (Page Element), dan pastikan di sana sudah ada fasilitas Tambah Gadget, seperti screenshot di bawah ini.

Upload file javascript (.js) via Google code

Google code adalah layanan dari google yang berfungsi untuk mengupload file untuk tiap-tiap uplaod file maximum sebesar 100 mb jenis filenya javascript, xml, rar, zip, icon dan masih banyak lagi yang jenis file lainya dengan total upload sebesar 2gb.
Berikut adalah cara upload file javascript melalui google code

• masuk ke code.google.com, login menggunakan account gmail
  
• Masuk ke section Project Hosting di Google Code website dan click link Create a new project terletak di bagian bawah halaman.
  
• Ketik nama project tanpa spasi dalam huruf kecil seperti gambar di bawah ini. Selanjutnya ketik apa saja di project summary and description, project labels click tombol Create Project.
  
  
  
  
• Sekaran halaman project sudah jadi , dan otomatis akan terbuka. Selanjtnya click tab Downloads dan kemudian click link New Download, seperti gambar dibawah ini.
  
  
  
  
• Ketik nama file yang akan di upload di kolom summary file, selanjutnya tekan browse untuk memilih file yang diinginkan (max. size 100mb), masukan label dan click submit file. Maka file anda akan terupload, jangan luapa untuk mengcopy link dari file yang sudah terupload untuk keperluan selanjutnya.
  
  
  

Cara memperpendek url yang panjang

Jika anda selesai menulis artikel menarik di suatu blog dan ingin membagikannya kepada teman anda, tentunya anda akan memberikan alamat url link blog dari artikel tersebut. Misal link artikel tersebut seperti ini

http://bagus-swara.blogspot.com/2011/07/internet-gratis-telkomsel-10-juli-2011.html

Dengan link url yang cukup panjang seperti itu, tentunya terlalu banyak karakter yang digunakan.

Lantas bagaimana cara agar url artikel kita yang panjang tersebut bisa jadi pendek. Kali ini saya memberikan daftar website yang memberikan layanan gratis untuk
memperpendek alamat URL yang panjang blog anda

• http://tinyurl.com
• http://bit.ly
• http://is.gd
• http://ow.ly
• http://doipop.com
• http://memurl.com
• http://dwarfurl.com
• http://qurlyq.com
• http://traceurl.com
• http://ix.lt
• http://notlong.com
• http://miklos.dk
• http://fire.to
• http://snipurl.com
• http://1iny.com
• http://gu.ma
• http://goo.gl
  

Untuk menggunakanya cukup mudah anda tinggal memasukan url yang ada di blog anda kemudian url tersebut masukan ke text box web diatas dan klik Shorten

Menghilangkan Navbar Blogger

Navbar adalah fasilitas yang dimiliki oleh
Blogger/blogspot, bentuknya berupa kotak
kecil memanjang kesamping yang letaknya
berada di bagian paling atas dari blog yang
fungsinya antara lain untuk mulai melakukan
Sign In/out atau bisa juga membuat Blog
baru. Navigation Bar juga bisa digunakan
untuk melaporkan kecurangan atau tindak
kejahatan weblog yang dilakukan oleh
seorang blogger, misalnya kontent blognya
yang melanggar TOS atau hal-hal yang
dianggap merugikan orang lain.

Namun ada beberapa blogger yang merasa
akan lebih enak jika melihat tampilan
blognya dalam keadaan bersih tanpa harus
ada bagian mencolok di bagian atas blognya
sendiri(NavBar). Karena itu, kadang para
blogger menghapus NavBar tersebut.
Pertanyaannya adalah: Apa tidak melanggar
Term of Service (TOS) dari Blogger.com?
Sejauhini, banyak blogger yang telah
menghilangkan Navbar mereka dan tidak
juga mendapat teguran dari blogger.
Artinya, bisa dilakukan. Toh di TOS Blogger
sendiri juga tidak ada aturan yang cukup
detail tentang hal ini.

Untuk menghilangkan navbar blogger, sobat
tinggal menambahkan kode di bawah ini pada
style sheet CSS :

/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Menambah background atau warna judul widget

Tutor di bawah ini adalah cara bagaimana kita harus menambahkan background atau warna pada widget atau side bar pada bloger kita.
Langkah-langkah yanghaqus dilakukan adalah:

1. Loggin ke Blogger
   
2. klik Layout / rancangan
   
3. klik Edit HTML
   
4. centang expand template widget
   
   
5. kemudian cari kode ini
   
   .sidebar h2 {
6. Lalu anda tambahkan kode ini di bawah nya
   
   background:url( alamat image anda
   disini)repeat-x;
   ganti kode berwarna merah dengan URL gambar
   anda
   Kalau di template anda tidak ditemukan
   kode.sidebar h2 {
   anda copy paste kode di bawah ini dan simpan di
   atas kode ]]></b:skin>
   
   
   .sidebar h2 {
   background:url(https://
   lh6.googleusercontent.com/_VL3WNdvT3dI/
   Ta6CBsH5x0I/AAAAAAAAAGc/2VfxEPn2a1U/
   s144/buton.jpg)repeat-x;
   color: #071019;
   font-size: 12px;
   font-family: Arial;
   font-weight: strong;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   text-align:center;
   }
   
   Kode yang berwarna merah silahkan sobat ganti
   dengan kode url gambar sobat.
   kalo sobat tidak mempunyai url gambar sobat
   bisa ganti dengan background warna,misalnya
   warna putih maka kodenya jadi seperti ini background:#FFFFFF
   

How to Make Money from Blogging

This is one of the most used ways to make money because it’s too easy to add it to your blog, and the most famous advertising Program is Google Adsense.
money blogging? If you do – you’re not alone.
More and more bloggers are finding that blogging
is a profitable medium. Whether it be to earn a
few extra dollars a week to feed their coffee habit,
or making enough money to stop them having
to get a part time job to get through college, or
whether they’ve got it to a point where they are
able to make a full time living from their blogging
– there are tens of thousands of bloggers who
make money blogging. Making money from our
blogs is an important goal for alot of bloggers,
but most of us invested alot of time and may so
money too, but usually we disappoint with the
results. And always ask, What is the best way to
make money from our blogs,
And what we all should know is that the answer
is not the same for every single person and blog.
But we can try to list the best and easiest ways to
make money, at this article, i’ll just list it, but latter
in my next articles, i’ll talk about the ways in more
detailed tutorials. And here is the 5 ways,

1. Advertising Programs
   this program is easy
   because you don’t have to do any thing but adding the program code to your blog, and then work on placement and traffic.
   Other Advertising Program.
   • Google Adsense
     
   • Chitika
     
   • Adbrite
     
2. Affiliate Marketing
   This programs is working in many
   ways, they provide you a banner that you can place on your blog, so your visitors can visit it, and your can earn if your visitors sign up for a website or Buy something for example , this programs give you a commission from 5% Up to 75% per lead.
   Affiliate Marketing companies
   
   • Commission Junction
     
   • LinkShare
     
   • Click Bank
     
3. Place a Donation Link or Button on Your Blog
   and this way depends on your blog visitors, and
   how your blog useful for the visitors,
   it won’t make you get alot of money but it may
   help you getting few dollars,
   
4. Sell Products On your blog.
   you can sell related products on your blog if you have got good amount of traffic, and this way is great when your concentrate on one niche.
   you can sell e-books, soft wares, download able products, and more, you may sell your own products or other people products.
   
5. Sell Advertising Space On Your Blog.
   This is a great way for making money and guaranteed way, because it’s easy and one step
   way, just try to sell your spaces and relax for next 30 days.
   Youmay Use to have a good chance to sell your spaces like BuySellAds.com
   

Menambahkan tiga kolom footer di blogger

Untuk menambahkan tiga kolom footer pada blog bloger, anda dapat mengikuti petunjuk dibawah ini. Dengan adanya footer ini maka anda dapat menambah beberapa gadged sesuai selera dan kebutuhan anda, yang nantinya gadget ini berfungsi untuk memberikan informasi bagi pembaca atau pemilk blog.

Langkah membuat footer adalah:

1. Masuk ke dashboard blog anda.
   
2. Klik Design > Edit HTML
   
3. Cari kode dibawah ini:
   
   <div id='footer-wrapper'>
   atau
   <div id='footer'>
4. Dari kode di atas selanjutnya kita tambahkan kode:
   
   <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;'/>
   <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>
5. Selanjutnya kita cari kode:
   
   ]]></b:skin>
6. Lalu masukkan kode berikut ini tepat di atasnya.
   
   #footer-column-
   container {
   clear:both;
   }
   .footer-column {
   padding: 10px;
   }
7. Simpan templete.
   

Tombol Reply Pada Komentar Blog

Untuk mengisi waktu luang pada hari minggu ini saya kembali menulis trik atau tutor mengenai blog, maklum newbie lagi mendokomentasi trik pada blog mudah-mudahan bisa bermanfaat bagi blogger yang lain.
Tutor kali ini adalah cara membuat tombol reply pada komentar pada blog kita, apa sih sebenarnya fungsi reply ini.

Tombol reply ini berfungsi untuk membantu anda atau pengunjung yang merespon setiap
komentar pada komentar dipostinngan anda dan
juga untuk memperjelas komentar tersebut ditunjukkan
kepada siapa.

Adapun cara membuatnya adalah:

1. Anda masuk ke Dashboard >Design >Edit HTML.
   Jangan lupa check Expand Widget Templates.
   
2. Cari kode berikut:
   
   <<b:include data='comment' name='commentDeleteIcon'/>>
3. Copy kode dibawah ini dibawah potongan kode diatas.
   
   <span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Letakkan blog ID sobat disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='URL image sobat disini'/></a></span>
4. Ganti kode ID-BLOG ANDA dengan ID Anda. ID-BLOG dapat dilihat pada status bar di browser anda.
   
5. Simpan template
   

Anda bisa ganti kode yang berwana biru dengan kode di bawah in:
1.

<img src='http://2.bp.blogspot.com/_rKG- ziTSNUQ/TMXpIXB0wvI/AAAAAAAAB6E/n1x- Bs_LAJE/s1600/Reply+Button+5.jpg' style='float:right;' title='Reply To This Comment'/>

2.

<img src='http://4.bp.blogspot.com/_rKG- ziTSNUQ/TMXpH8OvBlI/AAAAAAAAB6A/ DKWa4_r1wLE/s1600/Reply+Button+4.jpg' style='float:right;' title='Reply To This Comment'/>

3.

<img src='http://1.bp.blogspot.com/_rKG- ziTSNUQ/TMXpHlhsnxI/AAAAAAAAB58/wSopo- ERW5E/s1600/Reply+Button+3.jpg' style='float:right;' title='Reply To This Comment'/>

Tombol Facebook Count Sharing Untuk Blogger

Facebook kini telah resmi memperkenalkan
Retweet seperti tombol facebook untuk blog atau
situs anda.
Dengan tombol ini maka kita bisa membagikan
coretan kita pada teman facebook kita dan kita
juga bisa menampilkan hitungan berapa kali
posting blog kita telah berbagi atau disharing di
Facebook.
adapun jenis tombol yang disajikan adalah:

1. Tobol terletak disebelah kanan atas postingan
   dengan gelembung jumlah berada di atas.
   
   <div style="float:right;padding:4px;">
   <a expr:share_url='data:post.url' name='fb_share' rel
   ='nofollow' type='box_count'/>
   <script type="text/javascript" src="http://static.ak.
   fbcdn.net/connect.php/js/FB.Share"/>
   </div>
2. Tobol terletak disebelah kiri atas postingan
   dengan gelembung jumlah berada di atas.
   
   <div style="float:left;padding:4px;">
   <a expr:share_url='data:post.url' name='fb_share' rel
   ='nofollow' type='box_count'/>
   <script type="text/javascript" src="http://static.ak.
   fbcdn.net/connect.php/js/FB.Share"/>
   </div>
3. Tobol terletak disebelah kanan atas postingan
   dengan gelembung jumlah berada di samping tombol.
   
   <div style="float:right;padding:4px;">
   <a expr:share_url='data:post.url' name='fb_share' rel
   ='nofollow' type='button_count'/>
   <script type="text/javascript" src="http://static.ak.
   fbcdn.net/connect.php/js/FB.Share"/>
   </div>
4. Tobol terletak disebelah kiri atas postingan
   dengan gelembung jumlah berada di samping
   tombol.
   
   <div style="float:left;padding:4px;">
   <a expr:share_url='data:post.url' name='fb_share' rel
   ='nofollow' type='button_count'/>
   <script type="text/javascript" src="http://static.ak.
   fbcdn.net/connect.php/js/FB.Share"/>
   </div>

Bagaimana menginstal Facebook Tombol Share Count di Blog Blogger Anda?

1. Pilih Salah satu dari Jenis Tombol Share dan copy codenya
   
2. Login ke Dashboard Blogger Anda dan
   arahkan keLayout> Edit HTML dan centang
   kotak centang "Expand widget
   template"
   
3. Cari potongan kode berikut:
   
   <divclass='post-header-line-1'/>
   Tempatkan kode Facebook share yang telah dicopy setelah kode di atas
   
   Jika anda tidak menemukan kode diatas anda dapat mencari kode
   
   <data:post.body/>
   Letakan kode yang telah kita copy sebelum kode di atas
   
4. simpan template kita.
   

Menampilkan avatar pada koment blog

Blogger sekarang memperkenalkan fitur baru yaitu kita bisa menambahkan gambar profil dari komentator didekat koment pada blog, yang pastinya dapat untuk mempercantik blog kita tercinta. Sebelum kita merubah templete jangan lupa kita harus melakukan backup templete terlebih dahulu

Seperti biasa kita centang terlebih dahulu Expand template widget, kita cek apakah di templete kita mempunyai baris

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

jika tidak ditemukan cari kode dibawah ini

<dl id='comments-block'>

dan ganti dengan kode di atas

selanjutnya carilah script

<a expr:name='data:comment.anchorName'/>

dan ganti dengan

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px'
style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

Langkah terakhir tambahkan kode CSS di atas kode :

]]></b:skin>

Kode CSS:

.avatar-image-container {background:url( http://2.bp.
blogspot.com/_u4gySN2ZgqE/SrTInZfKwVI/AAAAAAAAAwA/
xaGlRIqkHDw/s400/default.gif); width:35px;height:35px;
}
.avatar-image-container img { border:none;}

Alamat url dapat dìganti dengan alamat gambar yang yang akan anda pakai sebagai gambar defaul.

Menambah spoiler pada postingan blog

Apakah spoiler itu?
Spoiler adalah script atau baris perintah kode yang dapat menampilkan
tombol yang ketika di-klik akan mengeluarkan
menu pulldown. Biasanya digunakan untuk menyimpan teks, gambar atau yang lainnya
yang terlalu panjang yang sifatnya opsional
dapat dilihat atau tidak. Trus apa fungsinya??
Fungsinya yaitu dapat menghemat bandwith
atau mempercepat loading halaman blog kita karena tidak perlu meload teks atau gambar
yang kita spoiler lagi. Mau tau gimana cara buatnya?


Pertama, masuk ke akun blogger kita masing-masing.
Pada saat kita ingin membuat postingan blog,
jangan pilih compose tetapi pilih lah edit HTML.
Masukankode HTM:

<br /><div><div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang bla..bla.bla.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> isi spoiler... </div></div></div></div>

Tentang bla..bla.bla..

isi spoiler...
Sesuka blogger

Sìlahkan di coba gan.

Border pada postingan blog

Border berguna untuk
memberikan bingkai pada tulisan agar terlihat
lebih terfokus dan menawan. Dengan pemberian
border juga akan membuat tulisan lebih mudah
untuk dipahami poin pentingnya. Akan tetapi,
karena fitur untuk membuat border belum
disediakan oleh blogger, maka kita harus
membuatnya sendiri dengan beberapa kode
HTML yang perlu ditambahkan.
Bagaimana cara membuat border dalam
postingan blog ini?


Pertama, masuk ke akun blogger kita.
Klik entri baru.
Saatmasuk dalam halaman untuk menulis
postingan blog, jangan masuk ke bagian
compose, tetapi masuk lah ke bagian edit HTML
untuk menuliskan kode HTML yang digunakan
untuk membuat border yang diinginkan beserta
tulisan yang akan muncul di dalam border yaitu:

» Solid Border

<div style="border: 2px #006400 solid; padding:
10px; background-color: #c3fdb8; text-align: left;">
TULIS SCRIPT/KODENYA DISINI </div>

» Ridge Border

<div style="border: 2px #006400 ridge; padding:
10px; background-color: #c3fdb8; text-align: left;">
TULIS SCRIPT/KODENYA DISINI </div>

» Groove Border

<div style="border: 2px #006400 groove;
padding: 10px; background-color: #c3fdb8; text-
align: left;"> TULIS SCRIPT/KODENYA DISINI </
div>

» Inset Border

<div style="border: 2px #006400 inset; padding:
10px; background-color: #c3fdb8; text-align: left;">
TULIS SCRIPT/KODENYA DISINI </div>

» Outset Border

<div style="border: 2px #006400 outset;
padding: 10px; background-color: #c3fdb8; text-
align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Double Border

<div style="border: 2px #006400 double;
padding: 10px; background-color: #EE82EE; text-
align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Dotted Border

<div style="border: 2px #006400 dotted;
padding: 10px; background-color: #B0C4DE; text-
align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

» Dashed Border

<div style="border: 2px #006400 dashed;
padding: 10px; background-color: #FFD700; text-
align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Border dengan scroll, lebar dan tinggi

<div style="border: 2px #006400 solid; padding:
10px; background-color: #00FFFF;overflow:
auto; height: 50px; width: 300px; text-align: left;">
TULIS SCRIPT/KODENYA DISINI </div>

Keterangan:

1. Kode HTML border: 1px #000000, menunjukan
   warna dari border yang kita gunakan.
   
2. Kode HML padding: 10px, menunjukan jarak
   bagian dalam dari border dengan body.
   
3. Kode HTML background-color: #CEF6CE,
   menunjukan warna yang digunakan sebagai
   background dalam border yang kita buat.
   
4. Kode HTML text-align: left, akan menampilkan
   pemerataan tulisan dalam border yang dibuat,
   apakah rata kanan (right), rata kanan kiri (justify),
   atau rata tengah (center).
   
5. Kode HTML height: 50px, menunjukan tinggi dari
   boder. Sedangkan kode HTML width: 300px,
   menunjukan lebar border yang kita buat.