T ulisan saya sebelumnya tentang bagaimana Cara membuat Live Demo Template pada Template Blogger berisikan tentang bagaimana alasan dan in...
Cara Membuat Icon Otomatis Menggunakan Label Blogger

Cara Membuat Icon Otomatis Menggunakan Label Blogger

Icon Label Blogger
Icon label yang saya maksud merupakan Icon (Image, Video, Blogger, Wordpress) yang muncul pada sisi kiri judul posting, cara penerapannya hanya cukup menambahkan Label pada Posting Blogger. Sebagai contoh silahkan lihat :
. Untuk cara pembuatannya sangat sederhana, silahkan ikuti cara Membuat Icon Otomatis Menggunakan Label Blogger dibawah ini :
  1. Tambahkan kode dibawah ini diatas kode </head>
    <script type='text/javascript'> 
    function lebel_logo(etiqueta) {
    imagenes = new Array();
    imagenes[1] = &quot;<img src='https://lh3.googleusercontent.com/-cfmqvl_aeUU/T9RWXMUKLwI/AAAAAAAAAFk/KOMuyeM2gVs/s84/image.png' title='Image'/>&quot;
    imagenes[2] = &quot;<img src='https://lh3.googleusercontent.com/-spKt-dCuWDw/T9RZq64fDoI/AAAAAAAAAGA/h25ovtaAfsY/s84/video.png' title='Video'/>&quot;
    imagenes[3] = &quot;<img src='https://lh6.googleusercontent.com/-JqMoz73EsdI/T9RZpQdYL7I/AAAAAAAAAGE/Xh3kRqQkQZ8/s84/audio.png' title='Music'/>&quot;
    imagenes[4] = &quot;<img src='https://lh5.googleusercontent.com/-qvAfIbwadro/T9RZqVD3stI/AAAAAAAAAF4/U2A6BssgJQU/s84/quote.png' title='Quote'/>&quot;
    imagenes[5] = &quot;<img src='https://lh5.googleusercontent.com/-ZGIdlq5LlUM/T9RZpvwahHI/AAAAAAAAAFw/B94_LHUkup8/s84/note.png' title='Note'/>&quot;
    imagenes[6] = &quot;<img src='https://lh6.googleusercontent.com/-ZgQr4FMDm_I/T9ca1xRfDSI/AAAAAAAAADM/4GZTJjeHlwo/s84/Blogger.png' title='Blogger'/>&quot;
    imagenes[7] = &quot;<img src='https://lh5.googleusercontent.com/-JPLBQx4F72Y/T9ca51o-Y0I/AAAAAAAAADU/aaUDQVk_EmM/s84/wp.png' title='Wordpress'/>&quot;
    if (etiqueta == &quot;Image&quot;)
    {document.write(imagenes[1]);}
    if (etiqueta == &quot;Video&quot;)
    {document.write(imagenes[2]);} 
    if (etiqueta == &quot;Music&quot;)
    {document.write(imagenes[3]);} 
    if (etiqueta == &quot;Quote&quot;)
    {document.write(imagenes[4]);} 
    if (etiqueta == &quot;Blog&quot;)
    {document.write(imagenes[5]);} 
    if (etiqueta == &quot;Blogspot&quot;)
    {document.write(imagenes[6]);} 
    if (etiqueta == &quot;Wordpress&quot;)
    {document.write(imagenes[7]);} 
    }
    </script>
    
    Kode diatas dikelompokan dalam bentuk Label → "Image, Music, Quote, Note, Blogger, dan Wordpress"
  2. Masukkan kode CSS dibawah ini diatas kode ]]></b:skin>
    .format-icon{
    position: absolute;
    display:block;
    margin:0px 0px 0px -62px;
    padding:0px;
    border:0px;
    }
  3. Sekarang cari kode <div class='post-header'> kemudian tambahkan kode dibawah ini tepat diatasnya :
    <b:loop values='data:post.labels' var='label'>
    <a class='format-icon' expr:href='data:label.url' rel='tag'>
    <script type='text/javascript'>lebel_logo(&quot;<data:label.name/>&quot;);</script>
    </a>
    </b:loop>
    
  4. Selesai dan simpan template.
Cara penggunaannya cukup tembahkan label dengan menggunakan salah satu dari kata "Image, Music, Quote, Note, Blogger, atau Wordpress"
Posting Auto Read-More Tanpa JavaScript

Posting Auto Read-More Tanpa JavaScript

Auto Readmore Blogger
Image Auto Readmore Blogger
Cara ini dapat membuat tampilan blog terlihat lebih rapi dan elegan serta membuat blog akan terlihat cuplikan artikel ketika membuka blog pada halaman depan (homepage) dan juga akan membuat template blog menjadi lebih SEO Friendly karena langsung masuk ke script HTML blogger dengan memanfaatkan <data:post.snippet/> untuk Mengambil Ringkasan Posting dan <img expr:src='data:post.thumbnailUrl'/> untuk Mengambil Thumbnail Posting, berbeda dengan Read More Otomatis dengan Thumbnail Blogger dengan Javascript yang memanfaatkan pihak ketiga tempat penyimpanan data script yang membuat beban loading blog.
  • Terlebih dahulu masukkan kode CSS dibawah ini pada template yang penempatanya diatas kode </b:skin>, sesuaikan dengan template anda :
    .readmore{float:left;width:200px;line-height:20px;margin-right:15px;}
    .readmore img{background-image: url('https://lh4.googleusercontent.com/-wxD_93A9meY/T9YV80IuQGI/AAAAAAAAAgY/p4Mql4p4wiE/s25/putih.png'); border:1px solid #ccc;padding:5px;height:120px;width:95%;}
    .readmore .isi{border:1px solid #000;}
    
  • Template Standart Blogger → Jika template blogger belum memanfaatkan auto read more, silahkan cari code <data:post.body/> kemudian ganti dengan kode dibawah ini :
    <div class='post-body'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='readmore'>
    <b:if cond='data:post.firstImageUrl'>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
    <b:if cond='data:post.thumbnailUrl'>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>
    <b:else/>
    <a expr:href='data:post.url'><img expr:alt='data:post.title' src='http://2.bp.blogspot.com/-T35hHb1U34o/Uk2Q6XVpO0I/AAAAAAAAAsg/W8LNJO_zkIA/s320/no-thumbnail.jpg'/></a>
    </b:if>
    </b:if>
    </div>
    <div class='isi'><data:post.snippet/></div>
    <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
    <b:else/>
    <data:post.body/>
    </b:if>
    <b:else/>
    <data:post.body/>
    </b:if>
    </div>
  • Template Blogger yang terpasang Read More Javascript → Temukan kode dibawah ini kemudian silahkan dihapus dan ganti dengan kode diatas :
    
    <b:if cond='data:blog.pageType != "item"'>
    .......
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    .......
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    
Cara Buat Meta Tag Berbeda Untuk Setiap Posting Blogger

Cara Buat Meta Tag Berbeda Untuk Setiap Posting Blogger

Meta Tag Blogger
Meta Tag Blogger
Pada tampilan dasbor baru blogger (blogger new interface) pengguna Blogspot dimanjakan dengan kemudahan untuk menambahkan Meta Tag Deskripsi hanya dengan menambahkan Deskripsi Penelusuran pada setiap penulisan Artikel, tetapi bagi pengguna blogger lama (old interface) pada dasbor tidak terdapat hal yang disempurnakan pada dasbor baru blogger (blogger new interface) , dari pada mengganti Template Blogger dengan yang baru dan dianggap akan menurunkan trafic, maka kita harus merubah sedikit Meta Tag pada Edit HTML , langkah Cara Buat Meta Tag Berbeda Untuk Setiap Posting Blogger sebagai berikut :

Apa Meta Tag Berbeda Untuk Setiap Posting di Blogger?
Secara default, jika Anda menambahkan Meta Tag ke template blogger, maka semua halaman Anda, termasuk halaman rumah akan memiliki Meta Description Tag sama. Apakah salah? No Hanya saja ketika Anda mengirimkan blog Anda ke google maka Anda akan memiliki duplikat meta tag deskripsi. Meta Description Tags berbeda dalam setiap posting akan lebih google friendly.
Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template

Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template

live demoTulisan saya sebelumnya tentang bagaimana Cara membuat Live Demo Template pada Template Blogger berisikan tentang bagaimana alasan dan inspirasi dalam membuat Live Demo menggunakan Java Script dan Laman Blogger Template, untuk lebih silangkat silahkan lihat demo, sedangkan cara membuat Live Demo menggunakan Java Script yang memanfaatkan Laman Blogger Template yang paling mudah adalah sebagai berikut :
01 Langkah pertama , silahkan buat menu Laman pada Blogger, dengan judul demo sehingga membentuk format http://namablog.blogspot.com/p/demo.html
02 Langkah kedua, silahkan cari kode </head>, kemudian ganti dengan kode dibawah ini :
<b:if cond='data:blog.url == &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
<script src='http://reog.googlecode.com/files/jquery-1.js' type='text/javascript'/>
<script src='http://reog.googlecode.com/files/iframe.js' type='text/javascript'/>
<style type='text/css'>
html, #iframe{overflow: hidden;} 
iframe{position: absolute; width: 100%; height: 100%; border:none; overflow: visible;}
</style>
</b:if>
</head>
03Langkah ketiga, cari kode <body>, kemudian ganti dengan kode dibawah ini :
<body>
<b:if cond='data:blog.url != &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
04Langkah keempat, cari kode </body>, kemudian ganti dengan kode dibawah ini :
</b:if>
<b:if cond='data:blog.url == &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
<div id='iframe'><iframe src=''/></div>
</b:if>
</body>
05Selanjutnya simpan Template, kemudian silahkan coba live demo Laman Blogger yang telah dibuat dengan format http://namablog.blogspot.com/p/demo.html?iframe=alamat-url sebagai contoh : http://stylebloggertemplate.blogspot.com/p/demo.html?iframe=setneg.blogspot.com
Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template yang dibuat diatas merupakan cara yang sangat sederhana, silahkan dikembangan sendiri.
Cara Membuat Live Demo Template Menggunakan Laman Blogger

Cara Membuat Live Demo Template Menggunakan Laman Blogger

Live Demo Banyak blogger menanyakan tentang Cara membuat Live Demo Template menggunakan Java Script pada blogger dan disamping itu juga banyak yang membuat sudah membuat kumpulan Template Blogger dengan Live Demo yang bermacam macam serta penuh kreatif dan inspiratif seperti beberapa yang menginspirasi saya , diantaranya sebagai berikut :
01Blogger Templates dengan live demo template http://btemplates.com/2012/blogger-template-darkpress/demo/ yang tidak dapat diubah sewaktu waktu.
02zoomtemplate.com sangat inspiratif dalam menggunakan subdomain demo.zoomtemplate.com dengan format http://demo.zoomtemplate.com?dm=url, jadi akan mudah membuat live demo hanya dengan menambahkan alamat url yang akan dibuat live demo, sebagai contoh apabila ingin membuat live demo template blogger karya fianhar dengan alamat http://setneg.blogspot.com , maka pada zoomtemplate tinggal menambahkan url setelah http://demo.zoomtemplate.com?dm= , sehingga untuk live demo http://setneg.blogspot.com adalah http://demo.zoomtemplate.com/?dm=http://setneg.blogspot.com
03Ilmu inspiratif selanjutnya dimiliki oleh http://www.dhetemplate.com/ yang telah membuat live demo template koleksi pada http://demo.dhetemplate.com dengan alamat blogspot aslinya di http://demo-dhetemplate.blogspot.com , jadi http://www.dhetemplate.com/ setiap akan membuat live demo harus memposting pada http://demo.dhetemplate.com dengan dasar iframe live demo, ini menurut saya akan sedikit repot dibandingkan dengan http://demo.zoomtemplate.com yang tinggal menambahkan url (alamat website) setelah url http://demo.zoomtemplate.com?dm= , tetapi http://demo.dhetemplate.com mempunyai kelebihan sangat mudah terindex search engine. 

Sekarang giliran saya yang mendapat inspirasi untuk menggabungkan kelebihan demo.zoomtemplate.com dan http://demo.dhetemplate.com , dimana saya hanya menggunakan Laman bawaan blogger dan sedikit java script, jadi saya membuat live demo dengan menggunakan alamat subdomain blogspot.com dari blogger dan ketika akan membuat Live Demo Template saya hanya akan menambahkan url dibelakang ?iframe= , sebagai contoh saya membuat Live Demo pada laman http://stylebloggertemplate.blogspot.com/p/demo.html , jika saya akan membuat Live Demo template Black Reog Warok dengan alamat http://setneg.blogspot.com maka saya akan mudah membuat live demo template dengan cara hanya menambahkan url dibelakang ?iframe sehingga alamat Live Demo Template adalah http://stylebloggertemplate.blogspot.com/p/demo.html?iframe=setneg.blogspot.com , untuk lebih simplenya silahkan lihat langsung Live Demo Template by Fianhar

Apakah anda berminat menerapkan pada template yang anda?
Jika berminat silahkan comment sertakan alamat email, saya tidak meminta biaya dan akan membagi secara geratis melalui email yang anda sertakan pada comment atau silahkan kunjungi langsung Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template.
Typography  Joomla in Style Blogger Template

Typography Joomla in Style Blogger Template

TypographyTypography (gaya penulisan) dalam sebuah artikel akan membuat nyaman pengunjung blog dalam membaca artikel yang disajikan penulis, karena blog akan terlihat rapi dan lebih profesional. Cara pembuatan ini hanya menggunakan CSS yang kemudian diterapkan pada posting artikel.

Boxes and Legends Style

<p class="box-info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.</p>
<p class="box-tips"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.</p>
<p class="box-warning"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.</p>
This is a sticky. Use <p class="box-list">Your clip note goes here!</p> to create a clip note!
This is a download box. Use <p class="box-download">Your download goes here!</p> to create a download box!
This is a grey box. Use <p class="box1">Your content goes here!</p> to create a grey box!
This is a hilite box. Use <p class="box2">Your content goes here!</p> to create a hilite box!

Legend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet. Pellentesque pharetra tincidunt sapien. Cara penulisan menggunakan kode <p class="legend1"> <h4> Title </h4> and here text.</p>

Legend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet. Pellentesque pharetra tincidunt sapien. Menggunakan kode penulisan <p class="legend2"> <h4> Title </h4> and here text.</p>

Legend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet. Pellentesque pharetra tincidunt sapien. Menggunakan kode penulisan <p class="legend3"> <h4> Title </h4> and here text.</p>

Legend

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet. Pellentesque pharetra tincidunt sapien. Menggunakan kode <p class="legend4"> <h4> Title </h4> and here text.</p> </p>

Legend style

Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer. Menggunakan kode <p class="legend5"> <h4> Title </h4> and here text.</p>

Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

Headline

This is a headline.
This is a subheadline.
This is a small headline
This is a large headline
Headline adalah berita utama yang ditempatkan pada sebuah artikel blog, biasanya dipergunakan untuk peristiwa yang dianggap penting oleh pemilik blog untuk perhatian pembaca blog.
  • Cara penulisan <p class="Headline">This is a headline</p> <p class="SubHeadline">
  • Cara penulisan small headline <p class="SmallHeadline">This is a Small Headline</p>
  • Cara penulisan Large Headline <p class="LargeHeadline">This is a LargeHeadline</p>

Icon set

This is a sample file1 message.
Use <p class="gkfile1">Your message goes here!</p>.
This is a sample kfile2 message.
Use <p class="gkfile2">Your goes here!</p>.
This is a sample search message.
Use <p class="gksearch">Your message goes here!</p>.
This is a sample zoom- message.
Use <p class="gkzoomminus">Your message goes here!</p>.
This is a sample zoom+ message.
Use <p class="gkzoomplus">Your goes here!</p>.
This is a sample error message.
Use <p class="gkerror">Your message goes here!</p>.
This is a sample tick message.
Use <p class="gktick">Your message goes here!</p>.
This is a sample book message.
Use <p class="gkbook">Your goes here!</p>.
This is a sample map message.
Use <p class="gkmap">Your message goes here!</p>.
This is a sample tag message.
Use <p class="gktag">Your message goes here!</p>.
This is a sample stats message.
Use <p class="gkstats">Your goes here!</p>.
This is a sample star message.
Use <p class="gkstar">Your message goes here!</p>.
This is a sample ribbon message.
Use <p class="gkribbon">Your message goes here!</p>.
This is a sample nav message.
Use <p class="gknav">Your goes here!</p>.
This is a sample graph message.
Use <p class="gkgraph">Your message goes here!</p>.
This is a sample flash message.
Use <p class="gkflash">Your message goes here!</p>.
This is a sample location message.
Use <p class="gklocation">Your goes here!</p>.
This is a sample locationminus message.
Use <p class="gklocationminus">Your message goes here!</p>.
This is a locationplus cd message.
Use <p class="gklocationplus">Your message goes here!</p>.
This is a sample bulb message.
Use <p class="gkbulb">Your message goes here!</p>.

Tooltips

Ini beberapa contoh ToolTips menggunakan CSS :

Highlights

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="gkHighlight1">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="gkHighlight2">Your highlight phrase goes here!</span>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="gkHighlight3">Your highlight phrase goes here!</span>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is a highlight phrase.
Use <span class="gkHighlight4">Your highlight phrase goes here!</span>.

Unordered lists

<ul class="gkBullet1">
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
<ul class="gkBullet2">
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
<ul class="gkBullet3">
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
<ul class="gkBullet4">
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
<ul class="gkCircle1">
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
<ul class="gkCircle2">
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
<ul class="gkSquare1">
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
<ul class="gkSquare2">
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.

Ordered lists

<ol class="Roman">
  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet.
<ol class="Dec">
  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet.
<ol class="Alpha">
  1. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  3. Lorem ipsum dolor sit amet.
  4. Lorem ipsum dolor sit amet.
<ol class="DecimalLeadingZero">
  1. Lorem ipsum
  2. Lorem ipsum
  3. Lorem ipsum
  4. Lorem ipsum

numBlocks

<div class="numblocks num-1"><div>01</div>and here text of element</div>
01
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
01
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
<div class="numblocks num-2"><div>02</div>and here text of element</div>
02
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
02
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
<div class="numblocks num-3"><div>03</div>and here text of element</div>
03
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
03
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.

Blocks

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-1">content here... </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-4">content here... </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-7">content here... </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-2">content here... </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-5">content here... </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-8">content here... </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-3">content here... </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-6">content here... </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="gkblock-9">content here... </div>

Bubbles

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="bubble-1">content here... <cite>Author name</cite></div>
Robert Gavick
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="bubble-3">content here... <cite>Author name</cite></div>
Robert Gavick
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Use <div class="bubble-5">content here... <cite>Author name</cite></div>
Robert Gavick
<div class="bubble bubble-l1 clearfix"> <div class="box-ct"> <div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div> Buble's content goes here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>
Put author name here
<div class="bubble bubble-l2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>
Put author name here
<div class="bubble bubble-d1 clearfix"> <div class="box-ct"> <div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div> Buble's content goes here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>
Put author name here
<div class="bubble bubble-d2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>
Put author name here
<div class="bubble bubble-hl1 clearfix"> <div class="box-ct"> <div class="box tl"> </div> <div class="box tr"> </div> <div class="box bl"> </div> <div class="box br"> </div> Buble's content goes here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>
Put author name here
<div class="bubble bubble-hl2 clearfix"> <div class="box-ct"> Bubble's content goese here! </div> <span class="arrow"> </span> <span class="author">Put author name here</span> </div>
Put author name here

Abbrs and acronyms

Ini sebagai contoh abbreviation Dr atau NATO. Menggunakan kode penulisan <abbr title="Here goes full word or phrase">here goes an abbreviation</abbr>

Dropcaps

Drop Cap adalah huruf awal suatu paragraph yang diperbesar. Maksudnya huruf pada awal suatu paragraph besarnya beberapa baris lebih besar daripada huruf-huruf lainnya. Besarnya huruf pada awal paragraph ini bisa diatur beberapa baris dari tulisan dan jarak antara drop cap dan tulisan yang lain. Cara penulisannya <span class="dropcap">D</span> rop Cap adalah huruf awal suatu ...
Tulisan awal jadi besar ini dinamakan Drop Cap cara penulisannya tinggal tambahkan <span class="dropcap">T</span> ulisan awal jadi ...
Huruf pada awal suatu paragraph besarnya beberapa baris lebih besar daripada huruf-huruf lainnya. Besarnya huruf pada awal paragraph ini bisa diatur beberapa baris dari tulisan dan jarak antara drop cap dan tulisan yang lain. Cara penulisannya <span class="dropcap2">h</span>uruf pada awal ....

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="gkBlockquote1"><div> Your quoted text goes here!< /div>< /div>< /blockquote >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="gkBlockquote2"><div> Your quoted text goes here!< /div>< /div>< /blockquote >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="gkBlockquote3"><div> Your quoted text goes here!< /div>< /div>< /blockquote >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum blandit purus, vitae pharetra odio interdum sit amet.
Use < blockquote><div class="gkBlockquote4"><div> Your quoted text goes here!< /div>< /div>< /blockquote >

Floated blocks

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Ini bagian tulisan yang diblock untuk penempatan sebelah kiri menggunakan kode <span class="blockleft">Teks yang di Block</span>, jadi akan lebih menarik.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Ini bagian tulisan yang diblock untuk penempatan sebelah kiri menggunakan kode <span class="blockright">Teks yang di Block</span>, penempatan teks yang diblok sebelah kanan.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum pulvinar justo, sed faucibus ligula feugiat ac. Morbi quis enim nulla, vel congue augue. Duis quis quam sed purus porta eleifend.Ini merupakan tulisan yang menggunakan <span class="bloccenter">Teks yang di Block</span> sehingga penempatan teks yang diblok pada tengah.Donec eget dignissim augue. Donec ante felis, aliquam ut consequat eget, lobortis dapibus risus. Aliquam laoreet enim et lectus ornare hendrerit. Aliquam rhoncus enim libero. Morbi aliquam, nibh mattis feugiat dapibus, nisi massa adipiscing justo, sit amet condimentum urna ipsum et lacus. Nam fermentum, eros quis ullamcorper convallis, libero mauris lacinia eros, sed tempus leo lorem vitae purus. Nunc a malesuada felis. Cras ultrices sapien eu nisi elementum non blandit urna sodales.

Additional typography elements

Membuat icon like the following icons dengan menggunakan cara sederhana sederhana :
Facebook Twitter Google RSS
  • <a href="#" class="iconRSS">RSS</a>
  • <a href="#" class="iconFacebook">Facebook</a>
  • <a href="#" class="iconTwitter">Twitter</a>
  • <a href="#" class="iconGoogle">Google</a>
This is a sample Blockquote. Use <blockquote>Your quote goes here!</blockquote> to form a quote!
This is a sample Blockquote. Use <blockquote>Your quote goes her<span class="close">e!</span></blockquote> to form a quote!

Lists Style

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit amet consectetuer.
  3. Condimentum quis.
  4. Congue Quisque augue elit dolor nibh.
  • This is a sample Unordered List.
  • Condimentum quis.
  • Lorem ipsum dolor sit amet consectetuer.
  • Congue Quisque augue elit dolor nibh.
  • This is a sample Arrow list.
  • Use <ul class="arrow"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Checklist.
  • This is a sample Star List.
  • Use <ul class="star"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Star List.
  • This is a sample Checklist.
  • Use <ul class="checklist"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Checklist.
  • This is a sample Phone List.
  • Use <ul class="phone"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Phone List.
  • This is a sample Address List.
  • Use <ul class="address"><li><span class="icon"> </span>List's content goes here!</li></ul>
  • This is a sample Address List.
01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">01.</span>Your content goes here!</p> to form a block number!
02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">02.</span>Your content goes here!</p> to form a block number!
03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-1">03.</span>Your content goes here!</p> to form a block number!
01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">01.</span>Your content goes here!</p> to form a block number!
02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">02.</span>Your content goes here!</p> to form a block number!
03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-2">03.</span>Your content goes here!</p> to form a block number!
01This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">01.</span>Your content goes here!</p> to form a block number!
02This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">02.</span>Your content goes here!</p> to form a block number!
03This is a sample block number. Use <p class="blocknumber"><span class="bignumber-3">03.</span>Your content goes here!</p> to form a block number!

Paragraph Style

Use <p class="error"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="message"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="tips"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="key"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="tag"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="cart"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="doc"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="note"><span class="icon"> </span>Your message goes here!</p> to make this.
Use <p class="photo"><span class="icon"> </span>Your message goes here!</p> to make this
Use <p class="mobi"><span class="icon"> </span>Your message goes here!</p> to make this.
Sitebase Mega Drop Menu pada Blogger Template ( Create Setting Mega Menu to Blogger )

Sitebase Mega Drop Menu pada Blogger Template ( Create Setting Mega Menu to Blogger )

Menu DownDengan script ini Anda dapat membuat drop bagus dan interaktif down menu. Keuntungan dari script ini adalah bahwa ia tidak hanya memberikan Anda kemampuan untuk membuat drop down menu. Anda juga dapat menggunakan div sebagai drop-down elemen. Dengan cara ini Anda dapat membuat drop down menu besar seperti di bawah produk tombol dan tutorial di live preview. Atau Anda dapat membuat sebuah panel login di drop ke bawah seperti yang saya lakukan dalam pratayang langsung.
Dengan script ini Anda dapat membuat drop bagus dan interaktif down menu. Keuntungan dari script ini adalah bahwa ia tidak hanya memberikan Anda kemampuan untuk membuat drop down menu. Anda juga dapat menggunakan div sebagai drop-down elemen. This way you can create big drop down menus like under the buttons products and tutorials in the preview or you can create a login panel in your drop down! Dengan cara ini Anda dapat membuat drop down menu besar seperti di bawah produk tombol dan tutorial di preview atau Anda dapat membuat sebuah panel Anda login di drop down!

Featur :

  • Create dropdown menus
  • Horizontal and vertical menus
  • Supports div dropdown
  • 3 examples dropdown menus included
  • 3 dropdown animations
  • use different anim for open and close
  • Graceful degradation
  • Customizable through css
  • Works in all browsers
  • Custom animations
  • Show on top of flash content
Untuk melihat penerapan pada Blogger Template silahkan lihat Live Demo Sitebase Mega Drop Menu to Blogger Template sedangkan untuk cara penerapan Sitebase Mega Drop Menu pada template blogger silahkan Login Blogger → Template Blogger → Simpan Template → edit HTML kemudian ikuti langkah sebagai berikut :
01
Masukkan kode di bawah ini diatas kode <b:skin> atau diatas </head>
<script src='http://reog.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://reog.googlecode.com/files/dropmenu.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#nav-one&quot;).dropmenu();
});
</script>
02
Masukkan kode CSS dibawah ini pada template blogger yang akan dipasang Sitebase Mega Drop Menu, yang letaknya diatas <b:skin>.
/* Menu Live
----------------------------------------------- */
#Live ul, li{
padding: 0px;
margin: 0px;
}
#Live ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
#Live .dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
#Live .dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
#Live .dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}
#Live .dropmenu li a:hover span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}
#Live .dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
#Live .dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}
#Live .dropmenu ul li{
border: 0;
float: none;
}
#Live .dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-transform: none;
}
.dropmenu a.selected, .dropmenu a:hover{
color: #0657AD !important;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}
#Live a.selected span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}
#Live .dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
#Live .dropmenu div ul{
position: relative;
display: block;
}
#Live .dropmenu li div{
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
#Live .dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
#Live .dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}
#Live .dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}
#Live .dropmenu li div div a{
display: inline;
border: none;
color: #0657AD;
padding: 0px;
margin: 0px;
text-transform: none; 
}
#Live .dropmenu li div div a:hover{
color: #F67A00;
text-decoration: none;
border-bottom: 1px dashed #000;
}
#Live ul.left{
float: left;
width: 145px;
}
#Live ul.right{
float: right;
width: 145px;
}
#Live .small{
color: #666;
font-size: 11px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
#Live .products{
width: 300px;
padding: 15px !important;
}
#Live .products ul{
width: 100%;
}
#Live .products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
#Live .products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
#Live .products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
#Live .products img{
float: left;
padding-right: 10px;
}
#Live .products ul li a{
display: inline;
border: none;
color: #666;
padding: 0px;
margin: 0px;
text-transform: none; 
}
#Live .products ul li a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
border-bottom: 1px dashed #000;
}
#Live .tutorials{
width: 300px;
}
#Live .profile{
width: 300px;
padding: 15px !important;
}
#Live .profile ul{
width: 100%;
}
#Live .profile ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
#Live .profile h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
#Live .profile p{
color: #666;
font-size: 10px;
padding: 0px;
margin-left: 120px;
}
#Live .profile img{
float: left;
padding-right: 10px;
border: 1px solid rgb(226, 226, 226);
width: 100px;
height: 100px;
padding: 5px;
margin-top: 17px;
margin-right: 10px;
}
#Live .profile a:hover {
background:none;
}
#Live .login{
padding: 15px !important;
width: 180px;
}
#Live input{
border:1px solid #4A779D;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
#Live label{
padding: 0px 0px 4px 0px;
display:block;
}
#Live button{
background: #4A779D url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
padding: 4px 10px;
width: 180px;
}
03
Tambahkan kode HTML dibawah ini pada bagian <body> atau sesuai dengan kebutuhan dan penempatan yang diinginkan.
<ul class='dropmenu' id='nav-one'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Forum</a>
<ul>
<li><a href='#'>Support</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#'>Examples</a></li>
<li><a href='#'>Your work</a></li>
</ul>
</li>
<li>
<a href='#item3'>Downloads</a>
<ul>
<li><a href='#'>Tools</a></li>
<li><a href='#'>Office</a></li>
<li><a href='#'>Custom projects</a></li>
</ul>
</li>
<li>
<a href='#'>Services</a>
<div class='products'>
<ul>
<li><img alt='Thumb' border='0' height='40' src='https://lh3.googleusercontent.com/_HR8egC6j8tg/TaO0_4J88II/AAAAAAAAAWQ/jXzJP5JiRr4/design.png' width='40'/><h2>Design Template</h2><p><a href='#'>Desig Template Blogger</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1GgOaqvI/AAAAAAAAAWU/9Gy6ImALKXk/gallery.png' width='40'/><h2>Gallery Blogger</h2><p><a href='#'>View and Download Template</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh6.googleusercontent.com/_HR8egC6j8tg/TaO1MROxsBI/AAAAAAAAAWY/d6UthoqsB0I/help.png' width='40'/><h2>Blogger Help</h2><p><a href='#'>Can Help Blog Problem</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1T5uh_VI/AAAAAAAAAWc/SrFLXC-dwPM/safety.png' width='40'/><h2>Blogger Safety</h2><p><a href='#'>Safety Blogger Template</a></p></li>
</ul>
<div class='small'>Style Blogger Template hanya sebuah catatan kecil dari seorang Blogger Indonesia, blog ini berisi tentang Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia.</div>
</div>
</li>
<li>
<a href='#'>Tutorials</a>
<div class='tutorials'>
<ul class='left'>
<li><a href='#'>Javascript</a></li>
<li><a href='#'>Python</a></li>
<li><a href='#'>PHP</a></li>
</ul>
<ul class='right'>
<li><a href='#'>HTML/CSS</a></li>
<li><a href='#'>ASP.NET</a></li>
<li><a href='#'>Actionscript</a></li>
</ul>
<div class='small'>View <a href='#'>all categories</a> or a <a href='#'>list of the best tutorials</a>.</div>
</div>
</li>
<li>
<a href='#'>Links</a>
<ul>
<li><a href='#'>Programming</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>My websites</a></li>
<li><a href='#'>Clients</a></li>
<li><a href='#'>Cool stuff</a></li>
<li><a href='#'>Sitebase</a></li>
<li><a href='#'>Other</a></li>
</ul>
</li>
<li>
<a href='#'>Profile</a>
<div class='profile'>
<div class='small'>
<a href='http://www.facebook.com/fianhar' target='_blank'><img src='https://lh3.googleusercontent.com/_HR8egC6j8tg/TYIGkw5J-2I/AAAAAAAAAVw/XrtCnnTwQQk/aha.jpg'/></a>
<p style='text-align: justify;'>Saya adalah <a href='http://fianhar.blogspot.com' target='_blank'>Fianhar</a>, berasal dan dibesarkan di <a href='http://id.wikipedia.org/wiki/Kabupaten_Ponorogo' target='_blank'>Kota Reog Ponorogo</a> Indonesia. Sekarang tinggal di <a href='http://id.wikipedia.org/wiki/Jakarta' target='_blank'>Kota Jakarta</a> dan bekerja di Institusi Penegak Hukum. Photografi dan Web Design hanya sebuah hobby.</p>
<p style='text-align: justify'>Hukum, Web design, dan fotografi adalah merupakan suatu seni yang menghasilkan keindahan jika berjalan seimbang.
</p>
</div>
</div>
</li>
<li>
<a href='#'>Login</a>
<div class='login'>
<label for='txtuser'>Username: </label>
<input id='txtuser' name='txtuser' type='text'/>
<label for='txtuser'>Password: </label>
<input id='txtpass' name='txtpass' type='password'/>
<button>Login</button>
</div>
</li>
</ul>
Keterangan : Kode HTML yang terdapat pada langkah Nomor 3 masukkan Template Blogger sesuai yang dikehendaki tetapi lebih baik penempatan Mega Drop Down Menus pada Header Template.
Referensi Artikel :
Menerapkan Vimeo-like Top Mega Menus Navigation pada Blogger Template ( Create Setting Mega Menu )

Menerapkan Vimeo-like Top Mega Menus Navigation pada Blogger Template ( Create Setting Mega Menu )

Saya sangat suka navigasi atas diterapkan pada Vimeo.com. Pertama kali aku melihatnya aku ingin menciptakan itu. Dan ini persis apa yang akan saya lakukan dalam tutorial ini.

Apa yang paling saya sukai adalah menu yang turun ke bawah ketika Anda membawa kotak pencarian. Ia menawarkan pilihan pencarian yang berbeda yang dapat Anda pilih dan mempersempit pencarian Anda.

Aku sudah menampilkan tutorial ini Janko's beberapa waktu lalu, tapi kadang-kadang saya akan mengulangi diriku sendiri, karena artikel ini benar-benar didedikasikan untuk menampilkan menu drop-down lanjutan. Sangat rinci dan ditulis dengan baik tutorial, dengan drop-down pencarian penyempitan dan menargetkan pencarian dengan memeriksa pilihan. Menu ini dilakukan sepenuhnya hanya menggunakan CSS, struktur secara visual describet pada gambar di bawah: Demo Vimeo-like Top Mega Menus Navigation to Blogger Template
Cara membuat , cara mengedit, cara setting dan cara menerapkan Demo Vimeo-like Top Mega Menus Navigation to Blogger Template silahkan ikuti langkah sebagai berikut :
  1. Langkah 1 : Login Blogger -> Rancangan -> Rancangan
  2. Langkah 2 : Back Up template Anda.
  3. Langkah 3 : Copy kode di bawah ini di atas kode ]]></b:skin>

    #janko #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; }
    #janko #menu a { color:#fff; text-decoration:none; }
    #janko #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;}
    #janko #menu > li a:hover {color:#B0D730;}
    #janko #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
    /* sub-menus*/
    #janko #menu ul { padding:0px; margin:0px; display:block; display:inline;}
    #janko #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; }
    #janko #menu li:hover ul { display:block;}
    #janko #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; }
    #janko #menu li ul li:first-child { border-top: none; }
    #janko #menu li ul li a { display:block; color:#0395CC; }
    #janko #menu li ul li a:hover { color:#7FCDFE; }
    /* main submenu */
    #janko #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;}
    /* search */
    #janko .searchContainer div { background-color:#fff; display:inline; padding:5px;}
    #janko .searchContainer input[type="text"] {border:none;}
    #janko .searchContainer img { vertical-align:middle;}
    /* corners*/
    #janko #menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
    #janko #menu .corner_inset_right { position:absolute; top:0px; left:150px;}
    #janko #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
    #janko #menu .corner_left { position:absolute; left:0px; top:0px;}
    #janko #menu .corner_right { position:absolute; left:132px; top:0px;}
    #janko #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;}
  4. Langkah 4 : Tambahkan kode dibawah ini pada bagian HEADER atau pada bagian BODY atau jika template masih setandar letakkan pada bagian <div id='outer-wrapper'> :

    <div id='janko'>
    <div style='margin-left:50px;'>
    <ul id='menu'>
    <li class='logo'>

    <img alt='' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/menu_left.png' style='float:left;'/>
    <ul id='main'>
    <li>Welcome to <b>Create Vimeo-like top navigation</b> tutorial!</li>
    <li class='last'>
    <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_blue_left.png'/>
    <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot_blue.png'/>
    <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_blue_right.png'/>

    </li>
    </ul>

    </li>
    <li><a href='#'>Login</a>
    </li>
    <li><a href='#'>Help</a>
    <ul id='help'>
    <li>

    <img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
    <a href='#'>General help</a>
    <img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
    </li>
    <li><a href='#'>Posts</a></li>
    <li><a href='#'>Pages</a></li>
    <li><a href='#'>Posts</a></li>
    <li><a href='#'>Pages</a></li>
    <li><a href='#'>Posts</a></li>
    <li class='last'>

    <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
    <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
    <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
    </li>
    </ul>
    </li>

    <li><a href='#'>Help</a>
    <ul id='help'>
    <li>
    <img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
    <a href='#'>General help</a>
    <img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
    </li>
    <li><a href='#'>Posts</a></li>
    <li><a href='#'>Pages</a></li>
    <li><a href='#'>Posts</a></li>
    <li><a href='#'>Pages</a></li>
    <li><a href='#'>Posts</a></li>
    <li class='last'>

    <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
    <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
    <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
    </li>
    </ul>
    </li>

    <li class='searchContainer'>
    <div>
    <input id='searchField' type='text'/>

    <img alt='Search' onclick='alert(&apos;You clicked on search button&apos;)' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/magnifier.png'/></div>
    <ul id='search'>
    <li>
    <img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
    <input id='cbxAll' type='checkbox'/>All
    <img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
    </li>
    <li><input id='Articles' type='checkbox'/>Articles</li>
    <li><input id='Tutorials' type='checkbox'/>Tutorials</li>

    <li><input id='Reviews' type='checkbox'/>Reviews</li>
    <li><input id='Resources' type='checkbox'/>Resources</li>
    <li class='last'>
    <img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
    <img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
    <img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
    </li>
    </ul>

    </li>
    </ul>
    <img alt='' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/menu_right.png' style='float:left;'/>
    </div>
    </div>

Keterangan :
Kode yang terdapat pada langkah ke-4 masukkan pada HTML Blogger Template Anda, tetapi lebih baik penempatan Mega Drop Down Menus pada Header Template.
Referensi Artikel :
  1. Create Vimeo-like top navigation.
    Link : http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
  2. 38 jQuery And CSS Drop Down Multi Level Menu Solutions.
    Link : http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
Cara Membuat Mega Drop Down Menu dengan Images atau Thumbnails pada Blogger

Cara Membuat Mega Drop Down Menu dengan Images atau Thumbnails pada Blogger

Fitur

  • Dukungan Menu Multi-Level
    Menu AJAX adalah menu drop-down multi-level yang didasarkan pada daftar HTML tanpa urutan standar.
  • Kompatibilitas Lintas-browser
    Sebagian besar aplikasi AJAX akan berfungsi di berbagai peramban bahkan dengan plugin lain atau teknologi kepemilikan yang sudah terpasang.
  • Tampilan Sub-Menu Otomatis
    Dengan menu AJAX baru, Anda hanya perlu menggulirkan item menu dan sub-menu akan dimuat secara otomatis. Tidak perlu mengklik menu untuk mendapatkan sub-menu untuk drop down. Ini tidak hanya menghemat waktu navigasi yang berharga bagi pengguna, tetapi juga lalu lintas keluar.
  • Menu Styling
    Ada banyak fitur lain, tetapi Anda tidak akan dapat menggunakan atau mengalaminya jika Anda tidak menginstal mega menu baru dengan gambar. Apa yang perlu Anda lakukan kemudian untuk menerapkannya di blog atau situs web Anda?
Langkah 1. Masuk ke akun Blogger Anda, kemudian pergi ke Dashboard. Pilih blog Anda yang ingin ditambahkan menu baru.
Langkah 2. Klik pada Template , lalu tekan tombol Edit HTML . Tekan di mana saja di dalam area kode dan gunakan fungsi CTRL + F untuk membuat pencarian Anda lebih cepat dan lebih mudah. Ketik tag berikut dan tekan Enter untuk menemukannya:
]]></b:skin>
Setelah Anda menemukan, tambahkan kode di bawah tepat di atasnya:
.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('http://2.bp.blogspot.com/-N9HNU11nhiA/Va-NLcGF0lI/AAAAAAAALW4/HzSlCK7PGeY/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('http://4.bp.blogspot.com/-VJqk_zzkAuw/VazlDH_goDI/AAAAAAAALVM/t-AjU3ix55k/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(http://3.bp.blogspot.com/-TQMok5egm8c/Va44AXnjg3I/AAAAAAAALV8/eq_8ICAlH2I/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

Langkah 3. Periksa apakah blog Anda sudah menginstal plugin jQuery. Jika tidak, Anda perlu menambahkan beberapa baris kode sebelum tag & lt; / head & gt; (CTRL + F untuk menemukannya). Lihat kode di bawah ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.megaMenuHtml();this.ajaxcall=null;this.menulist=this.elem.find(".leftmenulist li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.menulist.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.postsNumber};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loading-icon"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loading-icon").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s200-c/"):n.settings.noThumbnail;r.push('<li><span class="thumb-container"><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'"/><br />',i,"</a></span></li>")}):r.push("<h5>","No posts available.","</h5>");this.container.html(r.join(""));this.menulist.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Oops... Could not fetch the blog posts.</h5>")}},addArrow:function(){this.menulist.closest("li").find("span").remove();this.menulist.removeClass("hover-menu");this.li.addClass("hover-menu");e("<span></span>",{"class":"menu-icon"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hover-menu");var r=e(this).find("ul.leftmenulist li").height()*e(this).find("ul.leftmenulist li").length;t.find("ul.rightmenulist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hover-menu")})},megaMenuHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("megamenuid").find(">li").find("ul:first").addClass("leftmenulist").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.leftmenulist").after(e("<ul></ul>",{"class":"rightmenulist"}))},requestFirstAjax:function(e){e=e.find(".leftmenulist li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.megaBloggerMenu=function(n){var r={postsNumber:4,divClass:"megasubmenu",postsClass:"rightmenulist",noThumbnail:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);
//]]>
</script>
<script type='text/javascript'> jQuery(document).ready(function($) {  $(&#39;#megamenuid&#39;).megaBloggerMenu({   postsNumber : 4,   noThumbnail : &#39;http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png&#39;  }); });> $(function(){   $(&#39;.search-here&#39;).submit(function(e){     if($(&#39;.search-box .search-field&#39;).val().length==0){        $(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);       e.preventDefault();     }   }); }); </script>

Catatan:
- Jika plugin jQuery sudah ada, hapus garis merah.
- Untuk mengubah jumlah posting, ubah nilai 4 pada :
postsNumber : 4
- Untuk menambahkan thumbnail yang berbeda ketika pos tidak memiliki gambar, ganti url pada:
noThumbnail : &#39;http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png&#39; 
Langkah 4. Hati-hati tambahkan kode HTML untuk memastikan bahwa menu drop down dengan gambar akan berfungsi sesuai desain. Hanya ada tiga jenis URL yang diterima oleh Menu AJAX dan mereka harus digunakan dengan tepat.

Label URL: http://yourblogurlblogspot.com/search/label/LABELNAME
Search Query: http://yourblogurl.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Query: http://yourblogurl.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Di antara tiga URL, Permintaan Pencarian harus URL dikodekan menggunakan alat tertentu.

Langkah 5. Tambahkan HTML dibawah ini tepat diats kode <div class='main-outer'>
<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>    
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul></li>
<li><a href='http://ADDURLHERE.com'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>


Langkah 6. Klik pada Simpan template agar semua perubahan diterapkan.

Jika Anda tidak dapat menemukan garis dari langkah 5, akses tab Tata Letak , klik Tambah Gadget , lalu pilih HTML / JavaScript Gadget . Salin kode HTML dan tempelkan di dalam kotak ... lalu tekan tombol Simpan .

Demo Source : https://helplogger.blogspot.co.id/2015/07/blogger-mega-menu-with-images-or-thumbnails.html
Cara Membuat Comment Author Berbeda Warna ( Author Highlight )

Cara Membuat Comment Author Berbeda Warna ( Author Highlight )

Tampilan Komentar Owner atau pemilik blog berbeda ini sudah menjadi pernak-pernik blog yang popular karena dengan trik ini pembaca komentar bisa membedakan author dengan user di komentar artikel.

  1. Langkah 1 : Silahkan Login dan Back Up template Anda.
  2. Langkah 2 : Beri tanda centang pada kotak di samping tulisan Expand Template Widget kemudian cari kode ]]></b:skin> .
  3. Langkah 3 : Copy kode di bawah ini di atas kode ]]></b:skin>
    .comment-body-author {
            border: 1px solid #333;
            background: #181816;
            margin: 10px 10px 10px 15px;
            padding: 5px;
            }
  4. Langkah 4 : Silahkan Anda cari kode yang di bawah ini
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>
  5. Langkah 5 : Tambahkan kode dibawah ini berikut di atas kode yang telah Anda temukan pada Langkah 4
    <b:if cond='data:comment.author == data:post.author'>
    <dd class='comment-body-author'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>
  6. Langkah 6 : Tambahkan kode </b:if> di bawah kode yang Anda temukan pada Langkah 4
  7. Langkah 7 : Copy kode di bawah ini di atas kode ]]></b:skin>
    <b:if cond='data:comment.author == data:post.author'>
    <dd class='comment-body-author'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>
    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>
    </b:if>

    Keterangan :
    Kode yang berwarna kuning merukapakn kode yang saudara cari sesuai Langkah 4 sedangkan kode yang berwarna hijau adalah kode yang baru anda tambahkan.
  8. Langkah terakhir silahkan Save Template.
Untuk melihat hasilnya silahkan kunjungi Live Demo yang disediakan oleh Style Blogger Template. Live demo tersebut dibuat sesuai dengan tutorial : Cara Membuat Comment Author Berbeda Warna ( Author Highlight ) .
Referensi Artikel :
  1. Add different style for blog author / admin comments.
    Link : http://www.blogger-help.com/2009/03/add-different-style-for-blog-author.html
  2. Cara Membuat Komentar Admin Berbeda Warna.
    Link : http://www.imtikhan.tk/2010/10/cara-membuat-komentar-admin-berbeda.html
Home

Edit Blogger