Sekarang saya akan berbagi dengan kawan beberapa Menu Navigasi yang kelihatan sedikit unik lain dari yang lain hasil karya oleh Master-master Blogger :q; mudah-mudahan selera kawan sama dengan selera saya, yang semuanya ini saya temukan saat Blogwalking. Silahkan kawan Lihat langsung Demonya maupun untuk mendownload kalau ingin mencoba memakainya
![]() |

Pure CSS DropDown Menu
Sebenarnya masih banyak lagi yang lainnya, kalau ada waktu lain waktu saya sambung lagi :q; untuk sekarang saya cukupkan hanya sampai disini dulu
Selamat mencoba
Selamat mencoba
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;}
.post:hover .sembunyi {display:inline;}
- Selanjutnya cari <data:post.body/>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<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 != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div> </b:if></b:if></div><b:if cond='data:blog.pageType == "item"'><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 != "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></div><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <div style='clear: both;'/> <!-- clear for photos floats --></div>
- Simpan Template kawan
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
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
Selamat Bergabung !!!
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
Selamat Bergabung !!!
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+=' – '+(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
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.
Itulah cara bikin atau pasang menu navigasi dropdown dengan efek unfold semoga bermanfaat :)
READ MORE
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
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 = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
<!-- End Shareaholic Sassy Bookmarks script -->
- Simpan Template kawan
Refrensi : Paul Crowe
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: 'bea50586-2b9f-448d-947a-01385f28e305', 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%;'>Teks yang saya beri warna merah bisa kawan ganti sesuai keinginan untuk tampilan
<div class='shareEgg' id='shareThisOrnament'/>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'holiday'});
</script>
</div>
- Simpan Template kawan

















