Cara Mencari Kode Script di Edit HTML

Cara Mencari Kode Script di Edit HTML Template Blogger Updates cekidot , Sebelumnya saya merasa kesulitan dengan tampilan Edit HTML yang baru ini , karena saya sedikit sulit untuk mencari kode - kode script html yang akan saya edit , karena jika hanya menggunakan menu ''Lompat Ke Widget'' saja masih merasa kurang pas dalam menemukan kode script yang dicari , Sedangkan dengan cara menahan secara bersamaan CTRL + F nya tidak berfungsi jika kode yang akan kita cari tidak dalam jangkauan , tapi untuk sekarang saya sudah menemukan caranya , dan ternyata pihak blogger tidak sedang menyulitkan malah sebaliknya perubahan - perubahan yang telah diberikan adalah untuk kemajuan dunia blogger itu sendiri , diantaranya adalah dengan merubah tampilan baru yang diberikan pada editor html tersebut.


Untuk Cara Mencari Kode Script di Edit HTML Template Blogger Terbaru ini diantaranya :

!. Sign in terlebih dahulu dengan my account sobat

2. klik Template pada Dashboard blogs sobat

Cara Mencari Kode Script di Edit HTML Template Blogger Updates

3. klik Edit HTML ( saya sarankan back up terlebih dahulu untuk menjaga template blogs sobat )

4. Silahkan sobat klik dibagian dalam kode - kode HTML , bebas yang mana saja jika sudah mengklik silahkan tekan Ctrl + F secara bersamaan di keayboard sobat, maka akan muncul kotak search pada pojok kanan atas

5. Silahkan masukkan kode yang akan sobat cari ke kotak search pada pojok kanan atas lalu klik enter pada keayboard sobat

Cara Mencari Kode Script di Edit HTML Template Blogger Updates

6. Kemudian lihat hasilnya,maka kode yang sobat cari akan di tampilkan dan apabila ada lebih dari satu kode yang dicari , maka semua kode tersebut sudah terblok secara otomatis dengan warna kuning transparan untuk warna mungkin bisa saja berbeda - beda

7. Silahkan sobat edit Template sesuai apa yang sobat cari , jika sudah selesei jangan lupa simpan Template

Sekian Tentang Tutorial Tips Trik Blogger Cara Mencari Kode Script di Edit HTML Template Blogger Updates semoga bermanfaat..

Pure CSS Percobaan Stopwatch

Pure CSS Percobaan Stopwatch
Timer Stopwatch ini saya hanya share saja karena stopwatch ini saya terinspirasi dari tutorial web lain. dan saya tidak bisa menyebutkan siapa pembuatnya karena saya lupa lagi auhtor web tersebut. jadi kita langsung saja share pada link download dan demonya. Dasarnya Stopwatch ini asli di buat menggunakan css tanpa bantuan script yang aneh-aneh. Hanya penggunaan pada input radio controls dan tentu saja peran penting dari CSS3. Efek Animation CSS adalah salah satunya dan property keyframes. perlu di ketahui Percobaan Stopwatch ini tidak akan bekerja secara sempurna jika browser yang di gunakan belum update terbaru. dan menggunakan Browser Firefox dan Chrome akan lebih baik.


 HTML
<input id="start" name="controls" type="radio" />
        <input id="stop" name="controls" type="radio" />
        <input id="reset" name="controls" type="radio" />
        <div class="timer">
            <div class="cell">
                <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell">
                <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell divider"><div class="numbers">:</div></div>
            <div class="cell">
                <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
            </div>
            <div class="cell">
                <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell divider"><div class="numbers">:</div></div>
            <div class="cell">
                <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
            </div>
            <div class="cell">
                <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell divider"><div class="numbers">:</div></div>
            <div class="cell">
                <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell">
                <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
            <div class="cell">
                <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
            </div>
        </div>
        <!-- Lables for the controls -->
        <div id="timer_controls">
            <label for="start">Start</label>
            <label for="stop">Stop</label>
            <label for="reset">Reset</label>
        </div>


CSS
 .timer{padding:10px;overflow:hidden;display:inline-block;border:7px solid #efefef;border-radius:5px;position:relative;background:linear-gradient(top,#222,#444);background:-webkit-linear-gradient(top,#222,#444);background:-moz-linear-gradient(top,#222,#444);background:-o-linear-gradient(top,#222,#444);box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1);-webkit-box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1);-moz-box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1);-o-box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1)}
.cell{/*Should only display 1 digit. Hence height = line height of .numbers and width = width of .numbers*/
width:0.60em;height:40px;font-size:50px;overflow:hidden;position:relative;float:left}
.numbers{width:0.6em;line-height:40px;font-family:digital,arial,verdana;text-align:center;color:#fff;position:absolute;top:0;left:0;/*Glow to the text*/
text-shadow:0 0 5px rgba(255,255,255,1)}
/*Styles for the controls*/
#timer_controls{margin-top:-5px}
#timer_controls label{cursor:pointer;padding:5px 10px;background:#efefef;font-family:arial,verdana,tahoma;font-size:11px;border-radius:0 0 3px 3px}
input[name="controls"]{display:none}
/*Control code*/
#stop:checked~.timer .numbers{animation-play-state:paused;-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused}
#start:checked~.timer .numbers{animation-play-state:running;-webkit-animation-play-state:running;-moz-animation-play-state:running;-o-animation-play-state:running}
#reset:checked~.timer .numbers{animation:none;-webkit-animation:none;-moz-animation:none;-o-animation:none}
.moveten{/*The digits move but dont look good. We will use steps now 10 digits = 10 steps. You can now see the digits swapping instead of moving pixel-by-pixel*/
animation:moveten 1s steps(10,end) infinite;-webkit-animation:moveten 1s steps(10,end) infinite;-moz-animation:moveten 1s steps(10,end) infinite;-o-animation:moveten 1s steps(10,end) infinite;/*By default animation should be paused*/
animation-play-state:paused;-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused}
.movesix{animation:movesix 1s steps(6,end) infinite;-webkit-animation:movesix 1s steps(6,end) infinite;-moz-animation:movesix 1s steps(6,end) infinite;-o-animation:movesix 1s steps(6,end) infinite;animation-play-state:paused;-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused}
/*Now we need to sync the animation speed with time speed*/
/*One second per digit. 10 digits. Hence 10s*/
.second{animation-duration:10s;-webkit-animation-duration:10s;-moz-animation-duration:10s;-o-animation-duration:10s}
.tensecond{animation-duration:60s;-webkit-animation-duration:60s;-moz-animation-duration:60s;-o-animation-duration:60s}
/*60 times .second*/
.milisecond{animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s}
/*1/10th of .second*/
.tenmilisecond{animation-duration:0.1s;-webkit-animation-duration:0.1s;-moz-animation-duration:0.1s;-o-animation-duration:0.1s}
.hundredmilisecond{animation-duration:0.01s;-webkit-animation-duration:0.01s;-moz-animation-duration:0.01s;-o-animation-duration:0.01s}
.minute{animation-duration:600s;-webkit-animation-duration:600s;-moz-animation-duration:600s;-o-animation-duration:600s}
/*60 times .second*/
.tenminute{animation-duration:3600s;-webkit-animation-duration:3600s;-moz-animation-duration:3600s;-o-animation-duration:3600s}
/*60 times .minute*/
.hour{animation-duration:36000s;-webkit-animation-duration:36000s;-moz-animation-duration:36000s;-o-animation-duration:36000s}
/*60 times .minute*/
.tenhour{animation-duration:360000s;-webkit-animation-duration:360000s;-moz-animation-duration:360000s;-o-animation-duration:360000s}
/*10 times .hour*/
/*The stopwatch looks good now. Lets add some styles*/
/*Lets animate the digit now - the main part of this tutorial*/
/*We are using prefixfree,so no need of vendor prefixes*/
/*The logic of the animation is to alter the 'top' value of the absolutely
positioned .numbers*/
/*Minutes and Seconds should be limited to only '60' and not '100'
Hence we need to create 2 animations. One with 10 steps and 10 digits and
the other one with 6 steps and 6 digits*/
@keyframes moveten{0%{top:0}
100%{top:-400px}
/*height = 40. digits = 10. hence -400 to move it completely to the top*/}
@-webkit-keyframes moveten{0%{top:0}
100%{top:-400px;}}
@-moz-keyframes moveten{0%{top:0}
100%{top:-400px;}}
@-o-keyframes moveten{0%{top:0}
100%{top:-400px;}}
@keyframes movesix{0%{top:0}
100%{top:-240px}
/*height = 40. digits = 6. hence -240 to move it completely to the top*/}
@-webkit-keyframes movesix{0%{top:0}
100%{top:-240px;}}
@-moz-keyframes movesix{0%{top:0}
100%{top:-240px;}}
@-o-keyframes movesix{0%{top:0}
100%{top:-240px}
}

Cara Membuat CSS3 Tool Tips


Cara Membuat CSS3 Tool Tips
csstuts+ - Hari ini kita Kita akan membuat beberapa teknik Tooltips,dengan beberapa teknik transisi css3 dan class pseudo(semu).
Tooltips kali ini metode yang di gunakan dalam beberapa icon social yang memiliki link dan tips kemunculan seperti halnya title dalam sebuah link..metode ini hampir sama dengan kita membuat menu navigasi.dengan nampaknya sebuah tooltips atau text penjelas dalam sebuah menu... dulu saya pernah membuat tutorial tooltips dengan CSS dan Jquery namun kali ini kita akan membuat Tooltips Pure dengan CSS3
lihat langkahnya seperti di bawah ini :
Daftar HTML yang di gunakan

<ul class="tt-wrapper">
    <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li>
    <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li>
    <li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li>
    <li><a class="tt-facebook" href="#"><span>Facebook</span></a></li>
    <li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li>
    <li><a class="tt-forrst" href="#"><span>Forrst</span></a></li>
</ul>

Elemen css yang digunakan agar memiliki bentuk horizontal ke kiri

.tt-wrapper li a{
    display: block;
    width: 68px;
    height: 70px;
    margin: 0 2px;
    outline: none;
    background: transparent url(../images/icons.png) no-repeat top left;
    position: relative;
}

Setiap list pasti akan memiliki gambar yang berbeda maka background yang akan kita gunakan harus memiliki class psuedo dan position background seperti hanya pada sprite background :
Pasang CSS3 Tool Tips di Blogger
Cara Membuat CSS3 Tool Tips

.tt-wrapper li .tt-gplus{
    background-position: 0px 0px;
}
.tt-wrapper li .tt-twitter{
    background-position: -68px 0px;
}
.tt-wrapper li .tt-dribbble{
    background-position: -136px 0px;
}
.tt-wrapper li .tt-facebook{
    background-position: -204px 0px;
}
.tt-wrapper li .tt-linkedin{
    background-position: -272px 0px;
}
.tt-wrapper li .tt-forrst{
    background-position: -340px 0px;
}

Karena tooltips ini dengna css maka kita harus membuat elemen tersembunyi dengan menggunakan Opacity nilai 0, dan akan nampak dengan mengarahkan mouse dan kita harus mengatur tinggi dan lebar tooltips.. yang saya gunakan adalah 100px dan di tempatkan diatas link social. tersebut maka akan nampak seperti ini:

Cara Membuat CSS3 Tool Tips

.tt-wrapper li a span{
    width: 100px;
    height: auto;
    line-height: 20px;
    padding: 10px;
    left: 50%;
    margin-left: -64px;
    font-family: 'Alegreya SC', Georgia, serif;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: #719DAB;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 4px solid #fff;
    background: rgba(255,255,255,0.3);
    text-indent: 0px;
    border-radius: 5px;
    position: absolute;
    pointer-events: none;
    bottom: 100px;
    opacity: 0;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
}

Dan di bawah adalah ketika pointer di arahkan sebelum dan sesudah pada sebuah link anchor ,sejauh ini warna background border tooltips yang akan di tampilkan dengan teknik berbayang maka yang akan di gunakan dengan RGB color :

.tt-wrapper li a span:before,
.tt-wrapper li a span:after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}

Karena sebelum kemunculan menggunakan opacity:0; maka kita memerlukan elemen psuedo tampilan dengan css penjelas,maka kita akan gunakan border putih pada tiap garis tooltips:

.tt-wrapper li a span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #fff;
}

dan opacity kemunculan saat pointer di arahkan kita gunakan elemen psuedo berikut :

.tt-wrapper li a:hover span{
    opacity: 0.9;
    bottom: 70px;
}

Penjelasan teknik psuedo berikut menurut saya sudah cukup,mungkin anda bisa menambahan beberapa style css yang berbeda,dan akan mudah dengan css tanpa rumit dengan sebuah javascript.

Saya harap Anda menikmati bebrapa teknik dan bisa berguna buat! SELAMAT MONCOBA
Dan perlu di ingat ini hanya akan bekerja di browser yang mendukung pseudo-elemen dan transisi CSS.

Cara membuat efek loading halaman blog ketika memuat halaman

membuat loading halaman blog
Cara membuat efek loading halaman blog ketika memuat halaman - memodifikasi blog dengan salah satu efek ini mungkin akan sangat bermanfaat dan bahkan bisa membuat loading sedikit lebih cepat dari sebelumnya.efek ini hampir sama dengan efek animation dengan @keyframes . nah apa sih yang di maksud dengan loading halaman blog? seperti pada blog ini jika anda membuaka salah satu link pada blog ini maka loading akan muncul ketika memuat halaman. untuk jelasnya lagi anda coba pasang pada blog anda.

CARA MEMASANG PADA TEMPLATE BLOG
1. Simpan jquery di atas code </head> :

Jika pada template anda sudah menggunkan jquery yang sama maka code ini tidak perlu di masukan kembali. dan usahakan versi jquery mengunakan jquery v1.7.1 ganti versi yang lama
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 

2. Simpan CSS di Atas ]]</skin> :
/* LOADING */
#muat-halaman {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 9999;
    text-align: center;
    width: 100%;
    height: 100%;
    padding-top: 200px;
    font-size: 25px;
    color: #fff;
    display: none;
}
 
3. Simpan HTML di Atas </body> 
<div id='muat-halaman'>
<span style='font-size:70px;font-weight:bold;'>Please Wait ..</span><br/>
    To Open!<br/>The Page Is Being Loaded<br/><a href='http://www.under-88.blogspot.com' style='position:absolute;bottom:0;right:0;font-size:8px;color:#fff!important'>link</a></div>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
    $internalLinks.click(function() {
        $('#muat-halaman').fadeIn(800).delay(8000).fadeOut(1200);
    });
    $('#muat-halaman').click(function() {
        $(this).hide();
    });
});
//]]> </script>


4. Terakhir simpan template anda dan lihat hasilnya dengan mengklik salah satu link internal blog anda dan jangan gunakan atribut target="_blank".

Tips dan teknik SEO yang harus anda ketahui

Tips dan teknik SEO yang harus anda ketahui
Untuk memperoleh peringkat terbaik di berbagai mesin pencari, seperti Google dan Yahoo, penting untuk menerapkan strategi SEO yang efektif. Anda yang tidak berlatih SEO secara terus-menerus cenderung lupa beberapa tips yang sebetulnya telah banyak dipublikasikan, padahal menerapkan tips tersebut akan memberikan keuntungan untuk blog anda sepanjang waktu:

Berikut ini Tips Apa perbedaanya seo on page dan seo off page yang tidak boleh anda lupakan:

Header dan sub-header tag

Dengan menggunakan <h1> (header) dan <h2> (sub-header) tag secara efektif, Anda bisa melakukan lebih dari sekedar meningkatkan tata letak situs web Anda. Agar tag ini bermanfaat untuk SEO, Anda perlu menggunakannya dengan cara yang baik. Hal yang penting untuk Anda ingat adalah untuk menghindari spamming website Anda dengan memborbardir header dengan kata kunci (mesin pencari benci ini, sehingga benar-benar akan menghancurkan usaha SEO anda) .

Hapus kode yang tidak perlu

SEO diimplementasikan ke dalam situs web Anda dengan tujuan menjadikannya sebagai terlihat mesin pencari dan pengunjung potensial mungkin. Gunakan validator XHTML untuk menentukan apakah semua kode Anda dapat dibaca atau tidak - pastikan untuk menghapus kode yang tidak berguna untuk tujuan SEO Anda.

Hindari menggunakan gambar sebagai link

Ketika mesin pencari mengindeks situs Anda, mereka benar-benar mengcrawl setiap aspek. Anda harus menghindari menggunakan gambar sebagai link. Semua mesin pencari mengalami kesulitan untuk membaca gambar, mereka lebih mampu untuk membaca text, sehingga link dengan menggunakan gambar menjadi kurang bermanfaat untuk strategi SEO Anda.

Gunakan kata kunci dalam URL Anda

Salah satu langkah pertama untuk menerapkan strategi SEO yang efektif untuk website Anda adalah untuk mengoptimalkan nama domain Anda dan konten situs untuk kata kunci yang relevan. Anda juga harus melakukan ini untuk semua URL di website Anda,.

Minimumkan link yang ada di footer

Ada satu jenis link yang mendapat perhatian sangat sedikit dari mesin pencari, sehingga sama sekali tidak berguna untuk SEO. Link ini dikenal sebagai link footer, meskipun bermanfaat dari sudut pandang navigasi, namun untuk tujuan SEO manfaatnya sedikit, oleh sebab itu usahakan untuk meminimalkan link pada footer.

Hendaknya anda selalu mengingat tips diatas, agar anda dapat berhasil dalam upaya meningkatkan peringkat blog anda di search engine.

Saya Sarankan Anda Baca Juga