Yours Theme

CSS "Menu" Icon Hovert Efect - Melanjutkan postingan sebelumnya tentang membuat menu Blogger CSS3 Sonar Menu untuk blog dan kali ini kesempatan saya untuk melanjutkan tutorial dengan share sebuah menu yang apabila tersentuh mouse memberikan efect slide up simbol/icon didalamnya. Biar brada tidak penasaran silahkan lihat demonya dibawah ini.  See Demo   Kustomisasi Masuk pada Edit HTML Cari Kode ]]></b:skin> Masukan kode dibawah tepat diatas kode  ]]></b:skin> /* The CSS Code here*/ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;} #btrix-nav li {float: left;} #btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;} #btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;tra

Blogger CSS3 Sonar Menu - Menu tidak bisa terpisahkan dari struktur sebuah template karena dengan keberadaan menu membuat pengunjung semakin mudah dalam menelusuri sebuah blog. Diluar sana banyak tutorial dalam membuat menu mulai dari yang simple sampe yang imposible " newbie dilarang masuk " hehe. Menu hal yang wajib dimiliki sebuah template dan kali ini untuk memenuhi kewajiban brada saya berikan sebuah menu sederhana tapi lagi-lagi cukup keren untuk brada miliki. Efect sonar hadir pada menu kali ini dan yang paling penting mudah dalam memasangnya. Untuk lebih jelasnya silahkan brada tengok demonya dibawah ini . See Demo Kustomisasi  Masuk pada Edit HTML  Cari Kode ]]></b:skin> Masukan Kode dibawah ini tepat diatas kode  ]]></b:skin> <style> ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */ list-style: none; } ul.sonarmenu li{  display: inline; } ul.sonarmenu a{ position:

TruePixel Blogger Template - Setelah beberapa waktu yang lalu membuat postingan tentang sebuah template GoGreen Blogger Template yang keren dan elegant , saatnya untuk kembali membagikan template hasil penelusuran . Template yang saya bagikan kali ini tidak kalah kerennya . Doi punya nama TruePixel Blogger Template karya BloggerThemes9  yang sebenarnya hasil inspirasi / adapted dari sebuah template dengan platform wordprees yang dihargai $35 design MyThemeshop . Saya gak tahu dengan status dari template ini , apakah legal atau ilegal ( Cloning) . Kalau brada ingin memakai template ini pertimbangkan terlebih dahulu akan legalitas dari template ini . Disini saya hanya sekedar share akan keindahan sebuah template untuk hal lebih lanjutnya saya tidak bertanggung jawab.  See Demo     Download TruePixel Featured  Fully Responsive Layout  Custom Typography Unlimitied Collor Schemes Related Post  Shortcodes Custom Widget  Option Panel  SEO Optimized  HTML5/CSS3 Optim

Simple "Jquery" Menu Bar  - Melanjutkan artikel sebelumnya yang membahas tentang membuat menu Jquery And CSS3 Menu Bar , postingan kali ini [OBC] masih akan membahas seputar membuat menu blogger yang menggunakan Jquery . Menu kali ini tampilannya sangat simple dan sederhana tapi yang lebih penting tidak terlalu membuat blog brada menjadi berat . Untuk lebih jelasnya silahkan brada lihat demonya dibawah ini .  See Demo Kustomisasi  Masuk Pada tataletak  Cari kode </head> Masukan kode dibawah ini diatas kode </head> <!--jquery-[OBC]-Menu-Starts--> <style type="text/css"> /* menu styles */ #jsddm { margin: 0; padding: 0} #jsddm li { float: left; list-style: none; font: 12px Tahoma, Arial} #jsddm li a { display: block; background: #324143; /*DARK-GREEN*/ padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap} #jsddm li a:hover { background: #

GoGreen Blogger Template - Belakangan perkembangan dunia blogging semakin seru , selain hadirnya beragam tutorial blog yang terus berkembang dengan tehnik-tehnik baru yang begitu luarbiasa . Para kreator template pun seolah tidak mau kalah dengan terus menciptakan template blogger dengan design yang inovatif dan elegan , seperti kreator template Syed Faizan Ali blogger asal pakistan yang terus menjaga konsistensinya dalam membuat template dengan menghadirkan template terbarunya yaitu GoGreen Blogger Template. See Demo    Download Featured GoGreen Template - Highly SEO Friendly  - Icon Navigation Menu - Thumbnail Related Post - Related Post  - Robust Commenting System  - 100% Free Download  Selamat Download Brada

Jquery And CSS3 Menu Bar - Postingan kali ini masih seputar tutorial dalam membuat sebuah menu blog untuk blogger . Pada beberapa waktu yang lalu [OBC] share tentang menu Cool CSS3 Navigation Menu dengan CSS3 . Kali ini menu yang dishare Jquery And CSS3 Menu Bar yang   masih menggunakan CSS3 tapi ada penambahan kode Jquery didalamnya . Untuk lebih jelasnya silahkan brada lihat demonya dibawah ini .  See Demo     Komponen Menu Kode Jquery <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"> </script> <script type="text/javascript">   $(function() {     //We initially hide the all dropdown menus     $('#dropdown_nav li').find('.sub_nav').hide();     //When hovering over the main nav link we find the dropdown menu to the corresponding link.     $('#dropdown_nav li').hover(function() {       //Find a child of 'this' with a class of .sub_n

Cool CSS3 Navigation Menu - Postingan kali ini merupakan jawaban bagi salah satu sahabatku yang ingin membuat menu bar untuk template warna silver dengan sentuhan warna kuning didalamnya. Menu bar yang [OBC] share kali ini tampilan nya sangat sederhana dan mudah dalam menerapkannya " From Newbie To newbie " mungkin tepatnya seperti itu . Bagi brada yang kebetulan mempunyai tema template yang sama dan ingin menerapkan menu ini silahkan lihat dulu demonya dibawah ini . Kustomisasi : Masuk pada Edit Template  Cari kode  ]]></b:skin>   Masukan kode dibawah tepat diatas kode  ]]></b:skin>   nav  {  display: block;  width: 100%;  overflow: hidden; } nav ul {  margin: 80px 0 20px 0;  padding: .7em;  float: left;  list-style: none;  background: #444;  background: rgba(0,0,0,.2);  -moz-border-radius: .5em;  -webkit-border-radius: .5em;  border-radius: .5em;    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) i

Numbered Populart Post - Setelah beberapa waktu yang lalu membahas menu navigasi Black & Blue Navigation untuk blogger , kali ini [OBC] akan membahas tutorial bagaimana caranya memberikan style berbeda pada widget populart post dengan style numbered yang cukup menarik . Nah bagi brada yang ingin memberikan style ini  , silahkan lihat dulu demonya pada widget populart post blog ini. Artikel Terkait : Recent Post Gallery Populart Post New Style Tooltip Related Post Kustomisasi  Masuk pada Edit HTML Cari kode ]]></b:skin>  Tempatkan kode dibawah ini tepat diatas kode ]]></b:skin> .popular-posts ul li a {     background: none repeat scroll 0 0 #222222;     color: #FFFFFF;     display: block;     margin: 10px 0;     padding: 25px 15px 30px;     position: relative;     text-decoration: none;     transition: all 0.3s ease-out 0s;  width: 85%; } .popular-posts ul li a:before {     background: none repeat scroll 0 0 #2DB3E9;     color:

Black & Blue Navigation Bar - Menu bar pada sebuah blog sangatlah penting selain untuk memudahkan para pengunjung dalam menjelajahi isi dari blog kita , kehadiran menu bar juga sebagai penghias sebuah blog agar menarik . Kali ini [OBC] akan share  Black & Blue Navigation Bar ,  sebuah menu yang sangat simple tapi tetap keren untuk dipasang pada sebuah blog. Dominasi warna hitam pada backround dan biru pada titlenya menjadikan menu yang satu ini cukup menarik buat brada pasang. Untuk lebih jelasnya silahkan brada lihat screenshot dan demonya. See Demo Kustomisasi Masuk pada Tataletak  Add Gadget / HTML Javascript  Masukan kode dibawah ini  Save dan lihat hasilnya  <style type="text/css"> #menu6 ul { list-style:none; font-family: "Trebuchet MS", sans-serif; font-size: 28px; font-weight: bold; letter-spacing: -1px; line-height: 1.1em; float:left; clear:both; margin:20px; border:4px groove #333333; }#menu6 ul li{ float:l

Blogger Sliding Social Widget - Pasca melepas beban dosa dihari yang fitri saatnya [OBC] kembali pada kebiasaan lamanya yaitu memberikan tutorial blog yang sederhana . Tutorial yang kan dishare kali ini tentang memasang widget social share dengan efect sliding yang cukup menarik untuk di pasang pada sidebar blog brada . Untuk lebih jelasnya silahkan lihat demo dibawah ini. 10K+ Facebook 14K+ Twitter 7K+ Google+ 9K+ Pinterest 13K+ RSS Kalau brada tertarik untuk memasangnya Masuk pada Tataletak   Add Gadget / HTML Javascript  Masukan kode dibawah ini   <!--Blogger Sliding Social Widget at [OBC]--> <link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B66hLK2d2x4VWUFGYW5oZk5UOTg"/> <div class="bd-social">     <ul>         <li><a class="bd-box facebook" href=" http://www.facebook.com/RulyNakula "><p>10K+</p>Facebook </a>

Makna Dibalik Lebaran sebenarnya sangat bertolak belakang dengan kenyataannya , tahu kenapa ? Dikampung saya ada istilah nyeleneh memaknai lebaran dengan sebuah singkatan. Lebaran ( LEBA r me R e kadahar AN ) atau dalam bahasa nasionalnya ( Sayang kalau ngasih makanan ) .Padahal ketika lebaran atau Idul fitri datang ada sebuah tradisi dimana kita selalu memenuhi meja ruang tamu dengan berbagai makanan olahan atau ketupat dan opor ayam yang lezat dan nikmat untuk di suguhkan ketika saudara atau tetangga kita yang datang bertamu untuk bersilaturahmi dan bermaaf-maafan. Tapi entah apa yang dimaksud dengan singkatan itu .hahhh Entahlah ..Memang orang sunda selalu ada-ada saja .. Oh iya besok dengan berat hati kita akan melepas kepergian bulan yang penuh hikmah dan barokah , sedih memang kita ditinggalkan bulan ramadhan tapi dibalik kesedihan Allah SWT telah memperisapkan hari yang indah hari dimana kita kembali pada fitrah . Selama berpuasa mungkin setiap hari entah malam atau siang

CSS Collor Style Menu Bar - Nungguin adzan maghrib yang masih lama mending kita berbagi bagaimana caranya membuat menu bar yang cukup atractive untuk diterapkan pada sebuah blog. ya daripada bengong terus ngayal yang gak jelas kan bisa ngurangin pahalanya puasa hehe. Menu yang [OBC] tawarkan kali ini cukup sederhana tapi masih tetep bisa jadi pilihan brada dalam membuat menu . Kalau menunya cocok silahkan brada ikuti cara pasangnya , tapi alangkah baiknya brada cek dulu demonya dibawah ini.  See Demo Kustomisasi Masuk Edit HTML Cari kode </head> Masukan kode dibawah ini tepat diatas sebelum kode  </head> <style> *{padding:0; border:0; margin:0;} #default a, #example a{ display:block; width:90px; height:46px; margin-right:3px; float:left; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqzjcpzus_EE93PDHC3SqrtBTWtLnf6edJ1E4MwI0nZgrDizRrxlFMUf8g7Ay2z2OrRbjU0N2lfhmXJI-iKVjASux9Yx6kf5E8glbEOQs_q4-v8rqWrW6Ay2YdXV

Animated Blue Navigation - Setelah Postingan Animated CSS Metro UI  kali ini [OBC] masih membahas seputar tutorial blogger dalam membuat menu navigasi . Animated Blue Navigation mempunyai dua pilihan gaya yang bisa menjadi pilihan untuk disesuaikan dengan template brada . Bagi brada yang tertarik untuk memasangnya silahkan ikuti tutorial lengkapnya. Tapi sebelumnya silahkan barada lihat dulu demonya. SEE DEMO Kustomisasi Masuk pada Tataletak  Add Gadget / HTML Javascript  Masukan Kode dibawah ini  <ul id="menu">               <li><a href="#">Home</a></li>               <li><a href="#">Products</a></li>               <li><a href="#">Services</a></li>               <li><a href="#">About</a></li>               <li><a href="#">Contact</a></li>           </ul> Untuk men