Membuat Bener Iklan Dengan Style CSS BuySellAds

Blog Tutorial kali ini membahas bagaimana membuat Kotak Iklan dengan CSS contoh demonya seperti diblog ini disamping, khusus pengiklan atau Advister yang ingin mengiklankan iklannya diblog shobatm sebelumnya saya ucapkan kepada saudara saya donorilmu yang telah memberikan script ini untuk saya publikasikan, oke langsung ke TKP

1.Login di Blogger.com, pergi ke Template/Rancangan > Edit HTML

2.Tekan Ctrl+F cari kode ]]></b:skin> copy kode CSS berikut ini paste diatas kode ]]></b:skin>

/* Ads
---------------------------------------------*/
div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}
div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}
div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}
div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}
html>body div.bsap_125 a.adhere{width:123px;height:123px;}
div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_468 img{border:0;clear:right;}
div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}
div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>body div.bsap_468 a.adhere{width:466px;height:58px;}
.bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}
.bsap .even{margin-right:0!important;}
.bsap .ad1{background:#e42b2b!important;}
.bsap .ad2{background:#ff8400!important;}
.bsap .ad3{background:#a800ff!important;}
.bsap .ad4{background:#49a7f3!important;}
.bsap .ad5{background:#41d05f!important;}
.bsap .ad6{background:#B24700!important;}
.bsap .ad7{background:#FFE500!important;}
.bsap .ad8{background:#007D47!important;}
.bsap .ad9{background:#330000!important;}
.bsap .ad10{background:#990000!important;}
.bsap .ad11{background:#f70000!important;}

4.Selanjutnya klik Save Template Belum Berakir!
5.Pergi ke Elemen Laman > Tambah Gadget > HTML/JavaScript Masukan kode berikut
Ukuran 125x125

<center>

<div id="bsap_125" class="bsap_125 bsap">

<a href="#" class="ad1" title="video screen capture" id="bsa_1451626" target="_blank"><img src="http://s3.buysellads.com/1247056/82764-1320885024.gif" alt="video screen capture" height="125" width="125" /></a>


<a href="#" class="ad2 even" title="Premium plugins for WordPress" target="_blank"><img src="http://s3.buysellads.com/1250333/71206-1312344285.gif" alt="Premium plugins for WordPress" height="125" width="125" /></a>

<a href="http://donorilmu.blogspot.com/" class="ad3" title="DonorIlmu" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh6FoD43LwYW_wVc7iO2xCR18-6xQr2Wl-AwFLehw2wCmQOcYHpnNvjUc5-WQz8jtjDQkcLELmQPCJFLRf8bsw0OcUBitcjzoYgkYmHMXTwXB49R-euluvEmwWEYurNMtfuXkwWbNPSRs/s1600/donor.jpg" alt="DonorIlmu" height="125" width="125" /></a>


<a href="#" title="Advertise Here" class="adhere ad4 even" target="_blank">Advertise Here</a>

</div>

</center>

Bener Ukuran 468x60

<div id="bsap_468" class="bsap_468 bsap">

<span class="bsap_468 bsap"><a href="#" title="Advertise Here" class="adhere ad1" target="_blank">Advertise Here</a></span>

</div>

-Warna Hijau Link Bener Iklan,

-Warna Oranye Judul Bener Iklan,

-Warna Biru Link Bener Iklan Gambar,

-Warna Kuning Link Pemasangan Iklan,


-Warna Ungu Judul Pemasangan

-Dan yang bergaris bawah seperti ad1,ad2,ad3 dan ad4 ini menujukan background radius berwarna. Misalnya ad1 menujukan warna merah dan ad2 meujukan waran oranye dan seterusnya sampai ad11,


-Kalau class even menujukan posisi iklan di sebelah kanan dan adhere meujukan class Pemasangan Iklan


LANGKAH TERAKHIR SIMPAN

Selengkapnya..

Email This BlogThis! Share to X Share to Facebook

Cara Membuat Chat di Blog Seperti Facebook

Blog Tutorial kali ini akan membahas bagaimana Cara Membuat Chat di Blog Seperti Facebook, oke coba sahabat blogger lihat diblog ini dibawah tepatnya, ada fasilitas chat yang persis dengan fasilitas facebook, yang membuat Visitor nyaman dengan fasilitas ini, Oke langsung ke TKP

Cara Membuat Chat di Blog Seperti Facebook

Agar pengunjung blog kita semakin betah berkunjung ke blog kita, banyak berbagai cara untuk membuat pengunjung betah. Salah satu cara membuat pengunjung betah dengan membuat fasilitas chat, pada postingan kali ini saya akan membahas cara membuat chat di blog seperti facebook. Banyak situs cara membuat
Cara membuat chat di blog seperti facebook adalah sebagai berikut:

1. Masuk ke situs penyedia chat untuk website, envolve
2. Pilih yang gratis tentunya, yang bayar ya lebih baik. Pilih sign up for free

3. Isi semua form nya, lalu create my free account

4. Dapatkan code nya, lalu copy

5. Masuk ke blogger sobat > rancangan > edit html

6. Paste tepat di atas kode

7. Sebelum di simpan, pratinjau lebih dahulu. Kalau sudah oke baru simpanDemikian postingan Cara Membuat Chat di Blog Seperti Facebook, mudah-mudahan bermanfaat.

Selengkapnya..

Email This BlogThis! Share to X Share to Facebook

Menghapus Angka Pada Label Blog

Menghilangkan angka label blog yang mana kang ? jika anda bertanya demikian maka lihatlah gambar disamping, itulah jawabannya, angka pada label tersebut menunjukkan jumlah posting yang ada pada label tersebut, anda bisa menghapusnya angka pada label tersebut agar terlihat simple, kenpa blog akang kok tidak dihapus angka labelnya? jawabannya sederhana "Gak ada lo gak rame" hehehe oke langsung ke TKP Menghapus angka pada label.

1. Panjatkan puji syukur kehadirat Allah yang maha kuasa karena anda bisa menemukan tutorial blog ini heheheh

2. Login ke Blogger anda

3. Pilih Rancangan dan kemudian Edit html jangan lupa CENTANG Expand Template Widget

4. Jika sudah maka carilah kode berikut ini cara cepat untuk mencari KODE tekan CTRL dan F bersamaan dari keyboard
berikut kodenya :

(<data:label.count/>)

5. Jika sudah ketemu Hapus kode tersebut

6. Simpan template anda

Dan lihat hasilnya,semoga bermanfaat ya dan jangan lupa jika anda puas dengan blog tutorial Menghapus angka pada label. ini mohon dilink kehalaman anda

Selengkapnya..

Email This BlogThis! Share to X Share to Facebook

Membuat TAB VIEW tanpa edit html

Anda tau menu Tab View ? jika belum, lihat gambar disamping, Tab view menu , membuat blog anda tampil dinamis, simpel dan menghemat slide bar anda, jika dulu Membuat Tab View, masih edit sana sini, saat ini banyak blog tutorial yang menyajikan tutorial membuat tab view nenu tanpa edit html, begitu juga blog ini saya akan meberikan step by steep tutorial blog, dan bagaimana membuat tab view ini, tidak harus profesional untuk membuat tab view ini dalam 2 menit andapun bisa membuat tab vie yang sangat menarik ini, berikut saya berikan panduan membuat menu Tab View

langsung ke TKP membuat TAB VIEW

1. Login ke blogger anda

2. Klik rancangan, Elemen halaman kemudian TAMBAH GADGET

3. Pilih HTML/JAVA SCRIPT

4. Masukkan kode dibawah ini

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}


div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */


text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */




border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */


font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}


div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }


div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }




div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>


<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);


  // ----- Tabs -----




  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;


  var Tab = Tabs.firstChild;
  var i   = 0;


  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);




  // ----- Pages -----


  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;


  var Page = Pages.firstChild;
  var i    = 0;


  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}




// ----- Functions -------------------------------------------------------------


function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }


function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
//]]>
</script>


<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">




<div class="Page">
<div class="Pad">


Isi menu tab view 1 


</div>
</div>


<div class="Page">
<div class="Pad">




Isi menu tab view 2


</div>
</div>


<div class="Page">
<div class="Pad">


Isi menu tab view 3 


</div>
</div>




</div>
</div>
</form>


<script type="text/javascript">
tabview_initialize('TabView');
</script>

KEMUDIAN SIMPAN

LIAT HASIL TAB VIEWNYA

Demikian tutorial dan PANDUAN MEMBUAT TAB VIEW tanpa html,,,semoga bermanfaat

Menghapus Navbar blog

Navbar atau Navigation bar disingkat NAVBAR yang berada di atas blog dengan posisi memanjang kotak,pada template tertentu terkadang NAVBAR ini terkesan rame dan mengganggu (heheh maaaf blogger ya cuma koment neh) nah bagaimana CARA MENGHILANGKAN NAVBAR ini???

Berikut Cara menghilangkan navbar

1. Login ke Blogger.com

2.Pilih Rancangan/tataletak kemudian klik edit HTML

3.Kemudian copy-paste code ini dalam tag head

#navbar-iframe {
display: none !important;
}

contohnya SEBAGAI berikut :

-----------------------------------------------
Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.zeldman.com
Date: 23 Feb 2011
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4.SIMPAIN TEMPLATE

Demikian tutorial cara MENGHILANGKAN NAVBAR BLOG semoga bermanfaat

Selengkapnya..

Email This BlogThis! Share to X Share to Facebook

Membuat Kotak Script dalam postingan (highlight)

Pernahkan anda melihat KOTAK Script dalam posting, bauik berupa kode maupun berupa tulisan-tulisan penting? lalu bagaiman membuat Kotak Script dalam postingan
berikut contohnya :

Contoh kotak script :anda bisa memasukkan kode-kode atau tulisan-tulisan penting dalam dalam kotak ini

Cara Membuat kotak script dalam postingan

1.Login ke blogger

2.Masuk ke Rancangan/Tata letak kemudian

3.Edit Html, Jangan lupa Expand Template Widget dicentang

3.Kemudian cari kode :

]]></b:skin>

4.Jika sudah ketemu masukkan kode dibawah ini :

.alert {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #e0ffff;
border: 1px solid #000000;
border-left: 15px solid #000000}

kode yang berwarna merah ada kode baground dan silahkan ganti dengan warna favorit anda

5.simpan tempate

6.Supayakode/scriptnya nanti bisa muncul kotak highlight-nya maka untukmempostingnya anda harus menuliskan sebuah kode terlebih dahuluSupayakode/scriptnya nanti bisa muncul kotak highlight-nya maka untukmempostingnya anda harus menuliskan sebuah kode terlebih dahulu.<p class="alert"> Isi / kode yang ingin di highlinght </p>

7.Terbitkan/posting kemudian lohat hasilnya

Selengkapnya..

Email This BlogThis! Share to X Share to Facebook

Membuat Blog Blogger/blogspot

1. Apa itu blog?

Blog adalah singkatan dari ""web blog" artinya aplikasi web yang memuat tulisan-tulisan (posting), atau informasi yang berkaitan dengan hal-hal tertentu (tema), bedanya antara website dengan blog hanya pada KEMUDAHAN dalam meng-updatnya, saat ini banyak website penyedia layanan blog, namun membuat blog di blogspot, lebih mudah karena tool yang sangat gampang bahkan dari pemula sekalipun

2. Membuat Blog di blogger

Banyak penyedia blog gratis namun yang yang sangat terkenal dan terbesar dan gratis adalah blogger dengan extensi blogspot oleh karena itu saya sarankan untuk membuat blog di blogger , disamping mudah membuat blog diblogger sangat memungkinkan anda untuk mengedit dan mempercantik blog tanpa haru skeluar biaya, dan jika anda membeli domain.com anda tidak perlu membeli hosting karena telah disediakan oleh google. sebelum anda membuat blog di blogger saya sarankan dan rekomendasikan anda membuat email GMAIL.com BACA DISINI, hal ini dikarenakan untuk mempermudah anda untuk membuat account account dibawah perusahaan google, seperti adsense dll.

3. Mendaftar Blog di BLOGGER

1. Silahkan Kunjungi http://www.blogger.com

2. Setelah halaman terbuka, liat kanan atas, masukkan email anda dan password (ini kenapa saya sarankan untuk membuat email GMAIL.com ketika sudah masuk maka anda siap untuk membuat blog diblogger, dan jangan lupa untuk mengubah bahasa blog menjadi bahasa indonesia

3. Setelah itu maka Klik tulisan "CIPTAKAN BLOG ANDA"

4. Silahkan isi nama blog anda, tulisan tersebuat akan muncul dibagian atas header yaitu berupa judul, kemudian isikan alamat blog yang ingin anda buat contohnya bisniswajib.blogspot.com kemudian klik LANJUTKAN (hehehe kayak sby aja)

5. Kemudian pilih template yang anda sukai (tampilan halaman blog), template ini bisa anda ganti sewaktu-waktu dan bisa anda edit sesuka hati kemudian LANJUTKAN..

6.Kemudian akan ada tulisan :BLOG ANDA SUDAH JADI" maka klik LANJUTKAN

7. Kemudian anda akan diarahkan menuju halaman posting silahkan isi JUDUL dengan artikel anda dedangkan Kolom dibawahnya adalah untuk artikel anda, anda bisa menyisipkan gambar pada blog anda jika selesai anda bisa klik TERBITKAN ENTRI, maka otomatis artikel tersebut akan dipublikasikan,,,,,dan selamat anda sudah mempunya blog sendiri

Untuk tahap awal anda telah sukses membuat blog dan blog anda bisa dilihat, dinikmati dari penjuru manapun, dari para presiden dampai rakyat jelata, untuk blog tutorial akan dibahas dalam postingan selanjutnya

Demikian Blog Tutorial : Cara membuat blog diblogger semoga bermanfaat bagi anda

Selengkapnya..

Email This BlogThis! Share to X Share to Facebook

Membuat Read More Ver.1/ (Baca Selengkapnya)

Read More , ya anda mungkin tidak asing mengenal kata ini Read more atau baca selengkapnya sering digunakan Untuk Menghemat posting artinya memotong posting abstarksi dan isi, jika anda bingun lihat penampakannya diblog ini,Lalu bagaimana cara membuat read more atau membuat baca selngkapnya, oke langsung Ke TKP Membuat Read more

1. Login ke account blogger anda

2. Masuk ke rancangan dan edit html

3. Kemudian Cetang kotak Expand Template Widget dan cari kode dibawah ini

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

4. Jika sudah ketemu ganti dengan kode berikut :

<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'>Read More......</a>
</b:if>

Kata Read More bisa anda ganti dengan kata sesuai keingina anda, contohnya BACA SELENGKAPANYA, atau Lanjutkan, dll

5.Simpan template

6. Jika sudah tersimpan anda masuk ke SETELAN dan kemudian pilih FORMAT lalu masukkan kode dibawah ini ke kolom Templat Entri dikotak paling bawah :

<span class="fullpost">


</span>

7.pilih Simpan Setelan

Catatan :
Setiap kali anda memposting artikel kan ada 2 pilihan TULIS dan edit Html anda pilih EDIT HTML maka akan muncul kode:

<span class="fullpost"></span>

tulis abstaraksi tulisan andai diatas

<span class="fullpost">

baru dibawahnya anda tulisan dengan lanjutan tulisan anda

oke semoga bermanfaat yaaaa

Selengkapnya..

Email This BlogThis! Share to X Share to Facebook