Februari 2013

Minggu, 24 Februari 2013

Template Blogger HTML5 | London Creative | Wammy

Template Blogger HTML5 | London Creative | Wammy | Hasil modifikasi saya dari XHTML 1.0 ke HTML5. Sedikit sekali blog yang menyediakan template valid HTML5 yang membuat aku menjadi ingin berbagi tentang template dengan fitur terbaru ini. Kenapa saya pilih HTML5 ?
Template ini dari Soratemplate dengan Bahasa XHTML 1.0 dengan sekejap menjadi HTML5.

<ul id='fresh_cube_data'>

 <li class='fresh_cube_image_0'>

 <img src='/image.jpg'/>

<span class='transition' title='random'>

<div class='post_category' id='slider_post_cat'>/

<a href='#'>Web Design</a>/</div>

<div class='post_name'>
 <a href='#' id='slider_img_desc'>1000s of Images In My Mind</a>
 </div>

</span>

</li>

 ..........

<div class='thumbs' id='thumbs'>

<div class='slider_content' id='sl_content'>

<ul id='slider_ul'>

<li><img alt='img' src='/thumb.jpg'/>

<div class='slider_tit' style='display:none'>/ Web Design /</div>

 <a class='slider_desc' href='#' style='display:none' title='0'>1000s of Images In My Mind</a>

 </li>

..........

Ganti"#" URL artikel.
Ganti"image.jpg" slider image.
Ganti"thumb.jpg" thumbnail image.

Kemudian Mengatur Menu :

<div class='menu-nav-container'>
 <ul class='menu' id='menu-nav'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>About</a>
   <ul class='sub-menu'>
    <li><a href='#'>Dropdown test</a></li>
 ..........

Ganti "#" dengan URL artikel anda
Ganti About/ Dropdown dengan menu anda

Dan ini adalah hasil cek validasi HTML5 :

Template Fitur: Di adaptasi dari Wordpress, 2 Kolom, Sidebar Kanan, Fotografi, Elegant, Featured Content Slider, Lebar Tetap, Background Hitam, Top Navigation Menu, Page Navigation.

DEMO

DOWNLOAD

Kamis, 21 Februari 2013

Membuat Statis Follow Blog Ala Wordpress Di Blogger

Membuat Statis Follow Blog Ala Wordpress Di Blogger | Mengerikan, sekarang apa yang ada di wordpress bisa ada di Blogger. Contohnya adalah statis follow wordpress...yang sudah default ada di blog wordpress sekarang bisa di pakai oleh blogger juga. Cara ini dipakai untuk menghemat tempat agar blog sedap dipandang.

Anda letakkan kode ini didalam Gadget yaitu pada HTML/Javascript.

<style type="text/css">
/*<![CDATA[*/
    #w2bfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
    .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-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);}
    .w2bfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
    .w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSDpGyJlcOitgFlEsgfehidxpUL8xaxU1EyAlBY7ZZNdQcZ2qHE3R6e5Cq3mhvjRwJ3QlHv-AmGe1eF-ONCnA7g-2r9wOIQ2ZB3gqM56tBv0_t9GvbJgwOD9FGWN4H9Pxq5kaorssHYcyW/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
    .w2bfollowButton:hover,.followActive {color: #fff !important;}
    .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
    .followactive {background-color: #333;}
    .w2bfollowForm {padding: 15px;}
    .w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
    .w2bfollowForm p {margin: 0 0 10px;}
    .w2bfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
    .w2bfollowForm form {text-align: center;}
    .w2bfollowForm .emailInput:focus {color: #000;border-color: #000;}
    .w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
    .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
    .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
    .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
    .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
    .w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="w2bfollowSubscribe" style="display:none;">
    <div class="w2bfollowForm">
        <a class="w2bfollowButton" href="#" title="Follow"><span>Follow</span></a>
        <h3>Follow "Nama Blog Anda"</h3>
        <p>Ketik Pesan Anda Disini!!</p>
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Feedburner ID anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
            <input type="hidden" value="Feedburner ID anda" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input type="submit" value="Subscribe" class="emailSubmit"/>
        </form>
        <p class="w2bFollowFooter">
            <a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
        </p>
    </div>
</div>

Cukup mudah dan sederhana.
Ganti warna merah dengan : Nama Blog Anda
Ganti warna biru dengan : Pesan Anda
Ganti warna hijau dengan : ID Feedburner Anda
Misal : http://feeds.feedburner.com/bocahit (bocahit adalah ID Feedburner anda)

Rabu, 20 Februari 2013

Membuat Iklan Melayang Di Samping Kanan & Kiri Blog Dengan Tombol Close

Membuat Iklan Melayang Di Samping Kanan & Kiri Blog Dengan Tombol Close | Beberapa hari yang lalu saya menulis masalah Mengatasi Errors di Webmaster dan Memodifikasi Avatar Komentar, kali ini masih di sekitar Blogger. Admin blog yang mungkin sudah berumur "tua" di dunia blog, mungkin akan berpikiran untuk memasang beberapa iklan di blog agar bisa ada hasil receh yang ia terima. Salah satunya memasang iklan melayang. Kalau iklan melayang menurut saya di beri tombol X (close) agar tidak mengganggu pandangan pengunjung. Ini menurut saya...karena itu saya pasang cara iklan melayang dengan tombol close.

Masukkan kode di bawah ini, pada Layout di Gadget HTML/JS

<script type='text/javascript'>
    $(document).ready(function() {
    $('img#closed').click(function(){
    $('#btm_banner').hide(90);
    });
    });
    </script>

    <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
    </script><script type="text/javascript">
    if (window.jstiming) window.jstiming.load.tick('headEnd');
    </script>

    <!--start: floating ads-->
    <div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">

    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcjfkSOV4Gqi5xMwWDkeCE1JJWYGF5FheWDb3_pYkHonD6d9BjDzyG2B5MRvanpcjHKcpvMFtv9I4rLL7jbLu63X_VTPeMmCR2FWPf3GXJj4VCHEyhiyHWxE6pFB8euHiX9pZ_Ag9r-7eX/s1600/PhoXo2.png'/></center></a></div>
    <!--Mulai-->
   Iklan Anda
    <!--Akhir-->
    </div>
    <!--end: floating ads-->
    <!--start: floating ads-->
    <div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">

    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcjfkSOV4Gqi5xMwWDkeCE1JJWYGF5FheWDb3_pYkHonD6d9BjDzyG2B5MRvanpcjHKcpvMFtv9I4rLL7jbLu63X_VTPeMmCR2FWPf3GXJj4VCHEyhiyHWxE6pFB8euHiX9pZ_Ag9r-7eX/s1600/PhoXo2.png'/></center></a></div>

    <!--Mulai-->
Iklan Anda      
 <!--Akhir-->

    </div>
    <!--end: floating ads-->

Okey selesai. Silakan ganti Iklan Anda dengan kode iklan anda.

Membuat Avatar Komentar Melingkar

Membuat Avatar Komentar Melingkar | Terkadang aku juga bosan dengan bentuk avatar komentar yang hanya kotak saja. Aku juga kadang temukan avatar komentar yang sama di beberapa blog tetangga. Ya, karna beberapa template default dari blogger memang hanya seperti itu. Lalu Bagaimana membuatnya melingkar ?.....

Cukup letakkan kode di bawah ini diatas kode ]]></b:skin>.

.avatar-image-container,
.avatar-image-container img {
    max-width: 50px !important;
    width: 50px !important;
    max-height: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border: 0px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
}

.avatar-image-container{
    border:3px solid #fff !important;
    -webkit-box-shadow: 0 1px 2px #BBB;
    -moz-box-shadow: 0 1px 2px #BBB;
    box-shadow: 0 1px 2px #BBB;
}

Selasai, sekarang anda lihat avatar komentar di blog anda.

Senin, 18 Februari 2013

Cara Mengatasi Crawl Errors 404 Pada Webmaster

Cara Mengatasi Crawl Errors 404 Pada Webmaster | Google saat ini sangat memperhatikan dan menyeleksi situs - situs yang bermanfaat bagi pengunjung. Tapi jika terlalu banyak link yang error / rusak maka itu akan membuat google sedikit melakukan tindakan pada blog kita. Salah satunya adalah Error 404 yang sering kita temui jika mendapati artikel yang memiliki error url . Tapi cara masalah ini bisa diatas dengan mengarahkan link yang error ke homepage blog kita.

1. Langsung anda ke bagian Setelan (Setting)

2. Kemudian klik Seacrh Preference (Preferensi Penelusuran)

3. Klik Edit seperti gambar di bawah ini

4. Masukan kode ini di dalamnya

<script type="text/JavaScript">
location.replace('http://www.bocahit.com/');
</script>

Ganti warna merah dengan URL blog anda. Simpan Perubahan.
Nah kita sudah selesai mengatur arahan ke blog kita, sekarang kita akan membenahi Crawl Error di Webmaster.

1. Masuk di https://www.google.com/webmasters/tools

2. Kemudian Klik Health - Pilih Crawl Errors

3. Lihat yang di kotak merah adalah crawl errors pada blog anda

4. Klik yang di kotak merah, kemudian akan seperti ini :

Cenatng semua kemudian klik MARK AS FIXED. Klik link, jika ingin melihat lebih detail.

Tinggal menunggu beberapa hari menunggu GoogleBot Visit ke blog kita.

Minggu, 17 Februari 2013

Aduh! Ketiban Award Bergilir

Aduh! Ketiban Award Bergilir | Aku lupa, ini award ke berapa ya...sekarang dapet award bergilir. Terima kasih, ya Mas Nazar sudah mengirim award ini, langsung aku jawab deh soalnya. Dan terima kasih nama saya (Wammy San) ada diurutan atas. ::Jadi Malu::

Warna Favorit | Biru Langit
Hewan Favorit | Hamster (baru baru aja)
Nomor Favorit | 69 (host posisition)
Minuman Favorit | Susu dari sumbernya
Twitter atau Facebook | Facebook
Passion | Ngeblog, Kuliah, Ngeband
Ngasih atau Dikasih Hadiah | Ngasih aja
Aktivitas Tubuh Favorit | Jari (SMS)
Hari Favorit dalam seminggu | Minggu
Bunga Favorit |Ga suka

Aku bingung mau diterusin kemana, pasti yang lain juga udah punya award ini, aku yang terakhir. Yau dah aku asih ke adik aja.

Megha's Blog

Udah aku jawab buat Award Sunshine sekarang...saya ucapkan terima kasih kepada Herman Bagus, saya ga tau kenapa nama saya (Wammy) ada di paling atas. ::Malu Deh::

Maaf, aku hanya meneruskan ke 1 orang saja, karena bingung siapa yang belum dapet ini.hehehe

Dunia Ega

Terima kasih atas partisipasinya ya teman :D Maaf tulisan ku singkat banget, ini keburu masuk kuliah. Daaaaaa

Selasa, 12 Februari 2013

Fakta Menarik Kamen Rider Wizard

Fakta Menarik Kamen Rider Wizard | Artikel yang beda dari artikel yang pernah aku tulis. Kamen Rider Wizard adalah pahalawan super jepang (Kamen Rider) yang menggunkan sihir untuk bertarung. Sihir yang digunakan seperti Air, Tanah, Api, Udara. Alat perubahan seperti alat Kamen Rider yang lainnya.Waktu aku nonton Kamen Rider terbaru ini....ada yang aneh sewaktu berubah (henshin).

Langsung aku kasih Screenshotnya :

Ehh lihat apa yang dia pegang ?mungkin ini adalah alasan utama kenapa Kamen Rider Wizard tak boleh tayang di Indonesia. Nantinya anak laki - laki akan menyuruh teman wanita seperti gambar diatas. Waduh semi porno, tapi membuat gemetar :D

Ini malah lebih jelas. Please Please!! Waw, kamen rider ini sedikit sensual dari pada yang pernah aku lihat.

Minggu, 10 Februari 2013

Blogger VS Wordpress

Blogger VS Wordpress | Kenapa saya membuat artikel ini? Hanya ingin menguji sejauh mana analisa saya terhadap Blogger dan Wordpress. Dimulai dari ini :

Dari Bagian Pembangun Website (Website Builder)
Blogger bisa dikatakan cloud provider yang bisa menjadikan pelanggannya berhak menjadi Administrator. Dengan kata lain mengatur semuanya tentang blog sampai ke bahasa pemrograman webnya. Relatif mudah dan sederhana, tetapi blogger tetap tidak bisa di fungsikan secara offline karena tidak termasuk kriteria Content Management System.

Kalau Wordpress, pengelolaannya bisa sedikit rumit tetapi penataan blognya sangat cepat dan mudah, wajar saja jika Wordpress banyak di gunkan oleh website bisnis, perkantoran, hotel, jasa penebangan. Selain itu Wordpress adalah salah satu jenis CMS yang sangat terkenal.

Dari Bagian Kepopuleran
Perhatikan Screenshot yang saya ambil baru saja :

Diatas adalah dari Wordpress dan selanjutnya Blogger :

Global Alexa Rank WP 22 dan Blogger hanya 44, selisih separuhnya. Rank in WP di Amerika 27, tapi kenapa Blogger ada di Rank in India?? itu saya belum paham. Lalu reputation Wordpress lebih kecil dari pada Blogger.

Dari Bagian Mata Search Engine

Kita sering melihat banyak domain.blogspot.com tapi kenapa Google suka dengan Wordpress?

Karena, worpress.com juga banyak digunakan atau memperbolehkan teknik-teknik SEO yang dilarang oleh Google, misalnya penggunaan STT2 maupun WP-ROBOT yang dengan mudah menempatkan domain wordpress.com di halaman depan google. WP ROBOT yang aku tahu, sebuah Plugin berbayar untuk wordpress yang berfungsi untuk mengambil artikel orang lain dan memasangkannya pada blog kita. tapi tidak semua hosting memperbolehkan plugin ini di aktifkan karena akan membuat Database jebol... di gabung dengan plugin2 lainnya seperti STT2...STT2 (SEO SearchTerms Tagging 2) merupakan plugin wordpress yang cukup banyak digunakan. Plugin ini merupakan buatan Manusia yang ada di Indonesia. Selayaknya memang kita memberikan reward atau donasi atas kerja keras pembuatnya, namun demikian STT2 (SEO SearchTerms Tagging 2) yang penggunanya sangat banyak mungkin sebagian besar orang luar Indonesia. Juga di blog saya doosky.com yang memakai CMS Wordpress menggunakan Easy SEO yang akan langsung terindex Mesing Pencari.

3 bagian tadi adalah fenomena Blogger dan Wordpress, saya menggunakan Blogger dan Wordpress jadi saya tidak berpihak ke siapa pun. hahaha

Kamis, 07 Februari 2013

Template Blogger Untuk Referensi Musik

Template Blogger Untuk Referensi Musik | Lama tak menulis artikel, hash akhirnya hari ini ada inspirasi. Nah, kemarin saya menulis tentang fitur HTML5, ternyata si Google juga menggunakan bahasa HTML5. Tapi template yang saya bagikan ini bukan menggunakan HTML5. Jadi ubah sendiri ke HTML5. :D

Demo

Template name : Replay

Platform: Blogger / Blogspot

Release date : October 2012

Author : www.soratemplates.com

Designer : www.themextemplates.com

Template features : Wordpress Look, 2 Columns, Right Sidebar, Music, Featured Content Slider, Fixed Width, Gray Background, Social Widget, Dropdown Menu, HTML5 Music Player, Page Navigation Widget.

Download

Untuk Mengatur Slide : Cari kode yang mirip di bawah ini.

<div class='ribbon-slide'>
 <ul>
  <li class='slide-400'><a href='#'>
 <img class='fullwidth' height='400' src='/image.jpg' width='400'/></a>
  </li>

Ganti warna merah dengan URL Artikel.

Ganti warna biru dengan URL Gambar.

Untuk Mengatur Menu Dropdown : Cari yang mirip dibawah ini.

<ul class='menu' id='menu-main-menu'>
 <li><a href='#'>News</a>
  <ul class='sub-menu'>
   <li><a href='#'>Ribbon Slider</a></li>
   <li><a href='#'>Fade Slider</a></li>

 Ganti tanda # dengan URL.

Untuk Mengatur Social Bookmarks : Cari yang mirip kode dibawah ini.

<a class='facebook' href='#' target='_blank' title='Facebook'/>    
<a class='tumblr' href='#' target='_blank' title='Tumblr'/> 
<a class='twitter' href='#' target='_blank' title='Twitter'/>

Ganti tanda # dengan URL.

Untuk Mengganti Musik : Cari yang mirip di bawah ini.

<div class='playlist'>
 <a href='/song1.mp3'>Song Title 1</a>
 <a href='/song2.mp3'>Song Title 2</a>
</div>

Wammy's Blog Rebirth

Wammy's Blog Rebirth | Kenapa judulnya Wammy's Blog Lahir Kembali? 5 hari sudah saya sedang dilanda kegalauan masalah cewek juga masalah blog ini, di tambah 2 client yang minta dibuatkan website membuat saya mengabaikan Wammy's Blog. Masalah blog ini adalah masa berlaku domainnya habis, awalnya ketika saya mencari di mana url http://www.bocahit.com/ di database Idwebhost belum ketemu juga. Sekarang dan besok akan kembali blogwalking dan tetap menulis walau dalam keadaan "sedih".

Sekali lagi mohon maaf jika selama kurang lebih 5 hari, Wammy's Blog dan saya - Wammy San tidak muncul di dunia perbloggingan, dan doakan masalah saya cepat beres.

Sincerly

Wammy