Widget Random Post Fast Loading Dan Valid HTML5

Widget Random Post Fast Loading Dan Valid HTML5
Tampilan Widget Random Post Fast Loading

Widget Random Post merupakan salah satu fitur penting dalam meningkatkan pageview pada sebuah blog. Widget tersebut, berguna untuk menampilkan artikel secara acak. Sehingga, artikel lama yang belum terpublish secara maksimal berpotensi dibuka kembali oleh visitor.

Namun, kebanyakan blogger sering berpikir dua kali untuk memasang widget random post tersebut. Karena dinilai akan menambah beban loading blog.

Memang benar, secara standar widget random post cukup berat untuk dibuka pada peramban. Karena, sistem kerjanya, memanggil atau membaca feed posting secara keseluruhan setiap konten yang ada dalam blog.

Artinya, widget random post dapat dikatakan sangat buruk dalam hal performa. Kerja mereka sangat lambat dan membuang-buang tenaga, karena mereka bekerja dengan cara memanggil feed posting berukuran sangat besar! Kemudian mereka hanya akan menampilkannya sebagian saja secara acak.

<script src=’/feeds/posts/default?alt=json-in-script&max-results=99999&callback=randomPosts’></script>

Pada teks yang diblok merah merupakan feed yang dipanggil 99999 artikel, walaupun artikel yang akan ditampilkan cuma beberapa saja. Secara logika, ketika Anda membuka halaman tunggal dimana terdapat widget random post di dalamnya, pada saat yang bersamaan Anda juga sebenarnya sedang membuka semua posting yang telah Anda terbitkan dalam satu waktu. Mengapa? Karena parameter max-results pada feed menunjukkan angka 99999 yang artinya bahwa semua feed posting akan “diusahakan” untuk dipanggil (diusahakan, karena jumlah posting yang kita terbitkan tidak mungkin mencapai angka sebesar itu).

Jelas hal ini menjadi beban yang teramat berat bagi sebuah blog. Ya.. atau Iya.. kawan?

Akan tetapi, jangan terlalu ‘galau’ kawan.. dari hasil blogwalking saya ke blog Taufik Nurrohman salah satu blogger jagoan Indonesia, ada tips sederhana untuk membuat Widget Random Post Cepat, Ringan/Fast Loading Dan Valid HTML5.

Tambahkan widget HTML pada tata letak :

<div id=’random-post-container’>Memuat…</div>
<script>
//<![CDATA[
// Feed configuration
var homePage = ‘http://nama_blog.blogspot.com‘,
    maxResults = 7,
    containerId = ‘random-post-container’;
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max – min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (–i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t – maxResults));
    // console.log(‘Get the post feed start from ‘ + startIndex + ‘ until ‘ + (startIndex + maxResults));
    document.write(‘<scr’ + ‘ipt src=”‘ + homePage + ‘/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=’ + startIndex + ‘&max-results=’ + maxResults + ‘&callback=randomPosts”></scr’ + ‘ipt>’);
}
// Widget’s main function
function randomPosts(json) {
    var link, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = “<ul>”;
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == “alternate”) ? entry[i].link[j].href : ‘#’;
        }
        skeleton += ‘<li><a href=”‘ + link + ‘”>’ + entry[i].title.$t + ‘</a></li>’;
    }
    ct.innerHTML = skeleton + ‘</ul>’;
}
document.write(‘<scr’ + ‘ipt src=”‘ + homePage + ‘/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex”></scr’ + ‘ipt>’);
//]]>
</script>

Selanjutnya :

  • Ganti dengan url blog sobat http://nama_blog.blogspot.com
  • Artikel yang akan ditampilkan 7

Untuk demonya click demo random post

Cara menampilkan widget hanya pada halaman awal

Artikel bagus ini, saya dapat dari BLOG DARI WARIM. Tips editing template tentang Cara menampilkan widget hanya pada halaman awal. Hal ini dilakukan, agar setiap laman posting yang tampil memiliki koding yang lebih ringan dari pada sebelumnya.

Artinya, beberapa widget hanya tampil pada halaman homepage saja. Sedangkan pada halaman posting, hanya widget penting yang berpontensi meningkatkan trafik atau promo saja.

Sebagai contoh, pada blog ini, dua widget, yakni; histats dan submitstart hanya tampil pada homepage dan tidak tampil pada halaman posting.

Untuk merubahnya silakan ikuti langkah-kangkah sederhana sebagai berikut :
1. Sobat log in dulu di blogger
2. Pilih rancangan
3. Pilih edit HTML
4. Pilih Wigdet yang akan sobat rubah, sebagai contoh saya rubah di recent comment.
5. Sisipkan kode yang berwarna merah seperti kode di bawah ini.

<b:widget id=’HTML3′ locked=’false’ title=’ recent comment’ type=’HTML’> <b:includable id=’main’> <b:if cond=’data:blog.url == data:blog.homepageUrl’> <!– only display title if it’s non-empty –> <b:if cond=’data:title != “”‘> <h2 class=’title’><data:title/> </h2> </b:if> <div class=’widget-content’> <data:content/> </div> <b:include name=’quickedit’/> </b:if> </b:includable> </b:widget>

Kemudian save template, sekarang widget recent comment hanya akan muncul pada halaman awal atau homepage, sedangkan jika kita masuk ke salah satu halam posting, widget tersebut tidak akan muncul. 

Sebagai tips, bagi blogger yang blognya Valid HTML5, maka <b:include name=’quickedit’/> biasanya tidak ada. Dan atau jika ingin Valid HTML5 maka kode tersebut diatas dapat anda hapus.

Demikian postingan tentang Cara menampilkan widget hanya pada halaman awal ini. Semoga bermanfaat dan terimakasih atas kunjungannya.    

Cara Membuat Widget Google+ Valid HTML5

Cara Membuat Widget Google+ Valid HTML5
Valid HTML5

Tidak semua widget blogger Valid HTML5. Salah satunya seperti widget penting Google plus. Padahal, bagi kebanyakan blogger saat ini, validasi THML template blog sudah mulai dianggap penting. Untuk itu, maka perlu dilakukan modifikasi template agar Valid HTML5.

Bagi anda yang mau blognya Valid HTML5 tapi widget Google+ yang membuat blog anda tidak valid, nah solusinya dapat dilakukan melalui langkah-langkah sederhana berikut ini :

  •     Pertama, login ke akun blogger
  •     Klik “Tata Letak”
  •     Kemudian “Tambah Gadget”
  •     Pilih “HTML / Javascript”
  •     Lalu copy javascript dibawah ini :

<!– Place this tag where you want the +1 button to render. –> <div class=”g-plusone” data-size=”medium”></div> <!– Place this tag after the last +1 button tag. –> <script type=”text/javascript”>   window.___gcfg = {lang: ‘id’};   (function() {     var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;     po.src = ‘https://apis.google.com/js/plusone.js’;     var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);   })(); </script>

  •     Kemudian letakan/paste kode diatas kedalam kotak isian “HTML/Javascript”.
  •     Lalu simpan.

Demikian langkah sederhana yang dapat dilakukan agar template blog Valid HTML5

Cara Memasang Widget Social Media Sharing Metro Style

Cara Memasang Widget Social Media Sharing dengan Metro Style di Bawah Posting Blog : Tips ini saya dapat dari salah satu blog yang saya follow yakni Blogger Plus | Informasi seputar blog, website, internet, komputer, dan software gratis. Menurut saya, ini info keren dan penting yang layak untuk dibagikan.

Cara Memasang Widget Social Media Sharing Metro Style

Kenapa saya katakan keren dan penting? Pertama, tidak dapat dipungkiri bahwa media jejaring sosial sangat membantu para blogger dalam mempromosikan blognya. Oleh karena itu, hampir semua blogger memasang widget jejaring sosial pada blog mereka. Bahkan Blogger secara default sudah menyediakan fasilitas tersebut untuk semua blog (blogspot) secara otomatis. Itu menandakan bahwa widget tersebut penting.. ya kan…

Namun tampilan standar widget sosial media bawaan blogger terlihat sangat sederhan. Sedangkan style widget Social Media Sharing Metro Style sangat berbeda.

Untuk membuat tampilan widget social media agar terlihat lebih menarik perlu sedikit modifikasi pada kode CSS dan HTML blog. Salah satu yang saat ini sedang populer adalah Membuat Widget Social Media dengan Metro Style. Ini alasan kenapa saya bilang keren..

Metro Style merupakan model interface sistem operasi komputer yang pertama kali diperkenalkan Microsoft sejak Windows 8. Ciri khasnya berbentuk kotak dengan ukuran besar dan warna-warni yang mencolok. Widget social media memang perlu diberi warna yang mencolok agar para pengunjung blog lebih mudah menemukannya. Jika lebih mudah ditemukan maka kemungkinan untuk berbagi posting ke social media akan semakin besar.

Cara Memasang Widget Social Media Sharing Metro Style
Ini tampilan Widget Social Media Sharing Metro Style

Berikut adalah cara Memasang Widget Social Media Sharing dengan Metro Style di bawah posting blog.

Pastikan Anda sudah login ke Blogger. Pada halaman Dashboard blogspot, pilih menu Template kemudian Edit HTML. Letakkan kode berikut di atas ]]></b:skin>

 .promote_post_bg {
height: 70px;
background: #469ebe 0 -7px no-repeat;
width: 620px;
margin-left: 0;
}

.authorimg img {
float: left;
height: 70px;
width: 70px;
margin-left: 0;
}

.authorname {
text-shadow: none;
background: #CF910B;
float: left;
text-align: center;
font-weight: bold;
font-size: 16px;
font-family: ‘cambria’,serif;
margin-left: 0;
padding-top: 25px;
width: 120px;
height: 45px;
}

.authorname a {
color: #fff;
}

.authorname a:hover {
color: #5774b6;
}

.promote_twitter {
width: 110px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 30px;
text-align: center;
background: #3BAAE1;
}

.promote_facebook {
width: 150px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 0;
text-align: center;
background: #4861A3;
}

.promote_google {
width: 120px;
height: 40px;
float: left;
margin-left: 0;
padding: 30px 0 0 20px;
text-align: center;
background: #D71D1E;
}

Kemudian cari kode <data:post.body/> dan letakan kode html berikut ini di bawah <data:post.body/>

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div class=’promote_post_bg’>
<div class=’authorimg’>
<img src=’https://lh6.googleusercontent.com/-bPnA0pzPKrk/AAAAAAAAAAI/AAAAAAAAA08/NVnil4cN7T0/s120-c/photo.jpg‘/>
</div>

<div class=’authorname’>
<a href=’https://plus.google.com/113357786970397590676‘>DEDI ARIKO</a>
</div>

<div class=’promote_twitter’>
<a class=’twitter-share-button’ data-via=’MHT_MMT’ href=’https://twitter.com/share’>Tweet</a>
<script>
!
function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = &quot;//platform.twitter.com/widgets.js&quot;;
fjs.parentNode.insertBefore(js, fjs);
}
}(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
</script>
 </div>

<div class=’promote_facebook’>
<fb:like action=’like’ colorscheme=’light’ expr:href=’data:post.canonicalUrl’ font=’verdana’ layout=’button_count’ send=’false’ show_faces=’false’/>
<div>

<b:if cond=’data:post.isFirstPost’>
<script>
(function (d) {
var js, id = &#39;facebook-jssdk&#39;;
if (d.getElementById(id)) {
return;
}
js = d.createElement(&#39;script&#39;);
js.id = id;
js.async = true;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));
</script>
</b:if>
</div>
</div>

<div class=’promote_google’>
<g:plusone annotation=’bubble’ size=’medium’/>
<script type=’text/javascript’>
(function () {
var po = document.createElement(&#39;script&#39;);
po.type = &#39;text/javascript&#39;;
po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
</b:if>

Keterangan:
Ukuran margin, padding, height, dan weight bisa diatur agar sesuai dengan ukuran dan tampilan blog Anda. Kode warna background juga bisa diubah sesuai selera Anda.

Kode yang berwarna merah sebaiknya diganti dengan alamat url gambar/foto yang lain. Yang berwarna Orange adalah url Google+ Anda dan yang Biru adalah nama profil Anda.

Itulah cara memasang widget social media sharing dengan metro style di bawah posting blog. Untuk memasangnya memang perlu ketelitian dan eksperimen agar hasilnya sesuai dengan yang diharapkan. Selamat mencoba!

Cara membuat popular post with thumbnail Valid HTML5

Cara membuat popular post with thumbnail Valid HTML5
Popular post with thumbnail Valid HTML5

Popular post with thumbnail Valid HTML5 : Dewasa ini, blogger templates secara bertahap sudah mulai melakukan validasi HTML5. Baik dengan melakukan editing/modifikasi template hingga mengganti template yang Valid HTML5. Namun sayang, widget standar blogger ternyata belum mendukung hal tersebut.

Seperti diantaranya, widget follower dan Widget Popular Post. Untuk itu, kita perlu melakukan editing/modifikasi agar widget yang cukup penting tersebut tidak menodai ke-valid-an HTML5 template blog kita.

Click Cara Membuat Widget Follower Valid HTML5 untuk memodifikasi widget follower. Karena sudah saya posting sebelumnya.

Sedangkan untuk Widget Popular Post Valid HTML5 di Blog, berikut caranya. Juga sama seperti sebelumnya. Tidak susah dan hanya beberapa tahap editing HTML.

  • Login Blog terlebih dahulu
  • Kemudian klik Template >> Edit HTML
  • Pada halaman editor template blog, klik tombol Jump to widget/Lompat ke widget dan pilih widget popular posts seperti gambar diatas.

Cari kode HTML seperti ini :

<b:widget id=’PopularPosts1′ locked=’false’ title=’Popular Posts’ type=’PopularPosts’>
    <b:includable id=’main’>
  <b:if cond=’data:title’><h3><data:title/></h3></b:if>
  <div class=’widget-content popular-posts’>
    <ul>
      <b:loop values=’data:posts’ var=’post’>
      <li>
        <b:if cond=’data:showThumbnails == &quot;false&quot;’>
          <b:if cond=’data:showSnippets == &quot;false&quot;’>
            <!– (1) No snippet/thumbnail –>
            <a expr:href=’data:post.href’><data:post.title/></a>
          <b:else/>
            <!– (2) Show only snippets –>
            <div class=’item-title’><a expr:href=’data:post.href’><data:post.title/></a></div>
            <div class=’item-snippet’><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond=’data:showSnippets == &quot;false&quot;’>
            <!– (3) Show only thumbnails –>
            <div class=’item-thumbnail-only’>
              <b:if cond=’data:post.thumbnail’>
                <div class=’item-thumbnail’>
                  <a expr:href=’data:post.href’ target=’_blank’>
                    <img alt=” border=’0′ expr:height=’data:thumbnailSize’ expr:src=’data:post.thumbnail’ expr:width=’data:thumbnailSize’/>
                  </a>
                </div>
              </b:if>
              <div class=’item-title’><a expr:href=’data:post.href’><data:post.title/></a></div>
            </div>
            <div style=’clear: both;’/>
          <b:else/>
            <!– (4) Show snippets and thumbnails –>
            <div class=’item-content’>
              <b:if cond=’data:post.thumbnail’>
                <div class=’item-thumbnail’>
                  <a expr:href=’data:post.href’ target=’_blank’>
                    <img alt=” border=’0′ expr:height=’data:thumbnailSize’ expr:src=’data:post.thumbnail’ expr:width=’data:thumbnailSize’/>
                  </a>
                </div>
              </b:if>
              <div class=’item-title’><a expr:href=’data:post.href’><data:post.title/></a></div>
              <div class=’item-snippet’><data:post.snippet/></div>
            </div>
            <div style=’clear: both;’/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name=’quickedit’/>
  </div>
</b:includable>
  </b:widget>

Lalu ganti kode diatas dengan kode berikut ini:

<b:widget id=’PopularPosts1′ locked=’false’ title=’Popular News’ type=’PopularPosts’>
  <b:includable id=’main’>
  <b:if cond=’data:title’><h2><data:title/></h2></b:if>
  <div class=’widget-content popular-posts’>
    <ul>
      <b:loop values=’data:posts’ var=’post’>
      <li>
        <b:if cond=’data:showThumbnails == &quot;false&quot;’>
          <b:if cond=’data:showSnippets == &quot;false&quot;’>
            <!– (1) No snippet/thumbnail –>
            <a expr:href=’data:post.href’ expr:title=’data:post.title’><data:post.title/></a>
          <b:else/>
            <!– (2) Show only snippets –>
            <div class=’item-title’><a expr:href=’data:post.href’ expr:title=’data:post.title’><data:post.title/></a></div>
            <div class=’item-snippet’><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond=’data:showSnippets == &quot;false&quot;’>
            <!– (3) Show only thumbnails –>
            <div class=’item-thumbnail-only’>
              <b:if cond=’data:post.thumbnail’>
                <div class=’item-thumbnail’>
                  <a expr:href=’data:post.href’ target=’_blank’>
                    <img expr:alt=’data:post.title’ expr:height=’data:thumbnailSize’ expr:src=’data:post.thumbnail’ expr:title=’data:post.title’ expr:width=’data:thumbnailSize’/>
                  </a>
                </div>
              </b:if>
              <div class=’item-title’><a expr:href=’data:post.href’ expr:title=’data:post.title’><data:post.title/></a></div>
            </div>
            <div style=’clear: both;’/>
          <b:else/>
            <!– (4) Show snippets and thumbnails –>
            <div class=’item-content’>
              <b:if cond=’data:post.thumbnail’>
                <div class=’item-thumbnail’>
                  <a expr:href=’data:post.href’ target=’_blank’>
                    <img expr:alt=’data:post.title’ expr:height=’data:thumbnailSize’ expr:src=’data:post.thumbnail’ expr:title=’data:post.title’ expr:width=’data:thumbnailSize’/>
                  </a>
                </div>
              </b:if>
              <div class=’item-title’><a expr:href=’data:post.href’ expr:title=’data:post.title’><data:post.title/></a></div>
              <div class=’item-snippet’><data:post.snippet/></div>
            </div>
            <div style=’clear: both;’/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>
</b:includable>
</b:widget>

Lalu save template dan selesai. Terimakasih atas kunjungannya dan semoga bermanfaat…

Cara memasang menu dropdown keren di blog

Pada beberapa templates blog standar, sebagian tidak dilengkapi dengan menu navigasi. Seperti Menu Dropdown/Drop Down Menu. Padahal, fitur tersebut cukup menujang Page View pada blog. Artinya bagian dari langkah SEO.

Secara spesifik, menu dropdown adalah fitur yang jika kita mengarahkan kursor ke menu tersebut maka akan muncul submenu lainnya yang memanjang kebawah. Untuk contohnya bisa dilihat,  seperti gambar menu drop down pada blog; all about blogspot template milik saya ini.

cara memasang widget menu drop down di blog
Menu dropdown keren di blog

Style atau gaya menu dropdown tersebut, bisa dipasang sesuai dengan minat kita masing-masing. Untuk  Cara Membuat Menu Dropdown Di Atas Header/Judul Blog secara sederhana click disini. Sedangkan untuk memasang menu navigasi keren pada blog, anda bisa mengikuti langkah-langkah berikut.

Langkah-langkah memasang menu drop down keren di blog :

1. Login ke akun blogger
2. Klik Template 
3. Klik Edit HTML    
4. Cari kode berikut : 
]]></b:skin>

5. Jika kode tersebut sudah ditemukan, silahkan copy kode CSS dibawah ini kemudian letakan tepat diatas kode ]]></b:skin>  :

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 35px;
border-radius: 0px 0px 0 0;
-moz-border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
background: #141414;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#32323a’, EndColorStr=’#141414′, GradientType=0);
border-bottom: 2px solid #ff4500;
}
#cssmenu:after,
#cssmenu ul:after {
content: ”;
display: block;
clear: both;
}
#cssmenu a {
background: #141414;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#32323a’, EndColorStr=’#141414′, GradientType=0);
color: #ffffff;
display: inline-block;
font-family: Domine, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 35px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li:hover:after {
content: ”;
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ff4500;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 0px 0 0 0;
-moz-border-radius: 0px 0 0 0;
-webkit-border-radius: 0px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
border-radius: 0 0px 0 0;
-moz-border-radius: 0 0px 0 0;
-webkit-border-radius: 0 0px 0 0;
}
#cssmenu > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#26262c’, EndColorStr=’#070707′, GradientType=0);
}
#cssmenu > ul > li:hover > a {
background: #070707;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=’#26262c’, EndColorStr=’#070707′, GradientType=0);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #ff4500;
border-bottom: 1px solid #aad06d;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
background: #ff0000;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #ff0000;
border-bottom: 1px solid #97b36b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #345105;
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px double #696969;font-weight:normal}
}
 

6. Kemudian anda cari kode berikut :

 </header>

7. Jika kode tersebut sudah ditemukan, kemudian copy kode dibawah ini, lalu letakan tepat dibawah kode </header> :

<div id=’cssmenu’>
<ul>
<li class=’active ‘><a href=’/’><span>Home</span></a></li>
<li class=’has-sub ‘><a href=’#‘><span>SEO Artilce</span></a>
<ul>
<li><a href=’http://redaksiexpo2012.blogspot.com/search/label/SEO%20TIps‘><span>SEO Tips</span></a></li>
<li><a href=’http://redaksiexpo2012.blogspot.com/search/label/SEOquake‘><span>SEOquake</span></a></li>
</ul>
</li>
<li class=’has-sub ‘><a href=’#‘><span>Blog Artilce</span></a>
<ul>
<li><a href=’http://redaksiexpo2012.blogspot.com/search/label/widget‘><span>Widget Blog</span></a></li>
<li><a href=’http://redaksiexpo2012.blogspot.com/search/label/Blooger%20News‘><span>Blogger News</span></a></li>
</ul>
</li>
<li><a href=’http://redaksiexpo2012.blogspot.com/p/site-map.html‘><span>Sitemap</span></a></li>
</ul>
</div>

Keterangan :

    Ganti kode yang berwarna ORANGE dengan       :  Alamat / URL Tujuan
    Ganti kode yang berwarna MERAH dengan  :  nama menu yang anda inginkan

8. Kemudian Save Template. Selesai

Demikian cara memasang menu drop down keren di blog. Semoga bermanfaat dan terimakasih atas kunjungannya.