cara Membuat Title Blog pada Tab Bergerak dan Berganti-ganti

langsung aja ya, hehe.. untuk contohnya anda bisa melihat tab pada blog ini.

Langkah pertama ialah:

1.  Login ke Blogger terlebih dahulu
2.  Kemudian pilih Template
3.  Lalu pilih Edit Html > Lanjutkan, lalu klik Expand Template Widget

Klik pada gambar untuk perbesar

4.  Jika sudah, cari kode </head> dengan tekan tombol Ctrl+F pada keyboard
5.  kalau sudah menemukan kodenya, Copy kode dibawah ini dibawah kode </head> 

 <script language='JavaScript'>var txt=&quot; Welcome to Ino-Yasha's Blog &quot;; var kecepatan=120;var segarkan=null;function bergerak() { document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak(); </script>

*Note: 

• Ganti tulisan berwarna Merah diatas dengan teks yang anda inginkan
• Ganti  tulisan berwarna Biru dengan angka yang anda inginkan untuk kecepatannya, semakin besar angka, maka semakin lambat kecepatannya, dan begitu sebaliknya

Nah mudah bukan sahabat blogger, lalu bagi yang ingin membuat teksnya berganti-ganti, caranya ada di bawah ini sobat.

1.  Login dulu ke Blogger
2.  Kemudian pilih Tata Letak
3.  Lalu klik Tambah Gadget > pilih Html/Javasript
4.  Lalu masukkan Script di bawah ini  

<script>function tb8_makeArray(n){this.length = n;return this.length;}tb8_messages = new tb8_makeArray(3);

tb8_messages[0] = "Hai Sobat Blogger...";
tb8_messages[1] = "Welcome to Ino-yasha's Blog";
tb8_messages[2] = "Ino-Yasha.blogspot.com";
tb8_rptType = 'infinite';
tb8_rptNbr = 5;
tb8_speed = 125;
tb8_delay = 1000;
var tb8_counter=1;
var tb8_currMsg=0;
var tb8_tekst ="";
var tb8_i=0;
var tb8_TID = null;
function tb8_pisi(){
tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
document.title = tb8_tekst;
tb8_sp=tb8_speed;
tb8_i++;
if (tb8_i==tb8_messages[tb8_currMsg].length){
tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
}
if (tb8_currMsg == tb8_messages.length){
if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
clearTimeout(tb8_TID);
return;
}
tb8_counter++;
tb8_currMsg = 0;
}
tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
}
tb8_pisi()
</script>

*Note: 

• Ganti tulisan yang berwarna Merah dengan tulisan yang kamu inginkan 
• Kalau anda, para sobat blogger ingin menambahkan kata-kata lagi maka tambahkan saja script berikut diatas script tb8_rptType = 'infinite'; (agar lebih mudah gunakan Ctrl+F)

tb8_messages[3] = "Masukkan Kata-katamu di sini";
tb8_messages[4] = "Masukkan Kata-katamu di sini";
tb8_messages[5] = "Masukkan Kata-katamu di sini";

5.  Klik Save/Simpan dan lihat hasilnya

Bagaimana mudah bukan sobat, sekian dulu tengkyu kawan

Read More

Cara Membuat Tab Menu laman Di Atas Header di Blog

Cara Membuat Tab Menu laman Di Atas Header Blog

Ketika membuat blog dengan menggunakan platform Blogger atau Blogspot, maka secara default di atas header akan ditampilkan bilah mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau dapat pula disebut sebagai baris navigasi. Namun karena beberapa alasan (misalnya adalah untuk mempercantik tampilan halaman), maka tidak sedikit pengelola blog yang menyembunyikan bagian tersebut dengan cara menambahkan kode tertentu ke dalam template.

Lihat contoh gambar di bawah ini:

Atau lihat demo

 jika tertarik silahkan ikuti langkah-langkah berikut ini:

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

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

Keterangan:

Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> 

/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 0px auto;
}

.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}

.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}

.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}

.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}

Keterangan:

Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://blogzafar.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6cXzdzqC6y_fDIA3XI1ytmkRhGSj-Cor9NEH6pzJo1bb8_DJlHFrWlHObDDLCvxrEgpJJa79WsVxyplfAPcHwfHaX5-nhIGZMtVHlWEEYx5XoePEt7O7EREq_guqiygtmpEwKE4dZyWA/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

Keterangan:

Ganti http://blogzafar.blogspot.com/ dengan URL blog Anda dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.

Kelima, simpan template.

Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.

 

Semoga berguna dan bermanfaat kawan

Read More

cara Membuat Tab View Menu Tanpa Edit HTML di Blogspot

Baiklah langsung saja, sekarang anda mesti login dulu ke blogger, kemudian pada Elemen Halaman  klik Tambah Gadget, lalu pilih yang HTML/Javascript. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>

<script type='text/javascript'>
//<![CDATA[function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);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);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)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
//]]>
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

Keterangan:

• Tulisan berwarna kuning merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
• Tulisan berwarna orange merupakan warna judul Tab
• Tulisan berwarna hijau merupakan judul Tab
• Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
• Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya. Demikian tadi tutorial membuat tab view widget tanpa edit HTML, contoh dari tab view ini bisa anda lihat di blog ini.

Semoga bermanfaat kawan

Read More

Anti Copy Paste dari Blog Kamu

Berikut ini adalah langkah-langkahnya yang saya sajikan secara simple dan praktis.

• Login ke blogger, klik rancangan dan pilih Tab EDIT HTML
• Centang Expand Widget Template
• Cari kode </head> (gunakan ctrl+f)
• Copy script berikut lalu paste tepat di bawah kode </head>

<SCRIPT type="text/javascript">

if (typeof document.onselectstart!="undefined") {

document.onselectstart=new Function ("return false");

}

else{

document.onmousedown=new Function ("return false");

document.onmouseup=new Function ("return true");

}

</SCRIPT>

• Save.
• Selesai.

Read More

Cara membuat Jam Cantik dan Berbunyi di Blog (blogspot) tanpa Banner

buka: Blogger Dashboard > Layout > Page Element > Add a Gadget > HTML/JavaScript


kemudian copy kode di bawah dan paste pada Gadget > HTML/JavaScript yang terbuka:


<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://sites.google.com/site/myedithtml/swf/edit-html.clock-7.swf" wmode="transparent" type="application/x-shockwave-flash" width="120" height="40">


Kemudian Simpan, dan lihatlah hasilnya.


*) warna merah adalah ukuran jam yang dapat anda sesuaikan.

Read More

Cara Edit Template Blogger 4

Sebenarnya cukup mudah untuk memindahkan css yang sudah kita tulis di Developer Tools dan memindahkannya ke dalam xml, yaitu cukup dengan mencari '' dan mengcopas kan saja. Agar lebih jelas saya sertakan pula gambar. Dan pastikan Anda sudah masuk ke dalam file xml di template Anda, caranya : lihat sidebar kiri, lalu Template dan pilih Edit HTML.

1. Mengedit Warna Background dan Border Body
   
   Untuk mengubah Background Body kita cari dulu class dengan nama .body-fauxcolumns lalu kita tambahkan background: #f2f2f2; untuk mengganti warna backgroundnya.
   
   Dan lanjut kita cari lagi selector class bernama .content-inner dan kita masukan property border: 1px solid gainsboro;
   
   
   
   
   
2. Mengedit Warna Tanggal dan Border Artikel
   
   Tak jauh beda dengan cara diatas, caranya kita cari (ctrl+f) terlebih dahulu selector .main-inner dan selanjutnya kita masukkan property ini.
   
   

   padding: 0 0;
   border: 1px solid gainsboro;
   padding-bottom: 10px;
   border-radius: 6px;

   
   Sementara untuk mengganti warna tanggal kita cari selector .date-header span dan tambahkan selector dibawah ini.
   
   

   background-color: #FFFFFF;
   color: #747474;
   padding: 0.4em;
   letter-spacing: 3px;
   margin: inherit;
   border: 1px solid gainsboro;
   border-radius: 6px;
   font-weight: bold;
   font-size: 14px;

   
   
   
   
   
3. Mengedit Warna Background, Border dan Judul Sidebar
   
   Langkahnya sama persis dengan cara diatas namun bedanya disini kita tidak mencari selektor, melainkan kita akan menambahkan atau membuat selektor sendiri.
   
   Cara pertama, ketik ctrl + f lalu ketikkan </b:skin> dan masukkan selektor baru ini, tepat diatas kode </b:skin> tadi.
   
   

   aside {
   border: 1px solid gainsboro;
   border-radius: 6px;
   padding-top: 10px;
   padding-bottom: 10px;
   }
   #sidebar-right-1 h2 {
   border-bottom: 1px solid gainsboro;
   padding: 10px;
   text-align: center;
   font-size: 16px;
   }

   
   Untuk lebih jelasnya tentanng peletakannya, bisa Anda lihat screenshot dibawah ini.
   
   
   
   
   
4. Menambahkan Slot Iklan, Menu Help dan Menu Navigasi
   
   Untuk mempermudah Anda memahaminya maka saya akan membaginya menjadi tiga bagian.
   
   
   • Menambahkan Slot Iklan
     
     Cari div dengan selector content-outer lalu pastekan kode html ini <div class="slotiklan">Advertisement 728x90</div> dibawahnya content-outer.
     
     Selanjutnya kita tambahkan CSSnya.
     
     

     .slotiklan {
     border: 1px solid gainsboro;
     height: 90px;
     background-color: #FDF5F5;
     border-bottom: 0;
     font-size: 20px;
     padding-left: 60px;
     line-height: 90px;
     }

     
     
   • Menambahkan Menu Help
     
     Letakan kode dibawah ini, tepat dibawahnya div slot iklan tadi.
     
     

     <div id="navbarfirst">
     <ul>
     <li><a href="">About Us</a></li>
     <li><a href="">Sitemap</a></li>
     <li><a href="">Contact Us</a></li>
     </ul>
     <div>

     
     Lalu kita permak dengan CSS seperti ini.
     
     

     #navbarfirst {
     background: white;
     padding: 5px;
     border: 1px solid gainsboro;
     border-bottom: 0;
     padding-left: 515px;
     height: 40px;
     }
     #navbarfirst ul li {
     float: left;
     list-style-type: none;
     padding-left: 33px;
     font-size: 14px;
     }

     
     
   • Menambahkan Menu Navigasi
     
     Menu navigasi ini akan kita letakkan dibawah header (judul blog), maka kita cari dulu </header> dan masukkan kode html unyuk membuat navigasi dibawah ini.
     
     

     <div id="navbarsecond">
     <ul>
     <li><a href="">SEO Lokal</a></li>
     <li><a href="">SEO Manca</a></li>
     <li><a href="">SEO Tips</a></li>
     <li><a href="">SEO Kawe</a></li>
     <li><a href="">SEO Sawang</a></li>
     <li><a href="">SEO Sumber</a></li>
     <li><a href="">SEO Google</a></li>
     </ul>
     </div>

     
     Selanjutnya kita cari lagi </b:skin>, dan letakkan css dibawah ini tepat diatasnya kode </b:skin>.
     
     

     #navbarsecond {
     border-bottom: 1px solid gainsboro;
     height: 30px;
     padding-left: 50px;
     }
     #navbarsecond ul li {
     float: left;
     list-style-type: none;
     padding-right: 40px;
     font-size: 14px;
     }

selesai sudah template simple ini,

' link alternatif untuk membaca artikel sebelumnya '

• Cara Edit Template Blogger 1

• Cara Edit Template Blogger 2

• Cara Edit Template Blogger 3 

semoga bermanfaaat kawan

Read More

Cara Edit Template Blogger 3

Sedikit penjelasan, nantinya disini kita akan membuat dua menu, yaitu menu navigasi yang berada di bawah judul dan deskripsi blog dan satunya lagi menu bantuan yang akan kita letakan diatas judul dan deskripsi blog kita. Ok, langsung saja berikut langkah-langkahnya.

1. Membuat Menu Navigasi

   
   Pertama kita buat dahulu daftar menu menggunakan kode html ul li. Contoh yang paling sederhana adalah seperti ini. Dan kita bungkus dengan div atau nav (html5) tapi disini saya akan mencontohkan menggunakan div, karena div terdengar lebih familiar, kalau nav masih liar, hehe.
   
   

   <div id="navbarsecond">
   <ul>
   <li><a href="">SEO Lokal</a></li>
   <li><a href="">SEO Manca</a></li>
   <li><a href="">SEO Tips</a></li>
   <li><a href="">SEO Kawe</a></li>
   <li><a href="">SEO Sawang</a></li>
   <li><a href="">SEO Sumber</a></li>
   <li><a href="">SEO Google</a></li>
   </ul>
   <div>

   
   Pada pemberian nama id boleh Anda kreasikan, misal menu2 jadi tidak harus navbarsecond.
   
   Dan selanjutnya letakkan dibawah header. Lihat gambar dibawah agar lebih jelas.
   
   
   
   
   Tapi ada yang aneh, menunya kok kebawah (vertikal) kan seharusnya ke samping (horisontal) ? solusinya cukup Anda tambahkan property float: left; untuk membuat menu tersebut mengarah kesamping. Masalah kedua adalah jarak yang terlalu dekat, maka kita gunakan padding untuk mengatur jaraknya. Lalu untuk menghapus bulatannya kita gunakan list-style-type: none;. Kode lengkapnya ada di bawah.
   
   

   #navbarsecond ul li {
   float: left;
   padding: 10px;
   list-style-type: none;
   margin-left: 30px;
   }

   
   Masukan selector diatas dengan cara menekan tombol new style rule (simbol +) yang ada di pojok kanan atas menu inspect element.
   
   
   
   
   Selanjutnya, klik pada div dengan selector navbarsecond, klik tanda +, lalu tambahkan kode dibawah ini.
   
   

   #navbarsecond {
   border-bottom: 1px solid gainsboro;
   margin: 0 20px;
   margin-top: -12px;
   margin-bottom: -10px;
   }

   
   Hasilnya akan seperti gambar dibawah ini.
   
   
   
   
   

2. Membuat Menu Bantuan

   
   Seperti yang saya jelaskan sebelumnya, menu bantuan disini akan terdiri dari about, contact, sitemap dan bisa Anda tambahkan sendiri lainnya.
   
   Untuk caranya mudah saja, cukup tambahkan (ctrl + c) div menu navigasi yang sudah kita buat tadi, dan letakkan dibawah selector content-outer. Dan jangan lupa tambahkan selektor ul li didalam id navbarfirst. Contoh kode cssnya seperti dibawah ini.
   
   

   /* CSS Untuk Mengatur DIV */

   #navbarfirst {

   background: white;

   padding: 5px;

   border: 1px solid gainsboro;

   border-bottom: 0;

   padding-left: 485px;

   }

   
   

   /* CSS Untuk Mengatur UL LI ( Menu ) */

   #navbarfirst ul li {

   float: left;

   padding: 10px;

   list-style-type: none;

   padding-left: 47px;

   }

   
   Untuk lebih jelasnya perhatikan gambar dibawah ini.
   
   
   

link Cara Edit Template Blogger 4smoga bermanfaat kawan

Read More

Cara Edit Template Blogger 2

Melanjutkan tutorial Cara Edit Template Blogger 1 kemarin, Oke, seperti biasa pertama siapkan dulu Alat dan Bahan 'memasaknya'

• Untuk bahanya, siapkan dulu sebuah Blog yang akan kita 'racik'

• Sementara untuk alatnya adalah Google Chrome Developers Tool

Jika semua Alat dan Bahan sudah terseida, sekarang saatnya memulainya.

Ohya, tema dari Template yang akan kita buat ini saya namakan Superficial Simple Silver Template, yang artinya Template yang berwarna Abu-abu dengan desain Simple dan Datar.

Hasil akhir pada Tahap ke 2 ini akan seperti gambar dibawah ini.

Saya rasa cukup basa-basinya, mari kita mulai mengedit.

Langkah Mengedit Template Blogger Part 2

Pada tahap kedua ini kita akan fokus mengedit tampilan Content dan Sidebar.

1. Edit Tampilan Sidebar Template

   Yang pertama kita edit adalah Sidebarnya, maka sama seperti pada tutorial kemarin, klik kanan dimana saja, pilih inspector, lalu arahkan ke bagian Sidebar Template kalian. " pastikan kita berada di selector 'aside' lihat gambar agar dibawah agar lebih jelas. "
   
   
   
   Jika sudah terklik selector aside, sekarang lanjutkan dengan mengisi Element Stylenya dengan kode css (property) di bawah ini.
   
   

   border: 1px solid gainsboro;
   border-radius: 6px;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-left: 10px;
   width: 280px;

   
   Maka akan muncul garis tepi melengkung setebal 1pixel dan berwarna abu-abu muda. Garis melengkung disebabkan oleh property border-radius.
   
   

2. Edit Judul Sidebar Template

   Kita Lanjutkan mengedit bagian Juduln Sidebarya, defaultnya kan sangat kecil ukurannya maka kita akan sedikit membesarkannya dan memberi garis tepi bawah.
   
   Caranya masih sama seperti cara diatas, pertama arahkan inspector tepat di bagian judul.
   
   Maka kita akan menemui selector h2, jika kita langsung memperbesar fontnya dengan font-size maka iitu nanti akan mengubah seluruh bagian isi template. Disini kan, kita hanya ingin mengubah h2 yang ada di bagian Sidebar bukan ? solusinya, tambahakan #sidebar-right-1 di samping selector h2.
   
   Perhatikan gambar dibawah ini, untuk lebih jelasnya.
   
   
   
   
   Lalu fungsinya menambahkan #sidebar-right-1 ini untuk apa ? itu adalah selector bertingkat, intinya untuk merubah tampilan css secara spesifik, lebih jelasnya bisa Anda googling.
   
   Lanjut, tambahkan property dibawah ini untuk mengubah ukuran font dan memberi garis tepi dibagian bawah Sidebar.
   
   

   border-bottom: 1px solid gainsboro;
   padding: 10px;
   text-align: center;
   font-size: 16px;

   
   Dan judul yang ada di sidebar pun akan terlihat sedikit menarik.
   
   

3. Edit Tampilan Artikel dan Background Tanggal Template

   Seperti yang sudah-sudah arahkan kursor pada bagian outer isi artikel, lalu pada Matched CSS Ruler tambahkan property dibawah ini.
   
   border: 1px solid gainsboro;
   border-radius: 6px;
   
   Jangan lupa untuk menghapus property width:100%, agar bagian Sidebar tidak bergeser kebawah.
   
   Selanjutnya pada bagian Tanggal yang mempunyai selector date-header, masukan property dibawah ini.
   
   

   background-color: #FFFFFF;
   color: #747474;
   padding: 0.4em;
   letter-spacing: 3px;
   margin: inherit;
   border: 1px solid gainsboro;
   border-radius: 6px;
   font-weight: normal;

   
   Dan walaa, Background Artikel dan Tanggal akan berubah wujud menjadi seperti gambar dibawah ini.
   
   
   
   
   

4. Edit Tampilan Judul Blog

   Disini kita akan memindahkan Judul Blog kita dibagian tengan, dan memberi batasan border dibagian bawah.
   
   Caranya klik judul blog dengan inspector, pastikan selectornya adalah header-inner lalu masukan property css dibawah ini.
   
   

   overflow: hidden;
   text-align: center;
   border-bottom: 1px solid gainsboro;

   
   Maka tampilan blog kita akan terlihat lebih kece badai.
   
   
   

link

• Cara Edit Template Blogger 3

smoga manfaat kawan

Read More

Cara Edit Template Blogger 1

Mengedit Template yang ada di Blogspot memang saya akui bukan pekerjaan yang mudah, dimana kita tidak diberi ruang yang bebas dalam melakukan pengeditan. Walaupun tidak seluasa saat kita Membuat Website, namun jangan khawatir dengan kreatifitas yang Anda miliki, kita bisa 'menembus' batasan tersebut.


Catatan : Disini saya akan mengedit Template Sederhana bawaan Blogger yang ada di urutan 1.

Alasan utama saya memilih Template ini adalah karena Ringan dan cukup Mudah jika kita ingin mengedit seluruh bagian Template, karena sudah tersedia comment dari pihak Blogger untuk memudahkan kita mengenali setiap bagian dari kode xml template tersebut.

Contoh comment :

•  /* Content ------------ */ ( menandakan kode kode css yang ada dibawahnya untuk mengatur tampilan isi )

• /* Header ------------*/ ( menandakan kode kode css yang ada dibawahnya untuk mengatur tampilan atas template, seperti misalnya judul blog )

Lalu kapan kita mulai mengedit Template Blogspotnya ? sebentar, dalam mengedit sebuah tampilan sebuah blog, kita tidak wajib untuk terjun langsung kedalam sourcenya. Yang pastinya itu akan berisi ribuan kode CSS, JS, dan HTML yang akan membuat Anda dan saya bingung 7 keliling.

Lalu apa solasinya, *eh solusinya ? mudah saja kita bisa menggunakan beberapa Tool yang sudah dibundling oleh Browser kita, misal di Chrome ada Developer Tool, dan di Mozilla juga ada tool bernama Web Developer, keduanya memiliki fungsi yang sama tentunya. (namun saya lebih memilih punyanya Chrome karena lebih simple tampilannya).

Langkah Mengedit Template Blogger

Saya ingatkan sekali lagi, untuk alatnya saya menggunakan Chrome Developer Tool dan untuk bahannya saya menggunakan Template Sederhana Blogger.

1. Menghilangkan Navigasi Bar Template

   
   Langkah awal kita akan merombak tampilan depan, yang jadi masalah ada Navigasi Bar yang (menurut saya) sedikit membingungkan kita saat ingin melakukan pengeditan template. Untuk itu kita akan menghilangkannya.
   
   Caranya, klik kanan dimana saja, lalu pilih Inspect Element. Selanjutnya kita akan sedikit bermain-main dengan alat yang mempunyai ikon kaca pembesar atau sering disebut selector.
   
   
   
   
   Sekarang arahkan kursor Anda tepat dipojok kiri bawah Navigasi Bar tersebut (intinya hingga semua tertutupi dengan warna biru), contoh seperti gambar dibawah ini.
   
   
   
   
   Lalu lihat sebelah kanan bawah layar Anda, tulisan Matched CSS Rules, lalu tambahkan kode 'display: none;' tanpa tanda kutip. Cara menambahkannya klik pada simbol '}' lalu tinggal Anda ketikkan perintah 'display: none;' dan lenyap sudah Navigasi Bar tersebut.
   
   Catatan : Untuk menghilangkan Navigasi Bar tersebut sebenarnya ada dua cara, yaitu dengan visibility: hidden dan display: none. Bedanya, kalau hidden itu hanya menyembunyikan, sementara none itu benar-benar menghilangkan. Jika masih bingung silahkan Anda coba, dan lihat perbedaanya.
   
   

2. Mangganti Warna Background Template

   
   Cara kedua ini bisa dibilang yang paling penting ya, karena jika salah dalam memadukan warna, bisa jadi pengunjung akan kabur. Dan langkah untuk Mengganti Warna Template ini sama saja seperti waktu kita ingin menghilangkan Navigasi Bar tadi.
   
   Pertama tentu klik dulu kaca pembesarnya, lalu arahkan ke tempat yang ingin Anda ganti Backgroundnya, contoh saya ingin mengganti warna background hanya dibagian sisi kanan dan sisi kiri, maka akan saya arahkan ke sebelah kiri template. Lalu saya ingin mengubahnya menjadi warna abu-abu muda, ya tinggal saya tambahkan kode css 'backgorund-color: #f2f2f2'.
   
   Lihat gambar dibawah ini agar tidak bingung.
   
   
   
   
   

3. Menambahkan Border Pada Sisi Template Tertentu

   
   Yah, sekali lagi tak jauh beda dengan 2 Cara diatas, seperti biasa Anda arahkan dahulu pada bagian yang ingin Anda tebali dengan garis (border).
   
   Contoh saya ingin memberi border pada pembatas sisi kiri dan kanan, caranya tinnggal saya tambahkan 'border: 1px solid gainsboro;' ini merupakan selektor bertingkat ya, jadi border akan berwarna abu-abu (gainsboro mirip gray).], memiliki garis yang padat (tidak putus-putus) dan mmemiliki ketebalan 1px.
   
   Hasilnya seperti gambar dibawah ini.
   
   
   
   
   Lanjut semisal kita ingin menambahkan ruang diatas judul, semisal untuk penempatan iklan. Caranya cukup kita tambahkan 'div' dibawah class='content-cap-top cap-top' Lalu edit css divnya dengan value :
   
   

   border: 1px solid gainsboro;
   height: 40px;
   background-color: #FDF5F5;
   border-bottom: 0;
   padding-top: 20px;
   font-size: 20px;
   text-align: center;

   
   Alasan saya menuliskan 'border-bottom: 0' adalah untuk menghilangkan garis yang bertumpuk antara div yang kita buat dengan content-inner.
   
   Dan hasil akhir akan seperti gambar dibawah ini.
   
   
   

Cukup mudah bukan Tutorial Pertama Edit Template Blogger kali ini. Nah, untuk Tutorial Mengedit Template selanjutnya kita akan fokus pada pengeditan Sidebar dan tapilan Artikel. Selengkapnya bisa Anda baca di Cara Edit Template Blogger 2.

semoga bermanfaat kawan

Read More

cara pakai SSH dan Proxifier buat internet gratis xl

Pertama - tama connect'in dulu modem'nya .. truz buka Path XL ..
Pake aja XL1 dan listen port'nya set ke 8089 ..
Kemudian buka SSH Client .. masukin Account SSH yang ente punya ..
Kemudian klik Proxy Settings karena kita akan connect melewati Path XL ..
Centang Use Proxy .. server isi dengan 127.0.0.1 .. port 8089 .. sesuai dengan yang udah kita set di Path XL tadi ..



Setelah itu kita pindah ke tab Services di SSH Client .. centang Enable .. di Listen Interface isi dengan 127.0.0.1.. dan Listen Port isi dengan 1080 .. atau menurut kemauan ente ..
Setelah itu klik aja Login ..


Setelah sukses Login .. sekarang buka Proxifier .. lalu pilih File >> New Profile .. plih lagi Profile >> Proxy Server kemudian klik Add ..


Setelah itu masukin listen port yang udah di set di SSH Client tadi .. yaitu 127.0.0.1 Port 1080 .. atau sesuai dengan port yang ente set tadi ..
Jangan lupa juga pilih SOCKS Version 5 .. kemudian klik OK ..


Setelah beres .. kita pilih Profile >> Proxification Rules .. kemudian klik Add .. dan kita tambahin Parth XL dan juga SSH Client .. dengan Action : Direct ..

Setelah itu jangan lupa set profile Default agar mengarah ke listen port SSH Client ..yaitu 127.0.0.1 1080 SOCKS V5 ..


Setelah itu buka Browser apa aja .. di sini ane pake FF .. cz gampang set proxy'nya ..
Pilih aja Tools >> Options .. setelah itu pilih tab Advanced .. lalu pilih Network .. dan klik Settings ..
Set FF menjadi No Proxy .. OK ..


Setelah itu coba aja buat Browsing atau apa aja ..

Read More

Cara Membuat Screensaver di Blog

Apa itu Screensaver ??? Yaitu sebuah tampilan standby di layar blog tersebut dimana seluruh aktifitas dihentikan sementara. Screensaver akan muncul apa bila tidak ada aktifitas apapun dihalaman monitor tersebut dan sebaliknya bila mouse melakukan aktifitas maka screesaver akan menutup dan kembali seperti semula. Screensaver ini selain mempercantik tampilan blog juga mampu menghemat energi.

Adapun Cara Membuat Screensaver di blog sangatlah mudah adalah sebagai berikut :

1. Login dulu di blog sobat

2. Klik Tata Letak --> Tambahkan Gadged --> HTML / Java Script

3. Judul dikosongin saja

4. Copykan kode dibawah ini tepat di dalam kotak konten

<script type="text/javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/screensavervikry.js">
</script>
<style type='text/css'>
div#energysaving, div#energysaving * {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border: 0;
    background: url(blogspot.com/-DSUtnbxyYWY/U3TeQrIs5oI/AAAAAAAAAIY/jzhSe7LzN3I/s1600/screen+saver.jpg) no-repeat center center fixed black;
}
div#energysaving p span {
    display:none;
    visibility:hidden;
}
</style>

5. Simpan dan lihat hasilnya

NOTE : Untuk Kode Berwara MERAH ganti dengan Url gambar screensaver sobat.

Read More

CIRI-CIRI BLOG YANG DI SUKAI GOOGLE

Assalamualaikum wr.wb kali ini saya akan membuat sebuah artikel mengenai ciri-ciri blog yang di sukai oleh google pasti kita menginginkan hal ini terjadi pada blog kita,blog kita bisa di sukai oleh google, blogger mana yang tidak mau blog nya di sukai oleh google seperti nya tidak ada!
sebelum melangkah lebih jauh ada baik nya anda juga bisa membaca artikel saya yang kemarin mengenai tips agar blog di sukai oleh pengunjung karena menurut saya sebelum kita memikirkan bagaimana blog bisa di sukai oleh google kita juga perlu untuk memikirkan untuk bagaimana blog kita juga bisa di sukai oleh visitor karena dengan ke dua nya kita bisa mendapatkan hal itu, pasti nya blog kita bisa lebih dan lebih baik lagi oke mungkin langsung saja saya akan menuju ke topik utama dari artikel ini mengenai ciri ciri blog yang di sukai oleh google silahkan anda simak saja di bawah ciri-ciri nya.

• Kualitas artikel

ini mungkin yang anda harus perhatikan terlebih dahulu kulitas artikel,dengan kita mempunyai Kualitas artikel yang baik dan bisa bermanfaat bagi visitor kita, itu tidak menutup kemungkinan  google pun akan menyukai blog kita karena blog yag baik itu terdapat artikel-artikel yang baik dan bisa bermanfaat bagi visitor kita
membuat kualitas artikel itu tidak lah sulit asalkan anda ingin belajar dan mau menulis itu sudah sukup di bandingkan kita malas untuk belajar dan tidak mau menulis dan kita mendapatkan artikel berkualitas itu dapat dari hasil copas itu tidak akan membuat kita bisa dan maju.

• informasi yang berkualitas

dengan membuat artikel yang berkualitas kita perlu membutuh kan informasi yang baik untuk pengunjung blog kita karena dengan anda membuat informasi yang baik itu akan membuat google menyukai blog yang anda miliki karena jika visitor suka google pun akan ikut suka.

• Sering update artikel

ini yang kebanyakan para blogger ke bingungan karena google menyukai blog yang sering update artikel nya karena ini yang mungkin cukup sulit untuk di lakukan karena membutuhkan ide untuk menulis dan apa lagi yang tidak mempunyai PC sendiri dan harus meminjam atau menyewa itu bisa sangat sulit untuk di lakukan
dan manfaat dari kita sering mengupdate itu sendiri kita akan lebih di sukai oleh google dan bisa membuat artikel yang kita buat cepat untuk terindek buat saja artikel anda setiap hari dan ingat jangan copas, contoh artikel yang saya buat kemarin dengan waktu kurang 60 menit sudah bisa terindeks dan menempati posisi 1 dan itu pun bisa berubah sewaktu-waktu karena persaingan 

• Niche/tema blog

dengan anda menentukan tema blog yang benar dan sesuai dengan isi dari artiekel-artikel anda itu akan membuat google menjadi suka pada blog anda dan jika sebalik nya anda membuat sebuah tema blog anda dan tidak sesuai dengan isi dari artikel anda contoh tema blog anda tentang komputer tidak mungkin anda membuat artikel tentang cara menghilangkan jerawat itu kan aneh menurut saya, keculi anda membuat tema blog tentang apa saja  alias gado-gado itu masih wajar

• Optimasi SEO yang benar

dengan anda mengoptimasi seo blog anda dengan benar dan sewajarnya itu akan membuat google akan menyukai blog anda jika anda ingin membaca tentang seo silahkan klik disini

• Visitor blog

ini dia yang terakhir dengan anda memperhatikan Kualitas artikel - informasi yang berkualitas - Sering update artikel - Niche/tema blog - Optimasi SEO yang benar itu akan memberikan kesempatan untuk blog anda, ramai dengan pengunjung dengan blog anda ramai pengunjung atau visitor itu akan membuat google akan lebih suka lagi terhadap blog anda.

Read More

MEMBUAT GAMBAR BERGERAK SAAT DI SENTUH KURSOR BLOG

Selamat malam sahabat kali ini saya akan sedikit share tentang cara membuat gambar membesar saat di sentuh kursor blog mungkin sahabat semua sudah pernah tau sebuah blog/web yang memasang sebuah gambar/foto pada blog nya dan pada saat di sentuh oleh kursor akan bergerak dan membesar, mungkin sahabat juga ingin membuat nya mungkin supaya terlihat sedikit unik di blog sahabat namun sahabat tidak mengetahui cara membuat atau cara memasang nya namun tenang saja cara memasang nya cukup mudah jika sahabat ingin memasang nya silahkan sahabat simak saja di bawah bagaimana cara pemasangan nya.

Login ke akun blog rsahaba
Klik Template > Edit HTML centang pada Expand Template Widget
Cari kode ]]></b:skin> ,
setelah itu, letakkan kode dibawah tepat diatas kode ]]></b:skin>  

.post img, table.tr-caption-container { border:none; max-width:800px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }


Nah jika sahabat sudah memasang nya silahkan sahabat coba.
jika sudah berhasil nanti akan seperti yang saya pasang di blog saya silahkan sahabat coba sentuh gambar pada blog ini saja.

Read More

Cara Membuat Tombol Menu Bar Di Blogspot

Banyak cara untuk membuat tab menu untuk Blog Anda. Berikut saya akan memberikan sebuah cara yang cukup mudah untuk membuat Tab Menu tersebut.

1. Buka Account Blogger anda

2. Klik Tataletak

3. Klik Add Gadget

4. Pilih Add Javascript/HTML

5. Copy dan Paste code HTML berikut

<style type="text/css">

.h_mnu_01{

   width: 100%;

   font-family: Arial, Helvetica, sans-serif;

   font-size: 12px;

   font-weight: bold;

   font-style: normal;

   text-decoration: none;

}

.h_mnu_01 ul{

   margin: 0;

   padding: 0;

   float: left;

   width: 100%;

   background: #000000;

   border-top-width: 1px;

   border-right-width: 0;

   border-bottom-width: 1px;

   border-left-width: 0;

   border-top-style: solid;

   border-right-style: solid;

   border-bottom-style: solid;

   border-left-style: solid;

   border-top-color: #000000;

   border-right-color: #000000;

   border-bottom-color: #000000;

   border-left-color: #000000

}

.h_mnu_01 ul li{

display: inline;

}

.h_mnu_01 ul li a{

   float: left;

   color: #FFFFFF;

   padding: 5px 11px;

   text-decoration: none;

   border-right-width: 1px;

   border-right-style: solid;

   border-right-color: #000000;

}

.h_mnu_01 ul li a:visited{

color: #FFFFFF;

}

.h_mnu_01 ul li a:hover, .h_mnu_01 ul li .selected{

   color: #FFFF00 !important;

   padding-top: 5px;

   padding-bottom: 5px;

   background: #008000;

}

</style>

</head>

<body>

<div class="h_mnu_01">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Profile Blog</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">My Profile</a></li>

<li><a href="#">About</a></li>

</ul>

</div>

</body>

</html>

6. Ganti "Home,Profile Blog,Contact, My Profile, About" sesuka kamu, dan tanda # diganti dengan alamat dari menu tersebut. misalanya seperti dibawah ini.

    <li><a href="probase-tama.blogspot.com">Home</a></li>

7. Setelah proses pengeditan selesai, klik Simpan.

Read More