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
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
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
- 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
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
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 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.
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
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 BRONZE | PAKET SILVER | PAKET GOLD | PAKET PLATINUM |
|---|---|---|---|
| Kapasitas 250 MB | Kapasitas 1 GB | Kapasitas 3 GB | Kapasitas 5 GB |
| Bandwidth 20 GB | Bandwidth 75 GB | Bandwidth 100 GB | Bandwidth 150 GB |
| 5 Email Address | Unlimited Email Address | Unlimited Email Address | Unlimited Email Address |
| 1 Database | 5 Database | 20 Database | Unlimited Database |
| 1 FTP Account | 5 FTP Account | 10 FTP Account | Unlimited FTP |
| Rp. 15.000 / bulan | Rp. 35.000 / bulan | Rp. 75.000 / bulan | Rp. 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...!!!
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
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
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
