Cara Mengakses Atau Masuk ke Edit HTML pada tampilan baru Blog

Untuk postingan kali ini Education For All  akan  sharing tentang Cara Mengakses Atau Masuk ke Edit HTML pada tampilan baru Blog  walaupun pada sharing kali  ini Education for all baru akan menyampaikan tetang cara mengakses atau masuk ke area edit HTML pada tampilan baru blogspot atau blogger tapi menurut EFA hal ini sangat perlu untuk para blogger newbie seperti EFA.

Sharing ini  Education for all share karena kita akan banyak bermain pada tampilan baru blogspot. Untuk mengeakses area edit HTML pada tampilan baru blogspot ini ada sedikir perbedaan dari tampilan clasic blogspot untuk itu juga alasannya sharing ini perlu disampaikan.

Ok langsung saja kita ke inti pembahasan. Untuk masuk ke area Edit HTML yang harus anda lakukan adalah sebagai berikut :

1. Apabila sobat blogger mania masih menggunakan tampilan Clasic blogspot sebaiknya ada beralih terlebih dahulu ke tampilan baru blogspot. Bacara cara Mengakses tampilan baru blogspot
2. Setelah anda berada di tampilan baru blogspot pasti anda akan berhadapan dengan halaman seperti dibawah ini :

Berikutnya perhatikan tanda panah pada gambar diatas klik pada tulisan Template dan sobat blogger mania kan dibawa kehalaman seperti pada gambar dibawah ini

Klik pada Edit HTML dan akan ada tampilan jendel baru seperti pada gambar berikut :

Klik pada Tombol Lanjutkan maka anda akan dibawa ke area Edit HTML seperti ini

Read more: http://dapur-tutorial.blogspot.com/2011/12/cara-mengakses-atau-masuk-ke-edit-html.html#ixzz4ByFsSxML

 

Anda akan dibawa kehalaman berikut ini

Read more: http://dapur-tutorial.blogspot.com/2011/12/cara-mengakses-atau-masuk-ke-edit-html.html#ixzz4ByIeSXsD

 Klik pada tombol lanjut dan sobat blogger mania akan dibawa kehalaman seperti pada gambar dibawah ini:

Seperti inilah tampilan area Edit HTML dan disinilah tempat sobat blogger mania Mengedit kode-kode HTML blog sobat blogger mania.

EFA kira sudah cukup jelas. kalau kurang jelas juga sebaiknya sobat matikan lap top sobat blogger mania terus langsung tidur. selesai.

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «

Cara Masuk atau Mengakses Dashboard Blogger Baru

Hello Sobat blogger mania, pada sharing kali ini Education For All akan sharing artikel tentang

Cara Masuk atau Mengakses Dashboard  Blogger Baru Barangkali saja sobat blogger mania dah bosan dengan tampilan klasik blogger !, jangan khawatir blogger sekarang sudah meng-Update tampilannya ketampilan terbaru. banyak orang lebih memilih menggunakan Dashboar lama blogger

Menurut dari sisi pandangan Education For All Dashboard baru blogger ini terlihat lebih elegan, tampil sederhana dan panel menu yang mudah diakses dengan sistem Droup Down Menu. loding web juga lebih cepat dibanding dengan Dashboard klasik blogger.

Itu menurut pangangan Education For All tentang  Dashboard baru blogger tidak sama halnya dengan yang lain. Buat sahabat yang belum pernah mengakses atau belum tau cara mengakses dashboard baru blogger, Education For All akan membantu Sobat blogger mania untuk masuk ke Dasboard baru blogger ini. 

Brikut lanakah-lankah yang harus anda lakukan :

1. Seperti biasanya anda harus masuk keakun Sobat blogger mania
2. Setelah Sobat blogger mania masuk lihat pada sisi kanan atas blog anda seperi gambar dibawah ini

 Selanjutnya klik pada tulisan coba antar buka blogger yang diperbahurui.

Kemudian sobat blogger mania akan dibawa kehalaman dashboard baru blogger. lebih jelasnya lihat pada gambar dibawah ini:

Klik pada Tulisan Coba Antar Buka Blogger Yang Diperbaharui

Kemudian anda akan dibawa ke halaman Dashboard Baru Blogger Seperti pada Gambar Dibawah ini

Nah, apabila sobat blogger mania ingin kembali ke Dashboard blogger lama klik pada tulisan alihkan kembali.

EFA kira sudah cukup jelas. kalau kurang jelas juga sebaiknya sobat matikan lap top sobat blogger mania terus langsung tidur. selesai.

===== SELAMAT BERKREASI ======

Klik pada Tulisan Coba Antar Buka Blogger Yang Diperbaharui

Kemudian anda akan dibawa ke halaman Dashboard Baru Blogger Seperti pada Gambar Dibawah ini

Apabila anda ingin kembali ke Dashboard lama blogger klik pada tulisan Alihkan Kembali 

Selesai

  

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «

Cara Membuat Page Peel Efek menggunakan jQuery & CSS

Hello, Sobat blogger mania, Sungguh tiada habisnya bila kita berbicara tentang, bagaimana cara memperindah blog. Nah kali ini Eucation For All akan sharing tentang cara  Membuat Page Peel Efek menggunakan jQuery & CSS. Apa sih Page peel itu?? yah barangkali sobat blogger mania pernah berkunjung kesalah satu blog sahabat dan melihat dipojok kanan atas seolah olah ada kertas yang melipat. itulah yang dinamakan page peel, barang kali bisa kita terjemahkan kedalam bahasa indonesia "Page" berarti halaman sedangkan "Peel" artinya mengupas. tapi mungkin makna yang sebenarnya adalah kertas yang melipat,...Mungkin EFA sendiri juga kurang begitu jelas. Nah without further a do. mari kita coba praktekan 

D E M O

1. log in ke blog
2. Klick design/rancangan
3. Pilih Edit HTML
4. Cari kode <b:skin><![CDATA]
5. Jika sudah menemukan code <b:skin><![CDATA] Letakan script code jQuery dibawah ini diatas kode <b:skin><![CDATA]  

 

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

Kemudian carilah kode ]]></b:skin> letakan kode CSS dibawah ini diatas kode ]]></b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

Selanjutnya cari <body> Letakan kode dibawah ini, dibawah tag <body>

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/namafeedkamu'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

Silahkan disimpan dan lihat hasilnya. Ingat! Tampilan diatas hanya sebagai contoh saja ya, Sobat blogger maniabisa mengganti gambar dan link tujuan apa saja sesuai keinginan. Silahkan langsung dicoba

EFA kira penjelasanya sudah sangat jelas. apabila sobat blogger mania belum mengerti juga sebaiknya sobat blogger mania langsung saja mematikan komputer ambil sarung terus tidur.

 

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «

Cara Membuat Tooltip Zigzag Effect diblog

Hello,..All bloggers all around Indonesia, in this nice opportunity Education for All would like to share an article about how to make  Tooltip  Zigzag Effect in a blog. there are many ways how to beauty your blog. one of the by putting Tooltip  Zigzag Effect  in your blog. I promise that your blog will look cute if you wanna put this one. and even will make your guest stay at home when visiting your blog. trust me. You wanna try it?? well, without further a do just some of the hints bellow. it's very easy.

1. log in to your blog
2. Click design
3. Choose Edit HTML
4. Find the code </head>
5. If you've found it, put the code bellow above the code </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/sin1ajablog/jquery/Tooltip-ZigZagSystem.js" type="text/javascript"></script>
<style type='text/css'>
.tooltip{
      display:none;
      background:#333;
      width:250px;
      font-family:Arial;
      font-size:13px;
      padding:10px 10px 20px;
      color: #00CCFF;
      text-shadow:1px 1px 1px #000;
      border: 4px solid #555;
      border-radius:10px;
      box-shadow:0px 5px 20px rgba(125,124,250,.9);
}
#jqtips img{
      border:0;
      cursor:pointer;
      margin:0 8px;
}
</style>

The next step is, find the code </body>  and put the code bellow above the code  </body>

<script type="text/javascript">
$("#jqtips a[title]").tooltip({effect: 'bouncy'});
$("#jqtips img[title]").tooltip({effect: 'bouncy'});
</script>

 


And now the explanation how to use Tooltip , if you wanna to use tooltip code in a posting area, please move mode Compose to mode EDIT HTML, 

if you wanna to use tooltip code in sidebar please click  ,
Design ► Add Gadget ► Choose HTML/Javscript

here is the code ▼
1. the code Tooltip in link form

 

<div id="jqtips">
<a href="your link here" title="Write down tooltip text here!">your tittle link here</a>
</div>

2. The Tooltip Code in link and picture form

<div id="jqtips">
<a href=" your link here " title="Write down tooltip text here!"><img src="your URL picture here" /></a>
</div>

3. The Tooltip Code in  picture form

 

<div id="jqtips">
<img src=" your URL picture here " title="Write down tooltip text here!" />
</div>

 

 For the  CSS code  please create by yourself. 

Source / Sumber

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «

Cara memasang Status loading diblogger

Hello, sobat blogger mania pada kesempatan kali ini EDUCATION FOR ALL akan memposting artikel tentang  Cara memasang Status loading diblogger. cara untuk memasangnyapun cukup mudah. sobat blogger mania cukup mengikuti langkah langkah berikut ini: 

Langkah Pembuatan dan Pemasangan

1. Login to Blogger (Login ke BloGGer) : Tuliskan User Name (Nama Pengguna) atau Email Address , kemudian lanjutkan dengan menuliskan Password (Sandi).
2. Dasboard (Dasbor) : Ketika halaman dasbor sudah terbuka (sesaat setelah login), KLIK link Layout/Tata Letak atau Design/Rancangan.
3. Layout (Design) : KLIK Edit HTML.
4. Edit HTML : Backup template (amankan template dengan cara :
   - KLIK Download Full Template (Download Template Lengkap)
   - Simpan file template di folder PC.
5. Cari kode : <head> Gunakan Ctrl+F untuk mencarinya (posisi di bagian teratas template). Letakkan link javascript di bawah ini diatas kode  <head>  dalam bentuk seperti ini :

<script src='http://tc.comze.com/js/preloadpage.js' type='text/javascript'/>

<head>

Selanjutnya cari kode <body> kemudian ganti kode tersebut dengan kode HTML dibawah ini

<body onLoad='PreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<script type='text/javascript'>PreLoading();</script>
</div>

Yang terakhir dan paling utama save template dan lihat hasilnya.
Semoga berhasil dan selamat mencoba.......

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «