Fullscreen Layout with Page Transitions

Sebuah layout responsif sederhana dengan beberapa fancy transisi. Idenya adalah untuk melihat empat item dan memperluasnya dengan beberapa transisi halaman tambahan yang ditambahkan pada "inner items".

• Demo
• Download

Hari ini saya ingin berbagi layout responsif eksperimental dengan anda. Awalnya, layout terlihat empat item yang fleksibel. Ketika mengklik salah satu item, akan memperluas item tersebut untuk melihat dalam mode fullscreen dan yang lain akan kita buat dengan Scale Down dan Fade Out. Ketika menutup tampilan saat ini / current, maka akan bergerak kembali ke posisi semula sedangkan item lainnya kembali lagi ke tempat semula. Tipe lain dari halaman transisi dapat dilihat pada template - template portofolio dengan menggeser panel dari bawah

Semua efek dilakukan dengan transisi CSS dan dikontrol dengan menerapkan JavaScript. Seluruh layout fleksibel dan beberapa media queries ditambahkan ke ukuran responsive, hal-hal untuk layar yang lebih kecil.

Ilustrasi indah yang digunakan dalam demo adalah hasil dari Isaac Montemayor .

Mari kita lihat beberapa screenshot:

Layar awal memiliki empat kotak yang fleksibel. Mengubah ukuran jendela browser untuk melihatnya bertransisi dengan mulus.

Ketika mengklik item, item tersebut akan tampil dalam mode fullscreen.

Melihat item yang diperluas. Sebuah konten yang relevan dan kita akan menambahkan scroll jika diperlukan.

Pada bagian ini, kita menambahkan Thumbnail Grid yang akan menampilkan rincian setelah kita klik pada item. Halaman transisi di sini adalah item baru bergeser dari bawah dan item sebelumnya bergeser ke belakang.

Navigasi melalui item memiliki halaman transisi yang sama. Ketika kita menutup tampilan item, item tersebut akan bertransisi kembali turun dan skala tampilan akan kembali lagi.

Saya harap Anda menyukai eksperimen kecil ini dan dapat membantu Anda menemukan inspirasi!

Cool Tag Pre

Sebuah blog atau web tutorial tidak akan pernah lepas dari hal yang satu ini, pada pencarian Google banyak sekali jenis Tag Pre yang di sajikan secara lengkap dengan cara pemasangannya oleh para sobat blogger Indonesia maupun Mancanegara, Pembuatan Tag Ppre itu sendiri mungkin ditujukan agar pembaca atau audiens sebuah blog dapat lebih cepat memahami serta membedakan antar kode yang di sajikan baik itu CSS, HTML, jQuery dan yang lainnya.

Penggunaan Tag Pre juga akan sedikit memperindah tampilan sebuah kode, bentuk dari Tag Pre yang akan saya sajikan berikut ini adalah bukan hasil karya pribadi saya sepenuhnya, sumber kode tersebut di ambil dari http://dte.web.id dalam artikelnya "Tema Vanila untuk Tag PRE" kemudian sedikit gaya saya edit warnanya dan lagi-lagi saya menambah kode penomoran otomatis juga hasil karya Taufik Nurrohman di blog http://dte.web.id.

Dan jika sobat ingin mengetahui lebih jauh apa itu Tag Pre dan apa aja unsur-unsur didalamnya silakan sobat blogger kunjungi blognya Kang Ismet pada artikel tentang "Mengenal Tag Pre"

Untuk penulisannya pada postingan kodenya seperti ini

<pre data-codetype="HTML"> ... </pre>
<pre data-codetype="CSS"> ... </pre>
<pre data-codetype="JavaScript"> ... </pre>
<pre data-codetype="JQuery"> ... </pre> 

Berikut CSS'nya letakan di atas /]]></b:skin> atau </style>

pre {
background-color: #233948;
font: bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color: #333;
border: 1px solid #f1c40f;
position: relative;
padding: 0 7px;
margin: 10px 0;
overflow: auto;
word-wrap: normal;
white-space: pre;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
position: relative;
}
pre[data-codetype] {
padding: 23px 1em 7px 1em;
}
pre[data-codetype]:before {
content: attr(data-codetype);
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
background-color: #95a5a6;
padding: 0 7px;
font: bold 12px/20px Arial,Sans-Serif;
color: white;
}
pre[data-codetype="HTML"] {
border-color: #27ae60;
color: #8FE6B3;
}
pre[data-codetype="CSS"] {
border-color: #16a085;
color: #7DDECA;
}
pre[data-codetype="JavaScript"] {
border-color: #2980b9;
color: #91C8ED;
}
pre[data-codetype="JQuery"] {
border-color: #34495e;
color: #889CAF;
}
pre[data-codetype="HTML"]:before {
background-color: #27ae60;
}
pre[data-codetype="CSS"]:before {
background-color: #16a085;
}
pre[data-codetype="JavaScript"]:before {
background-color: #2980b9;
}
pre[data-codetype="JQuery"]:before {
background-color: #34495e;
}
pre code, pre .line-number {
display: block;
font: normal normal 12px/15px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
color: #006699;
}
pre .line-number {
float: left;
margin: 0 1em 0 -1em;
color: #ecf0f1;
background-color: #243342;
border-right: 2px solid #3E5770;
text-align: right;
min-width: 2.5em;
}
pre .line-number span {
display: block;
padding: 0 .5em 0 1em;
}
pre .line-number span:nth-child(even) {
background-color: #243342;
}
pre .cl {
display: block;
clear: both;
}

Terakhir masukan JavaScript berikut ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
(function() {
  var pre = document.getElementsByTagName('pre'),
      pl = pre.length;
  for (var i = 0; i < pl; i++) {
      pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
      var num = pre[i].innerHTML.split(/\n/).length;
      for (var j = 0; j < num; j++) {
          var line_num = pre[i].getElementsByTagName('span')[0];
          line_num.innerHTML += '<span>' + (j+1) + '</span>';
      }
   }
})();
//]]>
</script>

Demikian artikel tentang mengenai Cool Tag Pre, dan semoga menambah cantik blog sobat..

Apa Pengaruh custom robot.txt blogger terhadap SEO ?

Pengaruh custom robot.txt blogger terhadap SEOitu apa saja ? Mari kita simak bersama. Untuk anda yang  punya kebiasaan dengan blog wordpress pastinya telah amat akrab dengan robots. txt. Dengan robots. txt kita bisa lakukan beragam jenis kostumisasi perintah untuk mengizinkan/tidak mengizinkan robot crawler search engine lakukan crawl pada direktori atau halaman spesifik. robots. txt pada wordpress sesungguhnya merupakan virtual serta bukan hanya file fisik saja, maka dari itu akan membuat kostumisasi lantas lebih gampang. Pastinya ini jadi keuntungan tersendiri untuk SEO. Serta saat ini, blogger sudah mempunyai fitur yang sama. 

Blogger memperkenalkan fitur search preferences, untuk mengatur beragam setting Optimasi SEO dengan cara On Page. Di antara yang sangat mutlak yaitu pengaturan/kostumisasi robots. txt. bukan hanya fitur lain dari search preferences tidak mutlak, tetapi segalanya telah dicover dengan hack yang jauh-jauh hari telah kita kerjakan, yakni dengan pemakaian meta tags, yang fungsinya sama serta hingga saat ini tambah lebih efisien.  

Pada mulanya, bila mungkin ada dari Anda yang tetap kurang familiar dengan robots. txt, dapat saya berikan gambaran sedikit. Pemakaian robots. txt yaitu untuk berikan informasi pada robot crawler. Baik yang di punya oleh search engine, maupun aggregator, dan juga robot-robot pengindeks yang lain. Bahwa satu situs  direktori  atau file situs spesifik tidak bisa diindeks. Sebagai perumpamaan, apabila Anda tidak mau memiliki banyak halaman pada suatu situs ( contohnya about, label, sitemap, dan lain-lain ) diindeks oleh search engine. Maka anda bisa memakai perintah pada robots. txt supaya banyak halaman tersebut tidak diindeks. Maka pemakaian terpenting dari robots. txt yaitu untuk melarang yang tidak diizinkan.

Sebelum ada fitur robots. txt, kita memakai meta indeks untuk mengatur ini. Tetapi sesudah fitur custom robots. txt blogger diperkenalkan, kita bisa dengan gampang mengontrol pengindeks-an.

robots. txt pada prinsipnya diisi dua baris perintah, yang pertama yaitu identitas user agent ( crawler, dan juga robot perayap ), serta untuk kedua yaitu perintah pelarangan. 

user-agent : * 

disallow : 

Perintah diatas diterjemahkan seperti berikut : user agent berisi sinyal bintang yang bermakna merujuk pada seluruh crawler, baik yang dipunya search engine ataupun yang lain, contohnya : feed agregator ( apalagi robot autoblog  ). Namun disallow tidak diisi/kosong bermakna seluruh baik root direktori maupun sub direktori serta file bisa dibuka oleh crawler. 

Bila pingin melarang crawler terhubung situs, maka kita berikan perintah dengan sinyal / ( slash ), yang bermakna robot crawler tidak bisa terhubung semua isi web/blog. 

user-agent : * 

disallow : /

Tetapi bila pingin melarang indeks pada direktori atau halaman spesifik, kita catatkan sinyal dan diikuti dengan nama direktorinya. Contohya jika Anda tidak mau crawler mengindeks seluruh halaman statis maka penulisannya yaitu : 

user-agent : *

disallow : /p ( cocok dengan nama direktori halaman statis di blogger )

allow : / 

allow : / ditambahkan untuk mengizinkan crawler dan mengizinkan root directory dan direktori lain, serta halaman lain untuk diindeks. Makna dari perintah diatas yaitu crawler bisa mengindeks semua jika halaman-halaman tersebut statis. Sesungguhnya allow : / tidak ditambahkan juga tidak masalah, tetapi untuk meyakinkan, Google memperkenalkan serta merekomendasikan perintah tersebut. 

Bila pingin merujuk pada robot crawler punya se spesifik yang tidak bisa mengindeks, namun yang lain bisa. Anda mesti memberikan nama user-agentnya, pada baris lain. Perumpamaan ini dapat memakai googlebot, punya google. 

user-agent : * 

disallow :

user-agent : googlebot

disallow : /p

allow : /

Semoga penjelasan mengenai pengaruh custom robot.txt blogger terhadap SEO bisa bermanfaat buat anda semuanya. Dan saya mohon maaf apabila anda kurang memahaminya. Maka dari itu belajar SEO harus dimulai dari yang paling mudah dahulu.