• Robotic Notes Blogger Template


    Screenshot


    Template kali ini Bertema Robotic notes,tentunya buat yang sudah nonton anime ini sudah tau siapa gunvarrel,robot mecha~xD.pada template ini,apa yang unik?kalau kalian sudah melihat demo/mencoba template ini langsung,saat pertama melihat template ini,mata akan tertuju pada header yang bertuliskan please wait,apakah itu? itu adalah css animasi loader yang saya modifikasi agar selalu ada di header hanya sekitar 10 detik,lebih lengkap'a bisa dilihat disini.

    Screenshot


    lalu apa lagi yang aneh dari template ini?yang pastinya Style postingnya,bentuknya tidak biasa,tetapi tetap rapih.dan lagi jika kalian perhatikan thumbnail pada posting ukuran gambar hanya sekitar 70px,tetapi ketika kita arahkan kursor ke thumbnail,maka gambar akan membersar,tetapi untuk lebar gambar max 600px dan min 200px,sedangkan untuk tingginya auto,sehingga tinggi gambar tidak akan selalu sama tergantung pada gambar yang kita pasang.

    Screenshot


    1. Pengaturan menu
    Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
    setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

    #menu1

    <div class='menujohanes'><ul class='dark_menu'>
    <li><a class='selected' href='#' title='Rss'>Rss</a></li>
    <li><a href='#'>Contact</a><ul>
    <li><a href='#'>Google+</a></li>
    <li><a href='#'>Blogger</a></li>
    <li><a href='#'>Facebook</a></li>
    <li><a href='#'>Email</a></li>
    </ul></li><li><a href='#'>Categories</a><ul>
    <li><a href='#'>Lorem ipsum</a></li>
    <li><a href='#'>Lorem ipsum</a></li>
    <li><a href='#'>Lorem ipsum</a></li>
    <li><a href='#'>Lorem ipsum</a></li>
    <li><a href='#'>Download</a></li>
    <li><a href='#'>Lorem ipsum</a></li></ul></li>
    <li><a href='#'>Anime</a><ul>
    <li><a href='#'>Winter</a></li>
    <li><a href='#'>Summer</a></li>
    <li><a href='#'>Spring</a></li>
    </ul></li>
    <li><a href='#'>Staf</a><ul>
    <li><a href='#'>Staf a</a></li>
    <li><a href='#'>Staf b</a></li>
    <li><a href='#'>Staf c</a></li>
    </ul></li>
    </ul></div>

    #menu2


    <ul class='dark_menu1'>
    <li><a class='selected1' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
    <li><a class='selected2' href='#' title='Home'>Contact</a></li>
    <li><a class='selected3' href='#' title='Home'>About</a></li>
    <li><a class='selected4' href='#' title='Home'>Sitemap</a></li>
    <li><a class='selected5' href='#' title='Home'>Download</a></li>
    </ul>


    2. Setting SEO/Meta tag

    setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
    *ganti text yang berwarna merah

    <meta content='deskripsi blog kamu' name='DESCRIPTION'/>
    <meta content='keyword blog kamu' name='KEYWORDS'/>

    3. Setting Social media facebook,twitter,g+,Rss

    <ul id='tbisose'>
    <li><a class='icon facebook' href='http://www.facebook.com/halaman fan page facebook/'/></li>
    <li><a class='icon twitter' href='http://twitter.com/username/'/></li>
    <li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'/></li>
    <li><a class='icon rss' href='http://feeds.feedburner.com/alamat feed rss'/></li>
    </ul>

    Selamat mencoba,semoga bermanfaat

    Previous
    Next Post »

    Komentar yang menyertakan iklan, atau titip link, akan dimasukan ke Folder SPAM.

    Untuk pertanyaan di luar Topik Artikel silahkan kik OOT (apabila dipertanyakan di sini, mohon maaf apabila tidak dibalas). Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

    Terima kasih sudah berkomentar