Kamis, 02 Februari 2012

Cara Membuat / Memasang Navigasi Breadcrumb di Blog

Cara Membuat / Memasang Navigasi Breadcrumb di Blog - Pada awal saya ngeblog, saya sempat membaca sebuah artikel yang dalam satu kutipan bilang begini " Navigasi breadcrumb adalah bagian dari blog yang keberadaannya dapat menunjang blogmu di mata search engine" membaca kata tersebut maka langsunglah saya membuat navigasi breadcrumb. eh pas mau buat ternyata nggak semuda yang di bayangkan, ternyata eror sob!!.
Sudah banyak macam breadcrumb navigasi yang saya pasang di blog saya tapi tak ada satupun yang bisa.. eror semua, terutama jika menerapkan 2 atau lebih kategori dalam 1 artikel. Dari situlah saya tahu, ternyata permasalahnnya adalah perbedaan kode di setiap template. Template yang ku pakai adalah template minima.
Navigasi breadcrumb sendiri adalah sebuah navigasi atau penunjuk halaman yang umumnya berfungsi untuk membantu memberikan informasi kepada  si pembaca tentang di artikel mana dan di menu apa si pembaca berada. bagi sobat yang tertarik untuk memasang navigasi breadcrumb di blog sobat, silahkan ikuti tutorial nya di jamin tidak eror dan so pasti SEO friendly...




Berikut Cara Membuat Navigasi Breacrumb di Blog.

1. Log in ke akun blog sobat.
2. Klik Rancangan---> Edit HTML --> Klik Download template lengkap
4. Letakkan kode berikut di atas kode ]]></b:skin>. ( gunakan Ctrl + F untuk memudahkan pencarian)
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
}

5. Kemudian sobat cari kode seperti ini :

<b:includable id='post' var='post'>

6. Pastekan kode berikut tepat di bawahnya.
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
You are Here &gt; <a expr:href='data:blog.homepageUrl'>Home</a> &gt;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &gt; <data:post.title/>
</div>
</b:if>
</b:if>

7. Yang terakhir sobat tinggal simpan template dan lihat hasilnya.

Semoga cara / trik di atas bisa membantu sobat blogger...

Rabu, 01 Februari 2012

Cara Memasang Emoticon di Postingan Blog

Cara Memasang Emoticon di Dalam Postingan Blog - Postingan blogger adalah bagian utama dari blog. Karena apa?? karena yang menjadi tujuan utama mata para pengujung blog adalah artikel yang kita posting. Sebanyak apapun widget dan se bagus apapun hiasan yang di pasang di luar posting tidaklah berarti tanpa postingan yang berkualitas. Oleh karena itu sebisanya buatlah artikel seindah mungkin, serapi mungkin, dan se orisinil mungkin dan jangan terlalu mengutamakan widget - widget yang tidak terlalu berguna ( seperti jam, kalender dll).

Setelah sebelumnya saya telah memposting artikel tentang memasang emoticon onion di kotak komentar blog, kali ini christian tatelu akan coba posting cara atau trik memasang / menaruh / membuat emoticon di dalam postingan blogger tanpa perlu meng upload atau memasukkan url gambar nya. Berbeda dengan cara atau tutorial yang sering sobat dapat di pencarian google, cara ini di anggap lebih mudah dan juga lebih praktis. Emoticon yang akan akan kita gunakan saat ini adalah emoticon emo boy dan emo girl.

Sobat yang tertarik untuk memasang emoticon di postingan blog, silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Edit HTML --> Letakkan kode berikut di atas kode </body>

<script src='http://tateluproject.googlecode.com/files/post_emoticon.js' type='text/javascript'></script>
 
3. Klik Simpan.
Untuk menerapkannya di postingan, sobat hanya perlu meletakkan kode - kode berikut dalam Compose atau bisa juga di Edit HTML di kolom entri sobat.
:a: untuk emoticon 1
:b: untuk emoticon 2
:c: untuk emoticon 3
:d: untuk emoticon 4
:e: untuk emoticon 5
:f: untuk emoticon 6
:g: untuk emoticon 7
:h: untuk emoticon 8
:i: untuk emoticon 9
:j: untuk emoticon 10
:k: untuk emoticon 11
:l: untuk emoticon 12
:m: untuk emoticon 13
:n: untuk emoticon 14
Tambahan : 
  • Tips ini hanya berlaku untuk template yang mempunyai kode <div class='post-body entry-content'>
    Semoga trik di atas bisa membantu sobat blogger dalam menghiasi postingan sobat..

    Cara Memasang Emoticon Onion di Kotak Komentar Blog

    Cara Memasang / Membuat  Emoticon Onion ( kepala kucing ) Pada Kotak Komentar Blog - Pernah kah sobat memperhatikan deretan emoticon yang berada di bawah kotak komentar di blog ini?? Emoticon tersebut namanya emoticon Onion. Berbeda dengan postingan ane yang lalu - lau yaitu tentang emoticon skype dan emoticon kaskus, kali ini saya akan mencoba memberi tahu sobat semua bagaimana cara memasang emoticon onion di kotak komentar blog sobat.
    Bagi sobat yang tertarik untuk memasangnya, silahkan ikuti tutorial berikut.

    1. Log in ke akun blog sobat.
    2. Klik Rancangan --> Edit HTML --> Dowload template lengkap --> Centang kotak kecil di samping tulisan Expand Template Widget.


    3. Letakkan Kode / Script berikut di atas kode  </body> ( gunakan Ctrl + F untk memudahkan pencarian )

    <script src='http://tateluproject.googlecode.com/files/emotiononionnobi.js'/>

    4. Letakkan kode berikut di bawah kode <p class='comment-footer'> ( gunakan Ctrl + F untuk memudahkan pencarian )

     <div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 200; text-align: center; border: 0px solid #90be35; padding: 5px; background: #ffffff; height:350'>
    <b>
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth113_.gif' width='30'/> :a:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_4onion25.gif' width='30'/> :b:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth103_.gif' width='30'/> :c:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_onion-52.gif' width='30'/> :d:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth096_k.gif' width='30'/> :e:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth088_.gif' width='30'/> :f:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth085_.gif' width='30'/> :g:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth084_.gif' width='30'/> :h:

    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_boong.gif' width='30'/> :i:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_th070_goodjob.gif' width='30'/> :j:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth066_hi.gif' width='30'/> :k:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth064_.gif' width='30'/> :l:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth058_.gif' width='30'/> :m:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth051_.gif' width='30'/> :n:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth043_.gif' width='30'/> :o:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth042_.gif' width='30'/> :p:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth032_.gif' width='30'/> :q:

    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth020_bingo.gif' width='30'/> :r:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth019_.gif' width='30'/> :s:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/onion-103.gif' width='30'/> :t:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/cuteonion4.gif' width='30'/> :u:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/onion-34.gif' width='30'/> :v:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth014_.gif' width='30'/> :w:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_thth008_.gif' width='30'/> :x:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_onion-73.gif' width='30'/> :y:
    <img border='0' height='30' src='http://i1183.photobucket.com/albums/x475/nobinoku/Onion%20Emotion%20Album/th_onion-07.gif' width='30'/> :z:
    </b>
    </div>

    Tambahan :
    • Jika sobat kesulitan untuk menemukan kode pada langkah 4 ( <p class='comment-footer'> ) letakkan saja kode di atas sebelum kode ( di atas ) kode <b:if cond='data:post.embedCommentForm'>. 
    • Utamakan untuk mencari kedua kode tersebut yang saling berdampingan ( Ber urutan ), karna kemungkinan sobat akan mendapatkan banyak kode <p class='comment-footer'> begitu pula kode <b:if cond='data:post.embedCommentForm'>.

    Lihat gambar!



    5. Klik Save dan lihat hasilnya..

    semoga cara memasang emoticon onion di kotak komentar blog di atas bisa membantu sobat.

    Selamat Ber - Experiment

    Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse



    Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki kreasi tinggi akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung. Cukup demikian basa-basinya (heheheheheee.. ) mari kita menuju ke pokok pembahasan.

    Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

    1. Seperti biasa sobat harus login dulu di akun blog sobat
    2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
    3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
    4. Sobat cari kode </head>
    5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>



    6. dan sobat klik save / simpan template.

    Langkah selanjutnya untuk penenpatan gambar dalam postingan.

    1. Sobat harus menambahkan kode  <div id="denzuaz"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

    <div id="denzuaz">
    <a href="http://zuazz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOs4ccGgOxN8mMQmEuvlT7IuMEhnBwlhkaLrmUxFTmjaSuxrrN32aSN47Afm6rfGeVLlPXI3GJt55wR2U7IWa9JEeyzSJYSTViNG0UHmyK98CmYQr-KxCyQFdmAoj7EZ-jRTZ3FTVGUgdS/s200/naruto+dont+copy.png" /></a></div>

    keterangan:
    1. kode berwarna merah adala kode pembuka dan penutup
    2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
    3. Setelah semuanya selesai klik publikasikan. 
    Demikianlah tips "Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".

    Semoga bermanfaat Sobat.. 

    Selasa, 31 Januari 2012

    Cara Membuat Efek Zoom Pada Gambar di Blog

    Cara Membuat Efek Zoom ( Membesar ) Pada Gambar di Blog - Memodifikasi template tidak sekedar hanya utak atik bagian luar postingan saja, bagian dalam pun ( Artikel ) yang akan menjadi tujuan mata para pengunjung seharusnya harus kita perhatikan.
    Setelah sebelumnya saya  memposting cara memasang tombol follow dan dashboard di blog, kali ini saya akan memposting tentang Cara Membuat Efek Zoom pada Gambar di Blog.  Dengan menggunakan efek ini, setiap gambar yang ada dalam postingan akan tampil dengan pilihan Zoom seperti yang terlihat pada gambar berikut.


    Selain itu, cara ini juga bisa di gunakan untuk gambar yang berada di luar postingan seperti di sidebar, header, footer atau bagian lain dari halaman blog.
    Sobat yang tertarik untuk membuat efek zoom pada gambar di blog, silahkan ikuti tutorial berikut.

    1. Log in ke akun blog sobat.
    2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> Pilih HTML/Javascript
    3. Masukkan kode berikut ke dalam kotak.

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

    <script src="
    http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript">

    /***********************************************
    * Kod telah di'edit' oleh unwanted
    * Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh unwanted
    * -- Sharing Is Caring -- http://www.unwanted86.blogspot.com --
    ***********************************************/
    </script>

    4. Klik Save.. nah sekarang saatnya di terapkan pada gambar.

    Untuk menggunakan efek ini pada gambar di artikel, silahkan gunakan kode pemanggil berikut
        <img src="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />

    Keterangan :
    • Ganti kode berwarna biru dengan Url Gambar Sobat
    • Ubah Lebar dan tinggi ( Width - Height ) sesuai keinginan.
    • Angka 2 pada kode adalah Skala Pembesaran. Nilai lebih besar dari 1 akan membesarkan gambar dan nilai kurang dari 1 akan mengecilkan gambar. Contohnya 0.5
        Untuk cara menerapkannya pada gambar di artikel , sobat tinggal memasukkan kode tersebut di Edit HTML pada postingan ( bukan Compose ).



    dan untuk memasukkannya di sidebar atau di tempat lain selain postingan, silahkan masukkan saja kode tersebut di HTML/Javasript sobat.

     Sekian cara memasang efek zoom pada gambar di blog, semoga bisa membantu...

    Cara Mengatur Timeline Facebook Agar Privasi Terjaga

    Facebook TimelineAtur / Setting Timeline Facebook Untuk Menjaga Privasi - Facebook telah memperkenalkan fitur Timeline, perubahan besar-besar pada halaman profil Facebook, sejak September 2011. Sampai saat ini, Facebook masih memberi kesempatan penggunanya untuk menggunakan profil "versi lama".
    Namun beberapa minggu lagi, Facebook akan "memaksa" seluruh pengguna menggunakan Timeline. Meski sebenarnya banyak pengguna tidak menyukai fitur baru ini terkait masalah privasi.
    Berikut lima hal yang harus Anda ketahui mengenai Timeline, sebelum Facebook benar-benar menerapkan fitur ini ke seluruh pengguna.


    1. Maksimalkan penggunaan pilihan "Hide from Timeline"
    Jika Anda tidak jeli mengatur Timeline, semua hal yang Anda lakukan akan terekspos dengan jelas kepada publik, meskipun mereka belum menjadi teman Anda di Facebook.
    Jadi, manfaatkan pilihan "Hide from Timeline" agar Anda bisa menyembunyikan apapun yang ingin Anda sembunyikan dari orang lain.

    Cara: Untuk setiap kotak posting Anda di profil, Anda bisa klik bagian kanan atas dan akan muncul pilihan bergambar pensil dan bintang. Klik pilihan bertanda pensil lalu pilih "Hide from Timeline" jika Anda menginginkan untuk menyembunyikannya dari Timeline.

    2. Ganti cover album

    Mungkin Anda sudah mengetahui cara mengatur album mana saja yang bisa dilihat oleh teman, oleh orang yang bukan teman, atau bahkan hanya dapat dilihat oleh Anda sendiri. Perlu Anda ketahui, untuk semua album yang Anda atur dengan pilihan "Public" akan muncul di Timeline Anda dengan cover album yang cukup besar dari sebelumnya.
    Anda bisa memilih untuk mengubah cover album dengan foto yang menurut Anda paling menarik agar orang tertarik membuka album tersebut.

    Cara: Klik menu edit album pada albumAnda, klik edit foto, lalu pilih foto mana yang paling menarik menurut Anda, dengan memberi tanda titik pada pilihan "This is the album cover".

    3. Bijak menggunakan Geotag
    Facebook sekarang telah melengkapi Timeline dengan informasi geotag, dimana foto dan album foto bisa dilengkapi dengan lokasi.
    Misalnya, saat Anda berlibur di pantai Kuta, Anda bisa memasukkan lokasi pantai Kuta di foto Anda. Nantinya setiap orang yang melakukan geotag pantai Kuta di foto mereka, juga akan mengetahui kehadiran Anda di pantai itu, sesuai tanggal yang tertera.
    Mereka akan bisa melihat foto Anda di lokasi itu. Jika sudah terlanjur melakukan geotag pada foto, Anda masih bisa lakukan "untag" untuk menghilangkan lokasi detail dari foto Anda.

    4. Perhatikan aplikasi dari pihak ketiga

    Jangan sembarangan mempersilakan aplikasi pihak ketiga memenuhi Timeline Anda. Jika tidak berhati-hati, semua hal yang dilakukan di aplikasi tersebut akan muncul di Timeline dan memenuhi Timeline.
    Anda harus mengatur aplikasi mana saja yang layak memunculkan informasinya di Timeline.

    Cara: Di samping tulisan "Home" di kanan atas halaman Facebook, klik tanda panah, lalu klik "Account setting". Lalu klik menu "Apps" yang terletak di samping kiri layar. Di sini, Anda bisa memilih aplikasi mana saja yang terhubung dengan akun Anda.
    Hapus aplikasi-aplikasi yang sudah tidak pernah digunakan lagi. Anda juga bisa memilih apakah setiap postingan dari aplikasi tersebut bisa terlihat di Timeline oleh teman, oleh publik, atau hanya oleh Anda sendiri.

    5. Intip dulu sebelum dipublikasi
    Anda bisa melihat tampilan Timeline baru Anda sebelum dipublikasi. Gunakan pilihan "View As" untuk melihat apakah Timeline Anda sudah layak untuk dipublikasikan. Dengan menggunakan "View As", Anda masih bisa memperbaiki Timeline berkali-kali sebelum profil Anda berubah tampilan dengan permanen.

    sumber : tekno.kompas.com

    Senin, 30 Januari 2012

    Cara Memasang Tombol Follow dan Dashboard di Blog

    Cara Memasang / Membuat Tombol Follow dan Dashboard di Blog - Bila sobat melihat pada bagian atas sebelah kanan blog ini, maka sobat akan melihat tampilan 2 tombol dengan fungsinya masing masing. Tombol dashboard yang sebenarnya sudah ada pada navbar blogger berfungsi sebagai jalan pintas bagi sang admin untuk menuju dashboard nya dan tombol follow yang berfungsi memudahkan orang / blogger untuk men - follow blog kita.

    Bagi sobat yang tertarik untuk memasang tombol follow dan dashboard di blog silahkan ikuti tutorial berikut:

    1. Log in ke akun blog sobat.
    2. Klik rancangan --> Elemen laman --> Tambah gadget --> Pilih HTML/Javascript
    3. Masukkan kode berikut pada kotak yang sudah tersedia.

    <div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=2606858488420058572" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-N61PPu_1haE/TtOSBZgZikI/AAAAAAAAHvc/vIEC_dYpIVo/dashboard.png" /></a></div>

    4. Ganti tulisan kode yang berwarna biru dengan id blog sobat. untuk mengetahui Id sobat, lihat gambat berikut.

    untuk mengubah posisinya jadi, silahkan sobat ubah tulisan yang berwarna merah.

    5. Klik Simpan.

    Demikianlah Cara Memasang Tombol Follow dan Dashboard di Blog dan semoga membantu...

    Minggu, 29 Januari 2012

    Cara Membuat 2 Kolom Header

    Cara Membuat 2 Kolom Header - Apa kabar sobat blogger?? pagi yang cerah ini saya harapkan dapat membawah suasana nyaman untuk sobat blogger terutama nyaman berada di blog ini. hehehe.. sebagai postingan ke 2 setelah berganti nama menjadi tatelu saya harapkan dapat memberi faedah untuk sobat blogger.


    Kali ini saya akan kasih tahu bagaimana cara membuat 2 kolom header di blog. Dulunya saya pernah memposting topik yang sama yaitu cara membagi header menjadi 2 kolom elemen, tapi rasanya kurang cocok tuch kata elemennya... nah jadi dech christian tatelu posting ini.

    Bagi sobat yang tertarik, silahkan ikuti cara membuat 2 kolom header berikut ini.

    1. Pertama sobat login ke akun blog sobat
    2. Klik rancangan--> edit HTML
    3. Jangan centang kotak expand template widget
    4. Cari kode css yang mirip di bawah ini:

        #header-wrapper {
        width:900px;
        margin:0 auto 0px;
        background:$bgheadercolor;
        height:190px;
        }
        #header-inner {
        width:900px;
        background-position: center;
        margin-$startSide: auto;
        margin-$endSide: auto;
        }
        #header {
        margin: 0px;
        text-align: left;
        color:$pagetitlecolor;
        }

    5. Ganti kode di atas dengan kode berikut.

        #header-wrapper{
        width:980px;
        padding:20px 0 0 0;
        background:#000000;
        margin:0 auto;
        border:;}

        #header-inner{
        background-position:center;
        margin-left:auto;
        margin-right:auto}

        #header{
        float:$startSide;
        width:400px;
        margin:0 auto;
        border:0px solid $bordercolor;
        text-align:left;
        color:$pagetitlecolor
        }

        #header2{
        float:$endSide;
        width:400px;
        margin:0 auto;
        text-align:left;
        }

    Tambahan :
    • Edit kode di atas sesuai keinginan sobat terutama kode width yang harus di sesuaikan dengan ukuran header blog sobat.

    6. Scroll ke bagian bawah, dan temukan kode yang mirip seperti ini

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

    Fokuskan pencarian pada kode
    <div id='header-wrapper'>

    7. Ganti kode di atas dengan kode berikut:

    <div id='header-wrapper'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='judul blog(Header)' type='Header'/>
    </b:section>
          <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
    <div style='clear:both;'/>
          </div><!-- end header-wrapper -->

    8. Klik simpan perubahan

    9. Langkah terakhir, klik ELEMEN LAMAN dan lihat bila sudah menjadi 2 kolom.

    Selesai
    Semoga membantu!!

    Idebagus Jadi CHRISTIAN TATELU

    Meninggalkan sesuatu yang sudah lama melekat tak semuda yang kita bayangkan. Termasuk sebuah nama. Seperti yang saya lakukan saat ini, dengan terpaksa saya harus mengganti nama idebagus yang sudah melekat di blog ini dengan nama yang baru yaitu CHRISTIAN TATELU.

    Demi mendapatkan sitelink dari google, saya korbankan nama idebagus yang bagus itu. karena kita tahu bersama bahwa Sitelink google merupakan hal mutlak yang harus di miliki oleh sebuah blog, tak ada sitelink maka blog bagaikan sayur tanpa garam ( meskipun masih bisa di makan ).

    Mungkin ini dapat menjadi masukkan untuk sobat blogger dalam memilih judul blog. lihat saja blog ini, sudah hampir 2 tahun ngeblog sitelinknya nggak datang - datang juga. Jika sobat menuliskan idebagus di kotak search google, sobat hanya akan menemukan blog ini pada posisi ke 2 di bawah www.idebagus.com.


     Oleh karena itu, saya harapan dengan mengganti nama blog ini dengan nama yang baru yang jelas kurang kompetitornya, bisa mendapat sitelink setidaknya 2 , 3 atau beberapa bulan ke depan ( pengen nya sih begitu )

     Oleh karena itu pula, dengan sangat menyesal dan sangat menyesal sekali.. saya memohon kepada sobat blogger yang terlanjur memasang link blog ini di blog sobat untuk dapat mengubah judul dari link yang dipasang di blog sobat sesuai nama baru blog ini. yaitu CHRISTIAN TATELU.


    Atau silahkan langsung saja menuju ke link sobat di sini!    Please!!!!!

    Sabtu, 28 Januari 2012

    Cara Membuat Menu Horisontal di Blog

    Cara Membuat Menu Horisontal di Blog - Banyak sekali blog tutorial yang mungkin sering membahas cara memasang menu horisontal di blog. Mulai dari yang biasa - biasa ( di sediakan pihak blogger ) hingga yang nggak biasa alias lebih canggih.( bisa sobat liat di menu horisontal blog ini .. hehehe)

    Seperti yang kita ketahui bersama bahwa menu yang di sediakan pihak blogger memiliki tampilan yang tetap. ( sepengetahuan saya ) sehingga bagi sobat blogger yang hobby utak atik blog, mungkin sedikit kurang mengasikkan. Kali ini, setelah memposting artikel cara mengetahui blog dofollow atau nofollow, saya akan mencoba sharing pada sobat blogger tentang cara membuat menu horisontal di blog yang di lengkapi dengan fasilitas dropdown atau lebih tepatnya cara membuat menu horisontal dropdown di blog.  Untuk demonya sobat nggak perlu jauh jauh, cuma perlu liat aja menu di bawah header blog ini.

    Bagi sobat yang tertarik untuk membuat menu horisontal di blog,silahkan ikuti tutorial berikut.


    1. Log in dulu ke akun blog sobat.
    2. Klik Rancangan --> edit html
    3. Cari kode ]]></b:skin> ( Gunakan Ctrl + F untuk memudahkan percarian)
    4. Letakkan kode berikut di atasnya.

    #tejahtc{
    height:33px;
    width:1000px;
    margin:0 auto;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4drHu1Yj6atsxYa9T-yfYxVEx_R-37vXUq2ViOwMoSINixkHyzgQ4QtWZu0hXrkoRZ3J6dVASwEc8vxFkCePAqQ11-FZSBfyG-oa4fab0zitme6MzjkEiEN6y4VK94Xc0FfqI9LgSJsLq/) repeat-x;
    display:block;
    padding:0px 0 0px 0px;
    font-size:12px;
    font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
    font-weight:normal;
    border-top:1px solid #252424;
    }

    #tejas{
    margin: 0px;
    padding: 0px;
    width:1000px;
    background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4drHu1Yj6atsxYa9T-yfYxVEx_R-37vXUq2ViOwMoSINixkHyzgQ4QtWZu0hXrkoRZ3J6dVASwEc8vxFkCePAqQ11-FZSBfyG-oa4fab0zitme6MzjkEiEN6y4VK94Xc0FfqI9LgSJsLq/) repeat-x;
    height:33px;
    }

    #tejas ul {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #tejas li {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #tejas li a, #tejas li a:link, #tejas li a:visited {
    color: #fae7df;
    display: block;
    margin: 0px;
    padding: 9px 10px 10px 10px;
    }

    #tejas li a:hover, #tejas li a:active {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqEC5K6W5KqJ49xIGGze4VbDAblzwT8VbNzNSJVMt3gRFC6gVXcWUom5n2bZlSDic9ZggRFEIGCT73e4ihfUczJRe8wfdc0yTsuavJzL6LabRPub-kHF8gL75UIKl-ETPR7VqeFnbz7OtC/) repeat-x;
    color: #fff;
    margin: 0px;
    padding: 9px 10px 10px 10px;
    text-decoration: none;
    }

    #tejas li li a, #tejas li li a:link, #tejas li li a:visited {
    background:#ED4A05;
    width: 150px;
    color: #fae7df;
    font-family:Tahoma,century gothic,Georgia, sans-serif;
    font-weight: normal;
    float: none;
    margin: 0px;
    padding: 9px 10px 10px 10px;
    border-bottom: 1px solid #FF7800;
    }

    #tejas li li a:hover, #tejas li li a:active {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqEC5K6W5KqJ49xIGGze4VbDAblzwT8VbNzNSJVMt3gRFC6gVXcWUom5n2bZlSDic9ZggRFEIGCT73e4ihfUczJRe8wfdc0yTsuavJzL6LabRPub-kHF8gL75UIKl-ETPR7VqeFnbz7OtC/) repeat-x;
    color: #fff;
    padding: 9px 10px 10px 10px;
    }

    #tejas li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0px;
    padding: 0px;
    }

    #tejas li li {
    }

    #tejas li ul a {
    width: 140px;
    }

    #tejas li ul a:hover, #tejas li ul a:active {
    }

    #tejas li ul ul {
    margin: -34px 0 0 170px;
    }

    #tejas li:hover ul ul, #tejas li:hover ul ul ul,
    #tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul {
    left: -999em;
    }

    #tejas li:hover ul, #tejas li li:hover ul,
    #tejas li li li:hover ul, #tejas li.sfhover ul,
    #tejas li li.sfhover ul, #tejas li li li.sfhover ul {
    left: auto;
    }

    #tejas li:hover, #tejas li.sfhover {
    position: static;
    }

    tambahan :
    • Modifikasi kode di atas terutama ukuran lebar dan tinggi yang harus di sesuaikan dengan ukuran template blog sobat.
    • Hampir semua bagian dari kode di atas bisa di edit,  tapi kalo menurut saya sih tampilannya sudah pas tinggal tinggi dan lebarnya saja... terserah sobat..

    5. Letakkan kode berikut di bawah kode <div id='content-wrapper'> ( cari dengan Ctrl+F )

    <div id='tejahtc'>
    <div id='tejas'>

    <ul>
    <li><a href='http://www.blooger.co.idm/'>Home</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1</a>
    <ul class='children'>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-1</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-2</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-1-3</a></li>
    </ul>
    </li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2</a>
    <ul class='children'>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-1</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-2</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-2-3</a></li>
    </ul>
    </li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3</a>
    <ul class='children'>
    <li><a href=Link sobat di sini!' title='Link-Title'>Link-Name-3-1</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-2</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-3-3</a></li>
    </ul>
    </li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-4</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5</a>
    <ul class='children'>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-1</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-2</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-3</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-5-4</a></li>
    </ul>
    </li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6</a>
    <ul class='children'>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-1</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-6-2</a></li>
    </ul>
    </li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-7</a></li>
    <li><a href='Link sobat di sini!' title='Link-Title'>Link-Name-8</a></li>
    </ul>

    </div>
    </div>


    <div class='clear'/>

    • Ganti tulisan yang berwarna biru dengan link dari kategori atau bisa juga dengan link posting.
    contoh link kategori atau label, modelnya seperti ini.
    http://www.blooger.co.idm/search/label/BLOG

    sedangkan link posting seperti ini .
    http://www.blooger.co.idm/2012/01/membuat-link-terbuka-di-tab-baru.html
    • Ganti tulisan berwarna ungu dengan url blog sobat.
    • Ganti link name dengan judul kategori atau judul posting atau apapun yang penting menarik untuk di klik. untuk link title samakan saja dengan link name.

    6. Save template..

    Semoga cara membuat menu horisontal di atas bisa membantu sobat blogger. 

      Kamis, 26 Januari 2012

      Cara Mengetahui Blog Dofollow Atau Nofollow

      Cara Mengetahui Blog Dofollow atau Nofollow - Seperti kita ketahui bersama, bahwa blog dofollow atau blog yang ber atribut kan dofollow atau tak jarang juga orang menuliskan dofolow , adalah blog yang mengijinkan si robotnya om google untuk mengindeks seluruh link di blog kita termasuk link di kotak komentar. Dengan kata lain, bahwa siapa saja yang berkomentar di blog dofollow akan mendapatkan backlink satu arah langsung ke blognya.

      Cara Mengetahui Blog Dofollow atau nofollow ini bagi sebagian blogger mungkin sudah basi bahkan mungkin menyangkah bahwa blogger yang posting artikel ini udah nggak punya ide posting lagi, tapi bagi saya selama jari ini masih bisa mengetik dan masih bisa makan (Mengetik kan butuh tenaga, tenaga kan dari makanan), masih sah sah aja.

      cara mengetahui blog dofollow atau nofollow ini, saya posting berdasarkan pengalamn saya. dulunya saya hanya memanfaatkan Klik kanan ( pada salah satu halaman posting )-->  view page source --> kemudian menekan Ctrl +F dan mencari salah satu komentar yang ber atributkan dofollow pada mozilla yang sebenarnya saya tahu cara tersebut bikin puyeng.. bikin pusing....!!!@!@

      gambarnya seperti ini :

      Tampilan view page source blog dofollow

      tapi tenang...!! kali ini saya tidak akan membuat sobat pusing. kali ini saya akan kasih tahu bagaimana cara mengetahui blog dofollow atau nofollow tanpa ribet.
      Sobat hanya perlu menggunakan add-ons Nodofollow dari mozilla. Bagi sobat blogger yang tertarik cara ini, silahkan ikuti langkah - langkah di bawah ini:


      1. Install Exensionnya di sini!
      2. Klik Continue to Download seperti gambar berikut .

      3. Restart mozilla sobat.
      4. Sekarang siap untuk di gunakan.

      Silahkan sobat klik kanan pada salah satu pemberi komentar pada blog yang ingin sobat ketahui apa dofollow atau nofollow, kemudian klik Nodofollow.


      Link pemberi komentar yang berwarna biru adalah blog dofollow sedangkan yang berwarna merah adalah blog nofollow.

      Tampialn komentar blog dofollow


      tampilan komentar blog nofollow

      5. Yang terakhir silahkan buktikan sendiri...

      Sekian..

      Semoga cara mengetahui blog dofollow atau nofollow di atas dapat membantu sobat dalam mencari backlink.

      Membuat Link Terbuka di Tab Baru

      Cara Membuat Link Terbuka di Tab Baru - Salah satu hal yang ada dan akan selalu ada di blog adalah Link. Tidak ada link maka tak ada backlink dan juga pagerank. Bahkan Tak ada link, tidak ada juga blog. Kali ini saya akan sedikit share tentang Link yang lebih tepatnya membuat link agar terbuka di tab baru.

      Sobat hanya perlu menyisipkan kode target="_blank" pada URL.

      Contohnya

      <a href="http://www.blooger.co.idm" target="_blank">idebagus</a>

      maka hasilnya sepeti ini:

      idebagus



      Gunakan variasi efek berkedip untuk menarik minat pengunjung untuk mengklik Link tersebut. Misalnya

      <a href="http://www.blooger.co.idm/" target="_blank"><blink>idebagus<./blink></a>

      idebagus

      Bisa juga dengan menyisipkan gambar pada Link seperti berikut :

      <a href="http://www.blooger.co.idm" target="_blank"><img src="http://i1108.photobucket.com/albums/h405/christian410/cooltext610503717.gif" /></a>

       Hasilnya :





      Banner Idebagus



      Untuk memodifikasi tampilan huruf , warna huruf dan sebagainya cukup tambahkan kode berikut :

      <span style=";font-family:georgia;font-size:40px;font-style:italic;color:blue;">

      Misalnya :

      <a href="http://www.blooger.co.idm/" target="_blank"><span style="color: blue;  font-family: georgia;  font-size: 20px;  font-style: italic; ">idebagus</span></a>

      Hasilnya :

      idebagus

      Semoga Cara Membuat Link Terbuka di Tab Baru ini bisa berguna untuk sobat blogger.

      Selamat Berkreasi!
      Diberdayakan oleh Blogger.