CSS Membuat Background Gradient

CSS Membuat Background Gradient - Triks berikut ini adalah lanjutan dari tips belajar CSS dari awal yang juga adalah hasil dari googling di Internet. Oke marilah kita belajar lagi tentang CSS yang masih banyak menyimpan Rahasia ini.

Kali ini kita akan buat CSS untuk Background Gradient kalau kalian masih bingung bisa melihat gambar berikut ini :

Script : 

background-image:
     -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#999));
background-image:
     -moz-linear-gradient(100% 100% 90deg, #999, #eee);

Mozilla :

background-image:
     -moz-linear-gradient(bottom, #999, #eee);

Setelah di praktekkan untuk membuat CSS Gradient adalah sb :

CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS Membuat Background Gradient CSS 

Oke, silahkan dicoba dulu agan2 yang terhormat !!!
Salam Blogger Donomulyo.

Continue

Membuat Update Comment Blog Berjalan

Tutorial Membuat Update Comment Blogspot Berjalan - Comment Pada Blog yang Berjalan Otomatis ini adalah lanjutan tutorial blog sebelumnya, kali ini kita akan mencoba membuat Update Comment Blog Berjalan pada blog. Ketika kita melihat blog kita maka biasanya kita akan juga melihat commentar dari blog sahabat kita atau penugnjung yang kebetulan main-main ke blog kita.

Cara Membuat Update Comment Blog Berjalan ini memanfaatkan javascript sehingga bisa dengan mudah anda masukkan kedalam blog tanpa harus mengubah script dalam di blog anda.

Untuk cara Membuat Update Comment Blog Berjalan silahkan anda ikuti langkah berikut ini.

1. Silahkan anda Log in ke account Blog anda.
2. Masuk kedalam Edit Tata Letak
3. Add gadget/widget dimana anda ingin menampilkan Update Comment Blog Berjalan ini.
4. Copy script berikut ini

<marquee align="center" direction="down" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2">
<script src="http://buternaker.googlecode.com/files/comment-slide.js">
</script>
<script>
var numcomments = 15;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://aregnoz.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments">
</script>
</marquee>

  5. Ganti tulisan warna Merah dengan Alamat Blog Anda.

Langkah terakhir silahkan save. Demikian langkah-langkah Membuat Update Comment Blog Berjalan.
Selamat mencoba.

Continue

CSS Memberi Model Font Pada Artikel

CSS Memberi Model Font Pada Artikel - Biasanya kita memakai font bawaan dari Blog sendiri yang tetap itu-itu aja. Kita dapat memberi model font yang berbeda pada tulisan kita. Tidak terlalu sulit untuk membuatnya dan mungkin sebagian dari kalian juga sudah pada tau.

Berikut ini caran kita membuat CSS Memberi Model Font Pada Artikel :

CSS Memberi Model Font Pada Artikel

@font-face {
     font-family: 'Fontin-Italic';
     src: url('/fonts/Fontin-Italic.otf') format('opentype');
}
h1 { font-family: 'Fontin-Italic', Georgia, Serif; }

Silahkan Anda Coba!!!!

Continue

Cara Menghilangkan Index Archive di google

Cara Menghilangkan Index Archive digoogle

Cara Menghilangkan Index Archive di google ~ Index Archive di Google Tampil dan tak jarang kita tag menyadarinya. Banyak pakar SEO menyarankan untuk menonaktifkan index Archive ini. Karena dirasa memang kurang efektif. Saya sendiri belum tahu benar untuk kejelasannya tapi yang jelas memang benar-benar tidak efektif ketika kita men search di google yang keluar malah Archive kita bukan menuju ke Artikel yang kita maksut.

Disini ada sedikit cara untuk Menghilangkan Index Archive digoogle, ini merupakan referensi dari beberapa blog master Luar Negeri yang menurut saya sudah Mastahnya di dunia Blogging.


Jika kamu ingin menggunakannya juga berikut ini caranya.

1. Silahkan kamu masuk blog ke Edit HTML

2. Taruh Script dibawah ini di bawah Meta Tag kamu yang biasanya berada di bawah <head>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == "index"'>
    <link href='http://alamatblogmu.blogspot.com/' rel='canonical'/>
  </b:if>
  <b:if cond='data:blog.pageType == "archive"'>
    <link href='http://almatblogmu.blogspot.com/' rel='canonical'/>
  </b:if>
</b:if>

3. Ganti Tulisan warna kuning diatas dengan alamat blogmu.
4. Simpan Template blogmu.

Silahkan lakukan eksperimen untuk anda analisa efek dari pemasangan script diatas.

Continue

Membuat Blog Responsive Untuk Video

Membuat Blog Responsive Untuk Video ~ Cara agar Blog Responsive ini adalah cara agar blog kita bisa menjadi responsive tampil memanjang ketika dibuka di beberapa device yang berbeda. Dari beberapa cara yang ada di blog master responsive saya mengambil sedikit script khusu untuk saya copy disini agar saya juga bisa menggunakan jika butuh.

Membuat Blog Responsive Untuk Video Bisa membuat blog kita akan tampil dinamis ketika dibuka di browser lain dan juga device lain.

Script berikut ini khusus untuk responsive Video

Embed Script

.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.video iframe,  .video object,  .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

Anda bisa mencopy script diatas dan menaruhnya diatas ]]></b:skin>
Oke, sekedar share untuk Membuat Blog Responsive Untuk Video.

Continue

Membuat Efek Hover di Kotak Search Blog

Membuat Efek Hover di Kotak Search Blog dengan CSS ~ Triks CSS Efek Hover pada Kotak Pencarian Blog ini bisa kita manfaat kan untuk penghias blog kita agar lebih atraktir dan beda dengan yang lain. Efek yang akan kita buat ini akan memanfaatkan kotak search atau pencarian yang ada pada blog kita masing-masing. ini bertujuan untuk mempercantik tampilan blog kita dan sebagai pembeda tentunya.

Membuat Efek Hover di Kotak Search Blog tentunya sudah tidak asing lagi kita dengar, atau mungkin sebagian dari agan-agan sudah pernah mencobanya. Bagi yang belum silahkan bisa mencoba triks ini untuk penambah ilmu dalam dunia CSS dan Blogging.

Seperti itu untuk demonya bisa agan-agan lihat,, jika memang tertarik silahkan embed scriptnya dibawah ini.
Script Embed
Untuk Script Pemanggilnya [ID]

<div id="wrap-search">
<div id="search">
  <form class="form-search" method="get" action="/search" target="_blank">
    <input src="URL_IMAGE" type="image"/>
    <input type="text" name="q" value="Pencarian" onfocus="this.value='';" onblur="this.value='Pencarian';" onmouseover="this.value='';" onmouseout="this.value='Pencarian';" />
    </form>
  </div>
</div>

 Script CSS [Embed]

<style>
  #wrap-search {
    margin: 0 auto;
    width: 100px;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  #wrap-search br { display: none; }
  #wrap-search #search {
    background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5,  #CACACA),color-stop(25.5, #D3D3D3));
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA');
    border-radius: 5px;
    padding: 4px;
  }
  #wrap-search:hover { width:200px; }
  .form-search {
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC));
    background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC');
    border: 1px solid #747474;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;
    height: 32px;
    position: relative;
    -moz-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }
  .form-search input[type='text'] {
    background: none;
    border: none;
    color:#6E7074;
    height: 34px;
    line-height: 34px;
    padding: 0 27px 0 6px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    text-shadow: 0 1px 0 #FFF;
  }
  #wrap-search:hover input[type='text'] { color:#597C84; }
  #wrap-search:hover .form-search {
    background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF);
    background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA');
    box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;
    color: #25464D;
  }
  .form-search input[type='image'] {
    height: 32px;
    opacity: .5;
    filter:alpha(opacity=50);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
  }
  .form-search input[type='image']:hover {
    opacity: 1;
    filter:alpha(opacity=100);
  }
</style>

Rumayan Jan Joss tenan kan..??
Oke Silahkan di Coba dan jangan lupa berkomentar sebagai jejak anda datang kesini.

Continue

Membuat Efek Round Image dengan CSS

Membuat Efek Round Image CSS

Tutorial Membuat Efek Round Image Di Blog - Membuat efek melingkar dipojok gambar. Kali ini saya akan share tutorial untuk membuat image yang akan mempunyai efek round pada Image atau sekeliling image akan seperti ada lingkaran yang mengelilingi image dan di beri efek hover. Langsung anda coba cara berikut ini.

Sehingga ketika image didekati oleh Cursor maka otomatis image akan mempunyai efek round dan ada warna hovernya.

Berikut ini cara membuat Membuat Efek Round Image Di Blog

Berikut ini adalah script yang harus anda gunakan :

1. Buka Blog anda

2. Silahkan masuk pada edit html

3. Kemudian cari kode berikut ini ]]></b:skin>

4. Jika sudah ketemu silahkan anda copy code dibawah ini.

a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .9.9;
border-radius:50px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

Keterangan :

- Opacity adalah tingkat transparansi dari efek round image

- Border adalah warna border image, silahkan anda seuaikan kode warnanya

NB : jangan lupa save dulu template anda.

5. Langkah terakhir adalah save template anda. 

Oke sekian tutorial Membuat Efek Round Image dengan CSS malam ini, and good nite guys ..

Continue

Meta Tag Full Untuk Blog

Meta Tag Full Untuk Blog

Meta Tag Full Untuk Blog - Memang tidak dapat di pungkiri lagi kita sebagai blogger harus mengenal dan tahu SEO yang jelas-jelas SEO ini untuk meningkatkan rating, pengunjung dll dari blog kita.

Salah satu cara ampuh adalah dengan Meta Tag Full Untuk Blog, Kita juga harus secara benar dalam menerapkan SEO dari Meta Description dan Content, Meta Description dan Meta Content. Combinasi yang apik dan match, SEO ini akan bekerja dengan semestinya dan Bamm, blog kita akhirnya sejelek-jeleknya bisa tampil dihalaman pertama Google.

Saya juga yang masih belajar ini juga terus ingin mengetahui seluk beluk SEO yang seharusnya di berikan ke blog atau tidak sebaiknya di masukkan ke blog. Kebanyakan Blogger yang baru belajar tidak terlebih dahulu mengenal SEO. Dan tidak jarang seperti Meta Description dan Content tidak di definisikan.

Berikut ini saya coba share kan ke para Blogger yang masih baru, bagaimana menerapkan Meta Tag yang cocok dan sederhana. Pada Postingan terdahulu saya juga sudah membagikan Meta Tag yang sederhana dan kali ini saya ingin mencoba membagikan Meta Tag yang juga saya dapatkan dari gabungan master-master SEO.

Silahkan Anda Copy Script Meta Tag Full Untuk Blog berikut, taruh di bawah <head>

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title><meta content='DESKRIPSI Blog' name='description'/>
<meta content='Keyword Blog mu' name='keywords'/>
<meta content='alamat blog mu.blogspot.com' name='subject'/>
<meta content=' MENGGAMBARKAN BLOG(MIRIP DESKRIPSI)' name='Abstract'/>
<b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/><:/title>
</b:if><meta expr:content='data:blog.pageName + &quot; DESKRIPSI HALAMAN YANG SEDANG DIBUKA&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot; KATA KUNCI HALAMAN YANG SEDANG DIBUKA&quot;' name='keywords'/>
<meta expr:content='data:blog.pageName' name='subject'/>
<meta expr:content='data:blog.pageName' name='Abstract'/>
<b:else/>
<title><data:blog.pageTitle/></title><meta expr:content='data:blog.pageName + &quot; DESKRIPSI HALAMAN YANG SEDANG DIBUKA&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot; KATA KUNCI HALAMAN YANG SEDANG DIBUKA &quot;' name='keywords'/>
<meta expr:content='data:blog.pageName' name='subject'/>
<meta expr:content='data:blog.pageName' name='Abstract'/>
</b:if>
</b:if>
<title><data:blog.pageTitle/></title>
<meta content='http://NAMABLOG.blogspot.com/' name='copyright'/>
<meta content='NAMA SOBAT' name='author'/>
<meta content='Aeiwi, Alexa, AllTheWeb, AltaVista, AOL Netfind, Anzwers, Canada, DirectHit, EuroSeek, Excite, Overture, Go, Google, HotBot. InfoMak, Kanoodle, Lycos, MasterSite, National Directory, Northern Light, SearchIt, SimpleSearch, WebsMostLinked, WebTop, What-U-Seek, AOL, Yahoo, WebCrawler, Infoseek, Excite, Magellan, LookSmart, bing, CNET, Googlebot' name='search engines'/>
<meta content='KODE VERIFIKASI GOOGLE' name='google-site-verification'/>
<meta content='KODE VERIFIKASI BLOGCATALOG' name='blogcatalog'/>
<meta content='UTF-8' name='Charset'/>
<meta content='Global' name='Distribution'/>
<meta content='information' name='classification'/>
<meta content='General' name='Rating'/>
<meta content='INDEX FOLLOW' name='Robots'/>
<meta content='document' name='resource-type'/>
<meta content='follow,all' name='robots'/>
<meta content='INDEX,FOLLOW, all' name='robots'/>
<meta content='1 days' name='revisit'/>
<meta content='1 Days' name='Revisit-after'/>
<meta content='ID' name='language'/>
<meta content='ID' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='global' name='distribution'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='global' name='target'/>
<meta content='index,follow,snipet' name='googlebot'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='Scooter'/>
<meta content='follow, all' name='msnbot'/>
<META CONTENT='NOODP' Name='msnbot'/>
<meta content='follow, all' name='alexabot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='follow, all' name='Scooter'/>
<meta content='ALL' name='SPIDERS'/>
<meta content='ALL' name='WEBCRAWLERS'/>
<link expr:href='data:blog.url' rel='canonical'/>

Ok silahkan kalian coba dulu. thanks buat para master SEO Indonesia yang sudah membagikan trik nya untuk membuat Meta Tag Full Untuk Blog.

Continue

Tempat Hosting File Flash

Tempat Hosting File Flash - Bagi anda yang sedang mencari tempat Hosting untuk Animasi Flash Anda, silahkan dicoba Tempat yang satu ini. Tempat Hosting File Flash ini sangat simple, anda tinggal memilih file flash anda kemudian silahkan anda Upload dan silahkan copy codenya ke web Anda.

Sebelumnya anda bisa membuat File flash dari software-software pembuat flash gratis. Jika anda ngin yang simple silahkan anda cobe memakai Flash Fortex.
Saya sarankan anda join atau daftar terlebih dahulu untuk menggunakan hosting Flash ini.

Tapi mungkin saja ketika nanti anda coba sudah tidak gratis lagi.
akan saya upload lagi artikel tentang ini nantinya jika sudah tidak gratis lagi, thanks.

Continue