Membuat Banner Iklan Dengan Css

Membuat Banner Iklan Dengan Css - Seperti yang sudah kita tahu bahwa Banner Iklan berperilaku seperti poster dan baliho dimana di dalamnya berfungsi untuk memajang beraneka informasi sesuai dengan pihak yang bersangkutan. 
Banner iklan bisa sangat mudah kita jumpai di pinggir jalan dan tempat-tempat strategis dengan tujuan agar lebih banyak orang yang melihat dan menjangkau pasar yang luas. Biasanya iklan bertujuan komersil.

Banner iklan tidak hanya bisa kita jumpai di pinggir jalan maupun di berbagai perempatan, karena fungsi tersebut kini dapat diterapkan pada website maupun blog untuk menampilkan iklan berupa produk maupun layanan serta informasi. Pada umumnya, situs website yang memiliki pengunjung akan menampilkan banner baik itu berisi iklan produk sendiri maupun produk dari pihak lain dimana situs website tersebut berperan sebgai pemasar saja.

Dan pada umumnya, banner biasa dibuat dengan media gambar statis JPG, gambar bergerak GIF dan sering pula menggunakan media Animasi Flash. Semua itu tergantung dari penyedia produk.

Namun biasanya, masalah yang muncul ketika memajang banner baik gambar statis, bergerak maupun flash adalah pemuatan halaman akan bermasalah dan membuat situs tidak valid serta tidak responsive karena pada umumnya ukuran banner sudah ditentukan dari penyedia bahkan ketika kita mencoba membuat banner gambar sendiri sekalipun kita akan menentukan ukuran panjang dan lebar media yang akan kita tampilkan dalam hal ini gambar dan video.

Lalu, adakah cara yang lebih baik daripada menggunakan media gambar statis atau bergerak yang kadang membuat situs website menjadi bermasalah ? Tentu ada. yakni dengan menggunakan Css.

Adapun keuntungan yang kita peroleh ketika menggunakan metode ini adalah
- Pemuatan halaman lebih ringan
- Responsive
- Valid struktur data

Cara Membuat Banner Iklan Dengan Css
Yang kita butuhkan dilangkah pertama adalah dengan membuat DOM baru seperti ini

<div class="iklanbox">
<div class="text-iklan">
<a href="www.cloning-system.com">Buat Website Keren</a>
</div>
<div class="icon-iklan">
<a href="www.cloning-system.com">Ads by CS</a>
</div>
</div>

Kemudian yang perlu kita lakukan selanjutnya adalah mengatur stylingnya dengan memberikan sentuhan Css sesuai dengan kebutuhan seperti dibawah ini


.iklanbox {
  position:relative;
  width:100%;
  height:90px;
  display:table;
  table-layout:fixed;
  background:#82a5ce;
overflow:hidden;
}

.text-iklan,.text-iklan a {display:block;line-height:90px;color:#fff;font-size:30px;text-align:center;text-transform:uppercase;margin:0 auto;}
.icon-iklan {position:absolute;top:0;right:-85px;background:#d3d3d3 url(http://2.bp.blogspot.com/--ivaHIgXThk/UnJWU80FLhI/AAAAAAAAF_Y/WrH-8aYijGw/s1600/info-iklan.png) 0 0 no-repeat;width: 100px;height:15px;-webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;}

.icon-iklan a{opacity:0;}
.icon-iklan:hover {right:0;background-position:100% 0;
    padding-right:15px;padding-left:10px;}

.icon-iklan:hover > a {opacity:1;color:#333;}

Secara default, kode diatas akan menciptakan Banner Iklan dengan ukuran tinggi 90px dimana umumnya Banner Iklan utama menggunakan ukuran ini, namun kita bisa dengan mudah mengganti ukurannya tanpa perlu melakukan editing atau memberikan style khusus yang rumit.
Untuk mengatur tinggi banner, kita bisa menggunakan class bantuan dengan membuat class dengan atribut khusus seperti ini

.side {
   height:250px;
}
.longside {
   height:600px;
}
Kemudian untuk DOM nya kita berikan class yang sudah kita buat tadi dengan mengakses element utama banner yakni

<div class="iklanbox side">
// untuk membuat banner bertinggi 250px dibagian sidebar, dan
<div class="iklanbox longside">
// untuk membuat banner besar dengan tinggi 600px pada sidebar.

Bagaimana dengan setup pada sisi lebar atau panjangnya ?
Seperti yang sudah disebut diatas, ukuran ini akan selalu mengikuti luas daerah tempat ia diletakkan, semisal sidebar situs website memiliki ukuran 300px, maka banner ini akan memiliki ukuran yang sama dengan sidebar tersebut.

Kemudian kita ingin membuat teks atau kontennya bergerak, bagaimana caranya ?

Yang kita butuhkan sebagai ekseutornya cukup menggunakan Css @keyframe seperti dibawah ini
Karena disini kita hanya ingin menampilkan Teks yang bergerak, maka elemen yang kita eksekusi adalah .text-iklan

.text-iklan{
  animation: animationFrames ease 10s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: animationFrames ease 10s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 10s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 10s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{

  0% {
    opacity:0;
    transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    transform:  translate(30px,0px)  ;
  }

  80% {
    transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }

}

@-moz-keyframes animationFrames{

  0% {
    opacity:0;
    -moz-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -moz-transform:  translate(30px,0px)  ;
  }

  80% {
    -moz-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }

}

@-webkit-keyframes animationFrames {

  0% {
    opacity:0;
    -webkit-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -webkit-transform:  translate(30px,0px)  ;
  }

  80% {
    -webkit-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }

}

@-o-keyframes animationFrames {

  0% {
    opacity:0;
    -o-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -o-transform:  translate(30px,0px)  ;
  }

  80% {
    -o-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }

}

@-ms-keyframes animationFrames {

  0% {
    opacity:0;
    -ms-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -ms-transform:  translate(30px,0px)  ;
  }

  80% {
    -ms-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }

}
Jika anda ingin menggunakan animasi dengan gaya lain, silahkan menuju kesini 

Contoh



Silahkan disesuaikan sendiri mengenai warna dan teks yang ingin ditampilkan serta gambar apa yang ingin ditampilkan dan animasi apa yang akan digunakan untuk masing-masing kontennya. Kreasikan dengan bebas ... dan semoga informasi dan tutorial ini bermanfaat.

Memasang Social Share Button Flat Style Responsive



Kali ini kami akan membagikan Tutorial Memasang Social Share Button Flat Style Responsive yang pastinya akan menambah manis situs kita dan juga sangat berguna untuk menjaring pemirsa yang lebih luas dengan mudah dan cepat dan bisa dilakukan oleh si pembaca itu sendiri.

Pada dasarnya Social Share Button adalah fitur yang sangat perlu untuk meningkatkan jangkauan situs ke arah yang lebih luas. Biasanya, jika pembaca merasa artikel yang dibacanya bermanfaat, menarik dan bagus, mereka tidak segan-segan bahkan merekomendasikan kepada teman-teman mereka di jejaring sosial, dengan memanfaatkan Social Button ini.

Nah jika sudah tau fungsi dasarnya dan keuntungannya, sekarang kita akan mulai memasangnya, jadi silahkan persiapkan.

Memasang Social Share Button Flat Style Responsive

Memasang Social Share Button Flat Style Responsive

Pertama silahkan buka template editor pada dasbor Blogger.
Hal yang perlu kita instal terlebih dahulu adalah FontAwesome dimana icon yang akan kita buat adalah dengan menggunakan FontAwesome.

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");");
//]]>
</script>
Letakkan sebelum tag </head>

Kemudian cari kode <data:post.body/>, kemudian letakkan kode dibawah ini tepat dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="sharein"><div class="sharede"> \
<a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
    <i class="fa fa-google-plus gotea"></i></a> \
<a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
    <i class="fa fa-facebook fbtea"></i></a> \
<a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
    <i class="fa fa-twitter twtea"></i></a> \
    <span class="pl" data-target="#share-menu"><i class="fa fa-plus plustea"></i></span> \
<ul class="dropdown-menu" id="share-menu"> \
    <li><a class="social-popup" href="javascript:pinIt();">Pinterest</a></li> \
    <li><a class="social-popup" href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \
    <li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \
    <li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \
    <li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \
    <li><a class="social-popup" href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \
    <li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \
    <li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \
    <li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \
    </ul> \
</div><div class="clear"></div></div> \
');
$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});
function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)};
var _0xba47=["","\x70\x78\x20","\x70\x78\x20\x30\x70\x78\x20","\x2C\x20","\x74\x65\x78\x74\x53\x68\x61\x64\x6F\x77","\x73\x74\x79\x6C\x65","\x2E\x66\x62\x74\x65\x61","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x23\x32\x32\x36\x61\x39\x62","\x2E\x67\x6F\x74\x65\x61","\x23\x65\x33\x33\x30\x31\x63","\x2E\x70\x6C\x75\x73\x74\x65\x61","\x23\x37\x34\x37\x65\x38\x36","\x2E\x74\x77\x74\x65\x61","\x23\x30\x32\x38\x65\x63\x66"];var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[6])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[8]);var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[9])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[10]);var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[11])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[12]);var genLongShadow=function(_0x104ax2,_0x104ax3){var _0x104ax4=_0xba47[0];for(var _0x104ax5=1;_0x104ax5<_0x104ax2;_0x104ax5++){_0x104ax4+=_0x104ax5+_0xba47[1]+_0x104ax5+_0xba47[2]+_0x104ax3;if(_0x104ax5!=_0x104ax2-1){_0x104ax4+=_0xba47[3]};};return _0x104ax4;};document[_0xba47[7]](_0xba47[13])[_0xba47[5]][_0xba47[4]]=genLongShadow(80,_0xba47[14]);
//]]>
</script>
</b:if>

Selanjutnya beri styling dengan menambahkan Css ini

.sharede,.sharein{position:relative;display:inline-block;}
.sharein{display:table;margin:auto;text-align:center}
.sharein a.fb,.sharein a.gp,.sharein a.tw,.sharein span.pl{width:60px;height:60px;line-height:60px;text-decoration:none!important;display:inline-block;margin:0 15px 0px 0;font-weight:700;border-radius:100%;color:#fff;text-shadow:none;padding:0 10px;transition:all .3s;text-align:center;overflow:hidden}
.sharein a.gp {background:#e74c3c;}
.sharein a.fb {background:#2980b9;}
.sharein a.tw {background:#03a9f4;}
.sharein span.pl {background:#878f96;margin-right:0;}
.fbtea,.gotea,.plustea,.twtea{font-size:20px!important;vertical-align:middle}
.sharein a.fb:hover,.sharein a.gp:hover,.sharein a.tw:hover,.sharein span.pl:hover{transform:rotate(360deg);}
.sharein a.fb:active,.sharein a.gp:active,.sharein a.tw:active,.sharein span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
span.pl{color:green;cursor:pointer}
#share-menu{display:none}
.dropdown-menu{position:absolute;bottom:100%;right:5px;z-index:99999;float:right;min-width:100px;padding:10px 20px;margin:0;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:2px;box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
.dropdown-menu li{list-style:none!important;margin:0!important;padding-left:0!important;line-height:1.8em!important}
.dropdown-menu li a{color:#666!important;font-weight:400;display:block}
.dropdown-menu li a:hover{color:#03a9f4!important}
ul#share-menu{margin:10px 0;padding:5px 15px}
@media only screen and (max-width:640px){
.sharein a.fb,.sharein a.gp,.sharein a.tw,.sharein span.pl{width:45px;height:45px;line-height:45px;}
.fbtea,.gotea,.plustea,.twtea{font-size:15px!important;}}
 Letakkan Css diatas sebelum tag ]]></b:skin> atau sebelum </style> pada template modern.

Simpan template.

Results

Thanks to Blogeridiots whos make this great widget

Facebook Ditambahkan ke Group Terus Menerus? Ini Solusinya

Facebook Ditambahkan ke Group Terus Menerus? Ini Solusinya - Belakangan ini penyebaran virus di facebook dikatakan sudah sangat banyak dan berbahaya terhadap akun-akun yang terlibat.
Dan yang belakangan ini juga menyerang saya adalah virus Auto Invited to Group yang dilakukan oleh orang-orang yang tidak saya kenal dan bahkan ada beberapa yang saya kenal.

Facebook Ditambahkan ke Group Terus Menerus? Ini Solusinya
Karena dongkol, saya konfirmasi ke orang yang bersangkutan yang telah dengan seenaknya setiap hari menambahkan saya ke beberapa grup dalam sehari, dan grup-grup tersebut tidak jelas juntrungannya bahkan terasa sangat aneh dan tidak penting.

Dan yang lebih aneh lagi adalah bahwa pengakuannya mengatakan ia tidak merasa menambahkan atau beraktifitas dalam grup tersebut.
Dari situ saya menyadari bahwa mungkin ada yang tidak beres, dan bisa jadi virus yang teman saya punya itu sudah menular ke akun facebook saya tanpa sepengetahuan saya.

Dari kejadian itu, saya mulai berfikir mengenai Adakah Cara Mencegah Seseorang Menambahkan Akun Ke Group dan lain sebagainya, hingga ahirnya saya menemukan solusi yang mungkin juga akan berguna untuk orang-orang yang tengah mengalami hal yang sama yakni menjadi korban virus auto invite to group ini.

Ada beberapa point penting yang harus kita ketahui bersama seperti yang tercantum dibawah ini.

Inilah yang harus dilakukan ketika kita diundang masuk ke sebuah Group aneh di Facebook yang cenderung berbau porno, Alay, Sadisme dan sebagainya:

1. Periksa Para pengurus Group yang barusaja anda masuk, jika ternyata akun pengurus tidak jelas dan terlihat aneh dan asing, segera blok seluruh pengurusnya.

2. Lihat siapa orang yang menambahkan kita ke group sembarangan, biasanya tidak cuma sekali. Block orang tersebut tanpa perlu konfirmasi jika kita tidak mengenalnya.
Jika ternyata teman kita, maka kita perlu memberitahu orang tersebut apakah ia sengaja atau tidak menambahkan kita ke group tersebut. Segera minta ia untuk mengganti password dan keluar dari group tersebut sebelum semua akun yang terhubung dengannya terjangkit virus ini.

3. Segera keluar dari group tersebut dan jangan lupa mencentang opsi "Cegah orang lain untuk menambahkan anda".

4. Hindari rasa penasaran dan klik sembarangan konten-konten yang di share oleh orang yang tidak penting dan  biasanya berbau pornografi, sadisme, rasis dan sejenisnya.

5. Ubah password kita secara berkala minimal 6 bulan sekali untuk mencegah terjangkit virus facebook.

6. Hindari sembarangan berkomentar dan Like di posting yang tidak penting. Biasanya meminta amin dan like.

7. Periksa siapa saja orang-orang yang terhubung dengan akun anda dengan melihat kembali halaman pertemanan, dan pastikan hanya berteman dengan orang yang memang anda kenal. Selain menghindari virus, hal ini juga bisa menghindarkan kita dari tindak kejahatan.

Silahkan lakukan beberapa point diatas dan pastikan anda mengamankan akun anda, ikuti aturan dan program yang diberikan facebook demi kebaikan akun dan nama baik anda.

Semoga bermanfaat.

Membuat Popup Quick Search Box

Yang akan kami bagikan kali ini adalah Cara Membuat Formulir Pencarian Popup Dengan Quick Result seperti yang bisa anda temui di situs ini yakni dengan klik tombol Search pada bagian menu.

Sudah menemukannya ? Tertarik untuk membuatnya ?


Silahkan ikuti panduan selengkapnya

Pada Tutorial kali ini yakni tentang Membuat Popup Quick Search Results kita menggunakan tiga element penting yakni HTML sebagai frame utama, Css berfungsi sebagai stylingnya dan JavaScript sebagai eksekutor.

Sebelum memulai tutorial dibawah, pastikan template anda sudah terinstal jQuery dengan kode seperti ini

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
> Jika belum, instal terlebih dahulu dengan meletakkan kode diatas sebelum tag </head>
Kemudian, pastikan juga sudah terinstal FontAwesome karena disini kita menggunakan FontAwesome sebagai pembentuk icon.
Pelajari lebih lanjut mengenai Instalasi FontAwesome.

Setelah dipastikan kedua media diatas sudah terinstal, kita lanjutkan ke tutorial  Membuat Popup Quick Search Results.

Pertama kita siapkan dulu sebuah DOM untuk search engine dan pembungkusnya seperti dibawah ini.

<div class='csystem-find'>
<div class='inputpoint'>
<form class='machine' id='search'>
<div class='input'>
<input class='search' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='search' value='Search here...'/>
<button class='submit fa fa-search' type='submit' value=''></button>
</div>
<button class='fa fa-times' id='close' type='reset' value=''></button>
</form>
</div>
<div class='search-content'>
<div class='search-result' id='scroll-hide'>
<div class='inner'>
<span></span>
</div>
</div>
<div class='query-result'>Load more</div>
</div>
</div>
Letakkan persis dibawah tag <body> pada template Blogger anda.

Selanjutnya kita buat Css Stylingnya seperti dibawah ini

input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}
.csystem-find{position:fixed;overflow:auto;top:10%;left:20%;right:20%;bottom:10%;max-width:879px;margin:auto;background:rgba(255,255,255,1);color:rgba(0,0,0,.6);box-shadow:0 2px 7px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
.csystem-find.active{opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.csystem-find .inputpoint {background:#3cc091;margin:0 auto 15px;padding:10px 0;}
.csystem-find .machine {width:90%;margin:auto;padding:10px 0;outline:none;display:block}
#search .input{background:rgba(255,255,255,1);width:100%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;transition:all .3s ease-out}
#search .input:active,#search .input:hover{background:rgba(255,255,255,1);border-color:#d9d9d9}
#search .input .search{float:left;width:calc(100% - 140px);height:40px;padding:0;margin:0;border:0;outline:0;background:none;font-size:16px;color:rgba(0,0,0,.4);line-height:40px;letter-spacing:1px;transition:all .3s ease-out}
#search .input .submit{display:inline-block;float:right;cursor:pointer;width:14%;height:40.5px;padding:0;margin:0;border:0;outline:0;background:rgba(39,174,96,0.5);font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40.5px;transition:all .3s ease-out}
#search .input .search:focus,#search .input .search:active, #search .input .search:hover {color:rgba(0,0,0,.8);}
#search .input .submit:focus,#search .input .submit:hover {background:#3bbb8e;color:rgba(255,255,255,1);}
#search #close{cursor:pointer;position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;margin:0;border:0;outline:0;border-radius:5px;font-weight:normal;font-family:fontawesome;background:transparent;color:rgba(0,0,0,.3);text-align:center;line-height:32px;transition:all .3s}
#search #close:hover {color:rgba(0,0,0,.6);}
.search-content{z-index:6;display:none;position:relative}
.csystem-find .search:focus {outline:none;}
.search-result{padding:0 20px;width:100%;margin:0 auto 15px}
.search-result .search-item{overflow:auto;padding:10px 0;border-bottom:1px solid #eee;}
.search-result .search-item:last-child{border-bottom:0}
.search-item img{width:100px;height:100px;float:left;background:#fdfdfd}
.search-item a{width:calc(100% - 120px);float:right;display:block;color:#333;text-decoration:none;padding:10px 0;font-size:24px;line-height:40px;}
.search-item a:hover,.search-item:hover a{color:#3cc091;}
.query-result{display:none;cursor:pointer;background:#fff;color:#3bbb8e;padding:12px;margin:20px auto 40px;text-align:center;text-transform:uppercase;border-radius:5px;line-height:normal;font-size:85%;letter-spacing:1px;max-width:90px;border:1px solid #3cc091;transition:all .3s ease-out}
.query-result:hover{background:#3cc091;color:#fff;border-color:transparent}
.query-result a{text-decoration:none;color:#3bbb8e;}
.query-result:hover a,.query-result a:hover{color:#fff;}
.queryword{font-weight:700} 
Letakkan setelah kode diatas ]]></b:skin> atau diatas </style> untuk template modern.

Selanjutnya kita membutuhkan satu media pemanggil berupa button untuk menampilkan kotak pencarian dan pembungkusnya, kodenya seperti dibawah ini

<li class='searchbutton' title='Quick Search'></li> 
Ini jika kita akan meletakkan tombol pemanggil berada di menu navigasi, sementara untuk penempatan yang lain silahkan kreasikan sendiri dengan tetap berfokus pada penggunaan class="searchbutton".

Tambahkan styling untuk buttonnya seperti ini

.menu li.searchbutton{margin:0;display:inline-block;cursor:pointer;padding:20px 15px}
.menu li.searchbutton.active {background:transparent;}
.menu li.searchbutton:after{content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:700;text-decoration:none;position:relative;color:#fff;}
Perhatikan pada bagian Class .menu pada css diatas, setiap template memiliki penamaan yang berbeda pada menu navigasi, silahkan sesuaikan dengan menu class pada template anda.

Terakhir disini kita harus mengeksekusi apa yang akan terjadi pada button dan kolom pencarian, yakni dengan memanfaatkan JavaScript sebagai eksekutornya dengan metode onclick function.

// Search button berfungsi mengeksekusi button dan kolol pencarian
$(function(){$(".searchbutton").on("click",function(){$(".csystem-find").addClass("active").find(".search").focus()});$(".csystem-find").on("click",function(){$(this).find(".search").focus()});$("#close").on("click",function(){$(".csystem-find").removeClass("active")})});
// Search Result mengeksekusi jika ada query yang di input pengguna
function findcsystem(){var e=$(".search").val(),t=$(".search-item").length+1;if(e.length>=1){$(".search-content").slideDown(),$(".search-filter").attr("data-query",e),$(".search-result span").slideDown().html("Searching ...");var r="/feeds/posts/default?max-results=12&start-index="+t+"&alt=json&q="+e;$.ajax({type:"GET",url:r,async:!0,contentType:"application/json",dataType:"jsonp",success:function(t){$(".query-result").slideUp(),doSearch(t,e)}})}else $(".search-content").slideUp()}function doSearch(e,t){if(e.feed.entry){for(var r=0;r<e.feed.entry.length;r++){for(var n=0;n<e.feed.entry[r].link.length;n++)if("alternate"==e.feed.entry[r].link[n].rel){var a=e.feed.entry[r].link[n].href;break}try{var s=e.feed.entry[r].media$thumbnail.url}catch(i){var s="http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w100-h100-c/no-image.png"}var c=e.feed.entry[r].title.$t,h='<div class="search-item"><img src="'+s+'"/><a href="'+a+'" target="_blank">'+c+"</a></div>";$(".search-result").append(h)}$(".search-result span").slideUp(function(){$(".queryword").html("Show results for:<b>"+t+"</b>"),$(".query-result").slideDown()})}else $(".search-result span").slideDown().html("No result"),$(".query-result").slideUp()}$(".machine").submit(function(){return $(".search-item").remove(),findcsystem(),!1}),$(".close-search").click(function(){$(".search-content").slideUp()}),$(".query-result").click(function(){$(".query-result").slideUp(),findcsystem()}); 
Letakkan JavaScript diatas tag </body> dan janga lupa untuk membungkus dengan pembungkus JavaScript.

Selanjutnya simpan.

Result

Jika ada masalah yang mungkin timbul atau kode tidak berfungsi dengan baik, mungkin ada masalah pada penempatan JavaScript dan penggunaan Class yang keliru, silahkan ikuti panduannya dengan teliti.

Jika masalah terjadi pada JavaScript, ubah penempatannya.

Cara membuat Recent Post di Blog

Widget Recent Post merupakan widet yang berfungsi untuk menampilkan cuplikan post terbaru. Dengan memasang widget Recent Post memunginkan pembaca mengetahui update terbaru dari blog yang tengah dikunjungi dan hal tersebut berarti menambah jumlah page view bagi blog tersebut.

Cara membuat Recent Post di Blog

Dibawah ini kami akan menghadirkan 2 versi dari Widget Recent Post yang bisa anda pilih dan disesuaikan dengan kondisi desain pada website anda.

Recent Post With Thumbnail, Date and Comments Count

1. Buka dasbor Blogger dan masuk ke menu Layout
2. Tambahkan widget baru HTML/JavaScript
3. Letakkan semua kode dibawah ini kedalamnya

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5; // Ganti angka 5 dengan jumlah postingan yang akan ditampilkan.
var rcp_snippet_length=150; // Jumlah karakter isi artikel yang akan ditampilkan saat hover link judul postingan.
var rcp_info='yes'; // Ketik no untuk menyembunyikan keterangan tanggal dan jumlah komentar.
var rcp_comment='Comments'; // Nama judul tulisan dari jumlah komentar.
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

4. Simpan

Recent Post With No Thumbnial

1. Buka dasbor dan masuk ke menu Layout
2. Tambahkan Widget baru HTML/JavaScript
3. Letakkan kode dibawah ini kedalamnya

<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

4. Simpan

Perhatikan pada bagian numPosts = 5;, ganti dengan jumlah yang anda inginkan untuk posting yang ingin ditampilkan.


 Thanks to Arlina Design for sharing this great widget

Cara Mengaktifkan Fitur Mobile-Friendly Blog

Cara Mengaktifkan Fitur Mobile-Friendly Blog - Mengingat banyaknya pengguna mobile disokong oleh peluncuran Gadget pintar dari Google, belum lama ini Google mengeluarkan Algoritma baru yang berfokus pada pengalaman pengguna mobile yaitu mobilegeddon.
Cara Mengaktifkan Fitur Mobile-Friendly Blog
Menurut Google, belakangan ini pengguna internet di dominasi oleh pengguna smartphone dan tablet sehingga menyajikan kenyamanan bagi para pengguna mobile browser adalah sesuatu yang sangat penting.
Dengan algoritma baru ini seolah memaksa para webmaster untuk kembali berkutat pada kode script desain mereka, dan mau tidak mau ini harus di prioritaskan karena erat sekali kaitannya dengan SEO. Situs dengan dukungan mobile friendly akan lebih di prioritaskan di hasil pencarian Google demi menyajikan pengalaman yang sempurna untuk mayoritas pengguna internet saat ini.

Lalu apakah situs saya sudah mobile-friendly ?

Jika anda pengguna blogger platform, maka dengan mudah bisa mengaktifkan dukungan mobile dengan hanya mengaktifkan tampilan seluler pada setting template anda. Namun itu kurang  disarankan.
Seperti anjuran dari Google, Responsive Web Design lebih dianjurkan daripada pengalihan url atau pengalihan kode tampilan dengan cara membuat dua versi struktur yang akan ditampilkan di media yang berbeda.
Dan untuk mengetahui apakah situs anda mobile friendly atau tidak, Google sudah menyiapkan testing tool untuk melihat apakah situs anda sudah mendukung tampilan mobile atau belum.
Anda bisa mengetahuinya dengan melihat halaman developers tool Google untuk menguji mobile friendly.

Jika situs anda sudah mendukung fitur mobile friendly, maka yang anda lihat adalah tulisan seperti "Mengagumkan : Situs ini mobile-friendly".

Lalu apa yang harus dilakukan ketika situs tidak mobile-friendly ?

Seperti yang sudah disinggung diatas bahwa Google lebih menyarankan Desain Responsive untuk diterapkan sehingga tidak akan berpengaruh buruk terhadap SEO.

Namun jika anda tidak ada waktu untuk mengatur Responsive template, anda bisa menggunakan fitur bawaan Blogger yakni mengaktifkan tampilan seluler sebagai tampilan default di perangkat mobile dengan resiko kualitas SEO anda mungkin akan menurun di tampilan mobile.

Cara Mengaktifkan Fitur Mobile-Friendly Blog

Mengingat hal itu, mungkin lebih baik anda meninjau halaman Membuat Template Menjadi Full responsive untuk membuat template anda menjadi Full Responsive dan mobile-friendly.

Selain itu, demi meningkatkan kenyamanan pengguna dalam mengakses situs web, Google juga menyarankan untuk Optimasi Page Speed melalui PageSpeed Insight.

Mungkin informasi ini sudah cukup untuk dipahami, namun jika ada yang masih belum mengerti anda bisa langsung menuju ke Halaman Google Developer atau kita diskusikan bersama.

Mencegah Auto Redirect Blogger ke Domain Lokal

Mencegah Auto Redirect Blogger ke Domain Lokal - Belum lama ini Google memberikan kebijakan yang cukup kontroversial bagi sebagian pihak yakni pengalihan otomatis domain Blogspot ke domain lokal sebuah negara.
Mencegah Auto Redirect Blogger ke Domain Lokal
Sebenarnya ini bukan hal baru mengingat sejak lama ketika saya melihat statistik ada bermunculan url blog dengan domain yang berbeda-beda seperti misalnya yang seharusnya nama-blog.blogspot.com menjadi nama-blog.blogspot.fr, .jp dan masih banyak yang lainnya.

Namun di indonesia sendiri ini merupakan hal baru dimana domain blogspot.com akan secara otomatis dialihkan ke domain dengan id indonesia yakni blogspot.co.id.

Hal ini hanya terjadi terhadap Blogger yang masih bertahan dengan blogspot.com dan tidak menggunankan custom domain, sementara blog dengan custom domain TLD tidak akan terpengaruh.

Memang, Blogger memperbarui kebijakannya terkait hal ini baru-baru ini khususnya di indonesia dengan tujuan seperti yang dinyatakan oleh pihak google yakni untuk mempermudah mengkoordinir aktifitas sebuah blog seiring dengan pendekatan Google terhadap konten ekspresi bebas dan kontroversial.

Sebenarnya hal ini tidak berarti alamat blog akan dialihkan ke alamat yang berbeda, melainkan hanya mengalihkan blogspot ke domain lokal dimana  pembaca berada.

Terkait fenomena ini, banyak pihak yang mengeluh meskipun sebagian pihak tidak peduli dan menganggap hal ini bukan sesuatu yang penting. Keluhan pengguna Blogger adalah mengenai Ranking blog yang katanya membengkak dan menurunnya SEO di SERP.

Mengenai SEO masih simpang siur, sementara mengenai Ranking kabarnya memang banyak pihak yang mengalami kerugian yakni membuncitnya Rank blog.

Mengenai SEO menurut Google

Perubahan ini dapat menyebabkan perayap menemukan konten Blogspot pada banyak domain yang berbeda. Blogger berusaha keras untuk meminimalkan konsekuensi negatif dari penghostingan konten Blogspot di beberapa domain. Mesin telusur semestinya menganggap versi blogspot.com blog Anda sebagai versi yang resmi. Pelajari lebih lanjut mengenai SEO

Sebenarnya ada cara untuk melihat keseluruhan halaman blog universal dengan cara memodifikasi url saat mengakses blog, dan ini bersifat sementara yakni dengan menambahkan ncr setelah url blog semisal nama-blog.blogspot.com/ncr untuk keseluruhan halaman dan nama-blog.blogspot.com/ncr/example-page untuk halaman mandiri.

Nah, tapi jika tidak ingin mendapat pengalihan otomatis kedomain lokal dan mempertahankan .com dengan tujuan mencegah membuncitnya Rank blog, ada cara sederhana yang bisa kita lakukan dengan hanya menambahkan JavaScript untuk mencegah pengalihan tersebut.

 Mencegah Auto Redirect Blogger ke Domain Lokal
Caranya letakkan kode dibawah ini tepat sebelum kode </head> di dalam template.
<script type="text/javascript">
var blog = document.location.hostname;var slug = document.location.pathname;var ctld = blog.substr(blog.lastIndexOf("."));if (ctld != ".com") {var ncr = "http://" + blog.substr(0, blog.indexOf("."));ncr += ".blogspot.com/ncr" + slug;window.location.replace(ncr);}
</script>


Atau bisa juga menggunakan kode ini
<script type='text/javascript'>
var str=window.location.href.toString();if("-1"==str.indexOf(".com/")){var str1=str.substring(str.lastIndexOf(".blogspot."));if("-1"==str1.indexOf("/"))var str2=str1;else var str2=str1.substring(0,str1.indexOf("/")+1);window.location.href=window.location.href.toString().replace(str2,".blogspot.com/ncr/")}
</script>


Simpan template, kemudian silahkan buka blog.

Jika masih tetap dialihkan ke domain lokal, mungkin ada kegagalan saat menyimpan template. Klik simpan kembali sampai tombol simpan template tidak berfungsi saat di klik.

Dengan begini mungkin.... rank alexa bisa terselamatkan dari penyakit buncit dan busung lapar.

Simak juga bagaimana Cara Edit Site Listing di Alexa Rank terbaru.

Jasa ReDesign dan Responsive Blogger Template

Jasa ReDesign dan Responsive Blogger Template - Kompatibel dengan semua device adalah standar baru yang sekarang digunakan bagi setiap situs yang ingin menjangkau pengguna lebih banyak. Pengalaman pengguna mobile tidak bisa diremehkan mengingat saat ini pengguna internet di dominasi oleh pengguna Smartphone.

Jasa ReDesain dan Responsive Blogger Template
Semenjak kemunculan smartphone, pengguna internet dimudahkan untuk mengakses informasi melalui gadget. Untuk itu pemilik situs tentu sudah seharusnya memperhatikan fakta tersebut jika tidak ingin kehilangan banyak pengguna pada situsnya, yakni dengan membuat template situs menjadi responsive.

Apalagi jika situs tersebut berisi informasi umum dengan target siapa saja, maka sudah menjaddi keharusan situs tersebut bersifat Responsive Design.

Nah untuk itulah kami hadir dengan menawarkan Jasa ReDesign dan Responsive.

Apa itu Jasa ReDesign dan Responsive ?
Kami akan membantu anda menangani masalah responsivitas situs anda serta mengganti, menambah atau mengubah susunan  dan atau tampilan situs anda sesuai dengan keinginan anda.

Kami menyadari bahwa mungkin anda sibuk dan tidak punya waktu serta energi untuk menangani permasalahan yang mungkin muncul menjadi gangguan (bug) pada situs anda terkait tampilan dan performa. Maka serahkan semua urusan tersebut untuk kami tangani secara profesional.

Informasi Paket

Dalam layanan ReDesign dan Responsive ini kami membagi beberapa poin ke dalam paket yang berbeda yakni ReDesain dan Responsive hadir dengan paket yang berbeda, namun anda bisa menggunakan keduanya sekaligus.

Paket ReDesign


Maksud dari ReDesign adalah mendekorasi ulang tampilan situs anda, hal ini menyangkut performa dan juga user interface.
Anda bisa memesan penambahan fitur sesuai dengan keinginan serta mengubah, mengganti, menambahkan atau menghapus bagian-bagian dalam situs anda sesuai dengan keinginan anda.

Mengenai harga dari paket ini kami tidak memungut biaya yang terlalu mahal, dan tidak ada patokan khusus jumlah minimum maupun maksimum mengingat ini ditentukan dari point pesanan.

Bicarakan mengenai harga dengan kami sebelum anda memutuskan untuk menggunakan Jasa ReDesign Template kami.


Paket Responsive

Jika anda memiliki situs berbasis Blogger dengan template yang tidak responsive namun tidak ingin mengganti dengan template yang baru, maka yang perlu anda lakukan hanyalah membuat template tersebut menjadi responsive agar bisa diakses dengan semua media dengan layar yang berbeda seperti smartphone, dan tablet. Namun membuat template menjadi responsive tentu akan membutuhkan waktu dan juga tenaga yang tidak sedikit, untuk itu biarkan kami yang menangani masalah tersebut.

Harga yang kami tawarkan tidak mahal yakni kisaran 50 ribu tergantung kebutuhan dan banyaknya kode yang harus disesuaikan. Mungkin juga bisa lebih murah dari harga diatas.

Berminat menggunakan layanan Jasa ReDesign dan Responsive kami ? segera hubungi kami melalui halaman order, kontak atau hubungi kami via text ke kontak yang tercantum dibawah ini.

Kontak
SMS/ WA : 085842732643
Line ID : ichi_hikaru
BBM : 7af3b0e5

Jika anda ingin berkonsultasi terlebih dahulu mengenai layanan Jasa ReDesign dan Responsive, silahkan hubungi kami. Kami siap membantu segala macam kebutuhan anda terkait dengan Desain dan dan User Interface situs anda.

Jasa Cloning Template All CMS ke Blogger

Jasa Cloning Template All CMS ke Blogger - Selamat datang di Cloning System ! Ini merupakan Deklarasi pertama kami terkait dengan Jasa Cloning Template Blogspot dimana sebelumnya kami menggunakan judul Cara Cloning Template dalam waktu Singkat yang diarahkan ke situs ini. Namun sekarang kami bertegas untuk menggunakan judul yang sudah terlalu mainstream yakni Jasa Cloning Template All CMS ke Blogger. Mengapa ? karena layanan kami saat ini tidak hanya Clone Template melainkan kami juga melayani Jasa Pembuatan Desain Website berbasis Blogger.
Jasa Cloning Template All CMS ke Blogger Murah

Apa yang dimaksud All CMS ?

Kami adalah pengembang desain untuk website berbasis Blogger. Yang berfokus pada pengembangan website berbasis Blogger. Sementara selain Blogger, ada begitu banyak CMS (Content Management System) atau Blog Engine yang digunakan untuk membuat Blog dan Website, misalnya Wordpress, Drupal,Joomla dll.

Jika anda pengguna Blogger dan menginginkan desain Blog atau Website anda dirubah tampilan dan fiturnya menggunakan desain Website lain atau dari CMS lain tanpa terkecuali, maka Kami adalah Jawaban yang paling tepat.

Semua hal yang awalnya hanya mimpi dan keinginan kosong, kami bantu wujudkan dalam bentuk kenyataan.

Hal Mendasar pada Website

Desain

Desain merupakan sebuah gambaran umum sebagai antarmuka antara si pemilik website dengan audience. Desain yang profesional tentu akan sangat berpengaruh terhadap kualitas informasi yang disampaikan. Selain itu, desain sangatlah erat kaitannya dengan pengalaman pengguna.
Jangan biarkan pengguna situs website anda kabur hanya karena tidak nyaman dengan kondisi website anda.

Program

Struktur dan bahasa program selalu mengalami perkembangan setiap saat tanpa bisa dicegah dan terjadi begitu cepat. kebutuhan validasi adalah hal yang sangat penting agar audience anda tidak kehilangan website favorit tempatnya berkunjung hanya karena struktur website anda tidak memenuhi syarat validasi terbaru. Maka, serahkan pada kami untuk menangani segala macam kebutuhan website anda terkait struktur dan program yang anda butuhkan di website anda.


Kami percaya, ada banyak sekali keinginan anda untuk mengubah dan memodifikasi serta menginstal theme bagus namun terkendala waktu dan tenaga serta pengetahuan akan rumitnya kode di dalam website.

Untuk itu kami hadir membantu anda.

Cloning System sudah berjalan sejak 2013 dan cukup berpengalaman menangani berbagai macam pola desain dan fitur website khsususnya di bidang Clone dan sudah dipercaya oleh pelanggan dari berbagai wilayah di Indonesia mulai dari Sumatra hingga Sulawesi.

Lihat detail Cloning System

Dengan metode yang kami gunakan, hasil akhir dari proyek Clone kami dipastikan lebih baik bahkan dari website yang menjadi target Clone.

Lihat bagaimana cara kami bekerja dan metode yang kami gunakan.

Harga

Kami menyadari bahwa tidak semua hal yang bagus itu harus mahal. Untuk itu kami menawarkan harga yang bersahabat dan sama sekali tidak menguras kantong.

Harga yang kami tawarkan bervariasi tergantung dari kerumitan proyek yang kami tangani mengingat setiap  website memiliki keunikan,kelebihan dan kekurangan yang selalu berbeda.

Lihat daftar harga layanan kami yang lain

Bicarakan dengan kami mengenai harga dan dapatkan hasil akhir yang memuaskan dengan harga dan kualitas terbaik.

Contoh Proyek

Beberapa contoh yang kami lampirkan dibawah ini adalah beberapa proyek yang kami tangani dan bersifat eksklusif (Pesanan). Url yang kami berikan adalah url project, bukan demo-link dan download link. Dan perlu diketahui bahwa setiap project bersifat eksklusif sehingga anda tidak akan menemukan template yang sama yang dibagikan secara masal.



Dan masih banyak lagi contoh yang lain yang tidak kami tampilkan.

Custom

Jika anda menginginkan mempertahankan ciri khas website anda di template clone dan atau ingin mengurangi serta menambahkan elemen-elemen khusus, kami menangani hal itu sesuai dengan permintaan tentu melalui kesepakatan. Ini berkaitan dengan lama waktu pengerjaan dan biaya yang mungkin akan kami kenakan penambahan biaya Custom tergantung dari kondisi custom yang anda minta.

Lama Pengerjaan

Waktu pengerjaan bervariasi tergantung dari proyek yang kami tangani dan kesibukan. Waktu pengerjaan yang kami butuhkan biasanya berkisar 2-5 hari.


Bicarakan dengan kami desain website yang anda inginkan, dan kami bantu anda untuk mewujudkan keinginan anda dengan cepat dan hasil memuaskan serta biaya yang murah.

Jika berminat menggunakan layanan kami, silahkan ajukan pemesanan anda ke halaman Order atau anda juga bisa menghubungi kami melalui pesan singkat dengan kontak dibawah ini.


Kontak

SMS/ WA : 085842732643
Email : person.ichi@gmail.com

IN4LINK Leader Theme Responsive Blogger Template

IN4LINK Leader Theme Responsive Blogger Template - Template IN4LINK Leader Theme dibuat untuk Anda member IN4link yang ingin lebih luas dalam menjaring member baru.
Dengan template ini, dipastikan semua kebutuhan presentasi akan jauh lebih mudah dan menguntungkan karena kerja keras tidak terlalu diperlukan. Kenapa ?
Download IN4LINK Leader Theme Responsive Blogger Template
Dalam bisnis jaringan, yang diperlukan untuk menjaring member baru adalah dengan cara presentasi dan closing member. Dan menggunakan template ini kebutuhan presentasi jauh lebih mudah bahan hingga closing member karena kami juga menyediakan form registrasi member baru yang langsung terintegrasi dengan email Anda.

Selain itu, template IN4LINK Leader Theme didukung dengan SEO Optimized sehingga akan dengan mudah bersaing dengan member lainnya dalam memasarkan produk Asuransi Tugu Mandiri.

Terintegrasi dengan Facebook group jika anda memiliki group atau akan dikaitkan ke akun facebook pribadi anda.

Custom Homepage yang menjadikan website anda tampil profesional dan tidak asal-asalan sehingga calon member akan lebih percaya dengan produk yang anda tawarkan terkait dengan Asuransi Tugu Mandiri.
Features Availability
Responsive True
SEO Friendly True *Customizable
Google Testing Tool Validator True
Mobile Friendly True
Multipurpose Blog True
Dynamic Heading True
3 Column Grid View True
Light Base Theme Color True
Grid System with Masonry Js True
Responsive Ad Slot True
Breadcrumbs True
Related Posts with Thumb True
Search Box True
Social Share Button  True
Responsive Dropdown Menu True
Numbered Page Navigation True
Smooth Scroll back To Top True
Custom 404 Page True
Custom Contact Form Widget True
Custom Subscribe Box Widget False
Social Links Widget True
Recent Posts Widget True
Random Posts Widget False
Author Box True
More SEO True
Well Documentation True

Demo Order

Template ini hadir dalam 3 paket yang bisa anda pilih sesuai dengan kebutuhan, pilihan paket silahkan anda lihat dibawah ini:

Paket 1 


  • Pembelian beserta Blog
  • Gratis pembuatan akun Blogger dan Penulisan konten
  • Hosting Unlimited
  • Gratis konten artikel presentasi dan halaman form pendaftaran
  • Gratis input Video presentasi jika
  • Harga 250 ribu
  • Gratis biaya Custom desain dengan catatan tidak keluar dari konsep desain yang ada.


Paket 2


  • Pembelian beserta Blog
  • Gratis Domain TLD (.com, .info, .net) // nama website anda yang tentukan.
  • Hosting Unlimited
  • Gratis konten artikel presentasi dan halaman form pendaftaran
  • Gratis Input Video Presentasi
  • Harga 350 ribu
  • Gratis biaya Custom desain dan penambahan Custom page
  • Tercantum di halaman Klien kami


Paket 3


  • Pembelian Template
  • Support Instalasi dan Setup
  • Non Form Pendaftaran
  • Harga 100 ribu



Kenapa harus membeli template ini ?

Sudah banyak klien kami dari IN4LINK yang PUAS dengan Desain dan performa template ini serta support yang kami berikan, silahkan lihat testimoni klien kami di halaman Testimoni Klien Kami.

Anda bisa membandingkan desain serta performa template ini dengan website maupun blog lain para pemasar Asuransi Tugu Mandiri yang tidak menggunakan layanan kami, akan sangat jauh sekali perbedaan diantaranya. Terlihat sekali kualitas dan intergritas pemilik websitenya. Silahkan bandingkan.

Jangan ketinggalan dengan member lain yang mungkin akan mengambil calon member anda karena keterlambatan anda menentukan pilihan dan menggunakan template kami.

Jangan biarkan calon member anda loncat ke Admin (Sponsor Anda) hanya karena anda tidak memiliki form pendaftaran untuk memastikan calon member anda benar-benar mendaftar di jaringan anda. Perhatikan bahwa link pendaftaran di Web replika anda tidak mencantumkan ID, itu artinya URL sponsorship sangat rentan sekali sehingga kemungkinan besar calon member anda akan masuk ke jaringan langsung dari Admin penyedia web replika anda.

Dengan menggunakan formulir pendaftaran online akan sangat menguntunkan anda. Selain member baru dipastikan mendaftar di jaringan anda, anda memiliki kontrol penuh terhadap posisi di masing-masing kaki anda. Dan intinya adalah anda benar-benar menjadi leader di jaringan anda tanpa harus kehilangan member baru yang lompat ke upline anda.

Masih ragu dengan kualitas Template IN4LINK Leader Theme ?


Silahkan pikirkan lagi dan anda akan kehilangan banya peluang hanya karena terlalu lama menentukan pilihan.

Demo Order

Memahami Css Pseudo Element :before dan :after

Memahami Css Pseudo Element :before dan :afterr - Mungkin sering kali kita mendengar mengenai Css :before dan :after dimana ini seringkali berperan dalam pembentukan element dalam DOM.
Memahami Css Pseudo Element :before dan :after
Css :before dan :after merupakan bagian dari Css Pseudo yang penjelasannya ada di artikel selanjutnya. Dan untuk sekarang kita hanya hanya akan berfokus pada pembahasan mengenai Css :before dan :after.

Apa Itu Css Pseude :before dan :after ?

Kata "pseudo" diambil dari bahasa Yunani yang berarti "Lies,False" dimana ini sama saja dengan membuat element kamuflase.

Pada dasarnya Css ini tidak akan mengubah element utama dan hanya sekedar menyisipkan element seperti hantu untuk memanipulasi element yang ditunjuk.

Dulu, Css pseudo element :before :after tidak ditampilkan pada page source, namun sekarang kita bisa melihat dimana letak element bayangan ini pada DOM yang kita buat.

Syntax dasar dari Css :before dan :after seperti ini
#box {}

#box:before {
  content:"#";
}

#box:after {
  content:".";
}


Dimana #box adalah element utama kita yang akan kita beri Css bayangan :before :after.

Misal kita buat element utama seperti ini

<div id="box">
Hello
</div>

Dan buat styling seperti ini
#box {
  width:100px;
  height:100px;
  background:#16a085;
  color:#fff;
  padding:20px;
  text-align:center;
}

Maka hasilnya akan seperti ini


Kemudian kita tambahkan elemen :before dan :after

#box:before {
  content:"#";
}

#box:after {
  content:">.<";
}


Hasilnya seperti ini



Dengan artian bahwa disini kita menambahkan element :sebelum dan :sesudah konten utama yang kita buat.

Jika kita lihat melalui developer tool di browser, maka kita bisa melihat disana ada elemen tambahan di dalam #box ,

<div id="box">
  ::before
  "
  Hello
  "
  ::after
</div>
Bisakah kita memberi styling khusus pada elemen :before dan :after ?

Bisa, namun perlu diingat bahwa element tersebut harus memiliki atribut content. Atau itu tidak akan bekerja.


Kemudian, kita juga tidak hanya bisa menambahkan text ke dalam atribut content, misal kita ingin menggunakan image, maka perintahnya seperti ini

#element:before {
   content: url(image.jpg);
}
Atau kita juga bisa meninggalkannya tetap kosong seperti ini

#element:before {
   content: "";
}


Semisal disini kita hanya ingin mengambil konten :before dan :after sebagai elemen bayangan berupa box element seperti saat kita ingin membuat manipulasi box shadow pada element utama.

Atau

a:after {
   content: attr(href);
}

Fungsi ini akan mengambil nilai atribut href yang terkandung di dalam tag a untuk ditampilkan kedalam content css pseudo element.

Browser yang mendukung :before dan :after :

  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs),
  • Pretty much all mobile browsers.

Kesimpulan

Banyak hal bisa dilakukan oleh elemen bayangan :before dan :after yang bisa anda kembangkan sendiri untuk membuat desain website anda lebih atraktif dan interaktif.
Pseudo Element :before dan :after sangat powerfull dan didukung oleh semua browser modern dan sangat berguna untuk mempermudah kita dalam memanipulasi element DOM tanpa harus menambahkan elemen lebih yang akan merepotkan ketika terjadi perubahan komposisi pada DOM.

Dan semoga informasi ini bisa menambah setidaknya sedikit pengetahuan untuk yang membutuhkan.

Memberi Css Khusus IE (Conditional Stylesheet)

Memberi Css Khusus IE (Conditional Stylesheet) - Bermain dengan desain dan styling web, seringkali mengalami berbagai kendala khususnya beberapa pengaturan yang tidak berjalan dengan baik terkait dengan interface suatu website. Dan masalah yang sangat menyebalkan dalam kasus ini adalah mengenai Cross Browser Issue yang sering kali muncul saat semua sudah dirasa sempurna. Misalnya saat semua sudah berjalan normal di Chrome, ternyata tidak demikian di browser lain. Untuk mengatasi permasalah yang  muncul di Firefox, anda bsia lihat di halaman ini.
Tag Khusus browser IE
Kita semua tahu bahwa ada beberapa browser yang kerap digunakan dimana kemungkinan besar audience kita datang dari browser yang berbeda. Misalnya saja Internet Explorer.

Diluaran sana, pengguna IE ternyata tidak sedikit, silahkan lihat di halaman statistik untuk memastikan apakah masih ada pengguna IE yang menyambangi situs anda atau tidak.

IE memang menjadi momok yang sangat menyebalkan mengingat kemampuan IE memang sangat jauh berbeda dengan kemampuan browser modern, khsusnya IE8 kebawah.

Untuk itu kita perlu memberi sedikit sentuhan yang khusus dibaca untuk browser IE8 kebawah.

Memasang Tag Khusus Untuk IE

Tag Khusus Untuk IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
 <![endif]-->

Stylesheet ini hanya akan dibaca oleh browser IE

Ini tag khusus untuk selain IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css">
<!--<![endif]-->

Stylesheet ini hanya akan dibaca untuk browser selain IE

Atau untuk pengguna Blogger yang ingin menanam Css langsung di dalam template bisa gunakan tag seperti ini
<!--[if lte IE 8]>
<style type="text/css">
css for IE 8, IE 7, IE 6 dan yang di bawahnya
</style>
<![endif]-->

Tag diatas akan dibaca hanya oleh IE8 kebawah.
<!--[if ge IE 5.5]>
<style type="text/css">
css for IE 6, IE 7, IE 8 dan yang di atasnya
</style>
<![endif]-->

Atau kita bisa menggunakan metode terakhir yang lebih simple yakni dengan menambahkan atribut khusus dalam Css yang hanya akan dibaca oleh IE seperti contoh dibawah

Semisal kita punya elemen <div id="header"></div>, Css kita secara umum akan seperti dibawah ini

#header {
   height:100px;
}

Untuk memberi styling khusus IE kita bisa menambahkan atribut khusus seperti dibawah ini

#header {
   height:100px;
   _height:100px; //atribut khusus untuk IE
}

IE 10 dikatakan sudah tidak perlu menggunakan tag Conditional khusus seperti diatas karena sudah support Css3 setara dengan browser modern lainnya seperti Chrome, Firefox dan Safari.

Solusi Masalah Yang Sering Muncul Dalam Css

Permasalahan Yang Sering Muncul Dalam Css Styling - Dalam menangani kasus styling interface pada web desain, sering kali muncul masalah masalah yang kadang membuat pemula kelimpungan. Tidak hanya pemula, karena otak manusia punya keterbatasan dalam mengingat, kadang yang sudah master pun lupa pada hal-hal sepele yang ternyata membuat desain menjadi tidak sempurna bahkan berantakan.
mengatasi masalah yang timbul dalam css
Terutama pada bagian Css yang berfungsi sebagai pengatur style dari setiap elemen HTML. Meskipun tidak menutup kemungkinan hal yang paling mendasar yakni HTML juga seringkali mendapati masalah karena kesalahan dalam menulis (typo).

Sebenarnya apa saja biang kerok dari permasalah Css yang sering ditemui Newbie dalam mengatur style desain website ?

Permasalahan Yang Sering Muncul Dalam Css Styling

Css Reset

Setiap browser sudah memiliki aturan sendiri dalam memformat halaman sebuah website, itulah mengapa ada istilah Cross Browser. Dan masing-masing dari browser umumnya menggunakan satu cara mendasar dalam menampilkan halaman website yakni pada default styling, seperti membuat secara otomasti tag <b> menjadi huruf tebal, <i> miring serta mengatur pada bagian margin dan juga padding yang sering mengganggu.

Solusinya ? Gunakan Css Reset
*{
 margin:0;
 padding:0;
}
Tanda bintang (*) diatas berfungsi sebagai selector semua tag elemen html atau sama dengan mengatur dokumen html itu sendiri secara keseluruhan.

Sebenarnya Css Reset tidak hanya itu, anda bisa mencari kelengkapannya seperti contohnya disini.

ID dan Class

Masalah lain yang kadang muncul adalah ketidak pahaman mengenai selector ID dan Class.
Selengkapnya mengenai pembahasan selector ID dan Class bisa ditemui di halaman ini.

Padding dan Margin

Tidak sedikit pemula yang kebingungan dengan dua hal ini yakni Margin dan Padding dan perbedaan serta fungsinya. Anggapnya hal ini sama yakni untuk memberikan jarak sebuah konten.

Yang pada dasarnya hal ini adalah dua hal yang berbeda, gambarannya dibawah ini
Penjelasan singkatnya adalah bahwa :
Katakanlah kita punya dua elemen dengan nama <div class="box">, dimana formatnya seperti dibawah ini
<div class="box">
// disini padding
<p>Ini sebuah box 1</p>
// padding
</div>
// disini letak margin
<div class="box">
// padding
<p>Ini sebuah box 2</p>
// padding
</div>

Dengan kata lain yang lebih sederhana bahwa padding adalah jarak dari batas tepi ke bagian konten di dalam box, sementara margin bertugas mengaturn jarak antar box.

Masalah yang muncul terkait padding adalah ukuran box tidak sesuai dengan ukuran yang sudah ditentukan. Misal kita beri styling seperti ini,
.box {
        width:100px;
        height:1000px;
        margin:10px;
        padding:20px; // dengan tujuan konten lebih rapi di bagian dalam
}

Namun pada hasilnya , ukuran box menjadi lebih lebsar dari ukuran yang sudah ditentukan yakni 100px ?
Hal itu disebabkan oleh penambahan padding sebesar 20px sehingga besar box menjadi 140px, selain itu, penggunaan border juga turut menambah besarnya ukuran box.

Solusi agar ukuran tetap ?
Gunakan ini,
*,*:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
Untuk membuat konten apa saja berada di tengah elemen induk, gunakan margin:0 auto; yang berarti:
.content {
  margin-top:0;// bisa diatur sesuai keinginan
  margin-right: auto;
  margin-bottom:0;// bisa diatur sesuai keinginan
  margin-left: auto;
}
Note : untuk mempersingkat penggunaan margin, padding dan lainnya seperti box-shadow gunakan format seperti ini margin:0 0 0 0; (margin: top right bottom left;), dampaknya halaman lebih ringan saat dimuat.


Css Position

Secara default, setiap element html menggunakan nilai static. Posisi static tidak akan terpengaruh dengan properti top, right, bottom, left. Melainkan harus digunakan padding ataupun margin untuk mengatur jarak.

Posisi Fixed berfungsi untuk mematenkan sebuah elemen tidak terpengaruh dengan kondisi halaman, seperti saat halaman di gulung kebawah dan keatas, konten dengan posisi fixed akan tetap berada di tempat yang sudah ditentukan.

Posisi Relative sama halnya dengan posisi static, hanya saja posisi relative akan terpengaruh pada nilai properti top, right, bottom, left.

Posisi absolute merupakan posisi yang dipastikan dengan mengambil konten dengan posisi relative sebagai induk. Dengan artian posisi absolute harus ditentukan di dalam elemen induk dengan posisi relative. Jika tidak ada posisi relative yang mengurung elemen absolute, maka ia akan bergantung pada elemen body sebagai induk.

Floating Content
Penggunaan float pada suatu element digunakan untuk mengatur apakah yang harus dilakukan oleh suatu elemen. Float hanya memiliki dua properti yakni left dan right.

Namun hal yang biasanya terjadi saat mengatur floating adalah elemen induk menjadi aneh. seperti contoh dibawah ini..

Kita buat markup seperti ini atau jika dalam template blogger biasanya konsepnya juga sama seperti dibawah ini
<div class="container">
 <div class="main-wrap"></div>
 <div class="sidebar"></div>
</div>

Kemudian  kita buat stylingnya,
.container {
 width:100%;
 max-width:500px;
 margin:0 auto; /* agar container berada di tengah browser*/
 padding:20px;
 background:blue;
}

.main-wrap {
 background:red; 
 width:65%;
 height:300px;
 float:left;
}

.sidebar{
 background:green;
 width:30%;
 height:300px;
 float:right;
}

Maka hasil yang kita dapatkan adalah seperti ini
Dalam kondisi seperti ini, yang jadi masalah adalah .container tidak membungkus dua elemen di dalamnya yakni .main-wrap dan .sidebar.

Solusi untuk masalah ini, kita bisa menggunakan beberapa opsi, seperti diantaranya menambahkan elemen <div class="clear"></div> sebelum penutup container dan menambahkan css baru yakni
.clear {clear:both;}. Biasanya di dalam template sudah tertanam css tersebut.
Opsi kedua adalah memberikan atribut overflow:hidden pada element .container.
Maka hasilnya seperti ini
Sampai disini ada pertanyaan ?

Baiklah, semoga artikel ini bisa sedikitnya membantu para pemula yang mungkin masih kebingungan dan bertanya-tanya mengenai masalah yang sering muncul saat berurusan dengan Css.

Mengalihkan Halaman Error ke Halaman Khusus

Mengalihkan Halaman Error ke Halaman Khusus - Ketika kita menulis dan menerbitkan sebuah artikel, tidak lama setelah itu halaman kita tersebut akan dibaca oleh mesin pencari seperti Google. Dan jika suatu saat dengan suatu alasan artikel tersebut dihapus, tidak serta merta langsung dihapus dari rekaman index Google sehingga mungkin masih saja ada orang yang klik hasil pencarian di Google yang menuju ke halaman artikel tersebut.

mengalihkan halaman error
Namun karena artikel sudah dihapus, maka si orang tersebut kemudian akan diarahkan ke halaman kosong Error 404 atau halaman rusak/hilang.

Biasanya karena merasa apa yang pengunjung cari ternyata sudah hilang, maka pengunjung akan meninggalkan halaman tersebut dengan menutup tab pada browser dan membuka halaman web lain.

Bagaimana caranya agar orang tersebut tidak pindah website dan begitu saja menutup tab ? 
Cara paling mudah adalah dengan mengalihkan halaman Error ke halaman khusus yang kita tentukan sendiri, misalnya halaman artikel pengganti atau halaman index.

Untuk mengaktifkan fitur tersebut, kita hanya perlu menambah script dibawah ini .


<script type = "text/javascript">
clone_redirect = setTimeout(function() {
window.location.href = 'http://Halaman-Khusus';
}, 10);
</script>
Ganti Halaman-Khusus dengan halaman yang akan menjadi pengalihan misalnya menjadi seperti ini


<script type = "text/javascript">
clone_redirect = setTimeout(function() {
window.location.href = 'http://cloning-system.blogspot.com/search';
}, 10);
</script>
Tujuannya adalah memberikan pengunjung alternatif artikel yang mungkin akan menarik perhatiannya dan bertahan lama di blog/ website kita dengan mengalihkan halaman hilang ke halaman index .

Caranya :
  1. Buka Dasbor dan menuju Setting > Search Preferences
  2. Perhatikan pada Custom Page Not Found dan klik edit
  3. Kemudian letakkan kode diatas ke dalam form yang tersedia
  4. Simpan

Untuk mencoba berhasil atau tidaknya, buka halaman blog anda dengan format seperti ini
http://nama-blog.com/404


Mengatasi display:table Css Di Firefox

Mengatasi display:table Css Di Firefox dan IE - Dalam membangun sebuah desain website atau sekedar memodifikasi tampilan sebuah interface situs, dan memperhatikan pengalaman pengguna yakni orang-orang yang berkunjungn ke situs tersebut, maka kita akan dihadapkan pada sebuah kenyataan mengenai ada beberapa web browser yang sering digunakan oleh pengguna tersebut. Dan saat itu kita dihadapkan dengan yang namanya Cross Browser Issue.
Mengatasi bug display table di firefox
Tidak semua browser memiliki kemampuan yang sama dalam menterjemahkan kode css khususnya Css3 yang hanya berlaku untuk browser modern. Sementara browser jadul layaknya IE7 ke bawah akan mengalami kerepotan dalam menterjemahkan kode yang sudah kita buat bahkan sama sekali tidak mendukung bahasa Css tersebut. Sehingga semua styling yang sudah kita buat tidak akan bekerja pada interface situs tersebut dan hasilnya berantakan.

Sebenarnya saya bukan orang yang seteliti itu menanggapi dan tidak mau ambil pusing pada penggunaan web browser yang biasa orang lakukan, menurut saya, ketika pengguna menggunakan IE7 kebawah untuk browsing, bukan desainer web dan kode css nya yang bermasalah dan harus memperbaiki banyak hal, tapi pengguna itu yang harus mengganti browsernya ke yang lebih modern !. Namun mengingat kita tidak seharusnya melakukan itu, maka yang perlu kita lakukan yakni melakukan perbaikan ataupun membuat kode Css yang berlaku atau dapat dibaca oleh browser yang umum digunakan seperti Chrome, Firefox, Safari, Opera dan juga IE.

Salah satu kode css yang bermasalah pada Firefox dan IE ada pada display:table.

Fungsinya Untuk Apa ?

display:table berfungsi seperti margin:0 auto yakni untu membuat konten berada di tengah dan mengikuti perubahan secara otomatis dari element induk.
Saat kita membuat sebuah element dengan tinggi yang cukup besar dan ingin meletakkan konten yang tidak bernilai height:100% dan menutup semua element tersebut misal ingin meletakkan gambar berada di tengah element, maka yang kita gunakan adalah display:table pada element besar tersebut, sementara konten berisi gambar diberi nilai display:table-cell dan vertical-align:middle untuk membuat konten ini berada ditengah secara vertikal.

Konsepnya adalah seperti contoh ini ..
.element-induk {display:table;margin:0 auto;position:relative;} *element induk
.content {display:table-cell;vertical-align:middle;} *element rata tengah

Contohnya silahkan lihat di halaman ini. atau ihat gambar dibawah ini ..

Jika kita menggunakan Chrome sebagai media untuk melihat hasilnya, maka dengan cara menggunakan kode css tersebut sudah berfungsi dengan baik. Namun sayangnya hal tersebut tidak berlaku untuk browser Firefox dan IE sementara kita tahu banyak sekali pengguna internet yang lebih memilih firefox sebagai web browser andalan dengan alasan yang beragam.


Cara Memperbaikinya

Sebenarnya ada cara mudah untuk memperbaiki hal tersebut meskipun tidak semua orang memahami betul konsepnya.
Untuk memberikan perintah yang sama pada browser Firefox dan IE, sebenarnya kita hanya perlu menentukan ukuran tinggi element induk dengan cara memberi nilai height:xx dan table-layout:fixed.


Pelajari selengkapnya di JSfiddle

Ada pertanyaan seputar pembahasan mengenai display:table ?

Daftar Alexa Gratis di Versi Terbaru

Cara Mendaftar Gratis Di Alexa Versi Baru - Belum lama ini Alexa memperbarui tampilan situsnya menjadi lebih kekininan dan modern serta profesional. Dan ternyata hal tersebut membuat banyak orang kebingungan untuk mengakses ke menu pendaftaran karena semuanya bersifat premium.

Pada tampilan awal situs Alexa sudah disuguhi pilihan paket dengan variasi harga yang sudah ditentukan yang padahal dulu kita bisa mendaftar secara gratis dan mudah.

Apa Itu Alexa ?

Alexa rank adalah sebuah situs penyedia review pada semua website di dunia dengan memberi nilai (rank) pada tiap-tiap situs untuk mengukur perkembangan sebuah situs terhitung dari banyaknya jumlah links in dan tentunya trafik pada suatu situs.

Kebanyakan webmaster menilai Alexa merupakan sebuah tolok ukur peringkat suatu situs website, semakin tinggi nilai ranknya (rank tinggi berangka kecil, ranking satu adalah terbaik), maka semakin bonafid situs tersebut. Untuk itu pada pemilik website di seluruh dunia berlomba untuk terus meningkatkan performa situs websitenya agar memiliki rank yang tinggi di Alexa.

Apa itu perlu ?

Jika anda adalah pengusaha yang berusaha mengembangkan bisnis dengan jangkauan yang lebih luas dengan memanfaatkan website/situs online, maka hal ini bisa dikatakan perlu dan bahkan penting. Dari nilai rank yang diberikan Alexa sebuah situs bisa dikatakan layak atau tidak layak untuk ditayangkan atau dipercaya. Semakin tinggi rank suatu situs, maka semakin berkualitas situs tersebut.

Singkronisasi Alexa

Untuk bisa mendapatkan rank Alexa, langkah pertama yang perlu dilakukan adalah dengan mensinkronkan situs kita dengan alexa, yakni dengan cara menambahkan meta tag khusus alexa untuk di tanam di dalam html situs kita. Yakni langkah pertama yang harus dilakukan untuk mendapat meta tersebut adalah dengan cara mendaftar.

Diatas sudah sedikit saya singgung bahwa di tampilan baru sekarang, banyak orang bingung jika ingin mendaftar secara gratis mengingat di halaman awal calon member sudah disuguhkan dengan pilihan paket premium seolah tidak ada yang gratis. Padahal masih ada.

Jika ingin mendaftar dengan gratis, maka ikuti langkah sederhananya dibawah ini dengan seksama ..

Cara Mendaftar Gratis Alexa Terbaru


1. Buka www.alexa.com/siteowners/claim
2. Akan muncul halaman seperti dibawah ini
3. Isi kolom tersebut dengan nama blog/situs web kita dan klik Continue.
4. Selanjutnya kita akan dibawa ke halaman pendaftaran, untuk mempermudah proses pendaftaran, pilih Facebook saja.

5. Kemudian kita dihadapkan dengan pilihan metode input meta tag, dan pilih saja yang nomor 2

6. Salin meta tag code yang muncul seperti gambar dibawah ini dan letakkan di bawah kode <head> pada template editor. Kemudian simpan.
7. Kembali ke halaman meta tag alexa kemudian klik Verify my ID
8. Selanjutnya masuk ke Dashboard Alexa > Pilih blog > Pilih Site Management >  Edit Site Listing

Isi data - data blog Anda pada formulir tersebut :
Site Title : Isi dengan judul blog Anda
Site Description : Isi dengan deskripsi blog Anda
Site Owner : Isi dengan nama pemilik blog
Address : Isi dengan alamat pemilik atau blog
City : Isi dengan kota Anda
State / Province : Isi dengan Provinsi Anda tinggal
Postal / Zip Code : Isi dengan kode pos di daerah Anda
Country : Isi dengn negara Anda
Public Email : Isi dengan email yang akan dipublikasikan dan bisa dilihat orang lain.
Select the country for your rank : Silakan isi dengan di negara mana Anda ingin menampilkan rangking blog Anda.
9. Terakhir klik Save Changes lalu klik Ok dan selesai

Update 2016

Kondisi tampilan baru Alexa memang terlalu membingungkan untuk pengguna akun gratis yang ingin mengelola situsnya di alexa. Semua fitur alexa diarahkan sebagai premium fitur sehingga pengguna free akan mungkin langsung mengupgrade keanggotaanya karena tidak lagi menemukan fitur-fitur gratis yang dibutuhkan.

Di halaman dasbor juga tidak menyediakan sesuatu yang sepertinya mengarah ke bagian site listing.
Namun, ada cara khusus untuk mengedit site listing dan mengisi formulir kelengkapan informasi situs dengan cara dibawah ini ...

Cara Memunculkan Edit Site Listing Alexa Terbaru

Untuk masuk ke site management, masuk ke http://www.alexa.com/pro/listing/edit?site=tulis-nama-situs
Kemudian isikan data-data seperti pada contoh formulir diatas.

Atau cara kedua adalah dengan menggunakan pencarian situs dengan form pencarian yang terletak disebelah kanan halaman alexa.

  1. Pastikan sudah login terlebih dulu
  2. Ketikan situs yang akan di edit
  3. Akan muncul informasi situs yang masih polos, gulung layar dan lihat bagian bawah kanan.
  4. Klik Edit site , kemudian isi semua form seperti contoh di atas dan save.
  5. Tunggu 2 hari untuk proses update , dan selesai.


Sampai disini ada pertanyaan ?