Pages

Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

MEMASANG WIDGET MEGA MENU UNTUK BLOGGER

Tutorial WIDGET MEGA MENU UNTUK BLOGGER

 

Pasang Widget Mega Menu Blogger


Tutorial membuat Widget Mega Menu Elegan dengan memanfaatkan CSS-jQuery pada Blogspot, demo bisa dilihat pada Quantum Komputer.

  • klik menu Template (disebelah kiri Dassboard Blogger)
  • klik Edit HTML
  • Cari ]]></b:skin> ,permudah pencarian dengan memanfaatkan shortcut Keyboard Ctrl+F
  • Apabila sudah ketemu silahkan tempatkan kode dibawah ini tepat diatasnya

/*----------------------------------------------------
{--------}  Menu {--------}
----------------------------------------------------*/
ul.ldd_menu{
        z-index:999;
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 background-color:#D04528;
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 border-top:1px solid #EF593B;
 border-bottom:1px solid #EF593B;
 border-left:10px solid #D04528;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{

 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
        z-index:999;
 float:left;
 color:#fff;
 background-color:#D04528;
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px solid #DF7B61;
 border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
        z-index:999;
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #C34328;
 border-top:1px solid #EF593B;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
        z-index:999;
 background-color:#f0f0f0;
 color:#444;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{

 list-style:none;
 float:left;
 border-left:1px solid #DF7B61;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{

 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 color:#FFB39F;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{

 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#fff;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 background:#AF412B;
}


  •  Selanjutnya cari kode </head> dan tempatkan kode dibawah ini tepat diatasnya.

 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
        <script type='text/javascript'>
            $(function() {
    /**
     * the menu
     */
    var $menu = $(&#39;#ldd_menu&#39;);
    
    /**
     * for each list element,
     * we show the submenu when hovering and
     * expand the span element (title) to 510px
     */
    $menu.children(&#39;li&#39;).each(function(){
     var $this = $(this);
     var $span = $this.children(&#39;span&#39;);
     $span.data(&#39;width&#39;,$span.width());
     
     $this.bind(&#39;mouseenter&#39;,function(){
      $menu.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();
      $span.stop().animate({&#39;width&#39;:&#39;510px&#39;},300,function(){
       $this.find(&#39;.ldd_submenu&#39;).slideDown(300);
      });
     }).bind(&#39;mouseleave&#39;,function(){
      $this.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();
      $span.stop().animate({&#39;width&#39;:$span.data(&#39;width&#39;)+&#39;px&#39;},300);
     });
    });
            });
        </script>


  • Lanjutkan dengan mencari <div id='header-wrapper'> atau bisa cari "Header1" dan letakkan kode dibawah ini setelah penutup widget tersebut, tepatnya dibawah penutup </div>.

 
<ul class='ldd_menu' id='ldd_menu'>
    <li>
     <span>Vacations</span><!-- Increases to 510px in width-->
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>Equipment</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>Locations</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>

   </div>
    </li>
    <li>
     <span>Tourists</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Download</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
   </ul>
  • Selanjutnya sobat bisa simpan Templatenya, coba lihat hasilnya.
  • Langkah terakhir adalah mengganti  semua kategori dan sub kategori yang terdapat pada kode diatas, dengan kategori (Label) milik sampeyan
Demikian Tutorial membuat Widget Mega Menu Elegan dengan memanfaatkan CSS-jQuery pada Blogspot, semoga bermanfaat dan terima kasih telah berkunjung .

Source : http://artistutorial.blogspot.com/2011/11/add-beautiful-css-jquery-mega-menu-on.html

MEMASANG WIDGET MEGA MENU UNTUK BLOGGER
BLOGGER WIDGET TUTORIAL
►
Labels: , ,

PEMASANGAN DATA TERSTRUKTUR (RICH SNIPPETS)

tutorial data terstruktur blogspot

TUTORIAL DATA TERSTRUKTUR ATAU RICH SNIPPETS BLOGSPOT

Pada catatan kali ini jejak Blogger akan menulis Tutorial pemasangan Data Terstruktur atau Rich Snippets pada Blogspot, penggunaan Data Terstruktur sangat dianjurkan oleh Google karena bermanfaat untuk mempermudah pembacaan keseluruhan isi Blog oleh mesin pencari Google, sebagai pemilik Blog, tentu kita menghendaki Google menyukai blog kita, karena dari mesin pencari Google itulah arus utama pengunjung ke blog kita.sepertinya itu saja ikhtisar dari Manfaat Penggunaan Data Terstruktur atau Rich Snippets yang bisa saya berikan, tetapi kalo sampeyan ingin penjelasan lebih jauh, silahkan browsing sendiri, pasti banyak blog-blog tetangga yang membahas tentang Rich Snippets.

Untuk Pemasangan Data Terstruktur atau Rich Snippets pada Blogspot, sampeyan bisa mengikuti panduan dibawah ini. (saya asumsikan sobat telah berada pada dassboard blogger).
  • Penting!! Backup dulu template anda untuk menghindari kesalahan, klik Backup / Restore , biasanya menu tersebut terdapat di halaman Template disebelah kanan atas, dan klik klik Download Full template pada pop up yang muncul
  • klik menu Template yang berada di sebelah kiri
  • pada halaman selanjutnya klik Edit HTML
  • Dalam Kotak Edit HTML coba sobat cari kode dibawah ini, untuk mempermudah pencarian, klik disembarang tempat pada Kotak Edit HTML, lalu manfaatkan shortcut keyboard dengan menekan Ctrl + F
<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
(pada sebagian template blogspot, mungkin saja ada perbedaan dan tidak sama persis dengan kode diatas, sebagai acuan yang pasti kode tersebut terletak dibagian atas sendiri diatas kode <head> )
  • Apabila telah ketemu, silahkan ganti keseluruhan kode diatas dengan kode dibawah ini
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html>

<html expr:dir='data:blog.languageDirection' itemprop='http://schema.org/Article' itemscope='http://schema.org/Article' itemtype='http://schema.org/Article' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <html lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'/>
  • Selanjutnya cari kode <head> dan <b:skin><![CDATA[ , apabila telah ketemu silahkan ganti kode-kode yang terdapat diantara kode tersebut dan ganti dengan kode-kode dibawah ini (kecuali kode script bawaan template, misalnya script font dll, karena dengan menghapus script ini akan mempengaruhi tampilan blog)
<link href='https://plus.google.com/kode google plus anda' rel='publisher'/>   
<meta charset='utf-8'/>   
<b:if cond='data:blog.pageType == &quot;index&quot;'>   
<b:if cond='data:blog.pageType == &quot;item&quot;'>   
<title><data:blog.pageName/></title>  
<b:else/>   
<title><data:blog.pageTitle/></title>
  </b:if>
<b:else/>   
<title><data:blog.pageName/></title>  
</b:if>   
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <meta content='deskripsi blog anda' name='description'/>   
<meta content='keywords blog anda' name='keywords'/>   
<meta content='nama anda' name='Author'/>   
<meta content='email anda' name='Email'/> 
<meta content='general' name='rating'/> 
<meta content='all' name='robots'/>   
<meta content='index, follow' name='robots'/>   
<meta content='1 days' name='revisit-after'/>  
</b:if>   
<meta content='https://plus.google.com/kode google plus anda' name='DC.Creator'/>   
<meta content='nama blog anda' name='DC.Identifier'/>   
<meta content='ID' name='DC.Language' scheme='ISO639'/>   
<meta content='nama blog anda' lang='id' name='DC.Title'/>   
<meta content='www.blogger.com' name='DC.Relation.IsPartOf'/>   
<meta content='1998-09-22' name='DC.Date.LastModified' scheme='ISO 31-1'/> 
<meta content='https://plus.google.com/kode google plus anda' name='DC.Publisher'/> 
<meta content='Indonesia' name='geo.placename'/>  <meta content='id' name='geo.country'/>

  • Klik Save, untuk menyimpan template
  • Masih dalam Kotak Edit HTML, silahkan cari kode : <b:if cond='data:post.hasJumpLink'> 
  • Apabila telah ketemu, lanjutkan dengan meletakkan kode dibawah ini tepat diatas kode tersebut
 <div class='vcard' id='hcard-Nama Blog Sobat'>
<span class='fn n'> <span class='given-name'>Posted by: Nama Sobat</span> </span>
<a class='updated' href=' Url Blog Sobat/ ' rel='bookmark'>Nama Blog Sobat, </a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr> </div>

  • Klik Save untuk menyimpan Template
Demikian Tutorial Pemasangan Data terstruktur atau Rich Snippets pada Blog Blogspot , semoga bermanfaat dan terima kasih telah berkunjung

TUTORIAL PASANG DATA TERSTRUKTUR BLOGGER
TUTORIAL SEO BLOG
►
Labels: , , , ,

SEO ONPAGE : PASANG ALT TAGS PADA GAMBAR DI BLOG

memasang alt tags otomatis pada blog

TUTORIAL MEMASANG ALT TAGS OTOMATIS PADA GAMBAR

Gambar (Image) bisa menjadi alasan tersendiri untuk mesin pencari merayapi blog kita, seperti diketahui secara default Search Engine (Mesin Pencari) seperti Google tidaklah bisa mengenali (melihat) sebuah gambar tanpa adanya nama dan keterangan, maka dari itu diperlukan optimasi khusus terhadap gambar yang terdapat pada suatu Blog yakni dengan memasang atribut ALT tags. Gambar dengan tag ALT dapat membantu blog dalam hal Optimasi SEO atau Optimasi Mesin Pencari yang nantinya berimbas pada trafik pengunjung ke blog kita, khususnya dalam pencarian gambar di Google.

Mengingat pentingnya menyematkan Atribut ALT pada gambar untuk mendukung SEO Onpage Blog, pada kesempatan kali ini Jejak Blogspot akan berbagi Tutorial Memasang ALT tag pada Gambar secara Otomatis. yang nantinya dapat meringankan dan memudahkan kita dalam Mengoptimasi Blog karena kita tidak perlu Memasang ALT tag pada Gambar secara manual, meskipun memasang Image ALT tags tergolong pekerjaan yang mudah, akan menjadi kesulitan tersendiri apabila gambar-gambar yang ada di blog kita berjumlah banyak.

Perlu diketahui salah satu kelemahan Memasang ALT tag secara otomatis adalah hanya bergantung pada nama gambar yang diupload, untuk mensiasati hal ini usahakan memberi nama gambar sesuai keyword yang dikehendaki sebelum mengupload gambar kedalam blog, bagaimana? tertarik untuk Memasang ALT Tag Gambar Otomatis? silahkan ikuti panduan dibawah ini (Saya asumsikan sobat sudah masuk ke dassboard Blogger)
  1. Akses menu "Template" disebelah kiri
  2. Pada halaman selanjutnya klik "Edit HTML"
  3. Dalam Kotak Edit HTML coba sobat cari kode "</body>" tanpa tanda kutip, untuk mempermudah pencarian, klik disembarang tempat pada Kotak Edit HTML, lalu manfaatkan shortcut keyboard dengan menekan Ctrl + F, pada kotak pencarian yang muncul disebelah kanan silahkan masukan kode diatas dan klik enter
  4. Apabila sudah ketemu, silahkan Copy Paste kode dibawah ini tepat diatas kode </body>
    5. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
    <script type='text/javascript'>
     //<![CDATA[
    $(document).ready(function() {
    $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
    });
    });
    //]]>
    </script>
    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
    $('img').each(function(){
    var $img = $(this);
     var filename = $img.attr('src')
    $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
     });
    });
     //]]>
    </script>
  5. Simpan Template...Selesai!! 
Demikian Tutorial Memasang ALT Tags Gambar Otomatis ,semoga bermanfaat, terima kasih atas kunjungannya
SEO ONPAGE : PASANG ALT TAGS PADA GAMBAR DI BLOG
TUTORIAL SEO ONPAGE BLOGSPOT
►
Labels: , , ,

MUDAHNYA PASANG WIDGET MP3 PLAYER DI BLOGGER

add mp3 player di blogspot
MEMASANG MP3 PLAYER DI BLOGGER
Hampir sebagian besar orang pastinya menyukai Musik, beragam alasan kenapa kita menyukai musik, dan saya sendiri tidak ingin ditanya kenapa saya juga menyukai musik, adapun kita sebagai blogger, kenapa kita tidak menghibur pengunjung (visitor) blog dengan menghadirkan alunan musik, setiap orang menyukai musik dan diharapkan penikmat informasi yang mengunjungi blog kita, terhibur dan betah berlama - lama di dalam Blog kita.

Begitu banyak cara untuk menghadirkan alunan musik kedalam Blog kita, kita bisa memasang Widget ataupun Embed HTML MP3 Player secara manual, tetapi sesuai judul artikel ini "MUDAHNYA MEMASANG MP3 PLAYER DI BLOGSPOT", demi kemudahan, saya sarankan sampeyan untuk memanfaatkan situs Music Playlist Online Hypster.com , kita tinggal menjadi member dan kita bisa mencari Alunan Musik yang kita kehendaki untuk dijadikan Playlist, kedepannya kita juga mudah untuk mengkostumisasi Playlist tersebut, menghapus dan menambahkan lagu. dibawah ini akan saya jelaskan sedikit bagaimana caranya

  • Pertama kunjungi http://hypster.com/
  • Klik tombol Register untuk mendaftar
  • Saya asumsikan sampeyan telah mendaftar dan telah login ke dassboard disana, arahkan kursor ke menu "CREATE" dan klik pada submenu "Playlist"
  • klik Add New Playlist, Buat nama Playlist dan Add New Song
  • Pada kotak pencarian klik Nama Artist, Lagu ataupun Genre yang dikehendaki, klik enter
  • Selanjutnya Sobat akan dihadapkan pada daftar lagu sesuai dengan keyword yang dimasukkan tadi
  • klik Add To Playlist (sebelah kanan) jika ada yang diminati
  • selanjutnya setelah puas memilih lagu, arahkan kursor ke menu "Create" dan klik pada submenu "Player".
  • Pilih Skin MP3 Player yang sobat suka dan lanjutkan mengisi Captcha serta klik Get Code
  • Akan Muncul Kotak yang berisi Script MP3 Player Copy Kode tersebut
  • Lanjutkan ke dassboard Blogger Sobat
  • Klik Menu Template disebelah kiri dan lanjutkan dengan klik Edit HTML , 
  • Pada kotak HTML yang muncul, klik disembarang tempat di dalam kotak dan manfaatkan kombinasi keyboard CTRL+ F
  • masukkan <body> atau </body> pada kotak pencarian yang muncul dan klik enter
  • Terakhir, intinya Panjenengan bisa menempatkan Kode yang di dapat dari situs Hypster.com tadi diantara kode <body> dan </body>
  • klik Save Template (Simpan Template).
Seperti itulah cara untuk Memasang Widget MP3 Player pada Blogger dengan memanfaatkan situs Music Playlist Online Hypster.com, semoga bermanfaat dan terima kasih telah berkenan berkunjung ke blog JEJAK BLOGSPOT.

MUDAHNYA PASANG WIDGET MP3 PLAYER UNTUK BLOG BLOGSPOT

TUTORIAL BLOGSPOT

►
Labels: ,
Subscribe to: Posts (Atom)

© 2012 -JEJAK BLOGSPOT | Blogger Template HTML 5 | Designed by kimzigr | Using The 1KB Grid | Powered by Blogger