Sabtu, 30 Juni 2012

Cara Menambahkan Efek Scroll Pada Widget Bloglist

Cara Menambahkan Efek Scroll Pada Widget Bloglist  -  Hallo sobat blogger?? pada postingan kali ini saya akan berbagi kepada kalian yaitu Cara Menambahkan Efek Scroll Pada Widget Bloglist . Memang banyak orang yang menggunakan widget bloglist dari dari gadget blogger. Dengan memanfaatkan widget bloglist ini, kita bisa melihat artikel - artikel terbaru dari blog yang terdapat didalamnya, sehingga kita dapat mengetahui setiap topik bahasan dalam blog-blog tersebut.

     Sayangnya, jika isi dari widget bloglist ini terlalu banyak maka akan terlihat memanjang dan akan memenuhi halaman blog. Nah, maka dari itu fungsi scroll pada widget bloglist ini sangat berguna. Memang kelihatan sulit untuk menambahkan fungsi scroll, karena widget ini bukan merupakan HTML/JavaScript. Cara menambahkannya pun cukup mudah, hanya menambahkan perintah overflow, lalu atur tinggi dan fungsi scroll pun sudah jadi. Dan seperti yang kamu lihat, widget bloglist milik saya juga menggunakan fungsi scroll (pada sidebar yang berjudul Friend's link)


Mari kita simak Tutorialnya :

1. Langkah pertama, harus Login ke Account Blogger terlebih dahulu
2. Langkah kedua,  Bagi yang belum membuat widget bloglist, dapat lihat tutorialnya disini (bagi yang sudah punya tidak usah ikuti langkah kedua)
3. Masuk ke Template lalu Edit HTML
4. Jangan lupa untuk mencentang "Expand Template Widget"
5. Cari kode 'BlogList'
6. Perhatikan baik-baik kode dibawah ini :

<b:widget id='BlogList1' locked='false' title='Friend links' type='BlogList'>
<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' Sisipkan kode>

7. Tambahkan/sisipkan perintah style='overflow:auto; height:200px' pada kode yang berwarna biru
 sehingga menjadi seperti dibawah ini.

 <b:widget id='BlogList1' locked='false' title='Friend links' type='BlogList'>
<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' style='overflow:auto; height:200px'

Keterangan : Atur ukuran tinggi (height) sesuai kebutuhan

8. Sebelum Menyimpan Template, sebaiknya di pratinjau/preview terlebih dahulu untuk melihat apakah widget bloglistnya udah ditambahkan fungsi scroll atau belum
9. Bila sudah benar, Klik Simpan Template

Mudahkan ?? kita hanya perlu menambahkan perintah overflow, dan widget bloglistnya sudah mempunyai fungsi scroll. 
Kalau sobat masih tidak mengerti, sobat dapat bertanya pada kolom komentar di bawah ini.

Semoga bermanfaat :D

Jumat, 29 Juni 2012

Cara Membuat Tombol Social Bookmark Melayang

Cara Membuat Tombol Social Bookmark Melayang - Kali ini saya akan membahas Cara Membuat Tombol Social Bookmark Melayang. Sekarang ini pengguna situs jejaring sosial makin banyak, dengan berkembangnya teknologi informasi yang makin canggih, banyak situs yang menawarkan layanan jejaring sosial seperti Facebook, Twitter, Friendster dan yang lainnya. Seperti yang kamu lihat, di blog ini saya juga menambahkan widget Social Bookmark melayang yang berada tepat di kanan-bawah blog ini. Untuk lebih jelasnya, liat gambar dibawah ini.


Berikut Cara Membuat Tombol Social Bookmark Melayang :

1. Login ke Blogger kalian masing - masing
2. Masuk ke Dashboard, lalu pilih Tata letak.
3. Klik Tambah Gadget
4. Copy kode dibawah ini di HTML/JavaScript

<a href="http://tutorial-blogz.blogspot.com/feeds/posts/default" rel="dofollow" title ="RSS Feed" target="_blank" style="display:scroll;position: fixed; bottom:305px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-QR5KL4HHoB0zmLu1PiUNd1Z_ZfNq45ucsyobMbBT0hyakBvG5R_k5V1tRvg6XcZVchyN29pwZjrbVYzvLFtet4bQj8IvkUk7Ezo42VcYk-rTURkj8IPYCOI5K2yM2qnhIGSneE0/s170/RSS-Icon.png"/></a>
<a href="http://www.facebook.com/TutorialBlogz" rel="dofollow" title ="Like us on Facebook" target="_blank" style="display:scroll;position: fixed; bottom:255px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKYCTC99nj2qjov6xxkWF6GqUvdjwvp9Ozvx6cf60xlLiXy0sOWKwLeSJoyrsg8ZxlGwUeZESII813TSkjh1lz29SZrkjk3Nz1y7cmaakgt4QH6i6-r_1lvQLVmimCME-bWm3bTxTkm7w/s1600/facebook.png"/></a>
<a href="http://twitter.com/TutorialBlogz" title ="Follow us on Twitter" rel ="dofollow" target="_blank" style="display:scroll;position: fixed; bottom:205px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmE5N8dLeQYbFT0BkQYSp_2i3b8Wa6lxK-cMwa1LtVKyVM1kOfIYbB5vRBsA3_jkboR6PH1IB8-TDWNZia-z8hr_dE2q1haFQW7UJZzNyBjxCUYKJuEfeoIjFi8qfc405sUvh1QR_G4_Q/s1600/twitter.png" /></a>
<a href="https://plus.google.com/102807084759670981471" title ="View my Profile on Google+" rel ="dofollow" target="_blank" style="display:scroll;position: fixed; bottom:155px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGHklTRnnUEpaQ_7UkGQphppXsopQ4yLWhOE3YiyzVyIGPXzviWAepxY1s13aqldN7eFXSL9_2ulIGe_TzT2p-jTZfmhohqntHzLI_u_s67QsnaDtUUOxT-36bATE4Rn1s44PMRWcKGE/s1600/gplus.png" /></a>
<a href="ymsgr:sendIM?mharishabdurrahim" title ="Chat with me on Yahoo Messenger" rel ="dofollow" target="_blank" style="display:scroll;position: fixed; bottom:105px;right:20px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgRaHQG9ZLy11XGrb4QHw_TD5XmvTD0yq3TAx5BG4Fnr17Z3n-8Rbj4ObuaIumVSeXR2XD1YSx1GK6dlekR-Cqsm8lDteKnWVvHa00mgnrezuucK-vUjiDPyw_M7Wrl0zUOW2iUVGLcTb/s300/images.jpg" /></a>

Keterangan : 
1. Yang berwarna merah itu adalah URL jejaring sosial, Ganti dengan URL akun jejaring kalian masing - masing
2. Yang berwarna biru adalah Judul yang ditampilkan, kamu bisa ganti dengan kata - kata kesukaan kamu.
3. Dan yang berwarna hijau adalah URL gambar yang akan ditampilkan, kamu dapat menggantinya dengan url gambar kamu sendiri.

5. Bila sudah disesuaikan kamu klik Simpan.

Mudah kan caranya??  Semoga bermanfaat :D

Cara Membuat Bloglist (Daftar Blog) di Blogger

Cara Membuat Bloglist (Daftar Blog) di Blogger - Kali ini saya akan membahas Cara Membuat Bloglist (Daftar Blog) di Blogger. Bloglist atau Daftar Blog adalah salah satu fitur yang dimiliki oleh blogger, layaknya status di facebook, bloglist memberikan info terbaru dari blog yang telah di ikuti/di daftarkan di bloglist dalam blog kita. Sayangnya, jika link yang ditambahkan pada bloglist terlalu banyak maka akan terlihat memanjang sehingga memenuhi halaman blog. 

 

Berikut Tutorialnya : 

1. Seperti biasa, pertama - tama kita harus Login ke Account Blogger terlebih dahulu
2. Klik Tanda panah pada Dashboard, lalu Pilih Tata letak.

 

3. Pilih Tambah Gadget.

 

4. Kemudian pilih Bloglist (Daftar Blog).

 

5. Kemudian bila ingin menambahkan link blog teman atau yg lainnya, Klik  "Tambahkan Blog ke daftar Anda"


6. Lalu masukkan URL blog teman kamu pada kolom yg tersedia.


 Keterangan : Untuk menambahkan link lagi, ikuti langkah 5 - 6
 
7. Bila sudah Klik Simpan. dan lihat hasilnya !!

Semoga Bermanfaat :D




Kamis, 28 Juni 2012

Cara Membuat Kolom Iklan di Samping Kotak komentar Blogger

Cara Membuat Kolom Iklan di Samping Kotak komentar Blogger - Setelah sebelumnya saya telah membahas tentang Template yaitu LifeTime Blogger Template dan Kali ini saya akan membahas Cara Membuat Kolom Teks di Samping Kotak komentar Blogger. Mungkin, sudah banyak pengguna blogger yang sudah mengetahui Tutorial ini, tapi, bagi yang belum tahu tidak ada salahnya untuk menyimak artikel ini. Supaya lebih jelas, silahkan lihat screenshoot dibawah ini.

 

Berikut Tutorialnya :

1. Silahkan Login ke Account Blogger kamu
2. Pilih Template >> Edit HTML >> Ceklis " Expand Template Widget "
3. Cari kode :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/> 

Keterangan : silahkan kamu cari kodenya semirip mungkin seperti kode di atas, karena setiap template pasti berbeda - beda

4. Lalu ganti kode tadi dengan kode dibawah :

<table border='0' width='600'><tr> <td align='center'>GANTI DENGAN KODE IKLAN</td> <td align='center'><iframe class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='210' id='comment-editor' name='comment-editor' src='' width='100%'/></td></tr></table>

Keterangan : Ganti kode yang berwarna merah dengan kode iklan kamu.

5. Terakhir Klik Tombol Simpan Template. dan lihat hasilnya !!

Semoga bermanfaat :D

Rabu, 27 Juni 2012

LifeTime Blogger Template

LifeTime Blogger Template adalah kategori template blogger template gratis yang di buat oleh tema WordPress pada template blogger dengan beberapa fitur seperti warna hitam untuk latar belakang utama, 2 kolom, 1 sidebar kanan, menu pagelist untuk navigasi utama, ikon social bookmark seperti facebook, twitter, digg dan Stumbleupon, 3 kolom widget di footer. Bila tertarik, kamu bisa mendownloadnya untuk situs pribadi.


Senin, 25 Juni 2012

Fiverr.com - Bisnis Online Gratis 5 Dollar per Job

Fiverr.com - Bisnis Online Gratis 5 Dollar per Job - Tidak dapat di pungkiri lagi bahwa internet menyimpan peluang besar sebagai media untuk mencari penghasilan, mulai dari peluang bisnis online yang memerlukan modal sampai yang gratisan bertebaran di internet.

Salah satu peluang bisnis online gratisan yang ingin saya bahas yaitu Fiverr.com. Seperti yang saya katakan, Fiverr.com adalah situs yang membayar setiap job dengan harga 5 dollar.

Secara singkat cara kerja di Fiverr.com adalah sebagai berikut setelah teman-teman newbie mendaftar secara gratis dan mengisi data yang diminta Fiverr.com, teman-teman kemudian menawarkan suatu pekerjaan dengan imbalan 5 dollar. Jenis pekerjaan bisa apa saja tidak ada batasan, bisa yang berhubungan dengan internet maupun tidak. Sebagai contoh di Fiverr.com ada yang menawarkan jasa untuk membuat puisi, menyanyikan lagu di father day atau ulang tahun, memberi komentar di blog dan lain-lain.

Nah jika ada orang yang tertarik menggunakan jasa yang teman-teman tawarkan maka akan mendapat bayaran sebesar 5 dollar. Cara lain mendapatkan 5 dollar adalah dengan mencari job yang bisa kita kerjakan. Karena di Fiverr.com ada juga orang memerlukan jasa orang lain untuk melakukan job yang akan dibayar 5 dollar.

Bagaimana? Anda tertarik dengan Fiver.com? Tidak ada salahnya untuk mencoba peluang bisnis online gratisan ini, tidak beresiko apapun. Untuk mendaftar silahkan sobat kunjungi Fiverr.com, atau bisa mengklik banner dibawah ini.


Modifikasi Widget Label Cloud dengan CSS

Modifikasi Widget Label Cloud dengan CSS - Kali ini saya akan membahas Modifikasi Widget Label dengan CSS. Banyak orang yang memasang label tag cloud pada blognya, tapi tidak ada salahnya bila kita memodifikasi widget label tersebut, sehingga tampilan widgetnya akan lebih menarik, dengan sedikit menambahkan script CSS pada HTML blog. 

 

Berikut Tutorialnya :

Langkah Pertama (Membuat Label Cloud) :

1. Login ke Account Blogger sobat
2. Pilih Tata letak lalu Tambah Gadget 
3. Kemudian Pilih "Label"

 
4. Lalu edit Labelnya menjadi seperti gambar dibawah ini



Keterangan : bila sobat sudah menambahkan label cloud pada blog sobat, sobat tidak usah ikuti langkah pertama.

Langkah Kedua (Menambahkan Script CSS) :

1. Masuk ke Template
2. Klik Edit HTML
3. Cari kode ]]></b:skin>
4. Lalu copy kode dibawah ini tepat diatas kode ]]></b:skin>

/* Code By www.blogsbaddy.com */
.list-label-widget-content ul
{
list-style-type:none;
padding-left:0px !important;
display:inline-block !important;
}
.list-label-widget-content li {
display:inline-block;
}
.list-label-widget-content li a {
color: #777;
font: 9px verdana;
text-transform: uppercase;
transition: border-color .218s;
background:
#f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0
#fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background:
#f3f3f3;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(
#F5F5F5), to(
#F1F1F1));
border: solid 1px
#ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none;
}
.list-label-widget-content li a:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px
rgba(0,0,0,0.15);
}

5. Simpan Template. dan lihat hasilnya :D

Tutorial Menambahkan Elemen/Gadget baru di Atas Header

Tutorial Menambahkan Elemen/Gadget baru di Atas Header - Kali ini saya akan membahas Tutorial Membuat Elemen/Gadget baru di Atas Header. Pada dasarnya, Elemen Gadget header hanya ada satu pada template blog bawaan dari blogger, dan biasanya elemen header tersebut sering di gunakan untuk menu horizontal. Untuk membuat satu elemen lagi, tepat di atas header, sebenarnya menambahkan elemen diatas header ini hanya perlu beberapa script pada Edit HTML.


Berikut Tutorialnya :

1. Login ke Blogger sobat
2. lalu pilih Rancangan >> Edit HTML >> Ceklis "Expand Template Widget" >> Download Template lengkap
3. Cari kode <header>
4. Bila sudah Copy kode dibawah ini tepat diatas kode <header>

<div class='tabs-outer'>
<div class='tabs-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left tabs-fauxborder-left'>
<div class='fauxborder-right tabs-fauxborder-right'/>
<div class='region-inner tabs-inner'>
<b:section class='tabs' id='GRaboveheader' maxwidgets='2' showaddelement='yes'/>
<b:section class='tabs' id='GRaboveheader-overflow' showaddelement='no'/>
</div>
</div>
<div class='tabs-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
 
Contohnya, lihat gambar dibawah ini :
 
 
5.  Klik Simpan Template.

Sebelum ditambahkan :


 Setelah ditambahkan :

 

Semoga bermanfaat :D



Minggu, 24 Juni 2012

Contact Us

Kontak Kami
Jika Anda memiliki pertanyaan, saran, kritik, diskusi dan sebagainya. Anda bisa mengirim pesan melalui email Anda di bawah ini.

Kontak Kami
Silahkan isi Form di bawah ini!

  • contoh : emailanda@yahoo.com


  • contoh : (021) 888888
  • Image Verification
    captcha
    Please enter the text from the image:
    [Refresh Image] [What's This?]

Make Money with Google Sites and Google AdSense

Make Money with Google Sites and Google AdSense - If you have a public site built on Google Sites, you might be interested in earning revenue with Google AdSense. AdSense allows website publishers such as yourself to show targeted ads on their sites and earn revenue from their traffic. It also helps visitors find things they may be interested in based on the content of those sites. Over 1 million publishers use AdSense to monetize the content on the sites they’ve worked so hard to build.

AdSense shows ads relevant to the content of the site and you can easily customize the look and feel of the ads to match your site. For example, if your site is about fashion, you may show ads for shoe designers or clothing stores. If a page on your site is about cars, you may see ads for car dealerships or auto shops on that page. Using filters, you can control the content of the ads you display by choosing to block categories of ads or even specific advertisers.

With the free suite of powerful AdSense reporting tools, you can pull detailed reports that will help you track your revenue and identify opportunities to earn more money. You can see earnings by day, page, domain or specific ad unit and can also use Google Analytics to see the source of your traffic and earnings.

Adding AdSense to your Google Site is easy. Just follow these steps:
  1. Click the More actions drop-down menu at the top right of your site, and select Manage site.


  2. Click Monetize on the left side of the page.
  3. Click the Monetize this site button.

  4. Create a new AdSense account or use an existing account. Follow the instructions, depending on the radio button you select.
Once you've enabled AdSense, go to any of your site's pages in the edit mode, click Insert, and select AdSense to insert ads within your page. You can also choose to have ads displayed in your global sidebar.


To learn even more about Google AdSense, come take our tour.

Cara Membuat Widget Buku tamu dari SBox

Cara Membuat Widget Buku tamu dari SBox - Setelah saya berbagi Widget buku tamu sebelumnya seperti Cbox, Fibox, dan Shoutcamp dan yang lainnya, dan Kali ini saya akan membahas Cara Membuat Widget Buku tamu dari SBOX. Widget buku tamu ini adalah widget buku tamu gratis terbaru.

 

Berikut Cara Membuat Widget Buku tamu dari SBox :

1. Kunjungi SBox.ws
2. Klik "Free | Join Now"

 

3.  Lalu isikan data - data pada kolom yang tersedia seperti nama, email, password dan lainnya

 
 
4. Bila sudah, Klik "Create my account"
5. Kemudian akan ada peringatan, sobat Klik "Click Here" untuk masuk ke account SBox

 
 
6. lalu sobat akan dibawa ke halaman Login, silahkan masukkan email dan password yang tadi sudah didaftarkan

 
 
7. Bila sudah Klik "Sign in
8. Klik "My ShoutBox" untuk membuat ShoutBoxnya terlebih dahulu
 
 

9. Sesuaikan nama ShoutboxURL Blog, Warna Shoutbox dan lainnya

 

10. bila sudah disesuaikan, Klik "Create ShoutBox"
11. Kemudian sobat Klik "Embed SBox" untuk mengambil embed codenya

 

12. Copy Embed kodenya dan pasang di blog kamu..

 

13. Untuk cara pemasangannya, Masuk ke Blogger >> Rancangan >> Elemen laman >> Tambah Gadget
14. Pastekan kode yang telah di copy tadi di HTML/JavsScript

Hasilnya akan seperti gambar dibawah ini :


Semoga bermanfaat :D



 



Powered by Blogger