Tutorial Blogspot

Cara Membuat Postingan Dua Kolom

noreply@blogger.com (Anonymous) — Tue, 13 Aug 2013 02:19:00 -0700

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

noreply@blogger.com (Anonymous) — Tue, 13 Aug 2013 02:00:00 -0700

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 != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <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

noreply@blogger.com (Anonymous) — Mon, 12 Aug 2013 19:44:00 -0700

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.

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

noreply@blogger.com (Anonymous) — Sun, 11 Aug 2013 00:34:00 -0700

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>


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



<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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>



<g:plusone annotation='inline' size='medium'/>
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

</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

noreply@blogger.com (Anonymous) — Sat, 10 Aug 2013 20:15:00 -0700

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.

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

noreply@blogger.com (Anonymous) — Fri, 9 Aug 2013 07:11:00 -0700

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 :

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

Get Started

Cara Menampilkan Widget Hanya Pada Homepage atau Postingan Saja

noreply@blogger.com (Anonymous) — Thu, 8 Aug 2013 23:52:00 -0700

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 == "item"'>
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 != ""'>
<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

noreply@blogger.com (Anonymous) — Wed, 7 Aug 2013 09:00:00 -0700

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.

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

noreply@blogger.com (Anonymous) — Mon, 5 Aug 2013 07:36:00 -0700

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

Cara Membuat Slick Menu dengan CSS3

noreply@blogger.com (Anonymous) — Sun, 4 Aug 2013 09:00:00 -0700

Cara Membuat Slick Menu dengan CSS3 - Membuat Menu Bar, Membuat Navigasi, -Hampir menuju bulan puasa nih bahkan dalam hitungan hari lagi untuk itu sebelumnya saya mau mengucapkan Selamat Menunaikan Ibadah Puasa :D dan minta maaf lahir batin :D.

Dalam mengawali libur menjelang bulan ramadhan saya mau share tutorial menu navigasi Slick Menu dengan CSS3 dalam menu ini ada keistimewaan sendiri berupa hover biru yang menyerupai cahaya dalam penerapannya tidak terlalu sulit cukup tambahkan HTML pada add gadget HTML/javascript saja.

View Demo

Untuk kode CSS bisa diletakkan diatas ]]></skin> atau bisa juga menggunakan <style>CSS</style>

CSS

.wrapper {
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 2px solid #939393;
position: relative;
margin-bottom: 30px;
}

ul {
margin: 0;
padding: 0;
}

ul.menu {
height: 80px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
}

ul.menu li {
list-style: none;
float:left;
height: 79px;
text-align: center;
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 79px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}

ul li a:hover {
background: transparent none;
}

ul li.active a{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

HTML

<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li ><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</div>
</div>

Jangan lupa ya mampir kesini

Cara Membuat Animasi Window Browser

noreply@blogger.com (Anonymous) — Sat, 3 Aug 2013 18:02:00 -0700

Cara Membuat Animasi Window Browser - Langsung saja deh berikut adalah cara membuat animasi browser atau biasa disebut Animated Window Opener. Langsung saja deh cekibrot! {Aduh kebanyakan Langsung sja :p}

Animated Window Opener (klik untuk memperbesar)

View Demo

Animated Window Opener merupakan animasi yang berfungsi membuat link terbuka (Popup) dijendela baru secara pelahan dan sedikit demi sedikit dan akhirnya akan menutupi jendela utama.

Penerapan dalam blog kita bisa dilihat dibawah ini:

Javascript

<script type="text/javascript">

</script>
<div style="font-family: Mistral; text-align: center;">
<span style="font-size: 40px;"><a href="javascript:openwindow('http://serpihanduka.blogspot.com/2012/07/animated-window-opener.html')">Demo Page</a>
</span> </div>
<div style="font-family: Mistral; text-align: center;">
<span style="font-size: 40px;"><a href="javascript:openwindow('http://koderator.blogspot.com')">Koderator</a></span></div>

Keterangan

Script	Keterangan
setTimeout("go2()",10)	Cepat lambatnya popup/terbukanya tab baru
font-family: Mistral;	Jenis font, bisa diganti dengan Arial, Verdana, Helvetica dll
text-align: center;	Posisi teks berada ditengah, bisa diganti ataupun dihapus
javascript:openwindow('	Jendela baru, pilih link yang akan kamu buat menjadi open window
font-size: 40px	Ukuran font 40px

Cara Membuat Auto Zoom Image dengan CSS

noreply@blogger.com (Anonymous) — Fri, 2 Aug 2013 07:45:00 -0700

Cara Membuat Auto Zoom Image dengan CSS - Auto Zoom Image dengan CSS membuat gambar memperbesar secara otomatis ketika dilalui oleh crusor. Tutorial ini adalah tutorial yang sangat simpel. Oke langsung saja.

Previewnya dapat dilihat pada gambar diatas.

Penerapannya pada blog kita ataupun dalam postingan dapat dilihat dibawah ini:

CSS

.zoom img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}
.zoom img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}

Penerapannya:
Gunakan HTML dibawah ini untuk memanggil CSS diatas
HTML

<div class="zoom">
<img src="URL GAMBAR SOBAT" /></div>

Contoh

<div class="zoom">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRfvOjJ3s9Qf5pQHXELHpCuNM-0UVpGa6GnNCBOLAtHP0p-GasgIfC9mwTUuJStUg8X0u1_dxrP3S6Avr5l8VZ9U4KilTF6oKScutoO958o9Ssw24oEWgq9tBH33b6Hny6QuQUZ2O_-K4/s1600/flying+dutchman.png" /></div>

Jangan lupa mampir kesini

Cara Agar Blog Tidak Dicopas

noreply@blogger.com (Anonymous) — Thu, 1 Aug 2013 23:06:00 -0700

Cara Mematikan Tombol ctrl U, ctrl A, ctrl C Pada Blog - Cara agar blog tidak dicopas - Terinspirasi dari blogger yang pelit untuk membagikan artikelnya kepada orang lain yang ingin mencopas artikel tersebut, padahal bulan puasa gini enaknya berbagi walau setengah biji kurma. Seperti saya ini copas dari blog orang. :D

Untuk mengetahui apa yang mereka pasang di blog mereka mari kita lihat beberapa script berikut.

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

nah biasanya mereka merubah kode <body> menjadi seperti kode diatas.

Keterangan

Script	Keterangan
oncontextmenu=�return false;�	Mematikan klik kanan pada Mouse
onkeydown=�return false;�	Mematikan fungsi CTRL+A dan CTRL+U pada keyboard
onmousedown=�return false;�	Berfungsi untuk mematikan block select pada text/artikel
�return false;�	Untuk mengaktifkan script yang digunakan

Cara Membuat Auto Block Pada tag Code

noreply@blogger.com (Anonymous) — Wed, 31 Jul 2013 21:17:00 -0700

Cara Membuat Auto Block Pada tag Code - Berhubung masih hari raya idul fitri saya selaku admin blog ini mengucapkan minal aidin walfaizin mohon maaf lahir dan batin :).

Postingan awal lebaran saya buat yang agak simpel bahkan sangat simpel yaitu Auto Block Pada Tag Code biasanya setiap kode diselubungi oleh tag pre namun untuk setiap kode pendek biasanya cukup ditandai dengan <code>...script...</code>.

Pemasangan Auto Block Tag Code pada blog:
Masuk ke edit template kemudian tambahkan CSS dan letakkan diatas kode ]]></b:skin>

CSS
Css disini meliputi: font, background, border dll dan dapat divariasi sesuka hati

code {
font:normal 12px/14px Monaco,Monospace;
background:rgba(255,255,255,.4);;
border:1px solid #eee;
padding:1px;
cursor:default;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}

Javascript
Letakkan script dibawah ini diatas kode </head>

<script type='text/javascript'>
$(function() {
$('code').click(function() {
var refNode = $(this)[0];
if($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(refNode);
range.select();
} else if($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(refNode);
selection.removeAllRanges();
selection.addRange(range);
} else if($.browser.safari) {
var selection = window.getSelection();
selection.setBaseAndExtent(refNode, 0, refNode, 1);
}
});
});
</script>

Kemudian Simpan.

Penerapan pada posting
Tambahkan pada setiap kode pendek yang akan di block dengan script <code>...isi...</code>

Tutorial ini hanya untuk newbe semata jika ada mastah yang kurang berkenan mohon maaf, karena saya disini masih belajar :D

Sumber refrensi: Taufik Nurrahman dan jangan lupa mampir kesini

Kumpulan CSS3 Generator

noreply@blogger.com (Anonymous) — Tue, 30 Jul 2013 09:15:00 -0700

Kumpulan CSS3 Generator - Terinspirasi dari membuat template yang masih saya kerjakan lalu saya coba cari tools untuk mempermudah membuat template dan sampailah pada link-link berikut, disini kita bisa membuat kerangka template ataupun membuat tombol (button) dengan CSS3 Generator tersebut dan lain-lain lah.

Semua link dibawah ini adalah hasil yang udah saya cari mulai dari google sampai gara-gara nyasar di blog tetangga, berikut link-link yang sudah saya temukan cekidot:

http://csslayoutgenerator.com/
http://www.webtutorialplus.com/css3-generator.aspx
http://css3generator.com/
http://cssload.net/
http://www.joelambert.co.uk/morf/
http://westciv.com/tools/boxshadows/index.html
http://www.3dcsstext.com/
http://www.csstextwrap.com/
http://www.wordpressthemeshock.com/css-drop-shadow/
http://csswarp.eleqtriq.com/
http://border-radius.com/
http://codefuture.co.uk/css/css3-Transform.php
http://www.imgtocss.com/
http://css3button.net/
http://www.css3shapes.com/
http://www.text-image.com/
http://cssarrowplease.com/
http://cssround.com/
http://www.css3d.net/ribbon-generator/
http://css3please.com/
http://csscorners.com/
http://css3.mikeplate.com/
http://www.css3.me/
http://css3clickchart.com/
http://layerstyles.org/builder.html

Mungkin segitu saja, cuma sekedar share saja sih daripada kadaluarsa di notepad saya hehe, mungkin ada mastah yang mau nambahin silahkan :D
Jangan lupa mampir kesini

Cara Membuat Burung Twitter di Blogspot

noreply@blogger.com (Anonymous) — Mon, 29 Jul 2013 12:51:00 -0700

Cara Membuat Widget Burung Twitter di Blogspot - Iseng-iseng daripada tidak posting sama sekali, maklum blogger pemula yang bisanya cuma jiplak sana-sini, ngikut sana-ngikut sini, dan copas sana-copas sini, eh... kalo copas ndak lah.

Ok kita persingkat saja tutorial yang sangat mendasar dan mudah ini, mungkin dimata para master blogging hal ini cuma sebatas postingan yang tidak terlalu berguna karena selera mereka pasti sudah lebih elegan dan lebih menantang seperti Blogazine dll.

Twitter. Image by Spoon Graphics

Twitter merupakan salah satu jejaring sosial yang populer saat ini, dan sebenarnya masih ada beberapa lagi seperti Facebook dan Google +. Tidak hanya untuk mempunyai banyak Followers, Twitter juga bisa digunakan untuk sarana menambah reader lho, karena Twitter sangat banyak penggunanya seperti jejaring sosial yang lain maka hal tersebut sangat memungkinkan untuk digunakan untuk berbagi informasi.

Karena diatas sudah kita singgung untuk mempersingkat tutorial ini maka kita langsung saja menuju tahap-tahapannya

Klik Layout > Add Gadget > Html/Javascript
Tambahkan kode dibawah ini

<script type="text/javascript" src="https://koderator.googlecode.com/files/twitter.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClQxWyrsYkcsKHIjkG20BoJcQxc4PEaqnKEWb88H0k2OrbGRm7qBbttoqdh5xcdnqDLfL_ps_ZxiX6RkVFjwt8m69RJgaLw8Ht-TfLMjqitScIQUUlRAKeXWoXLCKX5XYz3DHC5UgR7w/s1600/burung+twitter+terbang.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/koderator"; var tweetThisText = "Twitter - UserID http://koderator.blogspot.com/"; tripleflapInit(); </script>

Rubah kode yang diblok biru dengan username twittermu dan kode yang diblok merah dengan model burung yang kamu sukai
Simpan dan kemudian lihat hasilnya

Pilihan Model Warna Burung Twitter

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEdymrGVDKr_EUuDY3ijxJXvvFWX-ezD-DIGeAQ3mqRgPu9JGbOOiqjwQzAJIT9iS6DoXMJHcIefgUHzQOrpLVBGVddXJa0EGcDL9wTuR0xJllzrwhvSz0m-8yyi8Z7dCgVjN135NJVJ4/s1600/yellow+bird.png

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Fut0trn_dT7t0_rq94iUyQM7tD8-brwMD_bkgO4bp1UzR6CKHveBG0Ti84M4mLHGAqAdIgWdB63c399orrB9oKTGOI1sfr_rXJlC9Yhhx2rI_xKgdVe2enaPg5rvUav4o7YzRF3SPnU/s1600/black+bird.png

Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwvl6Q1m4YzDOs49L8rZCXKSwuXZdIknc7CTfmnYTjvSHnBafkbp2FwO_81T4eushWYsGtgEsmXTgimTe-Vo4VHfMuyYWdOoXwSbCWkGs1jRiT6iuUiqCSfpgP2ZFbVbdgfYHfoK4hzkk/s1600/Blue+bird.png

Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoG5dbq4OJTud-D55x_Ojlob4JKjddPgkwM-ZCw-BhKHPRAFIaiSYQPBIhTYpb0lHs86nxwpMuvXNCZZw35FWPjhcZ07stGdKZYvDnzn0pvSBRAqzKskwEs_sxpoVGayOUM2kT2bQ1pzI/s1600/brown+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1QsgFwt5wMMp720fePCW85_pHZQ1nD6BxD8kxcOwfrPB0E-JayOFtEtdP2SG_OK2N_aSE8vJQyxFxJw7ZpmfQvNKCHqpg1uYBUqgIQDCWtIqPjJQwwhoHinLfw-_rWW8LTCHKN-APi_Q/s1600/Green+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcCpetnnSHzDQXDGu8tgpvRsvN9H3YHoIy2Vs2Ev-LU8Ct83RB_8DaP6lesJuFZ4sPhcS2qufC6djwBiCQVMaR9q_H30k4By8YkR6NQCLBwhUARvm8vKNlUbg_lD2X3EcUJSf40VkKEs/s1600/purple+bird.png

Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE2sfTOL3aupJls5ibMdsoCyfAipRkaDtXqxFHZOiMPBTpDhffmWbFeY_t2QxxYnJ4nC45Aes1zy-gaWBcY0xk9p2LpryYXfWlyiUUy5TB6X90zZSlXbG4uXkdrL_IIhJCDI-us1Y9HXU/s1600/white+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0H2W4nwZUUr2Mk_OO9V3O53U_kL5xkagddc7bXuKVgJJdtzVrQvdZTruzuoeK5tqT1zUgAJWkNFV2PEiMDwENGQWqPmE9c6rTc1tq0hRHdrfW01RZgeNXq6pw9J_k7Y9SQ6j9Zl111FY/s1600/red+bird.png

Selamat Mencoba.
Jangan lupa mampir kesini

Vintage Style Social Bookmark Icon

noreply@blogger.com (Anonymous) — Sat, 27 Jul 2013 12:11:00 -0700

Vintage Style Social Bookmark Icon - Mengikuti arus globalisasi tidak harus menampilkan hal-hal yang moderen begitu juga dengan blog. Blog boleh terdepan namun tampilan jadul sah-sah saja, kali ini saya akan berbagi tentang Vintage Style Social Bookmark Icon. Social Bookmark kali ini berbeda dengan yang lain kenapa? karena model dari Social Bookmark ini bernuansa antik dan kalau dilihat-lihat bentuknya kayak perangko. Postingan kali ini saya mengambil refrensi dari spiceupyourblog, tidak sabar ingin lihat bagaimana bentuknya? klik disini untuk lihat demonya, atau bisa lihat penampakkannya dibawah ini.

Demo

Langkah-langkah memasangnya dalam blog anda, anda harus mengikuti tahap-tahap berikut ini:

Langkah 1
Login ke Blogger
Masuk ke "Tata Letak - Elemen Laman"
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Langkah 2
Masukan (copypaste) kode dibawah ini pada bagian kolom:

#0b5394 <style>

a:hover {background-color: transparent;opacity:0.7;}

</style>

Untuk yang saya blog merah ganti dengan url jejaring sosial dan feedburner anda dan yang terakhir klik save.
Semoga bermanfaat selamat mencoba semoga berhasil.

Cara Membuat Table Sederhana Menggunakan CSS

noreply@blogger.com (Anonymous) — Sun, 7 Jul 2013 06:45:00 -0700

Biasa menyelesaikan pekerjaan menggunakan Microsoft Office Exel? Mungkin yang biasa menggunakan OS Windows ataupun XP pasti tidak asing dengan software office tersebut dan tidak asing pula dengan yang namanya kotak kotak, ya kan? pasti iya. Tadi kita telah membahas CSS3 Animasi Button nah sekarang kita kembali ke tutorial Basic terlebih dahulu yah yang mudah-mudah aja, tutorial kali ini akan membahas tentang Table.

Demo

What is the Table? Table yaitu suatu molekul-molekul atom yang bersatu karena kesalahan genetik dan membentuk sudut siku-siku (90 derajat / suatu sudut yang dibangun oleh perputaran sebesar seperempat lingkaran) yang notabenya sudut adalah suatu besaran yang dibangun oleh sinar yang diputar dengan pusat perputaran suatu titik tertentu dari suatu posisi awal ke suatu posisi terminal, terminal sendiri bagi suatu OS dalam sebuah komputer seperti Linux bisa diuraikan bahwa terminal merupakan media yang sangat penting atau bisa disebut juga vital dan dari semua uraian tersebut bisa kita fahami bahwa Table itu adalah media yang sangat vital. ???

Cara Membuat Table Sederhana Menggunakan CSS - Cara Membuat Table HTML -Setelah kita berbincang-bincang cukup singkat pada topik diatas mari kita sudahi saja dan berpindah ke tutorial, mari simak cara-caranya dibawah ini dan untuk kode CSS letakkan diatas ]]></b:skin>

CSS

/* Table
----------------------------------------------- */
table[border="1"]{
border-collapse:collapse;margin:0px
}
table[border="1"],table[border="1"] th,table[border="1"] td{
border:1px solid #bbb;padding:2px 7px
}
td{
vertical-align:top
}
table[border="1"] th{
background-color:#fafafa;font-weight:700;text-align:left
}
.full,table.full{
width:98.8%
}
table.config{
background-color:#FFF
}
table.config td,table.config th{
border-color:#E4E4E4
}
table.config th{
background-color:#333;color:white
}

Style 1

Header Table	Header Table
kiri 1	kanan 1
kiri 2	kanan 2
kiri 3	kanan 3
kiri 4	kanan 4
kiri 5	kanan 5

Style HTML 1

<table border="1" class="full config"><tbody>
<tr><th>Header Table</th><th>Header Table</th></tr>
<tr><td>kiri 1</td><td>kanan 1</td></tr>
<tr><td>kiri 2</td><td>kanan 2</td></tr>
<tr><td>kiri 3</td><td>kanan 3</td></tr>
<tr><td>kiri 4</td><td>kanan 4</td></tr>
<tr><td>kiri 5</td><td>kanan 5</td></tr>
</tbody></table>

Style 2

Header 1	Header 2
kiri 1	kanan 1
kiri 1	kanan 2
kiri 2	kanan 3
kiri 2	kanan 4
kiri 3	kanan 5
kiri 3	kanan 6
kiri 4	kanan 7
kiri 4	kanan 8

Style HTML 2

<table border="1" class="full config"><tbody>
<tr><th>Header 1 </th><th>Header 2 </th></tr>
<tr><td rowspan="2">kiri 1</td><td>kanan 1</td></tr>
<tr><td>kanan 2</td></tr>
<tr><td rowspan="2">kiri 2</td><td>kanan 3</td></tr>
<tr><td>kanan 4</td></tr>
<tr><td rowspan="2">kiri 3 </td><td>kanan 5</td></tr>
<tr><td>kanan 6</td></tr>
<tr><td rowspan="2">kiri 4</td><td>kanan 7</td></tr>
<tr><td>kanan 8</td></tr>
</tbody></table>

Cara Memasang tags ALT dan TITLE Pada Gambar Secara Otomatis

noreply@blogger.com (Anonymous) — Sat, 6 Jul 2013 23:52:00 -0700

Cara Memasang tags ALT dan TITLE Pada Gambar Secara Otomatis - Secara teknis untuk mencapai SEO pengguaan tag ALT dan TITTLE pada gambar sangatlah penting, karena jika tanpa itu robot google tidak bisa membaca gambar yang kita unggah dan untuk mengatasi masalah itu mari kita terapkan tutorial ini pada blog kita.

Cara penerapannya letakkan kode berikut diatas kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>

Scripttersebut akan langsung membuat tags alt dan title untuk foto yang sobat unggah secara otomatis, maka dari itu pastikan terlebih dahulu nama file foto sebelum di upload.

Semoga berhasil, jangan lupa mampir kesini yah :D

Cara Agar Halaman Blog Terindex Google

noreply@blogger.com (Anonymous) — Wed, 4 Jul 2012 19:46:00 -0700

Cara Agar Halaman Blog Terindex Google - Cara Submit SiteMap di Google Webmaster - Bagi yang suka dengan namanya SEO pasti selalu ingin mengejar apa yang diperlukan agar blog kita SEO secara maksimal, tapi taukah Anda untuk mencapai SEO halaman blog kita juga butuh Index dari Google lho!, berikut ini akan saya ulas sedikit masalah SEO tentag index halaman blog.
Hal pertama yang harus kita lakukan adalah menuju ke https://www.google.com/webmasters/tools/ setelah itu tambahkan blog kita dengan cara klik ADD A SITE

Jika sudah didaftarkan klik gambar blog kita atau alamat blog kita.

Langkah selanjutnya
Sekarang kita menuju ke Optimization > Sitemaps

Nanti akan ada tulisan "No sitemaps found for this site."

Sudah ketemu kan? jika sudah kita klik ADD/TEST SITEMAP nanti akan keluar kolom seperti dibawah ini

Nah inti tutorial yang saya sampaikan itu pada tahap ini, pada tahap ini lalu kita masukkan beberapa url yang gunanya untuk mengindex halaman/posting dalam blog kita berikut url yang harus kita sublimt kan dalam kolom tersebut dan untuk caranya masukkan satu persatu secara berurutan url dibawah ini, setelah yang pertama maka di refresh dan dilanjutkan yang kedua...dan seterusnya.

atom.xml?

atom.xml?redirect=false

feeds/posts/default?orderby=updated

atom.xml?redirect=false&start-index=1&max-results=500

Dan tambahkan juga url dibawah ini jika posting kamu sudah lebih dari 500.

atom.xml?redirect=false&start-index=501&max-results=500

Begitu juga yang ini jika posting kamu sudah lebih dari 1000 tambahkan pula url berikut.

atom.xml?redirect=false&start-index=1001&max-results=500

Setelah semua di sublimt maka akan terperoleh hasil seperti berikut:

Hasil ini menunjukkan bahwa halaman yang ada di blog saya telah terindex semua oleh Google, jika ada diantara sobat yang belum terindex semua mohon untuk bersabar siapa tahu di bulan depan sobat coba Resublimt hasilnya akan sempurna.

Tutorial ini tidak hanya memaksimalkan SEO namun juga memaksimalkan SERP dalam SE, semoga tutorial ini bermanfaat dan dapat membantu sobat yang belum tahu.