468x60 Ads

This is an example of a HTML caption with a link.

Sembunyikan Isi Artikel di Beranda

Unknown | 09:22 | , ,
Sebelumnya saya sudah berbagi dengan kawan Cara Menyembunyikan Postingan di Home Page sedangkan yang sekarang saya akan mencoba berbagi dengan kawan Cara Menyembunyikan Isi dari Artikel / Postingan pada Home Page [Beranda] :q; yang saya maksud disini pada Home Page hanya akan kelihatan Judulnya saja, sedangkan Isi sampai Readmore [Selengkapnya] akan kelihatan setelah mouse didekatkan :q; perhatikan gambar berikut 

Untuk Demo kawan bisa lihat

Cara membuatnya :

  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML
  • Copas Kode berikut tepat diatasnya
.post .sembunyi {display:none;}
.post:hover .sembunyi {display:inline;}
  • Selanjutnya cari <data:post.body/>
yang selengkapnya kurang lebih seperti berikut
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'>
<data:post.jumpText/></a>
</div></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Teks yang saya beri warna merah adalah Kode Readmore [selengkapnya]
  • Hapus atau ganti dengan kode berikut 
<div class='sembunyi'><b:if cond='data:blog.pageType != &quot;item&quot;'><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> </div> </b:if></b:if></div><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> <div style='clear: both;'/> <!-- clear for photos floats -->    </div>
  • Kalau Template kawan sudah memakai Readmore Otomatis, yang kodenya kurang lebih seperti berikut :
<b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span class='rmlink' style='float:right'><a expr:href='data:post.url'>READ MORE</a></span></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><div style='clear: both;'/> <!-- clear for photos floats -->    </div>
  • Hapus atau ganti dengan kode berikut :
<div class='sembunyi'><b:if cond='data:blog.pageType != &quot;item&quot;'><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class='rmlink' style='float:right'><a expr:href='data:post.url'>READ MORE</a></span></b:if></div><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> <div style='clear: both;'/> <!-- clear for photos floats --></div>    
  • Simpan Template kawan 
Seandainya kawan ingin biar Readmore kelihatan, kawan cukup memindahkan </div> teks yang saya beri warna merah keatas kode Readmore; begitu juga sebaliknya biar Readmore saja yang tidak kelihatan maka yang perlu kawan pindahkan hanya <div class='sembunyi'> taruh diatas kode Readmore :r;

READ MORE

Perpendek Link.......... dibayar ?!

Unknown | 00:59 | , ,
P.pw - Shorten urls and earn money!
Kawan masih ingat postingan saya Ngeblog.... mau cari apa ?! yang isinya tentang cara mendapatkan Ceperan atau Penghasilan Tambahan pada Blog, :z; itulah yang akan saya bahas sekarang dengan Judul Perpendek Link....... dibayar ?! :q;

Sebenarnya diluaran sana banyak web/site yang menyediakan layanan seperti ini cuma yang saya bahas sekarang khusus untuk P.pw kenapa ?! :r; karena saya bergabung dan mencoba cara ini yang khususnya sampai saat ini tersimpan untuk Template yang sudah saya bagikan :x;

Program yang ditawarkan disamping Memperpendek Link juga ada program Referralsnya yang dengan kata lain kita bisa mengajak teman untuk bergabung yang tentunya dibayar juga, bagaimana seruuu bukan :y; kelebihan lainnya ini merupakan pengalaman saya pribadi kita bisa mendownload file sendiri, dihitung dan dibayar juga nantinya :q; selanjutnya kalau kawan berminat dan ikut bergabung dengan saya di P.pw,  saya bisa menrekomendasikan  »  selanjutnya pilih dan isikan Data kawan sesuai Form yang tersedia untuk membuat Account, kalau semuanya sudah terisi dengan benar, nanti kawan akan mendapatkan Email Konfirmasi 
contoh : jumlah penghasilan saya

System pembayaran : Penghasilan kawan akan dibayar setiap bulannya setelah minimal berjumlah $5. untuk Paypal dan $10 untuk Payoneer, sedangkan untuk Paypal bisa menyusul pembuatannya.

Cara Kerja : setiap pengunjung yang meng-Klik Link kita yang sudah dipendekan itu akan menunggu 5 detik untuk dialihkan ke P.pw atau selengkapnya silahkan kawan baca disini 
cuma satu pesan saya sesuai aturan mainnya, kawan jangan meminta, menyuruh untuk meng-Klik Link tersebut dengan menjanjikan Hadiah, Bonus atau sejenisnya

P.pw - Shorten urls and earn money!

Selamat Bergabung !!!

READ MORE

Daftar Isi berdasarkan Katagori Pilihan

Unknown | 16:00 | , , ,
Daftar Isi sekarang ini diciptakan oleh Master Duy Pham, Blogger tetangga :q; kita yang hampir mirip modelnya seperti yang diciptakan oleh Master Taufik Nurrohman :z; yang masing-masing mempunyai kelebihan dan kekurangannya seperti Katagori [Label] bisa dipilih untuk ditampilkan maupun disembunyikan begitu juga dengan jumlah Judul yang ditampilkan dengan kata lain ada selanjutnya / sebelumnya [Next - Prev] perhatikan screenshotnya :


Langsung ke Cara membuatnya silahkan kawan mampir karena toolnya sudah tersedia, kawan cukup memasukan datanya saja 

screenshot
  • Masukan url Blog kawan pada Địa chỉ blog 
  • Tentukan Judul yang ingin ditampilkan pada  Số lượng bài hiển thị trên 1 trang 
  • Ketik Katagori yang tak ingin kawan tampilkan pisahkan dengan Koma [,] pada Tên nhãn không cho hiển thị, phân cách bởi dấu phẩy (,) 
  • Selanjutnya pilih Get code 
  • Copas scriptnya pada HTML 
  • Kawan bisa edit kembali script tersebut supaya sesuai selera 
<div style='width:96%;padding:5px;margin:0;border:1px solid #999;background:#ccc;'><style type='text/css'>
#show-cat{float:left;margin-right:5px;width:95px;height:310px;overflow-x:hidden;overflow-y:auto;line-height:.8em}#show-cat ul{margin:0;padding:0;border-top:1px solid #333;}#show-cat ul li{list-style-type:none;margin:0;border:1px solid #333;padding:0}#show-cat ul li a{display:block;padding:10px}#show-cat ul li a,#navi-cat a{background:#fff;color:#00F;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#999;color:#fff}#show-post{float:left;width:77%;font-size:12px;line-height:1.8em;}#show-post ul li{list-style-type:none}#navi-cat{padding:20px 0}#navi-cat a{margin-right:5px;border:1px solid #333;}#navi-cat a,#navi-cat span{padding:5px 10px;}#navi-cat span{float:right}</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://blogbego-creation.blogspot.com';cat_numb=10;cat_pre='Prev';cat_nex='Next';cat_remove=['Admin','software','blog','Blogger','link'];
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#464546!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){for(var j=0;j<cat_remove.length;j++){if(cat[i].term==cat_remove[j]){cat.splice(i,1)}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>
</div>

Teks yang saya beri warna Biru adalah kode tambahan
Teks yang berwarna Merah adalah kode setelah saya Edit 
Hasilnya seperti screenshot pertama
Selamat Mencoba


READ MORE

Menu Drop Down Dengan Efek Unfold

Unknown | 08:42 | , ,
Malam para pelanggan Tempat Blogging, Sudah lama saya tidak update dikarnakan saya sudah kelas 3 SMK, jadi saya sibuk belajar untuk menyambut unian TA ( Tugas Akhir).
Ok langsung saja ke topik tidak usa curhat panjang lebar, kali ini saya akan update MENU DROP DOWN DENGAN EFEK UNFOLD yang saya dapatkan dari TAUFIK KARIM, langsung lihat kode di bawah jika tertarik untuk memakai menu ini.




Kode CSS 

.navigation {float:right;border-top:1px solid #444;
  list-style: none;
  padding: 0;
  width: 200px; 
  height: 35px; 
  margin: 10px;
  background: #333;
  position: relative; 
  z-index: 100;
}

.navigation, .navigation a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}

  .navigation:hover, .navigation:hover a.main {border-bottom:1px solid #222;
  border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
}

  .navigation a.main {text-shadow:0 1px 1px #111;
  display: block; 
  height: 35px;
  font: bold 20px/40px arial, sans-serif; 
  text-align: center; 
  text-decoration: none; 
  color: #FFF;  
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  position: relative;
  z-index: 100;
}

.navigation:hover a.main {
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.04);
}

.navigation li { 
  width: 200px; 
  height: 35px;
  background: #333;
  font: normal 13px/40px arial, sans-serif !important; 
  color: #2C6891;
  text-align: center;
  margin: 0;
  -webkit-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  -o-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
  -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
  -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}

.navigation li:nth-child(even), .navigation li:nth-child(odd) { background: #333; 
    border-top:1px solid #444;border-bottom:1px solid #222;
}


.navigation li.n1 { 
  -webkit-transition: 0.2s linear 0.8s;
  -o-transition: 0.2s linear 0.8s;
  transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
  -webkit-transition: 0.2s linear 0.6s;
  -o-transition: 0.2s linear 0.6s;
  transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
  -webkit-transition: 0.2s linear 0.4s;
  -o-transition: 0.2s linear 0.4s;
  transition: 0.2s linear 0.4s;
}
.navigation li.n4 { 
  -webkit-transition:0.2s linear 0.2s;
  -o-transition:0.2s linear 0.2s;
  transition:0.2s linear 0.2s;
}
.navigation li.n5 {
  border-radius: 0px 0px 4px 4px;
  -webkit-transition: 0.2s linear 0s;
  -o-transition: 0.2s linear 0s;
  transition: 0.2s linear 0s;
}

.navigation:hover li {
  -webkit-transform: perspective(350px) rotateX(0deg);
  -o-transform: perspective(350px) rotateX(0deg);
  transform: perspective(350px) rotateX(0deg);
  -webkit-transition:0.2s linear 0s;
  -o-transition:0.2s linear 0s;
  transition:0.2s linear 0s;
}
.navigation:hover .n2 {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.navigation:hover .n3 {
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.navigation:hover .n4 {
  transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.navigation:hover .n5 {
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

Kode HTML

<ul class='navigation'>
<a class='main' href='#url'>Navigation</a>
<li class='n1'><a href='#'>item #1</a></li>
<li class='n2'><a href='#'>item #2</a></li>
<li class='n3'><a href='#'>item #3</a></li>
<li class='n4'><a href='#'>item #4</a></li>
<li class='n5'><a href='#'>item #5</a></li>
</ul>


Itulah cara bikin atau pasang menu navigasi dropdown dengan efek unfold semoga bermanfaat :)

Source : http://topsmedia.blogspot.com/2013/09/menu-dropdown-dengan-efek-unfold.html
READ MORE

Animasi Gadget Social Bookmark

Unknown | 16:00 | , , ,
Kali ini saya tetap berbagi tentang Gadget Social BookMarking dengan model Animasi :q; yang saya dapatkan pada tempat yang sama, terus terang sekarang ini saya lagi males membuat postingan dikarenakan saya fokus pada merancang Template, :z; sedangkan postingan harus tetap ditambah untuk mengecilkan posisi yang tempo hari membengkak hampir 200% [maaf nggak nyambung] :r; 

screenshot


Cara Membuatnya :

  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML
  • Copas Script berikut diatas atau sebelum </body>

<div class='shr_ss shr_publisher'/>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {&quot;shr_ss&quot;:{&quot;src&quot;:&quot;//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,313,38,201,88,74&quot;,&quot;apikey&quot;:&quot;b87f5899d80a5edce8b5e55f58542ef0f&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;bitly&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;tip_bg_color&quot;:&quot;black&quot;,&quot;tip_text_color&quot;:&quot;white&quot;,&quot;viewport&quot;:true,&quot;twitter_template&quot;:&quot;${title} - ${short_link} via @Shareaholic&quot;}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-ss.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
<!-- End Shareaholic Sassy Bookmarks script -->
  • Simpan Template kawan


Refrensi : Paul Crowe
READ MORE

Slide Social Bookmarking Gaya Telor

Unknown | 16:00 | , , ,
Kali ini saya akan berbagi dengan kawan Cara Membuat Slide Social Bookmarking Gaya Telor :r; yang saya dapatkan saat jalan-jalan ke Webnya Master Paul Crowe yang tampilannya tetap ditempat [fixed] dan saat mouse didekatkan maka akan terbuka untuk melihat isinya
screenshot

Cara Membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML
  • Copas Script berikut dibawah ]]></b:skin> atau diatas </head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &#39;bea50586-2b9f-448d-947a-01385f28e305&#39;, onhover:false});</script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>


  • Selanjutnya Copas Script berikut diatas </body>

<div style='position: fixed; bottom: 2%; right: 2%;'>
<div class='shareEgg' id='shareThisOrnament'/>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisOrnament&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;pinterest&#39;,&#39;stumbleupon&#39;,&#39;linkedin&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;holiday&#39;});
</script>
</div> 
Teks yang saya beri warna merah bisa kawan ganti sesuai keinginan untuk tampilan

  • Simpan Template kawan

READ MORE

Blogger Template Kolom Simpel Gratis

Unknown | 16:00 | ,
Template yang sekarang ini terispirasi oleh Master Choen dengan judul Minisimpel-templateblogger dan Douglas Bowman dengan template Minimanya :q; yang semuanya sudah sangat lawas di Dunia Blogger, ini saya sampaikan untuk kawan ketahui sebelum ada yang bertanya nantinya, karena backgroundnya punya Douglas Bowman, sedangkan tampilan Beranda mirip kepunyaan Choen :z;




                       


Kalau kawan menyukainya, saya persilahkan karena saya bagikan secara Gratis, cuma pesan saya tolong jangan dihapus Link saya pada bagian Credit 

READ MORE

Cara Membuat Featured Slide

Unknown | 06:34 | , ,
Sebelumnya saya sudah berbagi Cara Membuat Slide dengan beberapa Mode Efek, untuk menambah pembendaharaan Slide di Blog :q; yang pada umumnya sekarang setiap Template [Blog] pasti ada Slide-nya walaupun itu sangat memberatkan loading. Seperti saya katakan di awal sekarang saya akan berbagi dengan kawan Cara Membuat Featured Slide 


Cara Membuatnya :

  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML
  • Copas Script berikut diatas ]]></b:skin>

<!--New Featured Slider From http://blogbego-creation.blogspot.com -->
.bbc-slider {background: none repeat scroll 0 0 #FFFFFF;height: 329px;margin-bottom: 0;margin-left: 0;margin-right: 0;overflow: hidden;padding: 0;position: relative;width: 850px;}
.bbc-slides-container {border:5px solid #999;}
.bbc-slides, .bbc-thumbnail, .bbc-prev-next, .bbc-nav {width: 630px; /*Set The Width Of Slider Here*/}
.bbc-slides, .bbc-thumbnail {height: 280px; /*Set The Height Of Images Here*/overflow: hidden;padding-top: 0;position: relative;}
.bbc-title {color: #FFFFFF;font: bold 18px Arial,Helvetica,Sans-serif;margin: 0;
padding: 0 0 2px;text-shadow: 0 1px 0 #000000;}
.bbc-title a, .bbc-title a:hover {color: #FFFFFF;text-decoration: none;}
.bbc-content {background: none repeat scroll 0 0 #111111;bottom: 0;left: 0;opacity: 0.7;overflow: hidden;padding: 10px 15px 5px;position: absolute;right: 0;}
.bbc-content p {color: #FFFFFF;line-height: 18px;margin: 0;padding: 0;text-shadow: 0 1px 0 #000000;}
.bbc-more, .bbc-more:hover {color: #FFFFFF;font-weight: bold;}
.bbc-nav {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi028GRcdG2Ote8g1OCIG7acJ3Gmitq1Jzi3ax5oMS74qqCZPXTuvY3GK9l-gsemekTx2dIzLI-cIyN9lAoIps2aT68rtYvy6DdhGdKrsTGoWWy8whKGlOlGzxeG3bMXjbGD8jzpssE0fZY/s1600/h2.png") repeat-x scroll 0 0 transparent;height: 12px;padding: 10px 0;text-align: center;}
.bbc-pager a {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDJoIfCWsPPvoYObvdPCLhw0prIf22KrC0QlOdURBOwBtKyUDn2_RH8Pb_VrLCxR_WrA3UbXQo_-PFkAStro94OP38NFjF2Ood0bl-EsjEJKw3kdr8JPrbCiQD7ToXO71_SxVmY4Ou-cnX/s1600/featured-pager.png");
background-position: 0 0;cursor: pointer;display: inline-block;float: none;height: 12px;line-height: 1;margin: 0 4px 0 0;opacity: 0.7;overflow: hidden;padding: 0;text-indent: -999px;width: 12px;}
.bbc-pager a:hover, .bbc-pager a.activeSlide {background-position: 0 -112px;opacity: 1;text-decoration: none;}
.bbc-prev-next-wrap {position: relative;z-index: 200;}
.bbc-prev-next {bottom: 130px;height: 37px;left: 0;position: absolute;right: 0;}
.bbc-prev {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4nosSixtJV6YgEbgtl6iaAgHheGGeMglGOZVTaIL6tfwU-MuzPX2eoY0qYkJLjUDijyN2-jy9wBXSq0bQ5oQ89Leaa4j3DuUQiQsicm8D8cwGSymZkcT-WwRRLocx9is7Dw93fRnP9Kpl/s1600/featured-prev.png") no-repeat scroll left top transparent;float: left;height: 37px;margin-left: 5px;margin-top: -100px;
opacity: 0.6;width: 37px;}
.bbc-prev:hover {opacity: 0.8;}
.bbc-next {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg1hms52AqQ4e-TetYJWOOjEePCacoJvr0Vqh_W1UuFAQGQTHNvKsdaPjvNsGx2H47V9zXr0_T4wzthlRzLCspyv47tyyO-wrujbJ1JqAc952NJFV5kxGaqk75JNkw9xFuhaJnQka7kykO/s1600/featured-next.png") no-repeat scroll right top transparent;float: right;height: 37px;margin-right: 5px;margin-top: -100px;opacity: 0.6;width: 37px;}
.bbc-next:hover {opacity: 0.8;}
<!--New Featured Slider From http://blogbego-creation.blogspot.com -->

  • Teks yang saya beri warna merah untuk merubah ukuran Image Slide, silahkan disesuaikan 
  • Selanjutnya Copas Script berikut dibawah ]]></b:skin> atau diatas  </head>

<!--New Featured Slider From http://blogbego-creation.blogspot.com -->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(document).ready(function() {
jQuery('.bbc-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.bbc-next',
prev: '.bbc-prev',
pager: '.bbc-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
}
);
}
);
/* ]]> */
</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/slider-code-3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/slider-code-1.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/slider-code-2.js' type='text/javascript'/>
<!--New Featured Slider From http://blogbego-creation.blogspot.com -->

  • Simpan Template kawan
  • Selanjutnya pilih Tata Letak - Tambah Gadget 
  • Pilih {+] pada HTML / JavaScript 
  • Copas Kode berikut kedalamnya

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--New Featured Slider From http://blogbego-creation.blogspot.com -->
<div class='bbc-slider clearfix'>
<div class='bbc-slides-container clearfix'>
<div class='bbc-slides'>
<!-- Slide 1 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfSoDAXGLUAPhc3etWxmQ0woI0f2LGwkaRTULnjRJyJulYjdixT0ERrEimBw56bwkXT5eMTBLa6irw06LddE-CNuY_52Wp3k5CEkWKbCEKFqwAr96JdfNqrvOHvsECR9WayxjHH1Uvtzo/s1600/1.+Kolam+air+terjun.gif"/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Panorama</a></h3>
<p> Air Terjun yang dibawahnya ada Kolam dengan air sangat jernih. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 1 Code End -->
<!-- Slide 2 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Yqdwa9qenLiWSOol7yiflvkz9ymIrHkSbEgxoJJKhICIJHhocrf88IFoJFtK1NzWeOi0s5K9yIQii9zZAfZYKMFq6jNye3RCL-zvSJiviKlnu35l97215Ykx-r1aofZjwGAgu_LoWxg/s1600/2.+Jalan+Pegunungan.png "/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Alam Pegunungan </a></h3>
<p> Pemandangan di Daerah Pegunungan yang Hijau. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 2 Code End -->
<!-- Slide 3 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQ7sMFUTK7qjEwuSskRCwm9yWEm8sfTBC4ZZUP2GxBL08JwvlnenoUhmZhfEkHzO6NuFpJ_NHuqUxgz1QtIAWzl1GqPCOrZrBMl7k2n6qDs1fCRVPT2Nbgzx5RyLAfagvda68sbX3qVE/s1600/3.+Kaca+Pecah.png "/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Seni Designer </a></h3>
<p> Kaca Pecah tapi berbentuk Seni Design Tinggi. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 3 Code End -->
<!-- Slide 4 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_QB31_f-VBGr4vjP53dF0p0Urqu7iOZECgD9si-SfCPirKNR_nORZ3oeIMBmXNmJ4i0GxXTrOZhSVEe3y4kvBBvC6AnyrZjCoE6PDO90uPEKTOWRTrik82R8OV37tvB4aWC2zfYEer3Q/s1600/4.+Laut+dan+langit.png "/></a>
</div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Pemandangan Tepi Laut </a></h3>
<p> Tempat untuk Defresing di Tepi Laut yang Asri. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 4 Code End -->
<!-- Slide 5 Code Start -->
<div class='bbc-slides-items'>
<div class='bbc-thumbnail'>
<a href='http://blogbego-creation.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjizm14liyxKTRr2RUT9y_e-bsnGoLtjozdLYw-QpkkLZ85xJPkKNJdWFCEFDmwCypfaApIDHGkHekOGBlzZDl6ZoRn1qZe85_vKJ3xUL8jyyJQKvOqPoJqdsmCLXB-ZmxMOye6aGLdGPo/s1600/5.+Panorama.png "/></a></div>
<div class='bbc-content-wrap'>
<div class='bbc-content'>
<h3 class='bbc-title'>
<a href='http://blogbego-creation.blogspot.com/'>Alam Pedesaan dekat Pegunungan </a></h3>
<p> Pemandangan yang Asri, Sejuk Pedesaan di Kaki Pegunungan. </p></div>
<div class='bbc-prev-next-wrap clearfix'>
<a class='bbc-next' href='#bbc-next'/>
<a class='bbc-prev' href='#bbc-prev'/>
</a></a></div>
</div>
</div>
<!-- Slide 5 Code End -->
</div>
<div class='bbc-nav'>
<span class='bbc-pager'/>
</span></div>
</div>
</div>
<div style='clear:both;'/>
<!--New Featured Slider From http://blogbego-creation.blogspot.com --></div>
</b:if>
Setting / Edit terakhir :
Silahkan ganti teks yang berwarna Merah [URL Blog dan Link Image] saya dengan punya kawan
sedangkan teks yang berwarna Biru adalah Penjelasan singkat dari Image Slidenya

  • Kalau semuanya sudah selesai jangan lupa simpan Blog kawan

READ MORE

Layanan Anekahosting.com web hosting murah terbaik di indonesia

Unknown | 04:16 |
Anekahosting.com web hosting murah terbaik di indonesia, pada jaman sekarang ini semua orang mengenal namanya internet, web, ataupun game online, kebutuhan dengan dunia online sangat besar di Indonesia, begitupun juga ilmublogmu ini, setiap hari selalu mengunakan namanya koneksi internet untuk menulis pada web,  begitupun jg perkembangan web hosting di indonesi juga mengalami peningkatan pesat, hal ini disebabkan minat sesorang yg ingin membuat mebsite sendiri sangatlah besar. dan yang perlu anda ketahui adalah tidak sedikit web hosting hanya menawarkan janji murah dan terbaik, tp layananya sangat mengecewakan, nah kali ini blog ini akan mereview artikel Anekahosting.com web hosting murah terbaik di indonesia yang saat ini dibuat kata kunci pada konstes SEO anekahosting.com saat ini.

Anekahosting.com web hosting murah terbaik di indonesia

Anekahosting.com web hosting murah terbaik di indonesia merupakan webhosting baru dibanding hosting lainya, namun hal ini tidak membuat turunya tingkat profesionalitas web ini, nah untuk meyakinkan anda semua berikut beberapa fitur yang ada disana.

Layanan Anekahosting.com web hosting murah terbaik di indonesia

Aktivasi Cepat dan Mudah
Kecepatan layanan kami tergambar sejak awal Anda menggunakan layanan dari AnekaHosting.com. Dari Proses registrasi sampai dengan Online Payment dilakukan secara mudah,murah dan Real Time dan Account anda langsung aktif. Jika anda Melakukan offline payment maka, dalam waktu 30 menit setelah dilakukan pembayaran dan konfirmasi, domain atau hosting Anda sudah dapat digunakan langsung.
PHP & MySQL Terbaru
Seluruh server kami mensupport penggunaan versi PHP dan MySQL terbaru. Sehingga akan mendukung performance website anda menjadi lebih cepat dan terbaik, lebih reliable dalam beban tinggi, dan lebih aman.
cPanel Based
Layanan Hosting Indonesia ini menggunakan cPanel sebagai web based hosting management tools yang paling banyak diadopsi oleh web hosting diseluruh dunia. Kemudahan, keamanan, kompatibilitas, dan kehandalan menjadikan cPanel sebagai pilihan utama kami
Dilengkapi Fantastico
Membangun web di hosting anekahosting.com mengunakan fasilitas Auto-Installer, dengan Fantastico atau Softaculous untuk membantu menginstall CMS favorit Anda secara mudah. Cukup ikuti wizardnya, CMS favorit Anda akan terinstall dalam 3 langkah tanpa harus mengupload dan mengkonfigurasi database.
iPhone & BlackBerry Support
Mensupport penggunaan e-mail via iPhone bukan hal istimewa. Namun untuk Blackberry kami punya perlakuan khusus. Versi cPanel yang kami gunakan mensupport protokol notifikasi dan whitelisting ke server-server Blackberry. E-mail akan sampai lebih cepat ke genggaman Anda dimanapun itu.
Uptime Guarantee 99%
Didukung hardware yang handal, maintenance dan monitoring yang dilakukan terus menerus, Anekahosting.com memberikan jaminan uptime 99% setiap bulannya.

Data serta Harga Paket Hosting Anekahosting.com

Sebelum memilih hosting ada baiknya sobat blogger Indonesia mencermati dahulu kebutuhan website yang akan dibuat, misalnya web yang berisi file download dan filenya tersimpan di self hosting maka tentunya dibutuhkan diskspace besar, karena diskspace adalah ukuran kapasitas penyimpanan data sebuah website, dan jika blog yang ramai pengunjung bahkan ribuan perharinya maka bandwidth atau data transfer besar akan dibutuhkan untuk kelancaran akses. nah bagi sobat yang asal ngeblog, buat kebutuhan pribadi, dokumentasi pribadiatau bahkan web yang dibuat untuk corat-coret dan curhat maka paket bronze dari anekahosting.com tepat buat sobat. karena ini adalah paket yang paling minim, namun walau minim menurut saya cukup lumayan besar kalau hosting yang ada di aneka, sebab ada beberapa hosting yang memberikan paket spacenya cuma 50MB doang. tapi untuk aneka paling minim 250MB, lumayan bukan? berikut empat paket yang bisa dipilih pada anekahosting.com silahkan dicermati dulu.

PAKET BRONZEPAKET SILVERPAKET GOLDPAKET PLATINUM
Kapasitas 250 MBKapasitas 1 GBKapasitas 3 GBKapasitas 5 GB
Bandwidth 20 GBBandwidth 75 GBBandwidth 100 GBBandwidth 150 GB
5 Email AddressUnlimited Email AddressUnlimited Email AddressUnlimited Email Address
1 Database5 Database20 DatabaseUnlimited Database
1 FTP Account5 FTP Account10 FTP AccountUnlimited FTP
Rp. 15.000 / bulanRp. 35.000 / bulanRp. 75.000 / bulanRp. 125.000 / bulan

Info kontak anekahosting.com

Website: anekahosting.com
Telepon : 021 - 45854322
Fax        : 021 - 45854322
Email     : info@anekahosting.com

Mulai saat ini tidak perlu pusing lagi atau hanya mencoba-coba hal yang tidak pasti, namun dengan banyaknya layanan diatas memberi keyakinan bahwa web hosting ini memang top-markotop dan Sungguh mantap layanan Anekahosting.com web hosting murah terbaik di indonesia silahkan dicoba!

NB: Jangan lupa ikuti Kontes SEO Anekahosting.com yah...!!!
READ MORE

Navigasi Menu Widget untuk Blogger

Unknown | 06:51 | , , ,
Lagi-lagi Navigasi Menu, mudah-mudahan kawan tidak bosan dengan Navigasi :q; yang saya posting sekarang, kalau tak unik atau spesial sekali tak mungkin saya bagikan sama kawan walau ini bukan ciptaan saya, terus terang Navigasi Menu Widget untuk Blogger ini saya dapatkan pada W2B :z; memakai jQuery library dan Blogger JSON feed API memang sedikit berat untuk Blog kita, makanya saya tidak menyarankan harus dicoba dan dipasang pada Blog kawan 
screenshot
Kalau memperhatikan screenshot-nya Menu - Sub Menu [Katagori] - Isi / Judul + Imagenya, cuma masing-masing sub Menu - Judul jumlahnya dibatasi karena menyangkut tempat, lebih jelasnya silahkan lihat 


 
Bagaimana kawan setelah melihat Demonya !!!
Cara Membuatnya 

  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML
  • Copas Css berikut tepat diatas  ]]></b:skin> 
/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}


  • Selanjutnya Copas Script berikut dibawah  ]]></b:skin> atau diatas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">jQuery(document).ready(function($) { $('#w2bajaxmenu').ajaxBloggerMenu({ numPosts : 4, // Number of Posts to show defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image });});
</script>

Seandainya pada Template kawan sudah ada  plugin jQuery teks yang saya beri warna merah diatas bisa dihilangkan 
numPost :4, merupakan 4 Judul yang ditampilkan, hal ini bisa disesuaikan / ditambah jumlahnya asal Height diatasnya harus disesuaikan lagi, :x; dan hasilnya akan memakai tempat melorot kebawah
  • Sampai disini Simpan Template kawan
  • Selanjutnya pillih Tata Letak - Tambahkan Gadget 
  • Pilih tanda [+] pada HTML / JavaScript
  • Copas kode berikut kedalamnya
<ul id="w2bajaxmenu" class="w2bmenu">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Example 1</a>
<ul>
<li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li><li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a></li>
</ul> </li>
<li> <a href="#">Example 2</a>
<ul>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Facebook?q=Like+Button">Facebook</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li>
</ul> </li>
<li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li>
</ul>
  • Jangan lupa ganti URL / Link diatas sesuai kebutuhan 
  • Simpan Blog kawan


READ MORE

Cara Membuat Navbar Menu Berputar

Unknown | 08:43 | , , ,
Kawan masih ingat dengan postingan saya Cara Membuat Navbar Menu Menggulung yang tampilannya cukup unik, tapi yang sekarang ini jauh lebih unik lagi yang saya temukan pada Blogger Zhinto yang diberi nama Css3 Circle System Menu perhatikan screenshotnya

Oke langsung saja ke cara membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML 
  • Cari tag  ]]></b:skin> 
  • Copas kode berikut tepat diatasnya 
/* Name : Css3 Circle System Menu
 Author : zhinto
 URL : http://zhinto.blogspot.com/
*/
.hapus:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.hapus { display: inline-block; } * html .hapus { height: 1%; }
.hapus {
display: block;
}
ul.system-menu {
 margin: 0 auto 10px;
 padding: 0;
 position: relative;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
 width: 390px
 }
ul.system-menu li {
 list-style-type: none;
 margin: 0 5px 0 0;
 padding: 0;
 float: left;
 position: relative;
 width: 70px;
 height: 80px;
 -moz-transition: all 500ms linear;
 -o-transition: all 500ms linear;
 -webkit-transition: all 500ms linear;
 transition: all 500ms linear
 }
ul.system-menu li a {
 position: absolute;
 margin: -30px 0 0 -43%;
 text-decoration: none;
 font: bold 13px/40px Arial, sans-serif;
 padding: 0;
 background: #21D319;
 color: transparent;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 display: block;
 width: 50px;
 height: 50px;
 text-align: center;
 top: 45%;
 left: 50%;
 outline: none;
 border: 5px inset #F8FBFC;
 -moz-box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
-webkit-box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
 box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
 -moz-transition: all 100ms linear;
 -o-transition: all 100ms linear;
 -webkit-transition: all 100ms linear;
 transition: all 100ms linear
 }
ul.system-menu li a:hover {
 line-height: 130px;
 color: #000;
 border-color: #C5B386;
 background: #FAC800;
 -moz-transition-delay: 0.5s;
 -o-transition-delay: 0.5s;
 -webkit-transition-delay: 0.5s;
 transition-delay: 0.5s
 }
ul.system-menu li span.pembuka {
 position: absolute;
 left: 50%;
 margin: 0 0 0 -29%;
 top: 11px;
 width: 25px;
 height: 30px;
 background: #949596;
 -moz-box-shadow: 3px -3px 0 0 #ECECEC;
 -webkit-box-shadow: 3px -3px 0 0 #ECECEC;
 box-shadow: 3px -3px 0 0 #ECECEC
 }
ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga {
position: absolute;
background: #F0F0F0;
padding: 2px; width: 15px; left: 3px
 }
ul.system-menu li span.satu { top: 5px }
ul.system-menu li span.dua { top: 13px }
ul.system-menu li span.tiga { top: 22px }
.empat, .lima, .enam { position: absolute }
.empat {
 border: 15px solid;
 border-color: transparent transparent #EEE transparent; top: -7px; left: 10px
 }
.lima { padding: 4px; background: #EEE; height: 5px; top: 22px; left: 14px }
.enam { padding: 4px; background: #EEE; height: 5px; top: 22px; left: 28px }
.abot, .abit { position: absolute; left: 15px }
.abot {
 width: 20px;
 height: 20px;
 background: #EEE;
 top: 20%;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px
 }
.abit { border: 10px solid; border-color: transparent transparent #EEE transparent; top: 33% }
.a, .b, .c, .d { position: absolute; padding: 5px; background: #FFF7F7; top: 26% }
.a { left: 25px; background: #39FF13 }
.b { top: 27px; left: 13px; background: #0070FF }
.c { left: 25px; top: 27px; background: #FFE000 }
.d { left: 13px }
.e, .f { position: absolute }
.e { width: 15px; height: 17px; background: rgb(171, 185, 163); top: 35%; left: 32%; border: 2px solid rgb(255, 255, 255) }
.f { border: 10px solid; border-color: transparent transparent rgb(255, 255, 255) transparent; top: -2px; left: 30% }
ul.system-menu:hover li:not(:hover) {
 -moz-transform: rotate(360deg) scale(0.7);
 -ms-transform: rotate(360deg) scale(0.7);
 -o-transform: rotate(360deg) scale(0.7);
 -webkit-transform: rotate(360deg) scale(0.7);
 transform: rotate(360deg) scale(0.7)
 }
  • Sampai disini simpan Template kawan
  • Selanjutnya pilih Tata Letak - Tambahkan Gadget
  • Pilih tanda [+] pada HTML / JavaSript
  • Copas kode berikut kedalamnya
<ul class='system-menu hapus'>
<li><a href="#">
<span class='empat'></span>
<span class='lima'></span>
<span class='enam'></span>Depan</a></li>
<li><a href="#"><span class='pembuka'>
<span class='satu'></span>
<span class='dua'></span>
<span class='tiga'></span></span>Artikel</a></li>
<li><a href="#"><span class='abot'></span><span class='abit'></span>Tentang</a></li>
<li><a href="#"> <span class='a'></span>
<span class='b'></span>
<span class='c'></span>
<span class='d'></span>Kategori</a></li>
<li><a href="#"><span class='e'></span><span class='f'></span>Coretan</a></li>
</ul>
    • Simpan Blog kawan

    READ MORE