Cara Mengganti Atribut Blogger Dengan Link Buatan Sendiri

Mengganti Attribut Blogger Dengan Link Buatan Sendiri

Untuk Tulisan ini adalah bukan membahas gimana caranya menghapus atribut blogger, atau menyembunyikan Atribut Blogger, Tapi Mengganti Dengan Atribut buatan kita sendiri, namun tetap mencantumkan link mbah kita "Blogger".

Kalo Sekedar menghapus atau menyembunyikan Atribut blogger, adalah hal yang cukup mudah, sobat tinggal meletakan kode css berikut lalu simpan tempalte, hilang deh itu tulisan blogger.
.footer-outer{display:none;}

Tapi untuk yang ini sedikit beda, karena ini adalah sebuah trik buat kita yang masih setia dengan template standar blogger, seperti saya tentunya, karena template yang saya gunakan adalah asli bawaan blogger yang sudah dimodifikasi sedemikian rupa, hingga menjadi seperti ini.

Lansung saja sob, langsung ke topik Cara Mengganti Attribut Blogger Dengan Link Buatan Sendiri Pertama2 dan kedua dan seterusnya, saya anggap posisi sobat sedang edit HTML pada template blognya

1. Cari kode CSS yang ada dibawah kode  /* Footer dan Replace kode CSS tersebut Dengan kode CSS Berikut ini.

/* Footer ----------------------------------------------- */ #footer { clear: both; position:center; z-index:0; overflow:hidden; width: 860px; margin: 5px auto 0px auto; } #footer .widget { margin:.5em; padding-top: 2px; font-size: 85%; line-height: 1em; text-align: $startSide; } #credit { text-align:center; padding:0; margin:0; color:#fff; height: 10px; }

2. Carilah Kode beerikut ini
 <!-- outside of the include in order to lock Attribution widget -->
Rubahlah Kode yang ada dibawahnya hingga menjadi seperti berikut ini

<!-- outside of the include in order to lock Attribution widget --> <div id='credit'><a href='/'>My Blog </a> © 2012 | All Rights Reserved |<a href='/' title='About'> About </a>|<a href='/' title='Privacy Policy'> Privacy Policy </a>|<a href='/' title='Contact'> Contact </a> | Dikembangkan Oleh<a href='http://ripsway.com' title='Rips Way'> www.ripsway.com </a> | Powered By<a href='/' title='Blogger'> Blogger </a> </div></div></div><div class='footer-cap-bottom cap-bottom'>

3. Simpan template anda, dan coba lihat hasilnya.

Cara Menambah Elemen/Widget Baru di Bawah Header

Menambah Elemen baru dibawah header

Lihat Pada gambar dia atas, itu adalah hasil dari pada praktek menambahkan elemen Baru dibawah header, ini diperlukan kadang saat kita ingin menambahkan tab menu ataupun menempatkan widget lain dibawah header.

Oke, Langsung praktek saja.
Saya anggap sobat sudah ada pada edit template mode HTML, Silahkan Cari kode seperti berikut ini

<div class='tabs-outer'>
    <div class='tabs-cap-top cap-top'>
Bla bla bla

bla bla bla

blabla bla

bla bla bla
    <div class='tabs-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>

Untuk Mempercepat pencarian, silahkan tekan Control+F
Setelah ketemu, silahkan tambahkan kode berikut ini Tepat dibawahnya

<div class='RWmenu-outer'> <div class='RWmenu-cap-top cap-top'> <div class='cap-left'/> <div class='cap-right'/> </div><div class='fauxborder-left RWmenu-fauxborder-left'> <div class='fauxborder-right RWmenu-fauxborder-right'/> <div class='region-inner RWmenu-inner'> <b:section class='RWmenu' id='RWnew-crosscol' maxwidgets='1' showaddelement='yes'/> <b:section class='RWmenu' id='RWnew-crosscol-overflow' showaddelement='no'/> </div></div><div class='RWmenu-cap-bottom cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div></div>

Selanjutnya Cari Kode ]]></b:skin> dan letakan Kode CSS ini Tepat Diatasnya
Kode CSS:

.RWmenu-inner .widget{
      margin:0;
      padding:0;
}

Simpan Template , lihatlah hasilnya melalui Tata Letak

Cara Mengurangi Jarak Antara Judul Blog Dengan Deskripsi Blog

Gak Panjang lebar sob, Langsung saja ke pokok bahasan, Cara Mengurangi Jarak Antara Judul Blog Dengan Deskripsi Blog.

1. Log In ke blogger anda, Masuk ke dasbor
2. Masuk ke Tab Template> Edit HTML
3. Cari Kode ]]></b:skin> Dan Letakan kode CSS berikut ini Tepat diatas kode ]]></b:skin>

.region-inner.main-inner{ margin-top: -20px; } .titlewrapper{ margin-bottom: -30px; }

4. Silahkan sesuaikan jarak pada margin-bottom dan margin-top untuk mengatur jarak antara header dengan denskripsi.
5. Simpan Template, Lihat hasilnya...

Yang Mau Tuker Link Monggo Masuk Ke Sini

Cara Menambah Elemen/ Widget Disamping Header

Selesai sudah kegiatan tak berguna malam ini, seperti biasa... edit tampilan blog biar lebih indah, kerjaan malam ini yaitu Cara Menambah Elemen/ Widget Disamping Header, yang mana elemen ini bisa kita manfaatkan untuk memasang iklan baner, anda bisa menempatkan beberapa baner pada header ini, tapi anda harus menggunakan kemampuan anda, bagaimana caranya memasang beberapa gambar berjejer dalam 1 Elemen.
Oke, Langsung ke pokok bahasan saja, Cara Menambah Elemen/ Widget Disamping Header
Lihat Preview pada gambar berikut

Jika Itu Yang Dimaksud, mari kita ikuti langkah2 berikut ini.

1. Log In ke blogger anda, Masuk ke dasbor

2. Masuk ke Tab Template> Edit HTML

3. Cari Kode Berikut ini 

 Tiap template pasti berbeda, cari yang agak miripdengan ini

/* Header

---------------------------------
*/
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid #000;

.............terus

.............terus

.............terus

.............sampai sini

/* Tabs

----------------------------------------------- */

4. Ganti semua kode diatas dengan kode berikut (/* Tabs tidak termasuk, Yang diatasnya saja)

#header-wrapper width:840px; margin:0 auto 0px; background:#0000; height:80px; } #head-inner { width:250px; background-position: left; text-align: justify; margin-left: auto; margin-right: auto; float:left;<br />border-right:0px dashed #000; } #header { margin: 0px; border: 0px solid #000; text-align: left; color:#fff; } #header-kanan{ width:590px; text-align: justify; float:left; padding-top:10px; }

Silahkan lakukan perubahan untuk ukuran lebar dan pewarnaan, demikian untuk menyesuaikan dengan blog anda, ini membutuhkan kejelian anda sebagai seorang blogger.
5. Kemudian Cari lagi Kode yang mirip seperti ini
tiap template pasti berbeda kodenya,silahkan disesuaikan

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Rips Way (Header)' type='Header'/>
</b:section>
</div>

6. Kalo sudah ketemu Ganti semua kode tadi dengan kode berikut ini

<div id='header-wrapper'><div id='head-inner'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/></b:section></div><div id='header-kanan'><b:section class='header' id='header2' preferred='yes'/></div></div>

7. Simpan Template, silahkan dicek melalui tata letak, Tambahkan elemen sesuai dengan hati anda

Happy Alway by Rips Way...
Gak nyangka dah jam 00.00, tapi bingung mau ngapain, ngejar target biar disayang google.. hehehe

Yang Mau Tuker Link Monggo Masuk Ke Sini

Cara Membuat Menu Vertikal Pada Sidebar Blog

Jika Kemaren saya posting bagamina cara membuat tab menu horizontal Sekarang kita bahas cara membuat menu vertikal pada sidebar
Coba lihat gambar berikut ini

Apakah Menu seperti itu yang anda maksud? Jika iya mari kita ikuti caranya seperti berikut ini

Kalo Memang Itu yang dimaksud, ikuti langkah2 berikut ini

1. Log In ke blogger anda, Masuk ke dasbor

2. Masuk ke Tab Template> Edit HTML

3. Cari Kode ]]></b:skin> Dan Letakan kode CSS berikut ini Tepat diatas kode ]]></b:skin>

 Kode CSS:

#ripsnav { color: #fff; background: transparent; border-bottom: none; border-right: none; padding: 0 0px; margin-left: -25px; width: 15em; font: normal 11px Verdana, sans-serif; } #ripsnav li { list-style: none; margin: 0; font-size: 11px; }<br />#ripsnav a { display: block; text-decoration: none; margin-bottom: 0.01em; margin-top: -0.8em; color: yellow; background: #191919; border-width: 1px; border-style: solid; border-color: yellow green green #6cf; border-left: 0.5em solid #fc0; padding: 0.1em 0.2em 0.2em 0.3em; } #ripsnav a#current { border-color: #5bd #035 #068 #f30; } #ripsnav a { width: 100%; /* only necessary for Internet Explorer */ } #ripsnav a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#ripsnav a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer *<br />} #ripsnav a:hover, #ripsnav a#current:hover { background: #28b; border-color: green #6cf #5bd #fc0; padding: 0.2em 0.3em 0.3em 0.4em; } #ripsnav a:active, #ripsnav a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }

Untuk Menyesuaikan Lebar, atur pada kode ini  width: 15em; pada kode CSS diatas, Semua perubahan warna pun ada pada kode CSS ini, Silahkan lakukan perubahan untuk menyesuaikan dengan blog anda.
4. Klik Simpan
5. Tetap Pada Dasbor, Kemudian Klik Tata Letak
6. Add Gadget/Elemen baru, Pilih HTML/Javascript
Masukan Kode Berikut ini

<div id="navcontainer"><ul id="ripsnav"><li><a href="http://www.ripsway.com/search/label/Artikel">Semua Artikel</a></li><li><a href="http://www.ripsway.com/search/label/Blogging">Blogging</a></li><li><a href="http://www.ripsway.com/search/label/Capucino">Capucino</a></li><li><a href="http://www.ripsway.com/search/label/Cara%20memasang%20mister%20linky">Cara memasang mister linky</a></li><li><a href="http://www.ripsway.com/search/label/Cerita%20Humor">Cerita Humor</a></li><li><a href="http://www.ripsway.com/search/label/Cerita%20Lucu">Cerita Lucu</a></li><li><a href="http://www.ripsway.com/search/label/Gambar%20Aneh">Gambar Aneh</a></li><li><a href="http://www.ripsway.com/search/label/Gambar%20Lucu">Gambar Lucu</a></li><li><a href="http://www.ripsway.com/search/label/Hacker">Hacker</a></li><li><a href="http://www.ripsway.com/search/label/Harga%20Dinar">Harga Dinar</a></li><li><a href="http://www.ripsway.com/search/label/Harga%20Dirham">Harga Dirham</a></li><li><a href="http://www.ripsway.com/search/label/Imesh">Imesh</a></li><li><a href="http://www.ripsway.com/search/label/Kesehatan">Kesehatan</a></li><li><a href="http://www.ripsway.com/search/label/Kode%20Script">Kode Script</a></li><li><a href="http://www.ripsway.com/search/label/Koleksi%20Tab%20Menu">Koleksi Tab Menu</a></li><li><a href="http://www.ripsway.com/search/label/Lister%20Linky">Lister Linky</a></li><li><a href="http://www.ripsway.com/search/label/Membuat%20Email">Membuat Email</a></li><li><a href="http://www.ripsway.com/search/label/Membuat%20Menu%20blog">Membuat Menu blog</a></li><li><a href="http://www.ripsway.com/search/label/PC%20Suit%20Sony%20Ericsson">PC Suit Sony Ericsson</a></li><li><a href="http://www.ripsway.com/search/label/Resep">Resep</a> </li><li><a href="http://www.ripsway.com/search/label/Rokok">Rokok</a> </li><li><a href="http://www.ripsway.com/search/label/Setting%20Email">Setting Email</a></li><li><a href="http://www.ripsway.com/search/label/Tab%20menu">Tab menu</a></li><li><a href="http://www.ripsway.com/search/label/Template">Template</a></li><li><a href="http://www.ripsway.com/search/label/Trik">Trik</a></li><li><a href="http://www.ripsway.com/search/label/Tukar%20Link%20Otomatis">Tukar Link Otomatis</a></li><li><a href="http://www.ripsway.com/search/label/Tutorial">Tutorial</a> </li><li><a href="http://www.ripsway.com/search/label/Tutorial%20Dasar%20Blogger">Tutorial Dasar Blogger</a></li><li><a href="http://www.ripsway.com/search/label/Widget">Widget</a></li></ul></div>

7. Klik Simpan.
Selamat, Anda sudah memiliki tab menu vertikal.... Happy Blogging