Cara Membuat Postingan Dua Kolom

Cara Membuat Postingan Dua Kolom - Masih tentang  dua kolom kali ini saya terinspirasi dari teman saya Ady Blink yang kemaren berkomentar di posting Cara Membuat Posting Dua Kolom yang katanya juga pernah melihat tutorial yang seperti ini namun pada posting artikelnya.
Nah dari situlah saya terinspirasi dari pada ngak posting lebih baik posting walaupun sederhana karena saya pernah gagal dalam membuat posting yaitu Meta Tag Seo Friendly yahh beginilah kalau memposting artikel yang sangat simpel dan pasaran.
Tutorial Postingan Dua Kolom ini semoga ngak seterpuruk tutorial diatas walaupun tutorial ini biasanya digunakan oleh para Master Blogazine.

Cara ini merupakan cara manual karena jika kita menggunakan yang otomatis maka akan berakibat pada semua artikel dan saya rekomendasikan untuk memakai yang ini saja, tapi terserah lah anda mau memakai yang mana.
Disini kita bisa lihat contohnya pada tulisan ini dimana saya menggunakan yang manual dan cara kerjanya yaitu membagi tulisan dengan sama rata dan bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla. 

Capek juga nulisnya yaudah nih tutorial siap anda comot, copy saja kode dibawah ini lalu di pastekan ke postingan milih yang Edit HTML jangan yang Compose lalu setelah di pastekan di Edit HTML kita mau pindah ke Compose sudah ngak apa-apa.
<style type="text/css">
#twocolom{-moz-column-count:2;-moz-column-gap: 2em;-webkit-column-count: 2;-webkit-column-gap: 2em;} 
</style>
<div id="twocolom">LETAKKAN POSTINGAN DISINI</div>
Dengan kode diatas sepanjang apapun tulisan kita maka tulisan tersebut tinggi lebarnya akan terbagi rata menjadi dua, bagus kan hehe cukup sekian saja dari saya.

Cara Membuat Posting Dua Kolom

Cara Membuat Posting Dua Kolom - Yeahhh liburan sekolah hehehe akhirnya bisa luangin waktu juga untuk membuat postingan setelah beberapa hari yang agak nyandat karena sibuk, dan kali ini saya akan menghadirkan tutorial dari Kang Taufik Nurrrohman yaitu Cara Membuat Posting Dua Kolom, mengapa judul artikel ini saya agak samakan karena saya mau mencoba SEO dari pada blog ini yah itung itung untuk mengadu seberapa SEO-kah blog ini.

Kelebihan
? Dapat memuat postingan lebih banyak dalam home page
Membuat tampilan blog lebih rame
Serta memudahkan pencarian karena sudah tampil pada home page

Kekurangan
Lambatnya loding blog jika thumbnail pada read more terlalu besar
Ketidakrataan deskripsi blog
Lainnya cari sendiri...

Penerapannya
Salin semua kode dibawah ini diatas kode </head>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .post-outer {
      width:50%;
      height:240px; /* Sesuaikan tingginya sesuka hati */
      float:left;
    }
    /* Clear CSS Float */
    #blog-pager,
    h2.date-header {
      clear:both !important;
    }
    </style>
</b:if>
</b:if>
Kemudian klik Simpan Template.

Notice
Ada tambahan nih kata Kang Taufik Nurrohman 
Beberapa elemen pembungkus posting juga terkadang memiliki kelas yang berbeda. Misalnya .wrapfullpost. Jadi jangan terlalu tergantung dengan kode di atas. Sebagai contoh, jika ternyata elemen luar posting pada template Anda berupa elemen <div class='wrapfullpost'>, maka Anda harus mengubah nama kelasnya menjadi seperti ini:
.wrapfullpost {
  width:50%;
  height:240px; /* Sesuaikan tingginya sesuka hati */
  float:left;
}
Nah cukup itu saja yang dapat saya share hari ini untuk Kang Taufik Nurrohman trimakasih banyak, semoga artikel ini bermanfaat selamat mencoba dan semoga berhasil :)

Teknik SEO Paling Ampuh

Teknik SEO ala Tutorial Blogspot - Pada judul diatas bisa kita baca bahwa saya akan menerangkan teknik SEO yang saya ketahui, yups selama ini saya menggunakan teknik ini untuk berusaha mencapai hasil yang maksimal tapi taukah teknik yang saya pakai ini adalah Teknik SEO ala EASY WP SEO, ya punyanya Wordpress tapi biarlah lha hasilnya sudah ada kok coba saja cari di pencarian google dengan keyword  kemudian cari dan hasilnya ada di 10 besar.
SEO
Sedikit ulasan saja bahwa trik ini merupakan bocoran yang telah lama terungkap kira-kitra pada bulan Februari kemaren namun masih tetap saya gunakan walau tidak semuanya saya terapkan, nah untuk penerapannya bisa lihat penjelasan dibawah ini.

Judul Posting
1. Judul postingan mengandung keyword
2. Setidaknya judul diawali dengan keyword
3. Judul minimal mengandung 3 kata
4. Judul maksimal mengandung 66 karakter
URL/Permalink
1. URL permalink mengandung keyword
2. Meta description mengandung keyword
3. Meta description diawali dengan keyword
4. Maksimal meta description 160 karakter

Isi Konten
1. Isi postingan setidaknya minimal 300 kata
2. Postingan setidaknya memiliki keyword antara 2.5%-5.5%
3. Paragraph pertama terdiri dari 50-100 kata dan mengandung keyword
4. Postingan setidaknya memiliki sebuah gambar dengan keyword sebagai ALTnya
5. Setidaknya terdapat satu keyword yang deberi style bold (B)
6. Setidaknya terdapat satu keyword yang deberi style italic (I)
7. Setidaknya terdapat satu keyword yang deberi style underline (U)
8. Terdapat keyword yang dijadikan sebuah anchor text yang berisi external link
9. Terdapat keyword yang dijadikan sebuah anchor text yang berisi internal link

Sudah cukup segitu saja yak, konten yang berkualitas, insyaAlloh bisa nangkring diPejwan, jangan lupa kasih  backlink biar tampah powerful :D Semoga bermanfaat :D

Cara Membuat Permalink Blog

Cara Membuat Permalink - Kode Permalink Blogspot - Apa itu Permalink? Permalink merupakan singkatan dari Permanent Link yaitu url atau link daripada url posting itu sendiri secara lengkapnya permalink adalah gabungan dari URL/link dan struktur kalimat yang terpotong dengan tanda slash (/) dan dash (-) tersebut merupakan URL spesifik sebuah content/posting blog yang disebut permalink. Permalink merupakan suatu susunan unik yang selalu berbeda dengan permalink lainnya meski dalam satu URL, dan jika sebuah permalink telah publish maka dia tidak bisa diganti (edit) lagi, sesuai dengan namanya permalink yang berarti permanent link. dikutip dari [hakimtea.com].

Sebenarnya contoh permalik itu sendiri simpel cuma url seperti ini:
http://syafdillah-blog.blogspot.com/2013/07/cara-membuat-table-sederhana.html
namun jika struktur yang akan kita tempelkan pada blog sesimpel itu akan terlihat kurang bagus makadari itu saya coba rancang sendiri paduan antara permalink dengan share button agar terlihat bagus (lihat gambar diatas).
Kegunaan permalink disamping untuk meningkatkan seo on page juga agar para copazer bisa diingatkan lewat pesan tersebut untuk menyertakan link yang akan dicopasnya.

Cara Membuatnya:
Letakkan kode CSS dibawah ini diatas ]]></b:skin>
/* Permalink
----------------------------------------------- */
.buatpermalinkblogger{
  border: 1px solid #E4E4E4;
  padding: 5px;
  background: #F4F4F4;-moz-border-radius:5px;
}

.buatpermalinkblogger a{
  background:none;
}

img.float-right {
  margin: 5px 0px 0 10px;
}

img.float-left {
  margin: 5px 10px 0 0px;
}

Kemudian Tambahkan scrip ini dibawah kode <data:post.body/> yang kedua
<div class='buatpermalinkblogger'>
<center><small>Semoga artikel tentang <u><b><a expr:href='data:post.url'><data:post.title/></a></b></u> bermanfaat untuk anda dan jika ingin mencopy artikel ini mohon untuk meletakkan link dibawah ini sebagai sumbernya.
<br/><strong><data:post.url/></strong><br/>
</small></center>
<textarea cols='65' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>
<a expr:href='data:post.url'><data:blog.pageName/></a></textarea>

<!-- Facebook Button BEGIN -->
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>
<!-- Twitter Button END -->

<!-- Twitter Button BEGIN -->
<a class='twitter-share-button' data-via='koderator' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
<!-- Twitter Button END -->

<!-- Google+ Button BEGIN -->
<g:plusone annotation='inline' size='medium'/>
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!-- Google+ Button END -->
</div>

Biasanya script diatas akan terhimpit antara kode <data:post.body/> dengan </b:if> jika blog kita sudah mempunyai Read More, dan untuk hasil lebih jelasnya bisa dilihat dibawah ini.
Bila ada yang kebingungan tentang tutorial ini dan belum berhasil untuk menerapkan diblognya silahkan bisa ditanyakan lewat komentar, terimakasih :D.

Membuat Cloud Animasi Dengan CSS3

Membuat Cloud Animasi Dengan CSS3 - Animasi dengan CSS - Bagi anda yang suka mendesig blog atau semacamnya mungkin trik ini bisa anda coba, disini saya akan coba share tutorial tentang Animasi CSS3 yang agak rumit namun saya coba ulas dengan semudah mungkin, jika sebelumnya kita sudah bahas tentang basic dari blogger misal tentang Cara Membuat Permalink, Read More, Breadcrumbs, dan Related Post maka kita akan beranjak ke yang lebih "WEW" katakanlah, bukan bermaksud untuk copas tapi karena saya sudah baca aturan di blog itu maka saya tidak akan melanggar peraturannya saya mengambil tutorial ini dari blog tetangga tidak maling tentunya judul artikelnyapun saya buat sama dan sobat bisa menemukan tutorial aslinya di http://djogzs.blogspot.com jika sulit untuk memahami tutorial yang saya buat ini.

Membuat Cloud Animasi Dengan CSS3

Sebelum menuju ke tutorial lebih baik backup terlebih dahulu template Anda, gunanya untuk berjaga-jaga apabila ada kesalahan dalam penerapan tutorial ini.
Disini ada 2 Style Cloud yaitu awan putih biasa dan yang kedua awan akatsuki, bagi yang ngefans sama naruto mungkin alternatif yang kedua bisa jadi pilihan. Maaf kalo demonya tidak bagus karena template ini kurang suport.

Penerapannya letakkan kode CSS diatas ]]></b:skin> dan HTML dibawah kode <body>

1. Style Awan Putih

CSS
#awan1 {position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.awan1 {
width: 200px; height: 60px;
background: #ffffff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.awan1:before, .awan1:after {
content: '';
position: absolute;
background: #ffffff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.awan1:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.putih1 {
-webkit-animation: moveclouds1 15s linear infinite;
-moz-animation: moveclouds1 15s linear infinite;
-o-animation: moveclouds1 15s linear infinite;
}
.putih2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds1 25s linear infinite;
-moz-animation: moveclouds1 25s linear infinite;
-o-animation: moveclouds1 25s linear infinite;
}
.putih3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
.putih4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds1 18s linear infinite;
-moz-animation: moveclouds1 18s linear infinite;
-o-animation: moveclouds1 18s linear infinite;
}
.putih5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
@-webkit-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}

HTML
<div id='awan1'>
<div class='awan1 putih1'/>
<div class='awan1 putih2'/>
<div class='awan1 putih3'/>
<div class='awan1 putih4'/>
<div class='awan1 putih5'/></div>

2. Style Awan Akatsuki

CSS
#akatsuki{position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.akatsuki {
width: 200px; height: 138px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsDC2-X6KLRSd4UBhKBn47oGqnH1MWFvoymixYfTuIIZhM1Y4XKqsXkNfpLm8XddezTbOknXUt8xMoqF-XEXAmpA0z_F4Zd54eKBNy5Cv053Nd9Gc0FvEo926CPB3tGWe71l3AR4prVz8/s1600/Untitled-1.png") no-repeat top center;
position: relative;
}

.awanmerah1 {
-webkit-animation: moveclouds2 15s linear infinite;
-moz-animation: moveclouds2 15s linear infinite;
-o-animation: moveclouds2 15s linear infinite;
}
.awanmerah2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds2 25s linear infinite;
-moz-animation: moveclouds2 25s linear infinite;
-o-animation: moveclouds2 25s linear infinite;
}
.awanmerah3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
.awanmerah4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds2 18s linear infinite;
-moz-animation: moveclouds2 18s linear infinite;
-o-animation: moveclouds2 18s linear infinite;
}
.awanmerah5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
@-webkit-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}

HTML
<div id='akatsuki'>
<div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>
Jika misal ada yang error dan template meminta untuk menambahkan kode </div> maka tambahkanlah 5 kode </div> dibawah HTML

Jangan lupa mampir kesini yak :D

Cara Membuat Tombol dengan CSS

Cara Membuat Tombol dengan CSS - Tombol CSS - CSS Button. Alhamdulillah bisa posting terus, kali ini akan posting tentang design, seputar css lagi tentunya, dengan CSS kita bisa membuat hal hal yang unik, kalau kita kreatif. Misalnya saja seperti tombol dibawah ini, atau biasanya kita sering menemui website-website yang menggunakan tombol dari CSS saat kita mengklik Register ataupun Logout pada sebuah website. Tombol-tombol seperti itu biasanya dibuat dengan menggunakan CSS. Oke deh langsung saja :

Cara Membuat Tombol dengan CSS
Berikut scriptnya:

CSS
tempatkan kode ini diatas kode ]]></b:skin>

.button {
  cursor:pointer;
  background:#328EC5;
  background:-webkit-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-moz-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-ms-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-o-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  padding:0.75em 1.5em;
  font:normal 1em Calibri,Arial,Sans-Serif;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  text-shadow:0px -1px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -webkit-border-radius:0.7em;
  -moz-border-radius:0.7em;
  border-radius:0.7em;
  border:none;
}

.button:hover {
  background:#399BD6;
  background:-webkit-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-moz-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-ms-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-o-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
}

.button:active {
  background:-webkit-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-moz-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-ms-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-o-linear-gradient(bottom, #88CEF7, #399BD6);
  background:linear-gradient(bottom, #88CEF7, #399BD6);
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}


HTML / Kode pemanggil tombol
<a class="button" href="#">Get Started</a>



DEMO







Cara Menampilkan Widget Hanya Pada Homepage atau Postingan Saja

Cara Menampilkan Widget Hanya Pada Homepage atau Postingan Saja - Widget diHomePage saja - Widget diPostingan saja - Berkereasi dan menampilkan blog sebagus mungkin mungkin itulah yang dicapai oleh sebagian blogger, dan untuk mendukung mewujutkan hal itu saya coba share sedikit tutorial tentang Menampilkan Widget Hanya Pada Homepage atau Postingan Saja, kegunaannya cukup membantu karena untuk meminimalisir widget kita yang terlalu kebanyakan muncul di home page.
Demo


Pada halaman demo bisa kita lihat bahwa Blog Archive hanya ada pada home page saja dan pada halaman post tidak terlihat. jika ingin menggunakan tutorial ini berikut cara-caranya

Menampilkan Widget Hanya pada Homepage Saja
<b:if cond='data:blog.url == data:blog.homepageUrl'>content widget
</b:if>

Menampilkan Widget Hanya pada Postingan Saja
<b:if cond='data:blog.pageType == &quot;item&quot;'>
content widget
</b:if>

untuk penerapannya cari widget dengan judul yang ingin di tampilkan/hilangkan
misal ingin mencari widget Statistik maka kita cari nama tersebut
<b:widget id='HTML3' locked='false' title='Statistik' type='HTML'>
setelah ketemu lalu letakkan seperti pada contoh dibawah ini (lihat kode berwarna biru)

<b:widget id='HTML3' locked='false' title='Statistik' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Membuat Animasi Tombol dengan CSS

Cara Membuat Animasi Tombol dengan CSS - Postingan ini mengambil refrensi dari blognya Om Johanes. button ini memang rancangan dari pemilik blog tersebut dan saya ngeshare disini tidak asal copas namun minta ijin dulu dll, taatilah peraturan jika anda ingin di taati, loh ??. Intinya keren banget dah.

animasi css


Demo


Notice dari pemiliknya tentang tutorial ini, silahkan dibaca.

Tampilan terbaik dapat dirasakan dengan browser Goggle chrome karena 100% mendukung css3 animasi.sedangkan untuk Mozilla firefox tidak.akibat'a kalau dibuka dengan Mozilla,mungkin akan terasa berat dan animasinya agak ngadet",jadi pikir" dahulu untuk menggunakan trik ini.so,yang mau coba" belajar css3 keyframe,silakan dicoba"~xD 

Disini saya share 3 Button sekaligus untuk meringkas postingan hari ini yang sudah mencapai 2, silahkan dilihat demonya dibawah ini

Penerapannya letakkan CSS diatas ]]></b:skin>
HTML merupakan kode pemanggilnya

Style 1
CSS
.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;
}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}  

HTML
<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a expr:href='#'>DEMO</a>
</div></div>




Style 2
CSS

.circlebg {
width: 53px;
height: 53px;
position: relative;
border-radius: 50px;
-moz-animation: spin3Pulse 3s infinite ease-in-out;
-webkit-animation: spin3Pulse 3s infinite linear;
}

.circlewrapper2 {
width: 53px;
height: 53px;
text-align: center;
border-radius: 50px;
border: 3px solid rgba(0, 0, 0, 0.9);
padding: 8px;
background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
}

.circlewrapper3 {float:right;}

.circlewrapper3 a {
width: 78px;
height: 78px;
float: right;
font-size: 14px;
text-align: center;
border-radius: 50px;
text-shadow: 0 1px 1px black;
margin-top: -50px;
position: absolute;
line-height: 20px;
}

.circle4 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}


.circle5 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -51.5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
}

.circle6 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -103.5px;
}

.circle7 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -155px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
}


@-moz-keyframes spin3Pulse {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);}
}
@-webkit-keyframes spin3Pulse {
0% { -webkit-transform:rotate(360deg);}
100% { -webkit-transform:rotate(0deg); }
}


HTML

<div class="circlewrapper3">
<div class="circlewrapper2">
<div class="circlebg">
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
</div></div>
<a expr:href='#'>DEMO</a>
</div>




Style 3
CSS

.menureadmore1 {
clear: both;
margin:auto;
background: black;
font-size: 15px;
color: #32BDE8;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px solid 
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px 
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;}

.menureadmore1::before {
content: "";
position: absolute;
width: 125px;
margin: auto;
height: 125px;
border: 8px solid 
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px 
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -30px;
margin-left: -30px;
}

.animasimenureadmore1 {
position: absolute;
width: 105px;
margin: auto;
height: 105px;
border: 8px dotted rgba(50, 189, 232, 0.8 );
-webkit-box-shadow: 0 1px 4px 
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -100px;
margin-left: -20px;
-moz-animation:spin5Pulse 2s infinite linear;
-webkit-animation:spin5Pulse 2s infinite linear;
}

@-moz-keyframes spin5Pulse {
0% { -moz-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -moz-transform:rotate(-360deg); opacity:0;}
}
@-webkit-keyframes spin5Pulse {
0% { -webkit-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -webkit-transform:rotate(-360deg); opacity:0;}
}



HTML

<div class='menureadmore1'>
<a expr:href='#'>DEMO</a>
<div class='animasimenureadmore1'/>
</div>

Jangan lupa mampir kesini ya :D

Cara Membuat Efek Daun atau Salju Berguguran

Cara Membuat Efek Daun atau Salju Berguguran - Lepas dari tutorial CSS terlebih dahulu, sekarang kita coba untuk membuat suatu efek menarik dengan JavaScript, ada beberapa efek yang bisa kita tempelkan pada blog mulai dari salju ataupun daun, tapi sekarang saya menuju ke daun terlebih dahulu dan jika sobat ingin menggantinya cukup ubah link gambar dan ganti dengan gambar yang diinginkan sobat, sedikit dari gambar salju bisa dilihat disini . Saya mengambil tutor ini dari DTE:] heheh ijin share ya mas :D.



Demo


Letakkan dibawah  </b:template-skin>

<script type="text/javascript">
var snowsrc      = "http://2.bp.blogspot.com/-6yjsKoliL_Q/TwlTuQtV3WI/AAAAAAAAB6k/VyKxfGKFBpM/s1600/daun-kecil.png";  // Tentukan URL gambar daun/salju
var no           = 10;  // Tentukan jumlah daun/salju
var hidesnowtime = 0;  // Menentukan apakah daun/salju harus menghilang setelah x detik (0 = tidak pernah)
var snowdistance = "pageheight";  // Menentukan berapa banyak daun/salju yang harus jatuh sebelum akhirnya menghilang ("windowheight" atau "pageheight")
</script>
<script type="text/javascript" src="http://koderator.googlecode.com/files/daun.js"></script>

Jangan lupa mampir kesini :D

Advertisement