cara ngatur blog: Januari 2013

Membuat Kotak Komentar Dengan Tombol Buka / Tutup

Tutotial Belajar Blogspot | Tips Edit Blog - Dengan membuat atau memasang kotak / form komentar buka tutup di blog yang pasti difungsikan untuk merapikan tempat komentar dari para komentator blog anda supaya tampilannya tidak memanjang atau melorot kebawah. bagaimana kalau komentarnya sampai ribuan, kan makin memanjang ke bawah tuh. Sebenarnya istilah buka tutup / show hide pada kotak komentar ini sering disebut dengan spoiler, jika diklik maka akan terbuka dan tertutup tombol spoiler tersebut. Tampilan tombol show hide / buka tutup kotak komentar, seperti terlihat dibawah ini. Simak bagaimana Cara Membuat Kotak Komentar Dengan Tombol Buka / Tutup.

Cara Membuat Show Hide / Spoiler Pada Kotak Komentar di Blogspot :
1. Login ke Blogger
2. Pilih Template => Edit HTML
3. Lalu Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

a.openpanel {display:block;width:100%;height:30px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background: #9E9E9E;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#;}a.openpanel.active em {top:6px;border color:transparent transparent white transparent;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.rudyhartonoPanel {padding:10px 20px 20px;margin:0px 0px !important;}

5. Selanjutnya cari lagi kode </head> dan letakkan kode berikut diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[ var panelSelector = '#comments',
openPanelText = "Buka Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600;
slideUpPanelSpeed = 400;
//]]> </script>
<script type='text/javascript'>
</script> <script src='http://tutorialbelajarblogger.googlecode.com/files/openclosepanel.js' type='text/javascript'/>

Keterangan :
1. Warna merah menunjukkan panjang dan lebar dan background tombol buka tutup
2. Apabila di dalam template anda sudah ada kode jquery warna pink, maka tidak perlu dicantumkan lagi.

6. Selesai, simpan template

Selamat mencoba membuat / memasang tombol buka tutup komentar di blog, semoga bermanfaat.

Tutorial Belajar Blogger , Tips Blog , Tips dan Trik Blog, Panduan Belajar Blog, Membuat Blog Lebih Menarik

Cara Membuat Teks Area Copy Semua

Tutorial Belajar Blogspot | Tips Blog -Ini mengenai teks area lagi. Mungkin pada saat kita posting scrypt ada yang terlalu panjang, kita ingin menempatkannya ke dalam kotak kecil, dan saat kita klik tombol copy otomatis semua scrypt yang sudah kita buat dapat kita copy dan tinggal pastekan saja.

Berikut scrypt yang dapat kita gunakan :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy Semua"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">
Tulis teks atau java script atau mungkin link ke blog anda di sini
</textarea></p></div></form>

ganti tulisan berwarna merah dengan link ataupun tulisan anda sendiri

Misalnya seperti ini :

Selamat mencoba dan Semoga bermanfaat
Tutorial Belajar Blogger , Tips Blog , Tips dan Trik Blog, Panduan Belajar Blog, Membuat Blog Lebih Menarik

Cara Mematikan Fungsi Drag Artikel Blog

Tutorial Belajar Blogspot | Tips Blog - Cara Mematikan Fungsi Drag Artikel Blog Guna mengantisipasipara pencuri konten banyak sekali setiap blog atau website menanggulangi hal ini dengan berbagai cara contoh dengan mematikan fungsi drag pada artikel blog.

Pada kesempatan kali ini aku ingin berbagi Tips tentang bagaimana caranya mematikan fungsi drag tanpa javascript. sudah tentu dengan tidak menambahkan javascript tak akan mempengaruhi loading blog. untuk caranya cukup simple dan sangat mudah, berikut ini tipsnya :

1. silahkan login dulu ke blog kalian.

2. langsung saja menuju edit tamplate.

3. silahkan cari kode <body> pakai Control+F biar cepat

4. kalau sudah kalian temukan kodenya silahkan kalian ganti dengan kode dibawah ini.

<body ondragstart='return false' onselectstart='return false' style='-moz-user-select: none; cursor: default;'>

5. kalau sudah kalian taruh kodenya silahkan kalian simpan. dan coba drag artikel kalian.

Namun tips ini tidak mematikan fungsi klik kanan, selamat mencoba semoga Tips kali ini bermanfaat buat kalian semoga sukses dan happy blogging.

Cara Menghilangkan Tulisan 'Langganan: Entri (Atom)' di Blog

Buat Kalian yang merasa terganggu dengan tulisan Berlangganan Entri Atom di bawah postingan Blog, dan Kalian ingin menghilangkannya, maka saya punya solusinya. Berikut langlah-langkahnya :

Seperti biasa login dulu ke Blog Kalian masing-masing
Cari Rancangan --> Edit HTML
Cari Code ]]></b:skin>
Ttrus Copy dan Paste-kan Code di bawah ini, tepat di atas Code tadi.

.feed-links{
display:none;
}

Simpan dan lihat hasilnya, pasti tulisan Berlangganan Entri Atom sudah hilang.

Selamat Mencoba!!!

Membuat Efek Zoom Pada Gambar Postingan Blog

Tutorial Belajar Blog Terbaru | Tips Blog ,Membuat Efek Zoom Pada Gambar Postingan Blog - Kembali lagi aku ingin berbagi kepada sobat blogger bagaimana Cara Membuat Efek Zoom Pada Gambar Postingan blog . memang cara ini sudah begitu lama di terapkan oleh sobat blogger namun tak ada salahnya kalau aku mengulas lagi artikel Membuat Efek Zoom Pada Gambar Postingan agar sobat blogger yang masi pemula akan tahu seperti owner blogger ini pemula.

sebenarnya cara ini mudah sekali dan tak merepotkan kalian dengan tambahan kode sedikit maka efek zoom untuk gambar postingan kalian akan berubah total. dan ini menjadi kebanggaan yang unik bagi sobat blogger yang baru. nah kalian bisa lihat efek zoom di postingan bawah ini atau juga bisa lihat di blog

Bisa di lihat Contoh gambar di atas apabila sudah mencoba mengarah kan mouse arah gamabar , gambar akan memberikan efek zoom kalau kalian sudah melihat gambar diatas silahkan kita mulai tutorial membuat efek zoom pada gambar postingan:

1. silahkan langsung saja kalian login ke blogger.

2. silahkan menuju edit tamplate . jangan lupa untuk centang expant widget.

3. cari kode ]]</b;skin>

4. kalau sudah ketemu silahkan copy kede dibawah ini dan paste diatasnya.

.post img:hover {
-moz-trnasform: scale(1.3) ;
-webkit-transform: scale(1.3);
-o-transform: scale(1.3) ;
-ms-transform: scale(1.2) ;
transform: scale(1.3) ;}

NB : kalau dalam template kalian ada kode .post img:hover sebelum kode yang kalian taruh alangkah baiknya kalau kalian hapus dulu.

aku harap postingan ini bermanfaat buat sobat blogger. semoga blog kalian akan semakin maju dari pada blog ini. semoga sukses danhappy blogging.

Cara Menghilangkan kode Trbidi= "on" di Editor posting Blogger

Cara Menghilangkan kode Trbidi= "on" di Editor posting Blogger.Sobat semuanya,mungkin diantara sobat saat ini ada yang ingin menghilangkan kode <div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>.Kode ini biasanya muncul pada saat hendak posting artikel dalam mode HTML.

Kode <div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div> itu akan muncul setiap kali kita akan memposting artikel pada editor bloggger dalam mode HTML.Pada sebagian blogger,kode trbidi="on" itu agak menggangu,makanya banyak yang menghilangkan kode trbidi="on".
Nah buat sobat yang ingin menghilangkan kode trbidi="on" pada editor posting blogger,pada catatan kali ini,saya akan membagikannya.

Cara Menghilangkan kode Trbidi= "on" di Editor posting Blogger sebenarnya sangat mudah,caranya:

Login ke blogger.com
Pilih blog yang mau dihilangkan kode trbidi="on"
Pilih Setelan-Bahasa dan pemformatan
Pada "Aktifkan transliterasi",pilih dinonaktifkan
Simpan setelan,selesai.

Nah sobat semua,itulah Cara menghilangkan kode trbidi="on" pada editor posting blogger.Semoga ada manfaatnya.

sumber : http://www.darmanto.com/

Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog

Tutorial Belajar Blog | Tips Blog | Trik Blog - Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog - Bagi Anda yang ingin scroll bar Anda berubah seperti Punya saya!! Dengan menggunakan script CSS Anda bisa merubah scroll bar Anda di Blog Anda. Bisa mempebesarnya ataupun memperkecil scroll bar blog Anda!

Buka Blogger.com > Rancangan > Edit HTML
Cari kata ]]></b:skin> dengan menekan tombol CTRL + F
Paste code berikut di atas ]]></b:skin>

::-webkit-scrollbar {height:12px;width: 12px;background: #00A000;}
::-webkit-scrollbar-thumb {background-color: #A52A2A;-moz-border-radius: 10px;border-radius: 10px;}

Paste diatas tinggal Anda ganti saja beberapa code yang saya kasih warna merah, ini berguna untuk mengganti warnanya. Kalau Anda bisa ganti semua kenapa tidak di ganti tuh kode?

Beberapa browser mungkin tidak support dengan kode ini tapi saya memakai Google Chrome code ini berfungsi kok!

~Semoga Bermanfaat !!~

Cara Membuat Animasi Loading Page Di Blog

Tutorial Belajar Blog | Tips Blog | Informasi Tentang Blog - Membuat Animasi Loading Page Di Blog, Merupakn Tutorial edit blog tidak beda jauh dari tips sebelum nya Langkah Membuat Animasi Loading Blog Lebih Menarik , Untuk membedakan coba sendiri ataupun liat dari gambar yang sudah ada maaf tidak demo untuk tutorial ini

Script animasi loading page ini saya dapat dari http://www.gayadesign.com yang merupakan versi awal dari script tersebut. Untuk membuat dan memasang animasi loading page pada blog kalian, masuk pada Design - Edir HTML dan cari kode ]]></b:skin> dan letakan kode dibawah ini diatas ]]></b:skin>

/* ---------------
jquery animation loading page
---------------------------------- */
.QOverlay {
background-color: #000000; /* background color loading */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* color bar loading */
height: 10px;
}
.QAmt {
color:#FF530D; /*loading Color number*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

kemudian cari kode </head> dan letakan kode dibawah ini diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://oktridarmadi.googlecode.com/files/loadpage.js' type='text/javascript'/>

untuk kode yang diberi warna merah, jika kode tersebut sudah ada dalam template kalian, kalian tidak perlu menambahkan kode tersebut (cukup 1 saja)

selanjutnya cari kode </body> dan letakankode dibawah ini diatasnya

Save template kalian dan coba buka blog kalian untuk mengetestnya

Semoga bermanfaat,

Cara Membuat Loading Animasi CSS 3

Tutorial Belajar Blog | Tips Blog | Membuat Loading Animasi CSS 3 - Tutorial eftutor Blog tentang CSS 3 Percobaan Membuat Loading Animasi kita akan belajar membuat loading animasi sederhana dengan memanfaatkan efek transisi pada CSS 3.

CSS 3 Percobaan Membuat Loading Animasi

Langsung saja silahkan Anda coba Cara Membuat Loading Animasi :

HTML

<div class="loading-wrap">
<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
</div>

CSS

.loading-wrap {
width: 60px; height: 60px;
position: absolute;
top: 50%; left: 50%;
margin: -30px 0 0 -30px;
background: #777;
animation: rotation ease-in-out 2s infinite; border-radius: 30px;
}
.triangle1, .triangle2, .triangle3 {
border-width: 0 20px 30px 20px;
border-style: solid;
border-color: transparent;
border-bottom-color: #67cbf0;
height: 0; width: 0;
position: absolute;
left: 10px; top: -10px;
  animation: fadecolor 2s 1s infinite;}
.triangle2, .triangle3 {
content: '';
top: 20px; left: 30px;
  animation-delay: 1.1s;}
.triangle3 {
left: -10px;
  animation-delay: 1.2s;}
@keyframes rotation {
0% {transform: rotate(0deg);}
20% {transform: rotate(360deg);}
100% {transform: rotate(360deg);}
}
@keyframes fadecolor {
0% {border-bottom-color: #eee;}
100%{border-bottom-color: #67cbf0;}
}

Oke, maaf belum sempet menampilkan demonya.
Silahkan langsung divoba sendiri.

Cara Membuat Gambar Postingan Kerucut Dan Berputar Saat Disentuh Cursor Pada Blog

Tutorial Belajar Blog | Trik Blog | Tips Blogger - Cara Membuat Gambar Postingan Kerucut Dan Berputar Saat Disentuh Cursor Pada Blog,Untuk Lebih Jelas nya silah kan melihat tampilan gambar di bawah ini

Berikut Ini Langkah - Langkah nya :

1. buka blogger
2. menuju rancangan Edit HTML
3. cari code </head>
4. masukan code di bawah tepat di atas code </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'><style>.post img{margin:10px;padding-left5px;width:100px; height:100px;text-align:center;-webkit-background-clip: padding-box;-webkit-box-shadow:0px 0px 0px 3px #001fbb;-moz-box-shadow:0px 0px 0px 3px #000;box-shadow:0px 0px 0px 3px #001fbb;-webkit-border-top-left-radius: 50px;-webkit-border-bottom-left-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-bottomright: 50px;border-top-left-radius: 50px;border-bottom-right-radius: 50px;-o-border-top-left-radius: 50px;-o-border-bottom-right-radius: 50px;};{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}</style></b:if>

5. Simpan dan lihat hasilnya

Semoga Bermanfaat .

Terima Kasih sudah Berkunjung di Tutorial Belajar Blog | tips blog | panduan belajar blog | belajar blog

Cara Mengganti Warna Teks Saat di Block / Di Drag Pada Blog

Tutorial Belajar Blog | Trik Blog | Tips Blogger - Cara Mengubah Warna Teks Saat di Block / Di Drag Pada Blog, Tutorial Belajar blog kali ini tidak beda Jauh dari tutorial sebelum nya yaitu Cara Mengubah Warna Teks Saat di Block / Di Drag Pada Blog,

Untuk Membedakan nya Bisa di lihat contoh Tampilan di bawah ini :

Tampilan Warna Teks Saat DI block

1.Login blog sobat
2.Klick Template > Edit HTML > Lanjutkan > centang '' Expand Template Widget ''
3.Cari kode ]]></b:skin> ( Tekan Ctrl + F )
4.Letakkan kode berikut di atas kode ]]></b:skin>

::selection {background:transparent; color:#F50C56}
:<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif' alt='' class='bhsmly'/>z-selection {background:transparent; color:#F50C56}
:<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif' alt='' class='bhsmly'/>bkit-selection {background:transparent; color:#F50C56}  <br>

NOTE :Warna teks yaitu color:#F50C56, dapat di ganti sesuai selera.

5.Simpan Template Semoga Bermanfaat
Keyword : Tutorial Belajar Blog , Cara Mengganti Warna Teks Saat di Block / Di Drag Pada Blog, Tips Blog

Cara Mengubah Warna Teks Saat di Block / Di Drag Pada Blog

Tutorial Belajar Blog | Trik Blog | Tips Blogger - Cara Mengubah Warna Teks Saat di Block / Di Drag Pada Blog, Sekedar Berbagi Tips Trik edit Blog ,Pasti kita semua pernah melakukan aktifitas blocking (drag), baik pada saat mengetik, menggambar, mengedit, yang jelas menggunakan computer.
contohnya ketika kita menekan tombol CTRL +A, maka semua isi blog ini akan terblock. / atau dengan menggunakan CLICK + DRAG (Tekan dan Geser).

Berikut Ini Merupakan tampilan contoh nya :

Drag / Block Tulisan

Langsung aja ke tutorialnya :

1. Login ke Blog sobat.
2. Klik Template > Edit HTML > centang Expand Template Widget
3. Copast kode di bawah ini di atas kode body{ (kode body yang pertama)

 *::selection{background:red;color:black}*:<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif' alt='' class='bhsmly'/>z-selection{background:#000;color:#fff}

Note : Ganti #fff dengan warna sesuka kamu.Kode warna bisa sobat lihat disini

4. Sehingga kodenya menjadi seperti ini

*::selection{background:red;color:black}*:<img src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif' alt='' class='bhsmly'/>z-selection{background:#000;color:#fff}
body{
background: #343434 ;
text-align: justify;
font:12px verdana,arial,sans-serif;color: #FFF;
}

5. Simpan template So simple

Membuat Menu Sidebar Melayang dengan Efek Jquery Lebih Menarik

Tutorial Belajar Blog | Trik Blog | Tips Blog - Sekedar Berbagi Tutorial Seputar Blogging , Trik Cara Membuat Menu Sidebar Melayang dengan Efek Jquery, untuk Conoth bisa di lihat tampilan scrensot blog ini.

Membuat Menu Sidebar Melayang dengan Efek Jquery Keren
1. Masuk ke dashboard blogger > Klik Rancangan Template > Klik Edit HTML
2. Cari Kode ]]></b:skin> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode ]]></b:skin>

/* Starts Menu Sideabr Jquery melayang by tutorialbelajarblogger.blogspot.com Starts*/
ul#navigation {
position:fixed;
margin: 0px;
padding: 0px;
top: 55px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 50px;
background-color: #ffffff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #fff;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
opacity: 0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
ul#navigation .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9wMSYBylI4MXmOnGmWFFv5QPofm8BsZXn-U7To8byF1QSzx_d221t5UR9xeVZgNC7KozFQcGlnWR6f_ARXfGn-l79eF229qnI-uWIktPpvtD2AmWmc26NNthDx_uss7PospK_qCDCZlY/s1600/home.png);
}
ul#navigation .about a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDrZrx2H6gmxE8j9DPLxTwiWqFs4n5fJD45fptKXizyGGH_CMuFIOyhJzrykwlyzvglF24KQ6y-E3pm52Mqf9E6xr3uDnQ9_U4rmpR1If2Fy3zTphPqmXk7KgCvYFfl_IYPJUUa0aWBqE/s1600/konco.png);
}
ul#navigation .rss a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCctQ4CUDGLy_Y6gwnDWc6tbJxYx9_57Ceac0BylSvtxwX88MZshtpY7qAfNUIGmabaFYUbZ4ERPMIA0j8Mj5pqXmxjunKztEd2BIlMEhVLKTl8sWYfyL_r7FLdrA8UvxFgyz_9Wc01U/s1600/rss.png);
}
ul#navigation .mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig5i10ldUrfmtdbpNpuwMWY1gbaWBm-219XVG763deLOuQcKlkoeXM7lGlNoNwhDy-PYSIsNlTHulj9Bxs36owYdf7nSNHw1naq-3xsVUHa31HDUXxPtlV2qEo1maXvhtADDD9C5ICq8I/s1600/mail_receive.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7KuRTdcyS99_Z5pplFcsH43aU_l1xoziCMREFhwNxiDA4Yw3nDOaCPn-PtgPvC0JwXbJa5Q4BQH74vortO4zDFGO8WW4rhFGhEc1e1beW955Cv9235_NJKIkcgV7LTxdFmWDBmqcuV8E/s1600/about.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnpiYAwRxBZbTIGmjSLZ7zWrmt7-oOneUv4qi1gnSZJBAv2FjBhwtRaIKgO3f4iDmcfc7QHuQfvUlSdR9Fpr_wYo5-wqHeBEZ976ldFJqJ3qZ7coKKaWShPBCGYuRHYBaaOCV2uvY1JQ/s1600/twitter.jpg);
}
ul#navigation .youtube a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1b2Go6rJ1asa7Dt3MjATeip_RO_q571bMiCJ1VC_eO7QRTABeL3kWH7uO0f6LcHAFBxDHZ9Zn4MGgOxKl8WXALqp5esh-FxG19Lr5gfFP7YGgZeB4uHfh8p4H02ykQBJdS4Wo5zegIfQ/s1600/You+Tube.png);
}
ul#navigation .googleplus a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgg49BIod-i6RJcjRFG7c6qtWMTuRoIxRvgCu_Sh1CNsiCYuOSmop3fHaylB_WJfeKrbC7Sbwae06E28l0g-XhQY6EAcuxDdfd9RGK_kUUx6m5FfKwbMqB7_sG_4p6KiDw6tC0saqePsQ/s1600/google+plus+circle.jpeg);
}
ul#navigation .yahoo a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGA_x-oLzKAfEAUvkIZajHfRJt0MCJNeLiz4St34EghysE7f3S-76qkaqWT80ZlaE3B_ywpmnbXwcFXAVaCiRdmHE6DVu8fKLnVgz3fD5EjlhaXtGCquafMZFqltR2EpoUX9qXnzPh7Jw/s1600/yahoo+icon.jpg);
}
/* End Menu Sideabr Jquery melayang by tutorialbelajarblogger.blogspot.com End*/

3. Cari kode </body> agar lebih mudah gunakan CTRL+F, lalu letakkan atau pastekan kode berikut tepat diatas kode </body> tadi

<script src='http://x-gen.googlecode.com/files/x-gen-jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>

4. Klik Simpan Template

5. Selanjutnya klik Rancangan lagi, tepatnya pada Elemen Laman, Tambah Widget / Gadget Baru, pilih HTML / JavaScript, lalu masukkan kode berikut:

<div class='header'></div>
<div class='scroll'></div>
<ul id='navigation'>
<li class='home'><a href='tutorialbelajarblogger.blogspot.com' title='Home'></a></li>
<li class='about'><a href='tutorialbelajarblogger.blogspot.com' target='_blank' title='About us'></a></li>
<li class='rss '><a href='http://feeds.feedburner.com/' target='_blank' title='Rss feed'></a></li>
<li class='mail'><a href='http://mail.google.com' target='_blank' title='Contact Me'></a></li>
<li class='facebook'><a href='http://fb.com/oktri.darmadi' target='_blank' title='Add Me on facebook'></a></li>
<li class='twitter'><a href='http://twitter.com/oktri.darmadi' target='_blank' title='Follow us on twitter'></a></li>
<li class='youtube '><a href='http://youtube.com/' target='_blank' title='Follow Me on Youtube'></a></li>
<li class='googleplus '><a href='https://gplus.to/xgen' target='_blank' title='Follow Me on google plus'></a></li>
<li class='yahoo'><a href='http://yahoo.com/' target='_blank' title='YM With Me'></a></li>
</ul>

#Ganti link yang saya beri warna kuning dengan link kamu, Lalu klik simpan

Selesai, sekarang buka blog kamu dan lihat hasilnya, Menu Sidebar dengan Efek Jquery Keren sudah ada diblogmu :)

keyword: cara membuat menu sidebar dengan efek jquery keren, cara membuat menu jquery, membuat menu css, cara membuat sidebar jquery, membuat sidebar css, menu sidebar melayang jquery, menu sidebar melayang css, cara membuat menu sidebar melyang dengan efek jquery keren

Cara Membuat NewsTicker/Berita Berjalan Keren

TUTORIAL BLOG | TIPS TRIK BLOG - Cara Membuat NewsTicker/Berita Berjalan Keren. newsticker atau berita berjalan bisa kita buat agar blog kita tampil lebih keren, disamping itu berita berjalan atau newsticker bisa ditampilkan dari recent post blog kita,dan akhirnya pembacapun bisa melihat apa saja berita terbaru dari blog kita. lihat gambar dibawah ini!

Dari gambar diatas mungkin sudah banyak yang tahu kalo itu mirip dengan newsticker dari gaya template sporty magazine 2 dari borneo template. karena memang banyak yang suka dengan gaya tersebut maka saya akan share pada teman-teman blogger yang lain bagaimana cara membuatnya.

Untuk Membuat Newsticker/berita berjalan keren seperti mirip sporty magazine 2 ikuti langkah-langkah dibawah ini:

Login ke blogger/blogspot kamu.
Klik Rancangan atau design.
Klik edit HTML.
Beri ceck / centang pada kotak yang berada pada pojok template kamu.
Dan jangan lupa download template kamu untuk berjaga-jaga agar jika terjadi kesalahan bisa dibackup.
Cari kode ]]></b:skin> dan copy paste kode berikut dan letakkan tepat diatas kode ]]></b:skin>
/* News Ticker Wrapper */
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaQM1St0gOOeFbT4sLj5WTGe7uM8xb6bmz7MY5uoQeUH9Julso1UykDiuZyBTH2s3_k54KyhWU5EJbaoKe1AXOl9qxLY4StirFIyOxbjnoFVHBpsLj7vOaDCpX5D0t0qCCcCIOwwbUJEg/s1600/headline.png) no-repeat top left;width:940px;margin:0 auto;padding:0 auto;height:28px;color:#ff0000;}
.news {width: 940px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link{color:#ff0000;font-weight: bold;text-decoration:none}
.news a:visited{color:#ddd;font-weight: bold;text-decoration:none}
.news a:hover{color:#fff;font-weight: bold;text-decoration:underline}
Lalu Cari Lago kode </head> dan letakkan kode berikut tepat diatas kode </head>
<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> INFONETGUE';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]></script>
Dan langkah terakhir Peletakkan kode HTML untuk newstickernya, kamu bisa meletakkan ditempat yang kamu inginkan. dan disini sebagai contoh saya akan meletakkanya dibawah menu navigasi horisontal. silahkan cari kode <div id='navigation'> dan setelah kode <div id='navigation'> ditutup dengan kode </div> letakkan kode berikut tepat dibawah kode </div>
<div class='newspic'>
<div class='news'>
<div style='float:left;padding:5px 60px 5px 7px;font:bold 14px Arial;color:#333;text-transform:none;'>
Berita Terbaru :
</div><div style='float:left;width:680px;padding:4px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Sabar Muanas", "http://tutorialbelajarblogger.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>

Ganti URL berwarna merah dengan URL blog kamu.
Nah, Sekarang simpan template kamu.

Keterangan:
Kode menu navigasi berbeda-beda, jika tidak menemukan kode pada nomor 7 coba kamu cari kode <div id='content-wrapper'> dan letakkan kode HTML newsticker (yang ada pada nomor 7 ) letakkan tepat diatas kode <div id='content-wrapper'>

Demikian cara membuat newsticker / berita berjalan keren, jika kamu berhasil maka akan ada berita terbaru dari recent post blog kamu yang bergerak atau berubah-ubah layaknya yang ada pada template gaya sporty magazine 2.

Animasi Loading Blog Dengan CSS

Tutorial Belajar Blog | Tips Edit Blog | - Sekedar berbagi Informasi Seputar untuk loading blog Tips Blog Tips Ini saya dapat teman blogger rik ini dibuat dengan CSS3 Animation! Dan sudah saya siapkan beberapa animasinya agar sobat bisa memilih sendiri animasinya! Okeh langsung aja yok ke TKP!

A. Animation 1 (Bounce and Rotate efek) :

Untuk menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :

@-webkit-keyframes WAKloading{
0%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-webkit-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-o-keyframes WAKloading{
0%{-o-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-o-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-o-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-moz-keyframes WAKloading{
0%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-moz-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-ms-keyframes WAKloading{
0%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-ms-transform:translate(0px,0px) scale(1);opacity:1;}
}
@keyframes WAKloading{
0%{transform:translate(0px,0px) scale(0.50);opacity:1}
20%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}

3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!

;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s

4.Sehingga nantinya jadi seperti ini :

#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s}

5. Save Template!

B. Animation 2 (Earthquake Effect) :

Untuk menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :

@keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-o-keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-webkit-keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}

@-moz-keyframes WAKloading{
0%{opacity:1;-moz-transform:rotate(0deg);}
5%{opacity:1;-moz-transform:rotate(5deg);}
10%{opacity:1;-moz-transform:rotate(-5deg);}
15%{opacity:1;-moz-transform:rotate(5deg);}
20%{opacity:1;-moz-transform:rotate(-5deg);}
25%{opacity:1;-moz-transform:rotate(5deg);}
30%{opacity:1;-moz-transform:rotate(-5deg);}
35%{opacity:1;-moz-transform:rotate(-5deg);}
40%{opacity:1;-moz-transform:rotate(5deg);}
45%{opacity:1;-moz-transform:rotate(-5deg);}
50%{opacity:1;-moz-transform:rotate(5deg);}
55%{opacity:1;-moz-transform:rotate(-5deg);}
60%{opacity:1;-moz-transform:rotate(5deg);}
65%{opacity:1;-moz-transform:rotate(-5deg);}
70%{opacity:1;-moz-transform:rotate(5deg);}
80%{opacity:1;-moz-transform:rotate(-5deg);}
85%{opacity:1;-moz-transform:rotate(5deg);}
90%{opacity:1;-moz-transform:rotate(-5deg);}
95%{opacity:1;-moz-transform:rotate(5deg);}
35%{opacity:1;-moz-transform:rotate(0deg);}
}

3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!

;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s;

4. Sehingga hasilnya nati jadi seperti ini :

#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s;}

5. Save Template

C. Animation3 ( Sliding Effect ) :

Untuk Menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :

@-webkit-keyframes WAKloading{from{-webkit-transform:translate(-1000px,0px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1.1;}}
@-moz-keyframes WAKloading{from{-moz-transform:translate(-1000px,0px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}}
@-ms-keyframes WAKloading{from{-ms-transform:translate(-1000px,0px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}}
@keyframes WAKloading{from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}}

3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!

animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;

4. Sehingga menjadi seperti ini :

#outer-wrapper {animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;}

5. Save Template !

Okeh selesai dulu postingan kali ini ya! Udah pegel juga nih ngetik! Masih banyak lagi loh Animasi nya! Ntar saya posting lagi.! Jika belum mengerti silahkan berkomentar!

Sumber : http://chaone-blog.blogspot.com/

Cara Membuat Related Post Dengan Gambar Mini di Blog

Cara Membuat Related Post Dengan Gambar Mini Di Blog - Hari ini Tutorial Blog akan berbagi sebuah informasi menarik dan penting untuk kamu seputar related post atau artikel terkait. Judul yang digunakan adalah Cara Membuat Related Post Dengan Gambar Mini Di Blog.

Pada artikel tips blog ini, saya ingin berbagi sebuah tips cara membuat related post di Blog. Untuk demonya, kamu bisa melihat related post pada blogconoth gambar di atas. Menurut saya related post ini cukup simple dan ringan. Jadi tidak perlu takut jika blog kamu loading nya lama.

Baiklah berikut ini Cara Membuat Related Post dengan Gambar Mini di Blog:

1. Login ke Blogger

2. Buka menu Template > Edit HTML > Centang "Expand Template Widget.

3. Cari kode </head>, lalu masukkan kode berikut diatasnya.

<b:if cond='data:blog.pageType == "item"'>
<style>
#related_posts h4 {
background: none repeat scroll 0 0 #333;
color: #FFF;
font-family: Arial,Tahoma,Verdana;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 2px 5px 1px 8px;
text-shadow: 1px 1px #000000;
text-transform: uppercase;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 4px;
line-height: 16px;
}
#relpost_img_sum:hover {
background: none;
}
#relpost_img_sum ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#relpost_img_sum li {
border: 1px solid #DDD;
margin: 0;
padding: 5px;
height: 65px;
list-style: none;
}
#relpost_img_sum li:hover {
background-color: #E6E6E6;
}
#relpost_img_sum a {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
margin-bottom: 4px;
}
#relpost_img_sum .news-text {
display: block;
text-align: justify;
font-weight: normal;
text-transform: none;
color: #333;
}
#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 4px;
border: solid 1px #DDD;
width: 55px;
height: 55px;
}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
var morelink = "readmore";
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... [<a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a>]<17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnojudul|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

4. Lalu cari kode <data:post.body/> atau <div class='post-footer-line post-footer-line-3'>

</div>.

5. Ganti kode  dengan kode dibawah ini.

<b:if cond='data:blog.pageType == "item"'>
<div id='related_posts'>
<h4>Related Posts</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=50"' type='text/javascript'/>
</b:loop>
<a href='http://modification-blog.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</b:if>

6. Jika kamu menggunakan kode <data:post.body/>, taruh kode no. 5 dibawahnya.

7. Simpan dan lihat hasilnya. (Ingat sebelum mengutak-atik template, backup template untuk menghindari kesalahan)

Referensi: Modification Blog

Keterangan:
- var relnojudul = 0; ubah nilai 0 jika ingin menampilkan jumlah artikel yang terkait dalam setiap kategori, nilai 0 artinya artikel dalam kategori tertentu akan ditampilkan semua (direkomendasikan tetap bernilai 0 karena dalam beberapa kasus, jika kita ubah nilainya maka artikel terkait akan menampilkan keterangan "undefined". Hal ini bisa terjadi jika ada artikel dalam kategori tertentu yang hanya terdiri dari 1 artikel)
- var relmaxtampil = 10; ubah nilai 10 untuk menentukan jumlah artikel yang terkait sesuai kategori
- var numchars = 200; ubah nilai 200 untuk menentukan jumlah karakter yang akan ditampilkan pada ringkasan artikel. Karakter termasuk spasi dan tanda baca
- var morelink = "readmore"; ubah kata readmore sesuai dengan keterangan link akhir ringkasan artikel yang akan menuju pada artikel yang dimaksud pada saat di klik

Sekian dari saya tentang Cara Membuat Related Post di Blog - Artikel Terkait Simple, semoga dapat bermanfaat. TERIMAKASIH!

Cara Memasang Floating Spoiler Menu di Blog

Tutorial Belajar Blog | Belajar blog - Floating Spolier Menu adalah salah satu fitur blog yang menampilkan menu blog dengan tampilan melayang dan dalam bentuk spoiler. Kalau Floating Spolier Menu dibayangi crusor, maka Floating Spolier Menu secara otomatis terbuka. Mungkin sobat blogger jarang menemukan blog yang memasang menu blog-nya dengan tampilan menu seperti ini, Floating Spolier Menu bisa dijadikan salah satu solusi pengganti menu horizontal atau menu vertikal. Fitur blog yang keren ini saya dapatkan dari salah satu blog yang berbahasa Inggris, Tapi maaf, saya lupa alamat blog tersebut.

Screenshot

Cara buat Floating Spolier Menu sebagai berikut :

Log In di http://www.blogger.com/
Pada Dashbor klik Design
Klik Add a Gadget dan HTML Java Script
Copy kode di bawah ini dan paste pada kolom yang tersedia

<style text-type="CSS">
#floatmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#floatmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}
#floatmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}
#floatmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}
#floatmenu li a:hover{
color:#fff;}
#floatmenu:hover{
z-index:5;
height:175px;
</style>

<div id="floatmenu">
<h3>TITLE / JUDUL</h3>
<ul>
<li><a href="LINK URL">MENU-1</a></li>
<li><a href="LINK URL">MENU-2</a></li>
<li><a href="LINK URL">MENU-3</a></li>
<li><a href="LINK URL">MENU-4</a></li>
<li><a href="LINK URL">MENU-5</a></li>
</ul>
</div>

Keterangan:
Warna Merah pada kode diatas, itu untuk mengatur posisi menu floating.
Bila sobat ingin menaruhnya di bagian kanan atas dengan slide kebawah, ganti kode yang berwarna merah dengan kode berikut:

right:10px;
top: 5px;

Bila ingin berada di bagian kiri bawah, dengan slide kearah atas, ganti dengan kode berikut:

left:10px;
bottom: 5px;

Warna Biru, itu untuk judul menu floating.
Warna Hijau itu adalah link url yang ingin sobat pasang, dan juga untuk nama menu gantilah sesuai dengan judul dari link url tersebut.
Selebihnya bisa sobat edit-edit sendiri sesuai keinginan sobat.

5. Bila sudah, jangan lupa klik Simpan / Save.

Begitulah kiranya Cara Membuat Floating Spoiler Menu Di Blog , semoga bermanfaat.
Sumber: full-tricks.blogspot.com