2 Template Pilihan Willy Maulana Blog Part III

Template INOVE

Demo   Download

Template Freeclassical Blogger

 Demo     Download

ws | Read More »

2 Template Pilhan Willy Maulana Blog Part II

White on Blur Blogger Template

Demo     Download

Template Details

Template Name	:	White on Blur Blogger Template
Platform Type	:	Blogger Blog
Author	:	IdBlogDesign
Designer	:	IdBlogDesign
Features	:	1 columns, 3 footer columns, search box, white and gray colors, personal blogs.
Width	:	Fixed Width

___________________________________________________________________

  Quick Pic

Demo    Download

Template Details

Template Name	:	Quick Pic
Platform Type	:	Blogger Blog
Author	:	BloggerThemes
Designer	:	Quick Online Tips
Features	:	1 column, perfect for photologs, minimalist and neutral colors.
Width	:	Fixed Width

Sekian Dari Willy Maulana Blog

Baca Juga! >> 2 Template Pilihan Willy Maulana Blog

ws | Read More »

2 Template Pilihan Willy Maulana Blog

Template Azalea

Demo    Unduh

Nama template: Azalea

Template jenis: 1 Sidebar, 2 Column, Diadaptasi dari WordPress, 4 Kolom footer, lebar tetap, Banner Header, Majalah, Sidebar Kanan, Sudut lengkung, Top Navigation Bar, Web 2.0, Putih

Tanggal rilis: 13 Desember 2010

Coder / Designer Nama (s): Lasantha Bandara / CamelGraph

Cara Pasang :
Download dulu dari Ziddu.
Extract file .zip menjadi folder.
Masuk ke Blogger sobat.
Lalu menuju "Rancangan".Centang "Expand Template Widget".
Pada Backup/Restore Template, pilihlah browse.
Ambil file "X5 Shadow" dan unggah.
Simpan.

_____________________________________________________________________________

Template FBTMaG All Version

Demo     Unduh

Nama template : FBTMaG All Version
Coder / Designer Nama (s): Otowbsite

Fiture :
[-] Tertanam Tombol Back to Top.
[-] Auto Read More.
[-] Sudah Tertanam Emoticon Kaskus Di Kotak Komentar.

Cara Pasang:

Download dulu dari Ziddu.
Extract file .rar menjadi folder.
Masuk ke Blogger sobat.
Lalu menuju "Rancangan".
Centang "Expand Template Widget"
Pada Backup/Restore Template, pilihlah browse.
Ambil file "Template FBTMaG All Version" dan unggah.
Jika ada Notice pilih "Pertahankan" dan selesai.

Sekian dari Willy Maulana Blog

Baca Juga >> Loricifera, Hewan yang Dapat Hidup Tanpa Oksigen 

ws | Read More »

jQuery MagicLine Navigasi

Menu ini gaya "geser" navigasi telah sekitar sementara waktu, saya hanya berpikir saya akan mengambil celah di melakukannya sendiri sebagai kesempatan datang baru-baru ini. Ternyata itu benar-benar pretty darn mudah. Saya menempatkan dua contoh bersama-sama untuk itu.

Ide
Idenya adalah untuk memiliki sorot dari beberapa jenis (latar belakang atau garis bawah) mengikuti Anda di sekitar saat Anda mengarahkan mouse ke link yang berbeda dalam navigasi. Ini akan terjadi dengan jQuery dan kemampuan animasi itu. Dengan demikian, "garis ajaib" hanya akan ditambahkan melalui JavaScript. Setelah ditambahkan ke dalam daftar dan ditata, karena Anda mengarahkan mouse ke link yang berbeda, itu angka posisi kiri dan lebar dan menjiwai untuk mencocokkan.

HTML
Khas daftar di sini .... Ini memiliki "kelompok" kelas karena itu akan menjadi sebuah baris horisontal dan perlu clearfix sehingga memiliki tinggi. ID adalah untuk JavaScript menargetkannya.

<div class="nav-wrap">
 <ul class="group" id="example-one">
    <li class="current_page_item"><a href="#">Home</a></li>
    <li><a href="#">Buy Tickets</a></li>
    <li><a href="#">Group Sales</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">The Show</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
 </ul>
</div>

Perhatikan nav-wrap div. Sekitarnya. Yang digunakan karena styling, bar pergi lebar layar penuh, tetapi navigasi ini berpusat di dalam. Ini centering membawa masalah ketika kita mulai JavaScript tersebut. CSS

CSS
Apakah elemen daftar inline ol 'dengan jangkar melayang kiri untuk mendapatkan horisontal daftar dan menghindari stairstepping. Garis sihir benar-benar diposisikan di bawah bar, sehingga tidak menyebabkan jitter (mouse di atas link, menjiwai atas, mouse sekarang pada baris sihir tidak link, menjiwai kembali, dll) Segala sesuatu yang lain adalah murni gaya.

.nav-wrap { margin: 50px auto;  background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; }
#example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; }
#example-one li { display: inline; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }

 jQuery JavaScript 

1. Ketika DOM siap ...  
2. Mengatur variabel termasuk kiri saat offset navigasi
3. Mengatur fungsi resize pada jendela untuk me-reset yang offset harus itu berubah (karena centering)
4. Tambahkan baris sihir untuk nav tersebut  
5. Mengatur posisi dan lebar garis ajaib untuk item halaman saat ini
6. Juga mengatur lebar asli dan posisi sebagai data, sehingga dapat digunakan untuk menghidupkan kembali
7. Di hover, menghitung lebar baru dan posisi kiri baru dan bernyawa itu
8. Di balik hover (keluar mouse), menghidupkan kembali ke aslinya 

$(function() {

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one");
    
    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");
    
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $("#example-one li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
});

isu
Opera aneh tentang hal itu. Itu membuat lebar asli dari garis ajaib lebar penuh nav bar dan mempersingkat itu dari tepat di melayang. Saya belum bisa mengetahuinya. Jika Anda melakukannya, mengagumkan, biarkan aku tahu aku akan update artikel ini dan demo.
alternatif Versi

Periksa link demo di bawah ini untuk versi alternatif yang menggunakan latar belakang bukan garis, dan warna menjiwai serta posisi dan lebar. Pada dasarnya sama, kecuali CSS yang sedikit berbeda dan menarik JavaScript warna item daftar baru dari atribut rel di HTML.

Warna animasi di jQuery memerlukan plugin warna. Saya hanya mengeluh tentang bagaimana tidak bekerja dengan warna RGBA, dan seseorang mengirimi saya sebuah patch yang melakukan, yang termasuk dalam download. Aku benar-benar minta maaf, tapi saya tidak ingat nama mereka! Bicaralah jika itu kau dan aku akan memperbarui dan kredit patch untuk Anda.
semua Hormat

Seperti biasa, merasa bebas untuk melakukan apapun yang Anda inginkan dengan itu. Sebaiknya, gunakan dalam proyek-proyek perusahaan dan mendapatkan gerobak uang tunai.

View Demo   Download Files

Baca Juga >> CARA MEMPERCEPAT LOADING BLOG

ws | Read More »

CARA MEMPERCEPAT LOADING BLOG

CARA MEMPERCEPAT LOADING BLOG - Ada berbagai cara untuk mempercepat loading blog salah satunya adalah pemilihan awal dari template blog yang digunakan. Dengan memilih template blog yang ringan dan mudah untuk diload maka dengan otomatis loading blog tersebut akan menjadi ringan. Ada juga beberapa faktor lain yang mempengaruhi lamanya loading sebuah page untuk lebih jelasnya ikuti penjelasan dibawah ini

mempercepat loading blog

CARA MEMPERCEPAT LOADING PAGE
1. Gunakan template yang simple dan ringan, tidak terlalu banyak mengandung gambar background yang harus diload kalo perlu yang pure 95% css design
2. Jangan memasang gambar header atau background yang ukurannya terlalu besar diharapkan ukurannya kurang dari 100kb
3. Hindari pemakaian widget yang tidak perlu yang justru akan menambah beban loading page
4. Gunakan auto readmore pada setiap postingan yang muncul dihalaman utama agar ukuran page tidak terlalu besar, bila ada gambarnya cari template yang disertai thumbnail
5. Jangan terlalu banyak memasang widget yang memerlukan javascript kalo pun perlu, pasang javascript yang berupa file .js karena file ini nantinya akan disimpan di cache browser loading akan terasa berat di awal tetapi untuk seterusnya akan lancar-lancar saja.

Demikian tutorial CARA MEMPERCEPAT LOADING BLOG semoga bisa bermanfaat bagi kecepatan loading website kamu.

ws | Read More »

Arti SEO Kalau Menurut Saya

Saya sebenarnya sudah cukup lama mempelajari tentang SEO dengan mencari artikel-artikel yang berkaitan tentang itu. Tapi sampai detik ini masih belum juga saya bisa meng-optimalisasikannya.

Kenapa bisa begitu ? Karena memang saya belum ngerti-ngerti juga…
Apa karena itu saya kurang perduli dengan SEO ?
Jujur, saya sedikit banyak tetap perduli dengan SEO, saya bahkan memasang pengaya ‘SEO toolbar’ pada peramban yang sering saya gunakan untuk memantau trafik.

Arti SEO Kalau Menurut Saya

Saya juga bingung mengartikannya apa itu SEO, tapi secara sederhananya bisa saya uraikan seperti ini :

“SEO atau Search Engine Optimization dalam bahasa saya artinya pengoptimalan kata kunci yang ada pada suatu halaman web agar dapat menempati posisi yang baik dalam suatu mesin pencari.”

Dalam mengoptimalkan kata kunci ini saya seperti berkejar-kerjaran dengan trafik agar posisi setiap postingan blog saya berada pada halaman pertama mesin pencarian (terutama google).

SEO? Penting Tetapi Bukan Yang TerpentingPendapat saya, SEO fungsi utamanya hanya untuk mengoptimalkan kata kunci yang ditangkap oleh mesin pencarian, tetapi ketika kata kunci tersebut nangkring di halaman pertama mesin pencarian, tidak otomatis postingan tersebut akan disukai oleh pembaca.
SEO hanya berusaha mengarahkan pembaca untuk mengunjungi postingan kita. Ketika postingan kita hanya berisi sampah yang tidak menarik, jangan harap mereka akan bersedia mengunjungi blog/situs kita dikemudian hari.

Kesimpulan

Jadi pada dasarnya saya memang perduli dengan SEO tapi tidak begitu menggebu, fokus saya saat ini adalah menulis suatu yang bermanfaat bagi saya dan bagi banyak orang.
Desain dan koding adalah parameter utama dalam blog ini, siapa yang senang akan dua hal tersebut mereka pasti akan sering mampir ke blog ini, seperti ilustrasi gambar dibawah ini.

Gambar di atas bisa Anda artikan sendiri-sendiri aja…he..he..he…

SEO sebenarnya merupakan dua mata pisau yang bisa bermanfaat untuk menajamkan kata kunci kita, tetapi juga dapat menusuk balik kita ketika kata kunci pilihan tersebut tidak sebanding dengan konten yang kita tawarkan. 

Jadi, pertajam dulu tulisan-tulisan kita, setelah itu baru berfikir SEO. Setuju ??

Sumber

ws | Read More »

CSS3 Count Pada Label Blogger

Gambar di samping menunjukan saat pernargetan hover yang akan memunculkan count(jumlah artikel pada label) dengan efek transition cubic-bezier. saya tidak ragu untuk menggunakan efek berbeda karena browser sekarang sudah banyak perkembangan dengan beberapa pendukung efek animasi.
pada dasarnya widget label blogger hampir sama seperti halnya pada widget menu navigation dengan menggunakan properti ul dan li.
berikut deretan HTML label dengan count label.

<ul>
   <li><a href="#">CSS</a><span>120 artikel</span></li>
   <li><a href="#">Javascript</a><span>150 artikel</span></li>
   <li><a href="#">HTML</a><span>200 artikel</span></li>
   <li><a href="#">Jquery</a><span>80 artikel</span></li>
   <li><a href="#">Tutorial</a><span>100 artikel</span></li>
</ul>

Namun jika kita menggunakan deretan tersebut pada widget tidak akan menghasilkan label secara otomatis. pada blogger sendiri widget sudah di sediakan dan kita bisa mengatur count label atau tanpa count label.
Terus seperti apa hasilnya jika tutorial tersebut jika di pasang pada blogger. lihat demonya di bawah.
Demo - Arahkan/targetkan mouse pada salah satu link label di bawah

CARA MEMASANG STYLE PADA WIDGET BLOGGER

Pastikan anda sudah memasang widget blogger.caranya :

Masuk dasbor kemudian pilih tata letal atau layout.

Tambah Gadegt pada bagian sidebar atau footer anda.

Setelah setelah itu anda akan di pelihatkan dengan beberapa widget  pilih widget label blogger dan tambahkan

Pengaturan pada widget label. centang pada text Tampilkan Jumlah Entri Per Label

Cara di atas jika pada template anda belum memasang widget Label Blogger

Kemudian simpan.

2. Masuk ke edit template atau edit HTML dan centang Expand Template Widget.
3. Cari id widget Label atau temukan barisan code mirip seperti ini .

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Perhatikan :
lihat pada bagian ini

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>

hapus semua pada bagian ini.

</b:includable>
</b:widget>

Tiap template id='Label1' akan berbeda cari yang kira-kira mirip seperti itu

4.Jika sudah di hapus lalu masukan code ini pada bagian yang di hapus tadi:

<b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
<ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'><data:label.count/> Artikel</span> </b:if> </b:if> </li> </b:loop> </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
  </div>

5. Lalu Masukan CSS berikut caranya cari code ]]</skin>. letakan css di atasnya.

.sidebar ul li {
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoiAJAQbsLG72vtS13t3yBjVhj0UGZ3gzAfJDeG49B_WtKe8nxaaNJpygOMHMaOC7ulTYXrI-Bgy-GuxUckmMJIpg4CyVnydew2Qt4T0SVW8aQH1Fu7E17M7C1eYwYDZBZi3_WZh8ut7uc/s1600/icon-new-window.png) no-repeat left center;
  list-style-type:none;
  margin:0 0 5px;
  padding-left:20px;
  transition:padding 0.26s ease;
  -moz-transition:padding 0.26s ease;
  -webkit-transition:padding 0.26s ease;
}
.sidebar ul li:hover {
  padding-left:23px;
}
.sidebar ul li:hover span.label-count {
  opacity:0.5;
  margin-left:10px;
}
span.label-count {
  background:#000;
  border-radius:0 10px 10px 0;
  -moz-border-radius:0 10px 10px 0;
  -webkit-border-radius:0 10px 10px 0;
  color:#FFF;
  height:auto;
  margin-left:50px;
  opacity:0;
  position:relative;
  text-align:center;
  width:auto;
  padding:2px 8px;
  transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
  -moz-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
  -webkit-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
}
span.label-count:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  right:100%;
  top:0;
  border-width:10px;
  border-style:solid;
  border-color:transparent black transparent transparent;
}

Terakhir Simpan template anda dan lihat hasilnya .
Faktor kesalahan
CSS diatas saya menggunakan class dengan class='sidebar' . mungkin pada template anda akan berbeda. jika anda memasangnya pada bagian footer. css yang perlu di rubah pada css bagian yang di garis bawahi berikut ini.

.sidebar ul li {
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoiAJAQbsLG72vtS13t3yBjVhj0UGZ3gzAfJDeG49B_WtKe8nxaaNJpygOMHMaOC7ulTYXrI-Bgy-GuxUckmMJIpg4CyVnydew2Qt4T0SVW8aQH1Fu7E17M7C1eYwYDZBZi3_WZh8ut7uc/s1600/icon-new-window.png) no-repeat left center;
  list-style-type:none;
  margin:0 0 5px;
  padding-left:20px;
  transition:padding 0.26s ease;
  -moz-transition:padding 0.26s ease;
  -webkit-transition:padding 0.26s ease;
}
.sidebar ul li:hover {
  padding-left:23px;
}
.sidebar ul li:hover span.label-count {
  opacity:0.5;
  margin-left:10px;
}

Banyak terjadi kesalahan adalah karena perbedaan id atau class pada CSS. jadi perhatikan dulu widget Label di taruh di sebelah mana .
Jika anda mengalami kesulitan. silahkan ajukan pertanyaan dengan benar dan jelas. agar jawabannya pun jelas
mulailah berdiskusi.

ws | Read More »

Membuat Efek Link Nudging Dengan Kode CSS

Membuat Efek Link Nudging Dengan Kode CSS - Hallo sobat Willy Maulana Blog Kali ini saya memposting tentang Membuat Efek Link Nudging Dengan Kode CSS.langsung aja ke TKP
jika anda ingin menambah efek pada posting atau widget. Efek link nudging adalah efek yang membuat objek bergeser ketika mouse over (cursor diatasnya). Efek ini bisa diterapkan di gambar ataupun tulisan. Ada juga yang menerapkan efek ini pada label (biasanya daftar label yang vertikal). Link nudging yang kita buat ini tidak membuat blog anda menjadi berat jadi tidak usah kuatir dengan loading blog anda. Bagaimana menurut anda, jika tertarik untuk membuatnya langsung saja ikuti trik yang satu ini:

1. Masuk ke Rancangan --> Edit HTML
2. Tambahkan kode berikut diatas kode ]]></b:skin>

/*--- Link Nudging Effect ---*/
.nudge {
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.nudge:hover {
margin-left: 25px;
padding-left: 5px;
}

3. Simpan template anda
4. Untuk menambahkan link nudging pada postingan tambahkan kode berikut ini:

Link Nudging pada Text

<a href="Disini letakkan URL" class="nudge">Disini tambahkan teks</a>

Link Nudging pada Gambar

<img src="Link image letakkan disini" border="0" alt="Deskripsi image letakkan disini" class="nudge"/>

Keterangan:
- Ganti kalimat "Disini letakkan URL" dengan link anda
- Ganti kalimat "Disini letakkan teks" dengan teks yang ingin ditampilkan

ws | Read More »